Cómo agregar el icono que falta al módulo acordeón de Divi abierto

BL Cómo agregar el icono que falta al módulo acordeón de Divi abierto

En este tutorial te mostraremos como agregar el icono que falta al módulo acordeón de Divi abierto, problema que solucionaremos con algo de CSS de forma sencilla.

Índice

Antes, los módulos Divi Toggle y Divi Accordion solo mostraban un ícono cuando estaban cerrados. Afortunadamente, Elegant Themes ha agregado selectores de íconos al módulo Alternar para el ícono Abierto y Cerrado, así como al módulo Acordeón para el ícono Cerrado. Sin embargo, todavía falta el ícono de apertura en el módulo Acordeón. En este tutorial, te mostraré cómo agregarlo en solo dos pasos.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Paso 1: Agregar una clase CSS personalizada

Para agregar el ícono de apertura al módulo de acordeón Divi, necesitará agregar una clase CSS personalizada. Esto asegurará que el código afecte solo al módulo específico que desea modificar. Para hacerlo, abra la configuración del módulo Acordeón, vaya a la pestaña Avanzado y agregue la clase “icono-acordeon-divi” en el campo de entrada Clase CSS.

Paso 2: Agregar el fragmento de código CSS

Una vez que haya agregado la clase personalizada, puede copiar y pegar el siguiente fragmento de código CSS en su sitio:

/* agregar icono a acordeon abierto en Divi*/
.icono-acordeon-divi .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
display: block;
content: "\4b";
}

/* Cambiar estilos del icono acordeon de Divi*/
.icono-acordeon-divi .et_pb_toggle_title:before {
content: "\4c";
color: #292929;
  font-size: 20px;
  font-weight: 900;
}

Esto agregará el ícono de apertura al elemento del módulo de acordeón de Divi abierto. Si desea cambiar el ícono por otro, puede hacerlo utilizando los códigos de icono de Elegant Themes, puedes encontrar la lista aquí: https://dividezigns.com/divi-icon-codes/

Finalmente, tenga en cuenta que la configuración de color y tamaño del ícono cerrado también se aplicará al ícono de apertura. Si desea cambiar el color del ícono de apertura, simplemente agregue la propiedad de color deseada al fragmento de código anterior.

Espero que este tutorial haya sido útil para agregar el ícono que falta al elemento del módulo de acordeón Divi abierto. Si tiene algún comentario o pregunta, no dude en dejar un comentario a continuación. Y si desea más tutoriales como este, ¡suscríbase!

Artículos relacionados

Comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas más frecuentes que los usuarios hacen sobre Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
días
10
horas
10
minutos
10
segundos
¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
días
10
hrs
10
min
10
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
10
días
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!