Índice
Si ya has empezado a trabajar en WordPress con la plantilla Divi, sabrás lo sencillo que resulta diseñar una página web simple para cualquier persona con unos conocimientos básicos, gracias a la gran cantidad de módulos que incluye.
Con estos módulos puedes añadir una sección ya definida a la web (conmutadores, contadores, formularios de contacto, mapas de ubicación, textos, títulos, iconos, temporizadores, productos de tu tienda online…)
Y aunque cada módulo trae numerosas opciones de configuración y personalización, hay ocasiones en las que pueden faltar detalles que a priori son esenciales.
Es el caso de configurar el módulo acordeón del tema Divi para que se muestren todas las pestañas cerradas por defecto al entrar en la web.
Crear y diseñar contenido con efecto de acordeón en Divi
Los acordeones web no son más que listados expandibles de información relevante que se muestran cerrados hasta que el usuario clica para abrir una pestaña.
En el módulo acordeón de Divi, solo se muestra una pestaña abierta, al contrario que en el módulo conmutador, que se pueden mostrar todas las pestañas que se cliquen abiertas al mismo tiempo.
Crear y diseñar contenido en tu web con efecto acordeón no es nada complicado si utilizas el constructor web de Divi.
Además, este tipo de contenido resulta muy interactivo y visual para el lector, que encuentra la información que busca de forma ordenada.
En el post anterior vimos cómo configurar paso a paso un acordeón sencillo en Divi.

En este módulo vienen añadidas las opciones de configuración para cambiar el color de fondo, añadir una imagen de fondo, cambiar el estilo de los títulos y textos o incluso modificar el tamaño del icono para abrir la pestaña.
Estas son opciones básicas, pero que si se personalizan a fondo, permiten crear diferentes tipos de contenido desplegable muy diferente y con un diseño limpio, al estilo de Elegant Themes.
Pero hay una opción esencial que no encontrarás por ningún apartado de esta plantilla.
Divi, por defecto, siempre muestra todas las pestañas cerradas, salvo la primera. Y si el usuario clica en cualquier otra pestaña, esta se abre y se cierran las demás, pero siempre se mantiene alguna pestaña abierta, sin posibilidad de mostrarlas todas cerradas al mismo tiempo.
Si quieres corregir este efecto en el diseño de tu web, tiene fácil solución, y la vamos a ver a continuación 🙂
2 Trucos para hacer que el módulo acordeón de Divi se muestre cerrado
Te muestro dos formas diferentes de mostrar el acordeón de Divi cerrado. He probado las dos y funcionan a la perfección.
Truco 1
El primer truco es extremadamente sencillo de implementar:
- Entra en la edición del módulo de acordeón en el constructor Divi.
- Añade un nuevo elemento (pestaña) y llámalo «Vacío» o «En blanco», como tú prefieras.
- Ve a la parte de CSS personalizado de este elemento y en Elemento Principal escribe «display:none».
- Arrastra este elemento o pestaña para que se muestre la primera de todo el listado.
Te lo muestro en capturas:



Esta configuración le dice a Divi que no muestre la primera pestaña, la cual muestra abierta por defecto, por lo que todas las pestañas que sí se muestran en la web, permanecen cerradas hasta que el usuario clique en ellas para ampliar la información.
Indudablemente es la opción más rápida de mostrar cerrado el módulo de acordeón en el tema Divi y el lector no notará absolutamente nada al navegar por al web.
Este pequeño truco pertenece a la web de Divi Theme Examples.

Truco 2
El siguiente truco para cerrar el acordeón de Divi por completo, también es muy sencillo y rápido.
Copia el siguiente código:
Y pégalo en: WordPress -> Divi -> Opciones del tema -> Integración -> head

Guarda cambios y comprueba que el desplegable de acordeón de tu web se muestra por defecto cerrado.
Este código pertenece a la web mkrdip.me y al añadirlo a la plantilla se aplicará automáticamente a todos los acordeones que hayas añadido en tus páginas.
Después de tiempo buscando cómo mostrar el acordeón de Divi cerrado por defecto, he dado con estas dos soluciones que espero te ayuden a ti también. Si conoces otra forma simple de mostrar este desplegable cerrado y quieres compartirla, puedes escribir un comentario más abajo 😉
Funcionó, gracias por el aporte
Gracias me ha ayudado un montón.
Hola! Muy buen artículo sobre el módulo acordeón. Me preguntaba si este módulo se puede adaptar para que en vez de mostrar sólo un título principal aparezca un fragmento del texto y al darle al más o a aldún botón del tipo «ver más» aparezca el resto. Llevo un tiempo intentando aplicar ésto en Divi y no soy capaz de averiguar cómo, muchas gracias por la ayuda. Un saludo
Hola. Muchisimas gracias! Estaba buscando esta información sobre el acordeón cerrado de Divi. Y acabo de poder implementar el truco n° 1, Saludos. 🙂
Excelente tus aportes! Muy útiles, prácticos y fáciles de aplicar. Muchas gracias!
Hola, gracias por la ayuda. Necesito centrar el título del acordeón. es posible? gracias.
Hola Aldo! Sí se puede. Tienes que entrar en el apartado de «Diseño» y después en «Orientación del texto». Saludos!
Buenas!
¿Hay alguna manera que aparezca desplegado el acordeón según en la página en la que estemos?¿Qué otro módulo se podría utilizar para ese fin?
He utilizado el acordeón como Menu desplegable lateral y me gustaría que apareciese desplegado en la página en la que estoy.
Saludos!
Hola, me funcionó, pero al abrir cualquiera de los items, este no se puede cerrar y finalmente siempre queda uno abierto
Me funciono, muchas gracias,
Excelente me ayudo mucho