Tutorial Divi: Personalizar el botón «leer más» en el módulo de blog de Divi.

¡Hola Divilovers! Hoy traemos un video tutorial de Divi donde te enseñaremos a personalizar botón "leer más" en el módulo de blog de Divi.

Por Jefferson M.

Ago 21, 2020

¡Hola Divilovers! Hoy traemos un video tutorial de Divi donde te enseñaremos a personalizar botón «leer más» en el módulo de blog de Divi con algunas líneas de código CSS personalizado, que como siempre podrán encontrar en la parte inferior de este post.

La personalización en una web pareciera nunca terminar, ya que además de tener numerosísimas opciones en Divi, podemos seguir cambiando el diseño y ajustándolo a los objetivos de la marca. Hoy veremos que cambiar el link de «Leer más» del módulo de blog a un botón con el diseño que quieras es súper fácil. ¡Vamos!

El primer paso es convertir el «Leer más» de texto con un link a un botón, ya que en la configuración del módulo de blog en Divi es considerado un texto.

Entra en la configuración del módulo de blog, luego en Diseño y allí ajusta todo lo que puedas del texto Leer más, como la fuente, color, tamaño, estilo, espacio entre las letras, etc.

leer más en Divi

Lo siguiente que debemos hacer, luego de darle estilo al link Leer más, es darle el estilo CSS que necesita un botón, como color de fondo, borde, hover, etc.

Si usas un child theme, copia el siguiente snippet en el archivo style.css. Si no es el caso, insértalo en la caja de CSS personalizado en las opciones de tema de Divi.

/*Estilos para el boton leer más en Divi- uxdivi*/

.et_pb_post a.more-link {
  color: #ffffff;
	background: #0071fc;
	border: 2px solid #0070fc;
	padding: .7em 1.3em;
	margin-top: 20px;
	border-radius: 50px;
	text-transform: capitalize;
	display: inline-block;
	transition: all 0.3s ease-in-out;
}


/*Estilos para el boton leer más en Divi- uxdivi on hover*/

.et_pb_post a.more-link:hover {
	background: transparent;
	color: #0070fc;
	border: 2px solid #0070fc;
	transition: all 0.3s ease-in-out;
}

Añadir un icono al botón de «Leer más»

Puedes agregarle un icono a tu botón, sobre todo si ya usas iconos en los demás botones de tu página web. Así lograrás consistencia entre el diseño general y el del módulo de blog.

/*agregar icono al botón leer más en divi*/

.et_pb_post .more-link:after {
	content: "5";
	font-family: ETModules;
	vertical-align: middle;
	margin-left: 10px;
}

Cambia el texto del botón

También puedes personalizar el texto del botón que acabas de crear, para que en vez de «Leer más» diga «Ver el post» o lo que desees.

Solo debes usar este snippet e insertarlo en la sección Integraciones de las opciones de Divi en la parte del «HEAD» o en el archivo scripts.js de tu child theme.

En el snippet debes reemplazar lo que decía antes con lo que deseas que diga el botón. Asegúrate de que las mayúsculas y minúsculas coincidan totalmente, ya que esto cambiará todo lo que diga «Leer más» al texto que indiques.

<script>
	jQuery(document).on('ready ajaxComplete', function () {
		//Replace leer más link text
		jQuery(".et_pb_post a.more-link").html(function () {
			return jQuery(this).html().replace('leer más', 'Ver post completo');
		});
	}); 
</script>

¿Que te ha parecido el tutorial? ¿Te ha funcionado? Cuéntanos más acá abajo en los comentarios.

¿Te gustó? ¡Compártelo en redes sociales!

¿Quieres aprender a usar Divi de manera profesional?

Conoce nuestro contenido premium y comienza hoy mismo a llevar tu sitio web o el de tus clientes a otro nivel

¿Te gustó este contenido?

Conoce nuestro contenido premium y aprende a crear sitios web geniales, modernos y potentes.

Post relacionados:

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Shares