¿Le gustaría personalizar el enlace Leer más del módulo Blog de Divi ? Entonces sigue nuestro tutorial.
Los enlaces "Leer más" de un blog pueden ser una parte crucial para mejorar la experiencia del usuario. Por eso es importante que sepamos personalizarlos correctamente.
En este tutorial, le mostraremos cómo personalizar el enlace "Leer más" en el módulo Blog. En este artículo, le mostraremos cómo:
- Personalice el enlace "Leer más" usando las opciones integradas de Divi
- Alinee el enlace "Leer más" (izquierda, centro, derecha)
- Convierta el enlace "Leer más" en un botón de pantalla completa
- Cree un botón Leer más personalizado con efectos de desplazamiento
- Reemplace el texto "Leer más" con algo más (como "Leer el artículo").
vista
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Cargue un módulo de blog en una página usando el generador de temas de Divi
Para comenzar a personalizar los enlaces Leer más, necesitará acceso a un módulo de Blog.
Puede cargar un diseño predefinido con cualquier módulo de Blog de su elección o simplemente agregue un nuevo módulo de Blog a una página.
Para iniciar el proceso, usaremos la página del blog del diseño predefinido Inteligencia artificial .
Agregar una nueva página desde el Panel de WordPress
Luego, asigne un título a su página y luego haga clic en " utiliser Divi Astillero".
Luego haga clic en " Elija el diseño«
Busca y elige " Inteligencia inteligencia Blog Página«
Finalmente, elija el diseño del Blog y haga clic en “ Elija el diseño«
Personalice y alinee el texto del enlace Leer más
Cada módulo de Blog ofrece la opción de mostrar u ocultar el enlace "Leer más" para cada artículo en el diseño. Para mostrar el enlace "Leer más", abra la configuración del blog y cambie el botón " Mostrar botón Leer más a "SÍ" en la lista de elementos del blog que desea mostrar.
En la pestaña Estilo, puede personalizar el texto Leer más usando una de las opciones integradas. Para este ejemplo, actualicemos lo siguiente:
- Fuente Leer más: Barlow
- Leer más Luz tenue: semiaudaz
- Leer más Estilo de copia: Mayúsculas (TT), Subrayado (U)
- Color del texto Leer más: #db0eb7
- Leer más Color del texto subrayado: #3c5bff
- Espaciado entre letras Leer más: 1px
Aquí está el resultado.
Actualmente, el enlace "Leer más" se coloca a la izquierda de forma predeterminada, a menos que cambie la alineación. Para alinear el enlace al centro o a la derecha de la publicación, agregue un fragmento de CSS de la siguiente manera:
En la pestaña avanzada de configuración del blog, agregue el siguiente CSS al CSS del botón Leer más:
display: block;
text-align: right;
"display:block" cambiará el enlace a un elemento de bloque que abarca todo el ancho de su contenedor (en este caso, el cuerpo del contenido de publicación). Una vez definido como elemento de bloque, podemos alinear el texto a la derecha usando "text-align:right".
Lea también: Cómo crear un encabezado global fijo en Divi
Aquí está el resultado.
Para centrar el enlace, simplemente reemplace "right" con "center" para el valor de la propiedad "text-align" de la siguiente manera:
Aquí está el resultado.
Personaliza el enlace "Leer más" para que parezca un botón
Para este ejemplo, crearemos un estilo de botón simple de ancho completo para el enlace "Leer más". Antes de agregar el CSS personalizado, abra la configuración del blog y actualice el texto del enlace "Leer más" de la siguiente manera:
- Leer más Estilo de copia: mayúsculas (TT)
- Color del texto Leer más: #ffffff
En el ejemplo anterior, usamos "display:block" y "text-align:center" para hacer que el enlace abarque todo el ancho del contenedor y centre el texto.
Ver tambien Cómo crear un menú deslizante y push en Divi
Para que parezca un botón, todo lo que tenemos que hacer es agregar un poco de color de fondo y espaciado junto con algunos fragmentos de CSS adicionales. Para hacer esto, vaya a la pestaña Avanzado y actualice el CSS del botón "Leer más" de la siguiente manera:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Resultado
¡Aquí está el resultado!
Crear un estilo de botón avanzado con CSS
Si desea llevar el estilo de los botones a otro nivel, podemos agregar un fondo y un efecto de desplazamiento.
Para hacer esto, reemplace el CSS del "Botón Leer más" con lo siguiente:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
Para cambiar el fondo al pasar el mouse, puede pegar el siguiente CSS en el "Botón Más información" al pasar el cursor del mouse:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Resultado
¡Aquí está el resultado!
Cambie el texto "Leer más" a otra cosa
Para cambiar el texto "Leer más" a otra cosa, como "Leer artículo", necesitaremos un poco de jQuery. Pero no te preocupes, estas son solo unas pocas líneas.
Antes de agregar nuestro código jQuery, agregue una clase CSS personalizada al módulo Blog de la siguiente manera:
- Clase CSS: et-custom-read-more-text
NOTA: Asegúrese de que el nombre de la clase sea correcto para que jQuery funcione.
Para agregar el jQuery que modifica el texto "Leer más", agregue un módulo Código debajo del módulo Blog.
Luego pegue el siguiente código jQuery, asegurándose de envolver el código con las etiquetas de script necesarias:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Este código básicamente le dice al navegador que cambie el texto del enlace "Leer más" a "Leer el artículo" una vez que se carga la página.
Resultado
¡Aquí está el resultado!
Resultados finales
Aquí hay otro vistazo a las personalizaciones del enlace Leer más (o botón) que hemos hecho.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Listo ! Eso es todo por este artículo. El módulo Blog de Divi te permite personalizar de forma creativa el enlace "Leer más". Y si desea experimentar con algunos fragmentos de CSS, puede crear modificaciones aún más avanzadas usted mismo.
Esperamos que este tutorial lo ayude a llevar esos enlaces "Leer más" al siguiente nivel. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
