Mostrar contenido oculto con botón «Leer más» en Divi

A veces tienes mucho contenido en una sección y no quieres mostrarlo todo de golpe — preferirías ocultar una parte y que el usuario la despliegue con un botón de "Leer más" si le interesa. Es una forma elegante de mantener la página limpia sin sacrificar información. En este tutorial te muestro cómo mostrar contenido oculto con un botón "Leer más" en Divi, ocultando módulos o incluso filas completas que se despliegan al hacer clic.

Este tutorial nació de la petición de una suscriptora, y lo vamos a resolver con un poco de CSS y JavaScript. La buena noticia es que es flexible: puedes ocultar desde un solo módulo hasta una sección entera, y el botón de "Leer más" revela el contenido con una transición suave.

¿Para qué sirve ocultar contenido con un botón "Leer más"?

Esta técnica es útil en varios casos: descripciones largas de producto o servicio que no quieres que ocupen toda la pantalla, FAQs extensas, textos de "sobre nosotros", o cualquier sección donde el contenido completo abrumaría visualmente. Mostrar un resumen con la opción de expandir mantiene la página ligera y deja que el usuario decida cuánto quiere leer. Mejora la experiencia y reduce la sensación de muro de texto. Si quieres dominar este tipo de personalizaciones, el Curso de Divi 5 completo te da las bases de CSS y estructura.

Paso 1: Identifica el contenido a ocultar

Decide qué quieres ocultar: ¿un módulo concreto?, ¿varios módulos?, ¿una fila completa? Según el caso, vas a aplicar una clase CSS al elemento contenedor. Haz clic en el módulo o fila, ve a Avanzado → ID y clases CSS y asígnale la clase que el código usará para identificar el contenido oculto. En los recursos del tutorial dejo las clases exactas que debes usar.

Consejo: piensa qué parte mostrar siempre y qué parte ocultar. Lo habitual es dejar visible un resumen o las primeras líneas, y ocultar el resto. Eso da contexto al usuario para que decida si quiere expandir, en lugar de ocultar todo y dejarlo sin pistas.

Paso 2: Añade el botón "Leer más"

Inserta un módulo de botón (o un enlace de texto) que servirá como disparador. A este botón le asignas otra clase CSS específica, que el JavaScript usará para detectar el clic y mostrar u ocultar el contenido asociado. El texto del botón puede ser "Leer más", "Ver más contenido", "Mostrar todo" o lo que mejor encaje con tu página.

🎓 ¿Quieres crear funcionalidades a medida en Divi?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde aprendes a combinar CSS, JavaScript y los módulos de Divi para construir exactamente lo que necesitas. Accede como suscriptor y lleva tus diseños más allá.

Paso 3: Aplica el CSS y el JavaScript

El corazón del tutorial es el código. El CSS oculta inicialmente el contenido marcado (con display: none o una altura limitada), y el JavaScript escucha el clic en el botón de "Leer más" para mostrar el contenido y, opcionalmente, cambiar el texto del botón a "Leer menos". El código está pensado para que puedas ocultar uno o varios elementos, e incluso filas completas. En los recursos del tutorial dejo el CSS y el JavaScript completos, listos para copiar y pegar en las opciones de tu sitio.

Paso 4: Prueba el comportamiento

Guarda los cambios y prueba: al cargar la página, el contenido marcado debe estar oculto y el botón visible. Al hacer clic en "Leer más", el contenido se despliega; al hacer clic de nuevo (si configuraste el toggle), se vuelve a ocultar. Verifica que funcione bien en escritorio y móvil, y que la transición sea suave. Si te gustan estas soluciones de mostrar/ocultar contenido, también existe el módulo Reveal de Divi Pixel, que logra un efecto similar sin código si prefieres un plugin.

Consejo: si manejas mucho CSS y JavaScript personalizado en tu sitio, organízalo bien y comenta el código para recordar qué hace cada parte. Para afinar el comportamiento en distintos tamaños de pantalla, te servirá el tutorial de custom media queries CSS en Divi.

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

¿Necesito saber programar para usar esto?

El CSS y el JavaScript están listos para copiar y pegar, así que no necesitas escribirlos. Solo asignas las clases a los elementos y pegas el código. Entender qué hace cada parte te ayuda a adaptarlo, pero no es indispensable.

¿Puedo ocultar una fila completa o solo módulos?

Ambos. El código está pensado para ocultar desde un solo módulo hasta una fila o sección completa. Solo cambia a qué elemento le asignas la clase de contenido oculto.

¿El contenido oculto afecta el SEO?

El contenido oculto con CSS/JavaScript sigue presente en el HTML, así que Google puede leerlo. Mientras no abuses ocultando contenido clave de forma engañosa, esta técnica de "Leer más" es una práctica de UX aceptada y no perjudica el SEO.

¿Funciona con Divi 5?

La lógica de CSS y JavaScript funciona en Divi 4 y Divi 5. Los selectores de las clases que tú asignas son los mismos; solo verifica que el módulo de código o las opciones de CSS estén en el lugar correspondiente de tu versión.

Conclusión

Ocultar contenido con un botón de "Leer más" en Divi es una forma elegante de mantener tus páginas limpias sin renunciar a la información. Con unas clases CSS, un botón disparador y el código CSS + JavaScript que dejo en los recursos, puedes ocultar desde un módulo hasta una fila completa y dejar que el usuario decida cuánto leer. Es un recurso versátil que mejora la experiencia en descripciones largas, FAQs y cualquier sección con mucho contenido.

🎓 ¿Quieres crear funcionalidades personalizadas y sitios a medida con Divi?
En uxdivi.com/cursos tienes el Curso de Divi 5 completo donde aprendes a combinar CSS, JavaScript y los módulos de Divi para construir cualquier funcionalidad. Accede como suscriptor y domina Divi de verdad.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

Recursos, Snippets y descargas de este tutorial: