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:

1. Entra en la edición del módulo de acordeón en el constructor Divi.
2. Añade un nuevo elemento (pestaña) y llámalo «Vacío» o «En blanco», como tú prefieras.
3. Ve a la parte de CSS personalizado de este elemento y en Elemento Principal escribe «display:none».
4. 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:

<script>
jQuery(function($){
    $('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
    $('.et_pb_accordion .et_pb_toggle').click(function() {
      $this = $(this);
      setTimeout(function(){
         $this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
      },700);
    });
});
</script>

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 😉