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. Este es otro tutorial de nuestra serie de contenidos de Blog Hub Design donde nos centramos en el mejoramiento y personalización del blog en Divi.

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.

¿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.

¿Te ha funcionado este contenido? ¡Dale amor!

0

Post relacionados:

3 Comentarios

  1. Avatar

    Hola, muchas gracias por tan buen contenido!

    Me gustaría consultarte una duda. Estoy intentando crear un modulo de blog para mostrar un custome post type y no consigo que me quede así:
    – Custom type (por ejemplo – Películas) – en la que solo aparece la imagen y el título
    – Botón 1 con url a otra página
    – Botón 2 con url a otra página

    Es posible crear algo así? Al principio pensaba que sería sencillo y he visto 2 o 3 videos tuyos que parecía que lo iba a lograr… Pero siempre me falta algo para cerrarlo. Muchas gracias, de antemano. Un saludo!

    Responder
    • Jefferson M.

      Hombre si tendría su complejidad, sobre todo porque estás necesitando dos botones. Ahora mismo no podría aconsejarte algo pero me lo apuntaré para investigarlo y luego hacer un tutorial al respecto.

      Responder
      • Avatar

        Muchas gracias por tu respuesta. Espero ese nuevo tutorial con ansias! 🙂

        Responder

Enviar un comentario

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

Las ofertas de black friday comenzarán en:

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)