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

El Módulo Desplegable de Divi te permite mostrar u ocultar contenido con solo hacer clic en un botón. Es una manera sencilla de compartir información sin sobrecargar tu diseño, ya que consolida el contenido y mejora la experiencia del usuario.

El módulo desplegable se puede colocar en cualquier columna de cualquier tamaño, y puedes añadir tantos módulos desplegables como desees.

Puedes usar el módulo desplegable para construir una:

• Sección de preguntas frecuentes (FAQs)

• Menú de restaurante

• Sección de servicios

• Compartir información de precios

En esta guía, utilizaremos una sección de preguntas frecuentes como demostración.

Ver una demostración en vivo de este módulo

Ejemplo del Módulo Desplegable de Divi

---

Cómo añadir el Módulo Desplegable de Divi a tu página

1. Añade una nueva página o edita una existente.
   Por defecto, el editor estándar de Gutenberg se carga cada vez que se añade una nueva entrada o página en WordPress.

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

3. Añade una página y carga el Constructor Visual.

Cuando tu página se recargue, verás tres opciones:

• Construir desde cero

• Elegir un diseño predefinido

• Construir con inteligencia artificial

Construir desde cero

Esta opción carga el Constructor Divi con un diseño de página en blanco. Elige esta opción si deseas comenzar tu diseño desde cero.

Elegir un diseño predefinido

Esta opción te permite elegir entre una gran biblioteca de diseños Divi ya creados. Puedes elegir entre los diseños predefinidos de Divi, los que hayas guardado en tu biblioteca Divi, o páginas existentes en tu sitio web que puedes clonar.

Construir con inteligencia artificial

Esta opción te permite crear todo un diseño de página utilizando Divi AI. Usando tu solicitud de texto e información sobre tu sitio web, puedes generar el esquema perfecto para tu página, luego construirlo y llenarlo con contenido e imágenes, dando vida a todo rápidamente.

Añadir el Módulo Desplegable de Divi

1. Haz clic en el ícono verde de + para insertar una fila.

2. Haz clic en el ícono gris de + dentro de la fila para abrir la biblioteca de módulos de Divi, que contiene todos los módulos incluidos con el tema Divi.

3. Encuentra el módulo desplegable y haz clic en él para cargarlo.
   La biblioteca de módulos también es buscable. Escribe el nombre del módulo que deseas en la barra de búsqueda de la parte superior.

Todas las opciones del Módulo Desplegable de Divi explicadas

Las configuraciones aparecen automáticamente una vez que has añadido el módulo desplegable. Aquí es donde se configura el contenido y el diseño del módulo. Estas configuraciones están organizadas en tres grupos mediante pestañas en la parte superior del módulo: Contenido, Diseño y Avanzado.

Pestaña Contenido

Esta pestaña contiene todas las opciones de contenido para el módulo desplegable de Divi.

Texto

Edita el contenido de texto del módulo desplegable aquí.

• Título – Escribe el título del módulo desplegable aquí.

• Cuerpo – Escribe el texto que deseas mostrar cuando el desplegable esté abierto.

Estado

Por defecto, los módulos desplegables se muestran cerrados. Sin embargo, aquí puedes elegir que se muestren abiertos.

• Estado – Haz clic en el menú desplegable y elige si deseas que el módulo esté abierto o cerrado.

---

Enlace

Si deseas aplicar un enlace clicable a todo el módulo, puedes hacerlo aquí. Ten en cuenta que los módulos se abren al hacer clic; sin embargo, si añades un enlace al módulo completo, los visitantes serán dirigidos a la URL aquí aplicada.

• URL del enlace del módulo – Pega la URL del enlace que deseas aplicar a este módulo aquí. Esto hará que todo el módulo sea clicable.

• Destino del enlace del módulo – Define si el enlace se abre en una nueva pestaña o en la misma ventana.

Fondo

En el grupo de opciones de fondo, se pueden configurar las siguientes opciones:

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Cómo añadir un color de fondo

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

2. Haz clic en Añadir color de fondo y elige desde la paleta de colores de tu sitio o usa el cuentagotas para seleccionar un nuevo color.

Cómo añadir un degradado de fondo

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

2. Haz clic en Añadir degradado de fondo.

• Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color desde la paleta o usa el cuentagotas.

• Puedes añadir más puntos de color haciendo clic en el control deslizante.

Opciones de degradado:

• Tipo de degradado – Selecciona el tipo desde el menú desplegable.

• Dirección del degradado – Ajusta con el deslizador o escribe un valor numérico.

• Repetir degradado – Activa si deseas que el degradado se repita.

• Unidad del degradado – Cambia cómo se calculan los puntos del degradado.

• Colocar degradado sobre imagen de fondo – Activa si quieres que el degradado se muestre sobre la imagen de fondo.

Cómo añadir una imagen de fondo

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

2. Haz clic en el ícono gris de + para abrir la biblioteca de medios y seleccionar o subir una imagen.

Opciones de imagen de fondo:

• Usar efecto parallax – Activa si deseas aplicar el efecto parallax.

• Tamaño de la imagen de fondo – Elige el tamaño desde el menú desplegable.

• Posición de la imagen de fondo – Selecciona desde el menú desplegable.

• Repetición de la imagen de fondo – Elige cómo se repite la imagen.

• Modo de fusión de imagen de fondo – Selecciona cómo se mezcla la imagen con otras capas.

Cómo añadir un video de fondo

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

2. Haz clic en el ícono gris de + para abrir la biblioteca de medios.

Opciones de video de fondo:

• MP4 vs WebM – Se recomienda subir ambos formatos para compatibilidad total.

• Ancho del video de fondo – Escribe un valor numérico.

• Altura del video de fondo – Escribe un valor numérico.

• Pausar video cuando otro se reproduzca – Activa esta opción para pausar automáticamente.

Cómo añadir un patrón de fondo

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

2. Haz clic en Añadir patrón de fondo.

Opciones de patrón de fondo:

• Color del patrón – Selecciona desde la paleta de colores o usa el cuentagotas.

• Transformación del patrón – Modifica horizontal o verticalmente, rota o invierte el patrón.

• Tamaño del patrón – Selecciona tamaño real, cubrir, ajustar, estirar o personalizado.

  • Si seleccionas personalizado, puedes ajustar el ancho y alto manualmente.

• Origen de repetición del patrón – Elige desde dónde se repite el patrón.

• Desplazamiento horizontal y vertical del patrón – Ajusta según sea necesario.

• Repetición del patrón – Elige cómo se repite (horizontal, vertical, ambos).

• Modo de fusión del patrón – Define cómo se mezcla el patrón con las capas inferiores.

Cómo añadir una máscara de fondo

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

2. Haz clic en Añadir máscara de fondo.

Opciones de máscara de fondo:

• Color de la máscara – Selecciona el color desde la paleta o con el cuentagotas.

• Transformación de la máscara – Ajusta rotación, inversión, etc.

• Relación de aspecto de la máscara – Ajusta la proporción entre ancho y alto.

• Tamaño de la máscara – Selecciona tamaño real, cubrir, ajustar, estirar o personalizado.

  • Si seleccionas personalizado, puedes ajustar manualmente ancho y alto.

• Modo de fusión de la máscara – Define cómo se mezcla con las capas inferiores (hay 16 modos disponibles).

Pestaña Diseño

Dentro de esta pestaña encontrarás todos los estilos y configuraciones de diseño para el módulo desplegable.

Para demostrar cómo funcionan estas configuraciones, comenzaremos con módulos desplegables sin estilo y los personalizaremos para que se vean como el ejemplo diseñado anteriormente.

---

---

Icono

Aquí puedes personalizar el color y el tamaño del icono que aparece en el lado derecho del desplegable. Puedes establecer estilos y tamaños personalizados para los estados abierto y cerrado, creando un diseño dinámico e interactivo.

• Color del icono cerrado – Elige el color del icono cuando el desplegable esté cerrado. Selecciona un color de la paleta del sitio o usa el cuentagotas para elegir uno nuevo.

• Icono cerrado – Elige el icono que se mostrará cuando el desplegable esté cerrado. Usa la barra de búsqueda y el botón de filtro para encontrar el que desees.

• Usar tamaño personalizado para el icono cerrado – Para cambiar el tamaño del icono, activa esta opción y ajusta el tamaño escribiendo un valor numérico o utilizando el control deslizante.

• Color del icono abierto – Elige el color del icono cuando el desplegable esté abierto.

• Icono abierto – Elige el icono que se mostrará cuando el desplegable esté abierto.

• Usar tamaño personalizado para el icono abierto – Cambia el tamaño del icono abierto activando esta opción y ajustando el tamaño como desees.

---

Desplegable

Aquí puedes establecer el color de fondo del desplegable según su estado (abierto o cerrado).

• Color de fondo del desplegable abierto – Selecciona el color de fondo cuando el módulo esté abierto.

• Color de fondo del desplegable cerrado – Selecciona el color de fondo cuando esté cerrado.

---

Texto

Aquí puedes definir los estilos generales del texto para este módulo. Sin embargo, puedes aplicar estilos específicos a distintos elementos como el texto del título, el título cerrado y el texto del cuerpo.

• Alineación del texto – Elige la alineación del texto:

  • Izquierda

  • Centrado

  • Derecha

  • Justificado

• Sombra del texto – Aplica una sombra a todo el texto dentro del módulo.

---

Texto del Título

Estas son las configuraciones para personalizar y estilizar el texto del título.

• Color del texto del título abierto – Elige un color específico para el título cuando esté abierto.

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

• Fuente del título – Selecciona la fuente que deseas usar.

• Peso de la fuente del título – Define el grosor del texto del título.

• Estilo de la fuente del título – Elige entre:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto del título – Aplica alineación únicamente al texto del título.

• Tamaño del texto del título – Ajusta con el deslizador o escribiendo un valor.

• Espaciado entre letras del título – Define el espacio entre letras.

• Altura de línea del título – Define el espacio entre líneas del título.

• Sombra del texto del título – Puedes agregar una sombra, ajustar su dirección (horizontal y vertical), la intensidad del desenfoque y el color.

---

Texto del Título Cerrado

Si deseas que el título tenga un estilo distinto cuando el módulo esté cerrado, aquí puedes hacerlo. Si no se configura, se utilizarán los mismos estilos del título abierto.

• Color del texto del título cerrado

• Nivel de encabezado del título cerrado

• Fuente del título cerrado

• Peso de la fuente del título cerrado

• Estilo de la fuente del título cerrado (Cursiva, Mayúsculas, Versalitas, Subrayado, Tachado)

• Alineación del texto del título cerrado

• Tamaño del texto del título cerrado

• Espaciado entre letras del título cerrado

• Altura de línea del título cerrado

• Sombra del texto del título cerrado

---

Texto del Cuerpo

Estas son las configuraciones específicas para el texto del cuerpo:

• Fuente del cuerpo

• Peso de la fuente del cuerpo

• Estilo de la fuente del cuerpo (Cursiva, Mayúsculas, Versalitas, Subrayado, Tachado)

• Alineación del texto del cuerpo

• Color del texto del cuerpo

• Tamaño del texto del cuerpo

• Espaciado entre letras del cuerpo

• Altura de línea del cuerpo

• Sombra del texto del cuerpo

---

Tamaño

• Ancho – Define el ancho del módulo.

• Ancho máximo – Define el ancho máximo del módulo.

• Alineación del módulo – Si defines un ancho o ancho máximo, puedes alinear el módulo:

  • A la izquierda

  • Al centro

  • A la derecha

• Altura mínima – Define la altura mínima del módulo.

• Altura – Define la altura del módulo.

• Altura máxima – Define la altura máxima del módulo.

---

Espaciado

Puedes añadir márgenes o relleno (espaciado interior) escribiendo valores numéricos.

• Margen – Agrega espacio fuera del módulo.

• Relleno (padding) – Agrega espacio dentro del módulo.

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

• Valor predeterminado de margen: 0

• Valor predeterminado de relleno: 20px

---

Borde

Agrega un borde al módulo. Puedes aplicar un borde completo o solo en un lado.

• Esquinas redondeadas – Escribe un valor numérico. A mayor número, más redondeadas serán las esquinas. Los valores están vinculados por defecto, pero puedes desvincularlos si deseas que cada esquina tenga un valor distinto.

• Estilos de borde – Puedes aplicarlo a todos los lados o individualmente (superior, derecho, inferior, izquierdo).

• Ancho del borde – Define el grosor del borde (mínimo 1px para que se vea).

• Color del borde – Selecciona desde la paleta o usa el cuentagotas.

• Estilo del borde – Elige entre: sólido, discontinuo, punteado, doble, ranura, cresta, interno, externo o ninguno.

---

Sombra de Caja

Agrega una sombra al módulo completo. Una vez seleccionada una sombra, puedes personalizar:

• Posición horizontal de la sombra

• Posición vertical de la sombra

• Intensidad del desenfoque de la sombra – A mayor valor, más suave y amplia será la sombra.

• Intensidad de expansión de la sombra – A mayor valor, más densa será la sombra.

• Color de la sombra

• Posición de la sombra – Puede estar dentro o fuera del módulo.
  

Aquí tienes la traducción completa al español, sin conservar ninguna palabra en inglés, respetando la estructura y el formato del texto original:

---

Filtros
Ajusta los filtros del módulo:

• Matiz: Define el ángulo de matiz de un color.

• Saturación: Define cuán intensa debe ser la saturación del color.

• Brillo: Define cuán brillante deben ser los colores.

• Contraste: Define cuán distintas deben ser las áreas claras y oscuras.

• Invertir: Invierte el matiz, la saturación y el brillo según el valor especificado.

• Sepia: Define una apariencia más cálida, más amarilla/marrón.

• Opacidad: Define cuán transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque: Define la cantidad de desenfoque gaussiano aplicado al módulo.

El modo de fusión se refiere a cómo el módulo se mezcla con las capas que están debajo. De manera predeterminada, se seleccionará normal.

Transformar

• Escalar

• Trasladar

• Rotar

• Inclinar

• Puntos de origen

Navega por cada opción para acceder a ellas. Configura cada una ingresando valores numéricos o arrastrando y expandiendo el cuadro o el círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el icono de cadena en la parte inferior derecha.

---

Animación
Aquí puedes aplicar una animación al módulo. Una vez que elijas un estilo, podrás ajustar las siguientes opciones:

• Duración de la animación: Define cuánto tiempo tarda la animación en completar un ciclo.

• Retraso de la animación: Define cuánto tiempo debe esperar desde que se aplica la animación hasta que comienza a ejecutarse.

• Opacidad inicial de la animación: Define el valor de opacidad al comenzar.

• Curva de velocidad de la animación: Define el método de suavizado de la animación. Suavizar la entrada y salida crea un efecto más fluido que una curva de velocidad lineal.

• Repetición de la animación: Por defecto, las animaciones se ejecutan una sola vez. Si deseas que la animación se repita continuamente, elige la opción de bucle.

---

Pestaña Avanzado

Dentro de la pestaña Avanzado, encontrarás opciones útiles para diseñadores web con más experiencia, como el uso de CSS personalizado.

Aquí puedes aplicar CSS personalizado al módulo. También puedes aplicar clases e identificadores CSS al módulo, lo que permite personalizar los estilos con propiedades avanzadas o aplicar código CSS personalizado utilizando la clase del módulo.

---

Identificador y Clases CSS

Asigna un identificador CSS o una clase específica a este módulo. Esto es útil al aplicar CSS personalizado usando la hoja de estilos del tema hijo.

---

CSS Personalizado

• CSS Libre: Escribe CSS libre usando el selector selector. Ejemplo: selector h1 {color: red;}

• Elementos del módulo: También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en la pestaña de elementos del módulo, verás secciones individuales donde puedes agregar propiedades CSS personalizadas.

---

Condiciones

Las condiciones de visualización permiten elegir cuándo mostrar este módulo según un conjunto de condiciones, como si el usuario ya ha comprado, qué navegador está utilizando, qué sistema operativo, etc.

Puedes añadir una o varias condiciones.

---

Visibilidad

• Deshabilitar en: Define la visibilidad del módulo. Puedes ocultarlo en teléfono, tableta o escritorio marcando las casillas correspondientes.

• Desbordamiento horizontal: Define qué se muestra cuando el contenido se desborda hacia los lados del módulo:

  • Visible: El contenido se mostrará si se desborda.

  • Desplazamiento: Aparecerá una barra de desplazamiento horizontal.

  • Oculto: El contenido desbordado no se mostrará.

  • Automático: El navegador decide si muestra una barra.

• Desbordamiento vertical: Define qué se muestra cuando el contenido se desborda verticalmente:

  • Visible

  • Desplazamiento

  • Oculto

  • Automático

---

Transiciones
Controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor.

• Duración de la transición: Define la duración (en milisegundos) de la transición.

• Retraso de la transición: Define el retraso (en milisegundos) antes de que inicie.

• Curva de velocidad de la transición: Define cómo cambia la velocidad durante la transición.

---

Posición

• Posición: Define la posición del módulo:
  

Relativa (valor predeterminado) - El módulo se posiciona según el flujo normal del documento, y luego los valores de desplazamiento son relativos a sí mismo según los valores de Desplazamiento Vertical y Desplazamiento Horizontal. El desplazamiento no afecta la posición de ningún otro elemento; por lo tanto, el espacio asignado para el módulo en el diseño de la página es el mismo que si la posición fuera predeterminada (estática).

Absoluta - El módulo se elimina del flujo normal del documento y no se crea espacio para el elemento en el diseño de la página. El módulo se posiciona relativo a su ancestro posicionado más cercano (si existe) o al bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

Fija - El elemento se elimina del flujo normal del documento y no se crea espacio para el elemento en el diseño de la página. El módulo se posiciona en base a las opciones de ubicación en relación con la ventana del navegador. Esto se puede usar para crear un módulo fijo (sticky).

Desplazamiento Vertical - Define la posición vertical del módulo.

Desplazamiento Horizontal - Define la posición horizontal del módulo.

Índice Z - Define el orden del módulo en el diseño de la página. Los módulos con un número de índice Z más alto se superponen a los módulos con un índice Z más bajo.

---

Efectos de Desplazamiento

Esta sección define el comportamiento del módulo cuando el usuario desplaza la página. Puedes hacer que el módulo se quede fijo en la parte superior, inferior, o en ambas, y decidir si el módulo debe transformarse mientras el usuario desplaza.

Además, puedes habilitar el movimiento vertical en este módulo, lo que permite ajustar la velocidad de desplazamiento del elemento sin afectar los elementos circundantes.

La función de Efecto de Activación por Movimiento te permite elegir cuándo se activa el efecto de desplazamiento que acabas de aplicar. Puedes activar el efecto cuando la parte superior, media o inferior del elemento esté visible.

---

Guardar tu Diseño

Una vez que hayas terminado de diseñar y configurar el módulo contador numérico, haz clic en la flecha verde en la parte inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, perderás tu trabajo.

---

Guardar el Diseño de la Página

Para guardar el diseño de la página, puedes presionar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra de herramientas inferior de Divi para guardar tu diseño, haciendo clic en el ícono circular morado con tres puntos (…) para expandir la barra, y luego haciendo clic en el botón verde Guardar en la parte inferior derecha.

---

Salir del Constructor Visual

Ahora que todos tus cambios están guardados, haz clic en Salir del Constructor Visual en la barra de administración superior para salir del Constructor Visual.

---

---

Recursos del Módulo de Alternancia de Divi

• 2 formas de crear alternancias personalizadas de “Mostrar más” en Divi

• Cómo estructurar tu sección de preguntas frecuentes con pestañas personalizadas en Divi

• Cómo crear un diseño de pantalla dividida completa con alternancias únicas en Divi