Personalizar el botón ‘leer más’ en blog de Divi

El módulo de blog de Divi muestra el texto "leer más" como un simple link al final del extracto de cada post. Con unas pocas líneas de CSS puedes convertirlo en un botón con el estilo exacto que necesita tu diseño: colores de tu marca, bordes, hover, icono y hasta cambiar el texto. En este tutorial te damos todos los snippets listos para copiar.

Ver Demo en vivo →

Por qué personalizar el botón "leer más" importa

El link "leer más" es el CTA de cada card de tu blog. Si visualmente pasa desapercibido, los visitantes no lo usan — y si no lo usan, el tráfico se queda atascado en el archive del blog en lugar de distribuirse hacia los posts individuales, que es donde está el contenido de valor para el SEO y la conversión.

Un botón bien diseñado, alineado con el sistema visual del sitio, mejora la tasa de clics y refuerza la coherencia de la marca en todo el blog.

Paso 1: Ajustar el "leer más" desde las opciones nativas de Divi

Antes de agregar CSS, revisa qué puedes hacer desde la configuración del módulo de blog en Divi. Entra en las opciones del módulo → pestaña Diseño → sección "Más texto":

• Fuente, tamaño y color del texto.
• Estilo (negrita, cursiva, mayúsculas).
• Espaciado entre letras.

Esto te da control sobre la tipografía, pero no sobre el fondo, el borde ni el comportamiento de hover — para eso necesitas CSS.

Paso 2: CSS básico para convertirlo en botón

El selector del link "leer más" en Divi es .et_pb_post a.more-link. Agrega este snippet en el CSS personalizado de tu tema hijo (style.css) o en Divi → Opciones del tema → CSS personalizado:

/* Botón leer más — UXDivi */
.et_pb_post a.more-link {
  color: #ffffff;
  background: #0071fc;
  border: 2px solid #0071fc;
  padding: .7em 1.3em;
  margin-top: 20px;
  border-radius: 50px;
  text-transform: capitalize;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

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

Ajusta los valores de color (#0071fc), el radio del borde (50px para pill o 4px para esquinas sutiles) y el padding según el diseño de tu sitio.

Variantes de diseño para el botón

Dependiendo de tu sistema visual, puedes aplicar diferentes estilos al botón:

Flat (sólido sin borde visible)

.et_pb_post a.more-link {
  background: #0071fc;
  color: #fff;
  border: none;
  padding: .6em 1.4em;
  border-radius: 4px;
  display: inline-block;
}

Outline (solo borde, fondo transparente)

.et_pb_post a.more-link {
  background: transparent;
  color: #0071fc;
  border: 2px solid #0071fc;
  padding: .6em 1.4em;
  border-radius: 4px;
  display: inline-block;
}
.et_pb_post a.more-link:hover {
  background: #0071fc;
  color: #fff;
}

Ghost oscuro (para fondos de color)

.et_pb_post a.more-link {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.7);
  padding: .6em 1.4em;
  border-radius: 4px;
  display: inline-block;
}
.et_pb_post a.more-link:hover {
  background: rgba(255,255,255,0.15);
}

Agregar un icono al botón

Puedes agregar el icono de flecha de la familia de fuentes de Divi usando CSS con ::after:

/* Icono de flecha al final del botón leer más */
.et_pb_post .more-link::after {
  content: "5";
  font-family: ETModules;
  vertical-align: middle;
  margin-left: 8px;
  font-size: 0.9em;
}

El carácter "5" en la fuente ETModules renderiza la flecha a la derecha de Divi. Puedes explorar otros caracteres disponibles en la documentación de Elegant Themes sobre iconos.

Cambiar el texto del botón con jQuery

Si en lugar de "leer más" quieres que diga "Ver post completo", "Leer tutorial" o cualquier otra cosa, agrega este snippet en la sección Integraciones → Head de las opciones de Divi, o en el archivo scripts.js de tu tema hijo:

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

Reemplaza 'leer más' por el texto exacto que genera Divi en tu instalación (puede variar según el idioma configurado) y 'Ver tutorial completo' por el texto que quieres mostrar. La comparación es sensible a mayúsculas.

Controlar la visibilidad del botón

En algunos diseños de blog puede que quieras ocultar el "leer más" en ciertos contextos — por ejemplo, cuando el módulo de blog muestra el contenido completo en lugar del extracto:

/* Ocultar el botón leer más cuando se muestra el post completo */
.et_pb_blog_grid .et_pb_post a.more-link {
  display: none;
}

Responsive: ajustar el botón en móvil

En pantallas pequeñas, el padding del botón puede verse desproporcionado. Ajusta con un media query:

@media (max-width: 767px) {
  .et_pb_post a.more-link {
    padding: .5em 1em;
    font-size: 0.85em;
  }
}

¿El selector cambió en Divi 5?

En Divi 5, la estructura HTML del módulo de blog fue revisada y algunos selectores cambiaron. Si aplicas el CSS y no ves cambios, inspecciona el elemento con las herramientas de desarrollo del navegador (clic derecho → Inspeccionar) y verifica cuál es el selector real del link en tu versión de Divi 5. La lógica del CSS es exactamente la misma, solo puede cambiar el selector de clase.

¿Quieres crear un blog completo y bien diseñado con Divi? Mira nuestro tutorial sobre cómo crear un blog con Divi o accede a los tutoriales premium de UXDivi.

Preguntas frecuentes sobre el botón leer más en Divi

¿El CSS del botón afecta también a otros links "leer más" del sitio?

El selector .et_pb_post a.more-link es bastante específico del módulo de blog de Divi, por lo que raramente afecta a otros elementos. Si quieres limitarlo aún más a un módulo específico, agrégale un ID CSS al módulo de blog y úsalo como prefijo del selector.

¿Puedo tener botones con diferente color en distintos archivos del blog?

Sí. Asigna clases CSS diferentes a cada módulo de blog desde sus opciones avanzadas y usa esas clases como prefijo en el CSS para tener estilos independientes en cada archive o sección.

¿Funciona este método con el módulo Filterable Grid de Divi?

El módulo Filterable Grid usa el mismo selector .et_pb_post a.more-link para el link de los items, por lo que el CSS aplicará también a ese módulo.

Usar variables CSS para mantener consistencia con el sistema de diseño

Si tu sitio ya usa variables CSS para los colores de marca (una práctica recomendable en cualquier child theme bien estructurado), puedes referenciarlas en el snippet del botón en lugar de usar códigos hexadecimales fijos. Esto garantiza que si cambias el color primario del sitio, el botón "leer más" se actualiza automáticamente junto con todos los demás elementos:

/* Con variables CSS del design system */
.et_pb_post a.more-link {
  background: var(--color-primario, #0071fc);
  color: var(--color-texto-inverso, #ffffff);
  border: 2px solid var(--color-primario, #0071fc);
  padding: .7em 1.3em;
  border-radius: var(--radio-boton, 50px);
  display: inline-block;
  transition: all 0.3s ease-in-out;
}
.et_pb_post a.more-link:hover {
  background: transparent;
  color: var(--color-primario, #0071fc);
}

El segundo valor en cada var() es el fallback — si la variable no está definida, usa ese color por defecto. Puedes definir estas variables en el selector :root del CSS de tu tema hijo o en las opciones de tema de Divi.

Conclusión

Personalizar el botón "leer más" del módulo de blog en Divi es una de esas pequeñas mejoras de diseño que tienen un impacto visual desproporcionado. Con el CSS básico de este tutorial tienes un botón funcional en menos de 5 minutos, y las variantes de diseño te permiten adaptarlo exactamente a tu sistema de diseño. Combínalo con el cambio de texto vía jQuery para un resultado completamente personalizado.