Cómo agregar, configurar y personalizar el módulo acordeón de Divi.

El módulo acordeón de Divi ayuda a consolidar información en un grupo apilado verticalmente de pestañas que se pueden hacer clic para mostrar u ocultar su contenido.

El módulo acordeón es similar al módulo de pestañas (toggle). Sin embargo, el módulo acordeón funciona como un grupo de pestañas: cuando se abre una nueva pestaña, la que estaba abierta anteriormente se cierra.

Por defecto, la primera pestaña aparece abierta. El módulo acordeón es ideal para mostrar una sección de preguntas frecuentes de manera fácil de leer.

Cómo agregar el módulo acordeón de Divi a tu página

1. Agrega una nueva página o edita una página existente.
   Por defecto, el editor estándar de Gutenberg se carga cada vez que añades un nuevo post o página en WordPress.

2. Haz clic en el botón morado debajo del título de la página que dice Usar el Constructor Divi. 

Al hacer clic, la página se recargará con el Divi Visual Builder.

Al recargar la página, verás tres opciones:

​

Construir desde cero

Esta opción carga el Divi Builder con una página en blanco. Elige esta opción si quieres empezar el diseño de tu página desde cero.

​

Elegir un diseño prediseñado

​Esta opción te permite escoger entre una gran biblioteca de diseños Divi prediseñados. Puedes elegir diseños predefinidos por Divi, diseños que hayas creado y guardado en tu Biblioteca Divi, o páginas existentes en tu sitio web que puedas clonar.

​

Construir con IA                                                                                                                                                                                                                                                                                                 

​Esta opción te permite crear un diseño completo de página usando Divi AI. Con una descripción de texto y la información de tu sitio web, puedes crear el esquema perfecto para la página, luego construirla y llenarla de contenido e imágenes rápidamente.

Agregar el módulo acordeón de Divi

1. Cuando cargas el Visual Builder, Divi añade automáticamente una Sección.

2. Haz clic en el ícono verde + para insertar una Fila.

3. Dentro de la fila, haz clic en el ícono gris + para abrir la Biblioteca de módulos Divi, que contiene todos los módulos incluidos en el tema Divi.

4. Busca el módulo Acordeón y haz clic para cargarlo.
   La biblioteca de módulos también tiene una barra de búsqueda; escribe el nombre del módulo que quieres usar para encontrarlo más rápido.

Todas las opciones del módulo acordeón de Divi explicadas

Una vez que hayas agregado el módulo acordeón de Divi, automáticamente aparecerán las configuraciones del módulo. Aquí es donde se configuran el contenido y los estilos de diseño de este módulo. Estas configuraciones están organizadas en tres grupos mediante pestañas en la parte superior del módulo:

• Contenido

• Diseño

• Avanzado

Pestaña Contenido

Dentro de esta pestaña encontrarás las opciones de contenido disponibles para el módulo acordeón de Divi.

Cómo agregar un nuevo ítem al acordeón

Cuando se carga el módulo acordeón, automáticamente añade dos pestañas (toggles). Para agregar una nueva pestaña, haz clic en Agregar nuevo ítem de acordeón. Al hacerlo, se cargará el nuevo ítem y verás las siguientes pestañas:

• Pestaña Contenido

• Pestaña Diseño

• Pestaña Avanzado

Para regresar a la configuración principal del módulo, haz clic en la flecha blanca hacia atrás en la esquina superior izquierda de la ventana del módulo.

Ítem nuevo de acordeón

Icono del toggle

• Icono: selecciona el ícono que se usará cuando el ítem del acordeón esté cerrado.

Enlace

Si deseas aplicar un enlace clickeable a todo el módulo, puedes hacerlo aquí.

• URL del enlace del módulo: pega la URL del enlace que quieres aplicar a este módulo. Esto hará que todo el módulo sea clickeable y al hacer clic dirigirá a los visitantes a esa URL.

• Destino del enlace del módulo: determina si el enlace se abrirá en una pestaña nueva o en la misma ventana.

  • En la misma ventana: si quieres que el enlace se abra en la misma ventana (opción por defecto).

  • En una pestaña nueva: si quieres que el enlace se abra en una nueva pestaña.
    

Fondo

En el grupo de opciones de fondo puedes configurar lo siguiente:

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Cómo agregar un color de fondo

1. Haz clic en la primera pestaña, el ícono del cubo de pintura.

2. Haz clic en Agregar color de fondo y elige un color de la paleta de tu sitio o usa el cuentagotas para seleccionar un nuevo color.

Cómo agregar un degradado de fondo

1. Haz clic en la segunda pestaña, el ícono de degradado.

2. Haz clic en Agregar degradado de fondo.

Para cambiar los colores del degradado, haz clic en los puntos de parada del degradado y selecciona un color de la paleta de tu sitio o usa el cuentagotas para elegir uno nuevo. Puedes agregar más colores haciendo clic en cualquier parte de la barra deslizante.

Opciones del degradado de fondo

• Tipo de degradado: cambia el tipo de degradado desde el menú desplegable.

• Dirección del degradado: ajusta la dirección arrastrando la barra o escribiendo un valor numérico.

• Repetir degradado: activa esta opción si quieres que el degradado se repita.

• Unidad del degradado: cambia cómo se calculan los puntos de parada del degradado.

• Colocar degradado sobre imagen de fondo: si hay una imagen de fondo aplicada, puedes colocar el degradado encima activando esta opción.

Cómo agregar una imagen de fondo

1. Haz clic en la tercera pestaña, el ícono de imagen.

2. Haz clic en el ícono gris + para abrir la Biblioteca de medios, donde puedes seleccionar una foto que ya hayas subido o subir una nueva.

Opciones de imagen de fondo

• Usar efecto Parallax: para aplicar un efecto parallax a la imagen (donde la imagen se mueve más rápido que el contenido en primer plano, creando la ilusión de un efecto 3D), activa esta opción. Por defecto, está desactivada.

• Tamaño de la imagen de fondo: elige el tamaño de la imagen de fondo seleccionando una opción del menú desplegable.

• Posición de la imagen de fondo: elige la posición de la imagen seleccionando una opción del menú desplegable.

• Repetición de la imagen de fondo: selecciona si y cómo quieres que la imagen de fondo se repita desde el menú desplegable.

• Fusión de la imagen de fondo: elige cómo se mezcla la imagen de fondo con otras capas del módulo seleccionando una opción del menú desplegable.
  

Cómo agregar un video de fondo

1. Haz clic en la cuarta pestaña, el ícono de video.

2. Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar un video ya subido o subir uno nuevo.

Opciones de video de fondo

• Mp4 vs WebM: Se recomienda subir ambas versiones, mp4 y webm, porque no todos los navegadores soportan el formato WebM. Subir ambos archivos asegura que tu video se reproduzca en todos los dispositivos y navegadores.

• Ancho del video de fondo: establece el ancho del video escribiendo un valor numérico.

• Alto del video de fondo: establece la altura del video escribiendo un valor numérico.

• Pausar video cuando otro video se reproduzca: si quieres que el video de fondo se pause cuando otro video esté reproduciéndose, activa esta opción. Por defecto, el video se pausa cuando no está visible. Si quieres que el video continúe, desactiva esta opción.
  

Cómo agregar un patrón de fondo

1. Haz clic en la quinta pestaña, el ícono de patrón.

2. Haz clic en Agregar patrón de fondo.

3. Elige el tipo de patrón que deseas en el menú desplegable.

Opciones del patrón de fondo

• Color del patrón: selecciona el color del patrón desde la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.

• Transformación del patrón: aquí puedes transformar el patrón horizontalmente, verticalmente, rotarlo o invertirlo.

• Tamaño del patrón: selecciona el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones de ancho y alto del patrón, que puedes definir arrastrando el deslizador o escribiendo un valor numérico.

• Origen de repetición del patrón: selecciona desde dónde se repite el patrón.

• Desplazamiento horizontal y vertical del patrón: ajusta el desplazamiento horizontal y vertical del patrón.

• Repetición del patrón: elige cómo quieres que se repita el patrón (horizontalmente, verticalmente, etc.).

• Modo de fusión del patrón: define cómo la capa del patrón interactúa con las capas debajo. Selecciona uno de los 16 modos de fusión disponibles en el menú desplegable.
  

Cómo agregar una máscara de fondo

1. Haz clic en la sexta pestaña, el ícono de máscara.

2. Haz clic en Agregar máscara de fondo.

3. Selecciona el tipo de máscara que deseas en el menú desplegable.

Opciones de la máscara de fondo

• Color de la máscara: elige el color de la máscara desde la paleta de colores de tu sitio o usa el cuentagotas para seleccionar un color nuevo.

• Transformación de la máscara: aquí puedes transformar la máscara horizontalmente, verticalmente, rotarla o invertirla.

• Relación de aspecto de la máscara: ajusta la relación de aspecto de la máscara. La relación de aspecto es la proporción entre el ancho y la altura de la imagen.

• Tamaño de la máscara: puedes seleccionar el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones para definir el ancho y la altura. Puedes usar el deslizador o ingresar un valor numérico.

• Modo de fusión de la máscara: define cómo la capa de la máscara interactúa con las capas debajo. Selecciona uno de los 16 modos de fusión disponibles en el menú desplegable.
  

Etiqueta de administrador

La Etiqueta de administrador es donde puedes darle un nombre al módulo que solo tú verás, para ayudarte a mantener todo organizado y fácil de entender en el panel de administración. Por defecto, la etiqueta de administrador será el nombre del módulo, pero puedes cambiar el texto para que refleje lo que desees.

Pestaña Diseño

En esta pestaña encontrarás todos los estilos y opciones de diseño para el módulo acordeón de Divi.

Icono

• Color del icono: elige un color específico para el icono del toggle que se muestra en el lado derecho. Puedes seleccionar un color de la paleta de tu sitio o usar el cuentagotas para elegir uno nuevo. Por defecto, los iconos de toggle son de un gris claro.

• Usar tamaño personalizado para el icono: si quieres elegir un tamaño específico para el icono, activa esta opción y usa el deslizador para seleccionar un tamaño o escribe un valor numérico en el cuadro de texto.
  

Toggle

Elige los colores de fondo para los toggles abiertos y cerrados. También puedes editar los colores de fondo del texto de los títulos abiertos y cerrados en las siguientes dos pestañas.

• Color de fondo del toggle abierto: elige el color de fondo para los toggles cuando están abiertos. Puedes seleccionar un color de la paleta de tu sitio o usar el cuentagotas para elegir uno nuevo.

• Color de fondo del toggle cerrado: elige el color de fondo para los toggles cuando están cerrados. Puedes seleccionar un color de la paleta de tu sitio o usar el cuentagotas para elegir uno nuevo.
  

Texto

Aquí se establecen los estilos generales del texto para este módulo; sin embargo, puedes configurar estilos específicos para textos particulares en otras pestañas como Texto del título, Texto del título cerrado y Texto del cuerpo.

• Alineación del texto: permite elegir cómo se alinea el texto: a la izquierda, centrado, a la derecha o justificado.

• Sombra del texto: puedes aplicar una sombra paralela (drop shadow) a todo el texto dentro de este módulo. Cuando seleccionas un tipo de sombra, se aplica a todo el contenido, tanto al número como al texto del título.
  

Texto del título

• Color del texto del título abierto: elige un color específico para el texto del título. Puedes seleccionar un color de la paleta de tu sitio o usar el cuentagotas para elegir un color nuevo.

• Nivel de encabezado: selecciona el nivel de encabezado asignado al texto del título: h1, h2, h3, h4, h5 o h6.

• Fuente del título: elige la fuente que quieres usar para el texto del título. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra fuente o subir una personalizada desde el menú desplegable.

• Peso de la fuente del título: selecciona el grosor (negrita) de la fuente del título desde el menú desplegable.

• Estilo de la fuente del título: elige el estilo para el texto del título:

  • Cursiva

  • Mayúsculas iniciales

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto del título: elige la alineación solo para el texto del título:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Tamaño del texto del título: ajusta el tamaño de la fuente del título arrastrando el deslizador o escribiendo un valor numérico.

• Espaciado entre letras del título: ajusta el espacio entre las letras del texto del título arrastrando el deslizador o escribiendo un valor numérico. Cuanto mayor sea el número, mayor será el espacio entre letras.

• Altura de línea del título: ajusta el espacio entre líneas del texto del título arrastrando el deslizador o escribiendo un valor numérico. Cuanto mayor sea el número, más espacio habrá entre las líneas.

• Sombra del texto del título: puedes añadir una sombra paralela al texto del título. Una vez que selecciones un estilo, podrás configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.
  

Texto del título cerrado

Si deseas que el texto del título tenga un estilo diferente cuando el toggle está cerrado, aquí es donde configuras esos estilos. De lo contrario, el texto del título cerrado adoptará los estilos aplicados al Texto del título.

• Color del texto del título cerrado: elige un color específico para el texto del título cuando está cerrado. Puedes seleccionar un color de la paleta de tu sitio o usar el cuentagotas para elegir un color nuevo.

• Nivel de encabezado del texto cerrado: selecciona el nivel de encabezado asignado al texto del título cerrado: h1, h2, h3, h4, h5 o h6.

• Fuente del título cerrado: elige la fuente que quieres usar para el texto del título cerrado. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra fuente o subir una personalizada desde el menú desplegable.

• Peso de la fuente del título cerrado: selecciona el grosor (negrita) de la fuente del texto del título cerrado desde el menú desplegable.

• Estilo de la fuente del título cerrado: elige el estilo para el texto del título cerrado:

  • Cursiva

  • Mayúsculas iniciales

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto del título cerrado: elige la alineación solo para el texto del título cerrado:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Tamaño del texto del título cerrado: ajusta el tamaño de la fuente del texto del título cerrado arrastrando el deslizador o escribiendo un valor numérico.

• Espaciado entre letras del título cerrado: ajusta el espacio entre las letras del texto del título cerrado arrastrando el deslizador o escribiendo un valor numérico. Cuanto mayor sea el número, mayor será el espacio entre letras.

• Altura de línea del título cerrado: ajusta el espacio entre líneas del texto del título cerrado arrastrando el deslizador o escribiendo un valor numérico. Cuanto mayor sea el número, más espacio habrá entre las líneas.

• Sombra del texto del título cerrado: puedes añadir una sombra paralela al texto del título cerrado. Una vez que selecciones un estilo, podrás configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.
  

Texto del cuerpo

Estas son las configuraciones y estilos específicos para el texto del cuerpo únicamente.

• Fuente del cuerpo: elige la fuente que quieres para el texto del cuerpo. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra o subir una personalizada desde el menú desplegable.

• Peso de la fuente del cuerpo: selecciona el grosor (negrita) de la fuente del texto del cuerpo desde el menú desplegable.

• Estilo de la fuente del cuerpo: elige el estilo para la fuente del texto del cuerpo:

  • Cursiva

  • Mayúsculas iniciales

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto del cuerpo: elige la alineación solo para el texto del cuerpo:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto del cuerpo: elige un color específico para el texto del cuerpo. Puedes seleccionar de la paleta de colores de tu sitio o usar el cuentagotas para elegir un color nuevo.

• Tamaño del texto del cuerpo: ajusta el tamaño de la fuente del texto del cuerpo arrastrando el deslizador o escribiendo un valor numérico.

• Espaciado entre letras del cuerpo: ajusta el espacio entre letras del texto del cuerpo arrastrando el deslizador o escribiendo un valor numérico. Cuanto mayor sea el número, más espacio habrá entre las letras.

• Altura de línea del cuerpo: ajusta el espacio entre líneas del texto del cuerpo arrastrando el deslizador o escribiendo un valor numérico. Cuanto mayor sea el número, más espacio habrá entre las líneas.

• Sombra del texto del cuerpo: puedes añadir una sombra paralela al texto del cuerpo. Una vez que selecciones un estilo, podrás configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.
  

Tamaño 

Este grupo de opciones define el tamaño (ancho y alto) del módulo Audio. También puedes establecer un ancho máximo, una altura mínima y una altura máxima para el módulo Acordeón.

• Haz clic en las flechas para elegir la alineación del módulo (izquierda, centro o derecha). Por defecto, el módulo Acordeón está alineado a la izquierda.

• Ancho (Width): Define el ancho del módulo. Para más información, consulta la documentación oficial.

• Ancho máximo (Max Width): Define el ancho máximo del módulo. Para más información, consulta la documentación oficial.

• Alineación del módulo (Module Alignment): Si se establece un valor para el ancho o el ancho máximo, la alineación del módulo puede definirse con tres opciones:

  • Alineado a la izquierda

  • Alineado al centro

  • Alineado a la derecha

• Altura mínima (Min Height): Define el valor mínimo para la altura del módulo. Para más información, consulta la documentación oficial.

• Altura (Height): Define la altura del módulo. Para más información, consulta la documentación oficial.

• Altura máxima (Max Height): Define el valor máximo de altura que puede tener el módulo. Para más información, consulta la documentación oficial.
  

Espaciado 

Puedes agregar márgenes o espacios a este módulo escribiendo valores numéricos.

• Margen (Margin): añade espacio fuera del módulo.

• Relleno (Padding): añade espacio dentro del módulo.

Para mantener proporciones y que los valores sean iguales (por ejemplo, arriba y abajo), haz clic en el ícono de cadena que aparece entre los valores que quieres vincular.

1. Los valores predeterminados de margen para el módulo Audio son 0.
   
2. Los valores predeterminados de relleno para el módulo Audio también son 0.
   

Borde

Agrega un borde al módulo. Puedes aplicar un borde completo o solo en un lado específico del módulo.

• Anchura del Borde (Border Width): Ajusta el grosor del borde con el deslizador o escribe un valor numérico. El ancho debe ser al menos 1px para que el borde sea visible.

• Color del Borde (Border Color): Selecciona un color del paleta de colores de tu sitio o usa el ícono de cuentagotas para elegir un nuevo color.

• Estilo del Borde (Border Style): Elige el estilo del borde que prefieras: sólido, discontinuo (dashed), punteado (dotted), doble (double), ranurado (groove), relieve (ridge), hundido (inset), sobresaliente (outset) o ninguno (none).

• Bordes individuales: Puedes aplicar el borde a todos los lados o solo a uno (arriba, derecha, abajo, izquierda).
  

• Esquinas Redondeadas Escribe un valor numérico para redondear las esquinas. Mientras más alto sea el número, más redondeadas serán las esquinas.

• Los valores de las esquinas están vinculados por defecto (el ícono de cadena azul está activo), lo que significa que todas las esquinas tendrán el mismo valor.

• Para personalizar cada esquina por separado, haz clic en la cadena para desvincular los valores y ajustar cada esquina individualmente.

Sombra de Caja

Aquí puedes agregar una sombra proyectada a todo el módulo para darle profundidad y destacar visualmente.

Opciones al seleccionar un estilo de sombra:

• Posición Horizontal de la Sombra (Box Shadow Horizontal Position):
  Controla el desplazamiento horizontal de la sombra. Valores positivos desplazan la sombra hacia la derecha; valores negativos hacia la izquierda.

• Posición Vertical de la Sombra (Box Shadow Vertical Position):
  Controla el desplazamiento vertical de la sombra. Valores positivos desplazan la sombra hacia abajo; valores negativos hacia arriba.

• Fuerza de Desenfoque de la Sombra (Box Shadow Blur Strength):
  Define cuán difusa es la sombra. Valores más altos crean una sombra más suave y difusa, mientras que valores bajos crean una sombra más definida.

• Fuerza de Expansión de la Sombra (Box Shadow Spread Strength):
  Controla qué tanto se extiende o concentra la sombra. Un valor mayor aumenta la densidad y tamaño de la sombra, haciéndola más intensa.

• Color de la Sombra (Shadow Color):
  Selecciona el color de la sombra, ya sea desde la paleta del sitio o usando el cuentagotas para un color personalizado.

• Posición de la Sombra (Box Shadow Position):

  • Exterior: La sombra se proyecta fuera del módulo (predeterminado).

  • Interior: La sombra se muestra dentro de los límites del módulo, creando un efecto hundido.
    

Filtros

Estos ajustes te permiten modificar visualmente el módulo aplicando efectos que alteran su color, brillo y transparencia, para lograr el estilo que deseas.

Opciones de Filtros:

• Hue (Tono):
  Ajusta el ángulo del tono del color del módulo. Cambia los colores a lo largo del espectro de colores.

• Saturation (Saturación):
  Controla la intensidad del color. Valores bajos hacen que los colores sean más grises y apagados; valores altos hacen que los colores sean más vivos.

• Brightness (Brillo):
  Ajusta qué tan claro o oscuro es el módulo. Incrementar el brillo lo hace más claro; reducirlo lo hace más oscuro.

• Contrast (Contraste):
  Controla la diferencia entre las áreas claras y oscuras. Más contraste hace que las áreas claras sean más brillantes y las oscuras más profundas.

• Invert (Invertir):
  Invierte los colores del módulo basado en el valor que elijas, como un efecto de negativo fotográfico.

• Sepia:
  Aplica un filtro cálido, con tonos amarillos/marrones, para un aspecto vintage o clásico.

• Opacity (Opacidad):
  Controla la transparencia del módulo. Un valor bajo lo hace más transparente, un valor alto más opaco.

• Blur (Desenfoque):
  Aplica un desenfoque gaussiano al módulo. Valores altos crean un efecto borroso.

Modo de Mezcla Define cómo se mezcla el módulo con las capas que están debajo.

• Normal: Sin mezcla especial (por defecto).

• Otras opciones cambian cómo interactúan colores y transparencias para efectos creativos.
  

Transformar

La pestaña Transform te permite manipular la apariencia del módulo usando transformaciones visuales avanzadas para crear efectos dinámicos o ajustar la posición y orientación.

Opciones de Transformación:

• Scale (Escala):
  Cambia el tamaño del módulo. Puedes aumentar o reducir la escala horizontal y verticalmente.

• Translate (Trasladar):
  Mueve el módulo en el eje horizontal (X) y vertical (Y). Útil para desplazar el módulo sin alterar su tamaño.

• Rotate (Rotar):
  Rota el módulo alrededor de un punto de origen definido, en grados. Puedes girar en sentido horario o antihorario.

• Skew (Sesgar):
  Inclina o distorsiona el módulo en los ejes horizontal o vertical, creando un efecto de paralelogramo o distorsión.

• Origin Points (Puntos de Origen):
  Define el punto alrededor del cual se aplican las transformaciones (escala, rotación, etc.). Por ejemplo, centro, esquina superior izquierda, etc.

Cómo usar:

• Navega entre las opciones con la tecla Tab para acceder a cada parámetro.

• Ajusta los valores introduciendo números manualmente o arrastrando el control visual (caja o círculo).

• Puedes bloquear los valores para que siempre sean iguales (por ejemplo, para escala X e Y igual) haciendo clic en el ícono de cadena en la esquina inferior derecha.
  

Animación

Esta sección te permite aplicar animaciones al módulo para darle dinamismo y captar la atención visualmente.

Opciones de Animación:

• Animation Style (Estilo de Animación):
  Escoge el tipo de animación (ejemplo: desvanecer, deslizar, rebotar, etc.).

• Animation Duration (Duración de la Animación):
  Define cuánto tiempo tarda la animación en completarse una vez (en segundos o milisegundos).

• Animation Delay (Retraso de la Animación):
  Establece cuánto tiempo esperar antes de que comience la animación después de aplicarla. Puedes hacer que empiece inmediatamente o después de un retraso.

• Animation Starting Opacity (Opacidad Inicial de la Animación):
  Define el nivel de opacidad con que inicia la animación (por ejemplo, iniciar invisible y luego aparecer).

• Animation Speed Curve (Curva de Velocidad de la Animación):
  Ajusta la suavidad y el ritmo de la animación, usando métodos de easing (como ease-in, ease-out, linear) para que se vea más natural o con efectos de aceleración y desaceleración.

• Animation Repeat (Repetición de la Animación):
  Por defecto, la animación se ejecuta una sola vez. Si quieres que se repita continuamente, selecciona la opción Loop para hacer que la animación se repita en ciclo.

Pestaña Avanzada

Esta pestaña está orientada a usuarios con conocimientos más técnicos o desarrolladores que quieran personalizar a fondo el módulo usando CSS.

Opciones en la Pestaña Avanzada:

• Custom CSS (CSS Personalizado):
  Puedes escribir tu propio código CSS para aplicar estilos específicos directamente al módulo o a partes internas del mismo (como títulos, cuerpo, iconos, etc.). Esto te da un control total sobre la apariencia y el comportamiento.

• CSS ID:
  Aquí puedes asignar un ID único al módulo. Esto es útil si quieres aplicar estilos CSS específicos desde el archivo CSS de tu tema o mediante código personalizado, o para vincular con anclas en la página.

• CSS Classes (Clases CSS):
  Puedes agregar una o más clases CSS al módulo. Estas clases pueden ser usadas para aplicar estilos predefinidos en tu hoja de estilos o para aplicar reglas CSS específicas a través del código personalizado.

ID y Clases CSS

ID CSS: Asigna un identificador único al módulo. Este ID puede usarse en tu CSS o JavaScript para apuntar con precisión a este módulo específico.

Clases CSS: Añade una o más clases CSS al módulo. Estas clases te permiten aplicar estilos compartidos o scripts personalizados a varios módulos o elementos que comparten el mismo nombre de clase.

¿Por qué usarlas?
Son muy útiles para personalizaciones avanzadas, ya que permiten vincular tu módulo Divi con estilos en la hoja de estilos de tu tema hijo o para apuntar mediante JavaScript personalizado.

CSS Personalizado

CSS en formato libre: Escribe cualquier CSS directamente aquí, usando la palabra clave selector para apuntar a todo el módulo.

Ejemplo:

css
Copiar
Editar
selector h1 {
  color: red;
}

Esto apunta a todos los encabezados h1 dentro del módulo y los pone en color rojo.

Elementos del módulo: Aquí puedes añadir CSS personalizado para partes específicas del módulo individualmente, como el texto del título, icono del toggle, texto del cuerpo, etc., sin afectar a todo el módulo. Cada sección tiene su propia área para insertar CSS.

Condiciones

Esta función te permite controlar cuándo o a quién se muestra el módulo, basándose en reglas específicas, como:

• Comportamiento del usuario (por ejemplo, si ya ha realizado una compra)

• Tipo de navegador o dispositivo

• Sistema operativo

• Otras condiciones dinámicas

Puedes añadir una o varias condiciones para adaptar la visibilidad del módulo exactamente a tus necesidades.

Visibilidad

Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo de la vista) cuando la ventana de visualización sea un Teléfono, Tableta o Escritorio, marcando la casilla correspondiente.

Desbordamiento Horizontal – Define qué se muestra cuando el contenido se desborda por los bordes izquierdo y derecho de un elemento de nivel bloque. Puede ser:

• Visible – El contenido se mostrará si el contenido del módulo se desborda en su altura.

• Scroll – Si el contenido del módulo se desborda en su altura, se usará una barra de desplazamiento vertical para navegar por el contenido.

• Oculto (Hidden) – Si el contenido del módulo se desborda en su altura, la parte que se desborda quedará oculta.

• Automático (Auto) – El navegador decidirá si se muestra una barra de desplazamiento.

Desbordamiento Vertical – Define qué se muestra cuando el contenido se desborda por los bordes superior e inferior de un elemento de nivel bloque. Puede ser:

• Visible – El contenido se mostrará si el contenido del módulo se desborda en su altura.

• Scroll – Si el contenido del módulo se desborda en su altura, se usará una barra de desplazamiento vertical para navegar por el contenido.

• Oculto (Hidden) – Si el contenido del módulo se desborda en su altura, la parte que se desborda quedará oculta.

• Automático (Auto) – El navegador decidirá si se muestra una barra de desplazamiento.
  

ç

Transiciones

Esto controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor (hover).

• Duración de la transición – Define la duración (en milisegundos) de la transición de la animación al pasar el cursor.

• Retraso de la transición – Define el retraso de la transición de la animación al pasar el cursor (en milisegundos).

• Curva de velocidad de la transición – Define la curva de velocidad de la transición de la animación al pasar el cursor.