El acordeón es un elemento muy usado en páginas webs cuando se quiere mostrar un listado de forma interactiva, resultando cómodo y muy visual para mostrar la información al usuario.

Configurar el módulo de acordeón en el tema Divi es sencillo e intuitivo y vamos a ver cuáles son todos los ajustes que se incluyen en este construcor web.

¿Para qué sirve el módulo Acordeón de Divi?

Se trata de un desplegable en el que solo se muestra el título. Cuando el usuario clica en el icono se muestra el resto de contenido.

En el módulo acordeón de Divi solamente puede estar abierta una pestaña y las demás permanecen cerradas. Nunca se muestran varias pestañas abiertas a la vez.

Y esta es la principal diferencia con su otro módulo «Conmutador», el cual te permite mostrar más de una pestaña de información abierta al mismo tiempo.

Este elemento es muy atractivo para el usuario que visita la web y para ti como propietario, te ayuda a mostrar de forma ordenada toda la información.

Te enseño en la sigueinte imagen un ejemplo de acordeón hecho con la plantilla Divi. Es un diseño simple, que no requiere de código ni de conocimientos avanzados, y en los siguientes apartados vamos a ver cómo configurarlo desde el principio.

Ajustes de diseño del módulo Acordeón de Divi

La plantilla Divi te lo pone fácil y para agregar un listado con diseño de acordeón a tu web, simplemente tienes que:

• Abrir la edicón de página donde lo quieras incluir.
• Utilizar el constructor Divi.
• Añadir una sección estándar.
• Añadir el diseño de columnas de la sección.
• Añadir el módulo «Acordeón».

Lo vemos en imágenes:

Una vez tengas añadido el módulo o módulos de acordeón en el constructor de Divi, es el momento de personalizar y configurar todos los ajustes.

Las opciones de configuración de este módulo son las comunes a todos los módulos de Divi, es decir:

• Ajustes generales.
• Ajustes avanzados de diseño.
• CSS Personalizado.

Ahora te muestro una a una estas opciones de configuración:

Ajustes generales

En los Ajustes generales del módulo de acordeón de Divi es donde se van añadiendo las pestañas para el acordeón.

Clica en Añadir nuevo elemento para añadirlas una a una y se irá creando el listado en esta misma ventana del constructor. Una vez creadas, ordénalas según tu preferencia arrastrándolas con el ratón.

Cada elemento creado tiene tres iconos, uno para editarlo, otro para duplicarlo y otro para eliminarlo.

La opción de poder duplicar elementos, secciones o módulos en el constructor Divi (icono de los dos rectángulos) es una gran herramienta para ahorrar tiempo cuando el contenido es similar.

Cuando entres en la edición de cada elemento de la lista (icono de las tres líneas), te aparecerán de nuevo los tres bloques de ajustes comunes a todos los módulos de Divi y podrás personalizar cada bloque o pestaña de forma individual.

En los Ajustes generales se encuentra el campo de título, donde puedes añadir el título que aparecerá en el conmutador y el campo contenido, el cuál solo se mostrará con el acordeón abierto. En este campo puedes añadir, como en cualquier editor de WordPress, texto, imágenes, listados, subtítulos…

En el apartado de Ajustes avanzados de diseño de cada elemento del acordeón puedes personalizar todos los detalles, como el color de fondo y del texto, tanto con el conmutador abierto como cerrado, el color del icono, imagen de fondo y relleno personalizado.

En este caso, no lo he personalizado en este apartado porque todas las pestañas tendrán la misma apariencia y no me conviene editar cada pestaña una por una. Así que las editaré más adelante en los ajustes de todo el módulo.

Si en tu caso quieres editar por separado cada pestaña, ten en cuenta que estos ajustes prevalecen sobre los generales del módulo.

Recuerda guardar cambios cada vez que edites una pestaña del acordeón, pues si vuelves hacia atrás a los ajustes generales de la sección, los cambios desaparecerán.

Ajustes avanzados de diseño

Volviendo a los ajustes del módulo de acordeón de Divi, el siguiente apartado es el de Ajustes avanzados de diseño.

Este punto si lo editaré para aplicar el mismo diseño a todas las pestañas al mismo tiempo y crear el acordeón más rápido.

He elegido el color de fondo y de texto con el conmutador abierto y cerrado, el color del icono (el símbolo «+») y los ajustes del título y del texto (fuente, tamaño, color, espacio entre letras y altura de línea).

Si lo deseas también puedes añadir una imagen de fondo, un borde y un relleno personalizado.

CSS Personalizado

Como en todos los elementos, módulos y secciones de Divi, la última sección de ajustes es la de CSS personalizado.

En este ejemplo de diseño de acordeón con Divi no he tocado este apartado.

Por último, si quieres reducir o ampliar el tamaño del icono del acordeón de Divi, esta configuración no se encuentra en los ajustes del módulo, y tendrás que abrir las opciones de la plantilla en:

WordPress -> Divi -> Personalizador de módulos -> Acordeón

Una de las peculiaridades que tiene el conmutador de acordeón en esta plantilla es que, por defecto, la primera pestaña se muestra abierta, y dentro de las opciones de configuración, no existe ninguna que permita activar que todas las pestañas aparezcan cerradas hasta que el usuario clique en el icono para abrir una.

En otro post te mostraré un sencillo truco para mostrar el acordeón de Divi cerrado por defecto 😉

Esta ha sido una demostración de cómo crear un acordeón con la plantilla Divi desde su constructor back end, pero si lo realizas desde el constructor front end, el procedimiento es el mismo.