Icono del acordeón abierto en Divi: cómo agregarlo

El módulo Acordeón de Divi es perfecto para FAQs, listados de servicios o cualquier contenido que quieras mostrar de forma plegable. Pero tiene un detalle molesto: cuando un ítem del acordeón está abierto, le falta el ícono indicador. Divi muestra ícono cuando el ítem está cerrado, pero no cuando está abierto, lo que confunde un poco al usuario. En este tutorial te muestro cómo agregar el ícono del acordeón abierto en Divi con un poco de CSS, en solo dos pasos.

Elegant Themes mejoró los módulos Toggle (Alternar) y Acordeón añadiendo selectores de íconos, pero al módulo Acordeón todavía le falta el ícono de estado abierto. Por suerte, se resuelve fácil con una clase CSS y unas reglas. Vamos a verlo.

¿Por qué falta el ícono del acordeón abierto?

Es una limitación del módulo Acordeón de Divi: por diseño, muestra el ícono solo en estado cerrado. El módulo Toggle (Alternar) sí permite definir íconos para abierto y cerrado, pero el Acordeón quedó a medias. Cuando tienes varios ítems y uno está abierto, la ausencia de ícono en ese ítem rompe un poco la coherencia visual. La solución con CSS devuelve ese ícono y deja el acordeón consistente. Si quieres entender bien cómo aplicar CSS personalizado en Divi, el Curso de Divi 5 completo te da las bases.

Paso 1: Agrega una clase CSS al módulo acordeón

Lo primero es identificar tu módulo acordeón para apuntarle con CSS. Haz clic en el módulo Acordeón, ve a la pestaña Avanzado → ID y clases CSS, y añade una clase personalizada (por ejemplo, icono-acordeon-abierto). Esta clase te permitirá aplicar el CSS solo a este acordeón y no a todos los del sitio, dándote control sobre dónde se aplica el cambio.

Consejo: usa una clase descriptiva y única para no generar conflictos con otras reglas de CSS de tu sitio. Si quieres que el cambio aplique a todos los acordeones, puedes apuntar al selector general de Divi, pero usar una clase propia es más seguro y controlado.

Paso 2: Aplica el CSS para mostrar el ícono

Con la clase asignada, agrega las reglas de CSS que muestran el ícono en el estado abierto del acordeón. El CSS apunta al ítem activo del acordeón (el que está expandido) y le añade el ícono usando los selectores de Divi. Puedes pegar el código en Opciones de Divi → CSS personalizado o en las opciones de CSS de la página. El resultado es que ahora todos los ítems del acordeón muestran ícono tanto abiertos como cerrados, manteniendo la coherencia visual.

🎓 ¿Quieres dominar el CSS personalizado en Divi?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde aprendes a aplicar CSS, clases personalizadas y a resolver las limitaciones de los módulos de Divi. Accede como suscriptor y personaliza sin límites.

Personaliza el ícono a tu gusto

Una vez que el ícono aparece en estado abierto, puedes personalizarlo: cambiar el símbolo (una flecha hacia arriba, un signo menos, una equis), el color, el tamaño. La idea habitual es que el ícono de cerrado indique «expandir» (una flecha hacia abajo o un signo más) y el de abierto indique «contraer» (una flecha hacia arriba o un signo menos). Esa diferencia visual ayuda al usuario a entender el estado de cada ítem de un vistazo. Si trabajas mucho con CSS en Divi y necesitas afinar el comportamiento en distintos tamaños de pantalla, te servirá el tutorial de custom media queries CSS en Divi.

Cuándo usar acordeón y cuándo usar toggle en Divi

Divi tiene dos módulos parecidos que conviene no confundir: el Acordeón y el Alternar (Toggle). El módulo Acordeón agrupa varios ítems donde, al abrir uno, los demás se cierran automáticamente — ideal para FAQs donde quieres que el usuario se enfoque en una respuesta a la vez. El módulo Toggle es independiente: cada ítem se abre y cierra por separado, sin afectar a los demás, útil cuando quieres permitir que el usuario tenga varias secciones abiertas al mismo tiempo. Si tu caso necesita íconos completos para abierto y cerrado sin recurrir a CSS, el módulo Toggle ya los trae nativos; si necesitas el comportamiento de «solo uno abierto a la vez» del Acordeón, este truco de CSS te resuelve el ícono que falta. Elige el módulo según el comportamiento que busques y aplica el ajuste correspondiente.

Para FAQs extensas, el Acordeón con el ícono corregido es la mejor opción: mantiene la página ordenada, muestra solo la respuesta que el usuario quiere ver, y con el ícono en ambos estados comunica con claridad qué está abierto y qué cerrado. Es un componente que aparece en casi todos los sitios profesionales, así que vale la pena tenerlo bien resuelto.

Preguntas frecuentes sobre el ícono del acordeón en Divi

¿Por qué Divi no muestra el ícono abierto por defecto?

Es una limitación de diseño del módulo Acordeón. El módulo Toggle sí permite íconos para ambos estados, pero el Acordeón no incluye esa opción de forma nativa, por lo que se resuelve con CSS.

¿Necesito saber programar para aplicar esto?

No. El CSS está listo para copiar y pegar. Solo necesitas asignar la clase al módulo y pegar las reglas en las opciones de CSS. Entender el código te ayuda a personalizarlo, pero no es indispensable.

¿Esto afecta a todos los acordeones de mi sitio?

Solo a los que tengan la clase CSS que asignaste, si usas una clase específica. Si prefieres que aplique a todos, puedes apuntar al selector general de Divi en lugar de una clase propia.

¿Funciona en Divi 5?

La lógica de aplicar CSS al módulo acordeón funciona en Divi 4 y Divi 5. Los selectores pueden variar ligeramente entre versiones, así que verifica con las herramientas de desarrollador del navegador si algún ajuste no aplica como esperas.

Conclusión

Ese pequeño detalle del ícono que falta en el acordeón abierto de Divi se resuelve en dos pasos con CSS: asignar una clase al módulo y pegar las reglas que muestran el ícono en estado abierto. Es un ajuste menor pero que mejora la coherencia visual y la claridad de tus acordeones, especialmente en FAQs y listados donde el usuario necesita entender qué está abierto y qué cerrado. Personalízalo a tu gusto y tendrás acordeones impecables.

🎓 ¿Quieres resolver cualquier limitación de Divi con CSS?
En uxdivi.com/cursos tienes el Curso de Divi 5 completo donde aprendes a personalizar módulos, aplicar CSS avanzado y construir exactamente lo que necesitas. Accede como suscriptor y domina Divi de verdad.