El Módulo de Pestañas de Divi facilita la organización de la información en tu sitio web y ayuda a los usuarios a encontrar rápidamente lo que necesitan.

Puedes agregar texto e imágenes dentro de las pestañas, así como cualquier contenido controlado usando el editor estándar de publicaciones de WordPress. En columnas de 1/4, las pestañas se apilan y permanecen visibles. En tamaños mayores, los botones de pestaña se disponen en una fila horizontal.

Ejemplo del módulo de pestañas de Divi
Ver una demostración en vivo de este módulo

Cómo agregar el módulo de pestañas de Divi a tu página

• Agrega una nueva página o edita una página existente.
  Por defecto, el editor estándar Gutenberg se carga siempre que se añade una nueva publicación o página en WordPress.

• Haz clic en el botón morado debajo del título de la página. Usar el Divi Builder.

Agrega una página y carga el Constructor Visual

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

• Construir desde cero

• Elegir un diseño predefinido

• Construir con IA

Construir desde cero

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

Elegir un diseño predefinido

Esta opción te permite elegir entre nuestra gran biblioteca de diseños predefinidos de Divi. Puedes seleccionar diseños creados por Divi, los que tú hayas diseñado y guardado en tu Biblioteca Divi, y páginas existentes en tu sitio web que puedes clonar.

Construir con IA

Esta opción te permite crear un diseño de página completo usando Divi AI. Usando tu texto y la información sobre tu sitio web, puedes crear la estructura ideal para la página, construirla y llenarla de contenido e imágenes, dándole vida en poco tiempo.

Agregar el módulo de pestañas de Divi

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

• Haz clic en el ícono gris + dentro de la Fila para abrir la Biblioteca de Módulos de Divi, que contiene todos los módulos incluidos con el tema Divi.

• Busca el módulo Pestañas y haz clic en él para cargarlo.
  La biblioteca de módulos también se puede buscar. Escribe el nombre del módulo en la barra de búsqueda en la parte superior.

Todas las opciones del módulo de pestañas de Divi explicadas

Una vez agregado, la configuración del módulo se abrirá automáticamente. 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 y Avanzado.

Pestaña de Contenido

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

Pestañas

La primera área en Contenido es donde se encuentran las pestañas individuales. Aquí puedes reorganizar, editar y eliminar pestañas dentro del módulo. Arrastra y suelta cada pestaña para reorganizarlas. Para acceder a la configuración individual de cada pestaña, haz clic en el ícono de engranaje en la pestaña que deseas editar.

Cómo agregar una pestaña

Haz clic en el ícono gris + etiquetado como Agregar nueva pestaña.
Una vez hecho clic, se abrirán las opciones de contenido, diseño y avanzadas para esa pestaña individual.

Texto

• Título – Escribe aquí el título de la pestaña.

• Cuerpo – Escribe aquí el contenido de la pestaña.

Usando el editor estándar de publicaciones de WordPress, puedes agregar texto e imágenes dentro de las pestañas, así como cualquier contenido controlado.

Configuración restante de pestañas individuales

Las configuraciones de Contenido, Diseño y Avanzado de las pestañas individuales también están disponibles a nivel de módulo.

Recomendación: Para mantener la coherencia, recomendamos establecer los estilos de diseño y avanzados a nivel de módulo, de modo que tus cambios afecten a todo el módulo y no solo a una pestaña.

Para volver a la configuración principal del módulo de pestañas, haz clic en la flecha blanca hacia atrás en la parte superior izquierda del módulo.

Enlace

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

• URL del enlace del módulo – Pega aquí la URL del enlace que deseas aplicar al módulo. Esto hace que todo el módulo sea clicable, y al hacer clic, dirigirá a los visitantes a la URL pegada aquí.

• Destino del enlace del módulo – Definir un destino para el enlace determina si el mismo se abre en una nueva pestaña o en la misma ventana.

  • En la misma ventana – si deseas que el enlace se abra en la misma ventana.

  • En una nueva pestaña – si deseas que el enlace se abra en una nueva pestaña.

Fondo

En el grupo de opciones de fondo, se pueden establecer 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 agregar un color de fondo

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

• Haz clic en Agregar color de fondo y elige uno de la paleta de colores de tu sitio, o usa el ícono del cuentagotas para seleccionar un color nuevo.

Cómo agregar un degradado de fondo

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

• Haz clic en Agregar degradado de fondo.
  Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color desde la paleta de tu sitio o usa el cuentagotas.
  Los puntos de degradado permiten agregar más colores. Haz clic en cualquier parte del control deslizante para añadir un nuevo punto.

Opciones de degradado de fondo:

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

• Dirección del degradado – Cambia la dirección arrastrando el control o ingresando un valor numérico.

• Repetir degradado – Activa esta opción si deseas que el degradado se repita.

• Unidad del degradado – Cambia cómo se calculan los puntos de parada del degradado desde el menú desplegable.

• Colocar el degradado sobre la imagen de fondo – Si hay una imagen de fondo, puedes superponerle el degradado activando esta opción.

Cómo agregar una imagen de fondo

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

• Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una imagen ya cargada o subir una nueva.

Opciones de imagen de fondo:

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

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

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

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

• Fusión de la imagen de fondo – Elige cómo se mezcla la imagen con otras capas del módulo.

Cómo agregar un video de fondo

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

• Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar un video ya cargado 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 WebM. Subir ambos garantiza compatibilidad.

• Ancho del video de fondo – Define el ancho ingresando un valor numérico.

• Altura del video de fondo – Define la altura ingresando un valor numérico.

• Pausar el video cuando otro video se reproduce – Si deseas que el video se pause cuando otro video se reproduce, activa esta opción. Por defecto, el video se pausa cuando no está en vista. Si deseas que continúe, desactiva esta opción.
  

Cómo agregar un patrón de fondo

Haz clic en la quinta pestaña, el ícono de Patrón

Haz clic en Agregar patrón de fondo

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

Opciones de patrón de fondo:

• Color del patrón – Selecciona el color del patrón desde la paleta de colores de tu sitio o utiliza el cuentagotas para encontrar un nuevo color.

• Transformar patrón – Transforma el patrón horizontal o verticalmente, gíralo o inviértelo.

• Tamaño del patrón – Aquí puedes seleccionar el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado.
  Si seleccionas tamaño personalizado, aparecerán las siguientes opciones: ancho y alto del patrón. Usa el control deslizante o escribe 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 los desplazamientos horizontal y vertical del patrón.

• Repetición del patrón – Elige cómo se repite el patrón: horizontal, vertical, etc.

• Modo de fusión del patrón – Define cómo la capa del patrón interactúa con las capas debajo. Elige entre 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 mediante el menú desplegable
   

Opciones de máscara de fondo:

• Color de la máscara – Elige el color de la máscara desde la paleta de tu sitio o usa el cuentagotas.

• Transformar máscara – Transforma la máscara horizontal o verticalmente, gírala o inviértela.

• Relación de aspecto de la máscara – Establece la proporción de ancho a alto de la máscara.

• Tamaño de la máscara – Selecciona 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 siguientes opciones: ancho y alto de la máscara. Usa el control deslizante o escribe un valor numérico.

• Modo de fusión de la máscara – Define cómo interactúa la capa de máscara con las capas inferiores. Elige uno de los 16 modos de fusión.

---

Etiqueta de administrador

La etiqueta de administrador es donde puedes darle al módulo un nombre visible solo para ti, para ayudarte a mantener todo organizado y comprensible en el panel de administración.
Por defecto, la etiqueta de administrador será el nombre del módulo. Puedes cambiar este texto según lo que desees.

---

Pestaña de diseño

En esta pestaña encontrarás todos los estilos de diseño y configuraciones para el Módulo de Pestañas de Divi.

---

Texto del cuerpo

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

• Fuente del cuerpo – Elige la fuente para el texto del cuerpo. Por defecto se selecciona automáticamente, pero puedes elegir otra fuente o subir una fuente personalizada.

• Peso de la fuente del cuerpo – Selecciona el grosor del texto.

• Estilo de la fuente del cuerpo – Elige el estilo del texto:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto del cuerpo – Define cómo se alinea el texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto del cuerpo – Selecciona un color desde la paleta del sitio o con el cuentagotas.

• Tamaño del texto del cuerpo – Usa el control deslizante o escribe un número.

• Espaciado entre letras del cuerpo – Define el espacio entre letras.

• Altura de línea del cuerpo – Define la altura entre líneas.

• Sombra de texto del cuerpo – Agrega sombra al texto. Configura dirección (horizontal/vertical), desenfoque y color.

---

Texto de las pestañas

Estas son las configuraciones para el estilo del texto en las pestañas:

• Color de fondo de pestaña activa – Selecciona el color de fondo de la pestaña que está activa.

• Color de fondo de pestaña inactiva – Selecciona el color de fondo de las pestañas inactivas.

• Color del texto de la pestaña activa – Elige el color del texto de la pestaña activa.

• Color del texto de pestaña – Elige el color del texto en general para todas las pestañas.

• Fuente de la pestaña – Elige la fuente del texto de las pestañas.

• Peso de la fuente de pestaña – Selecciona el grosor del texto.

• Estilo de fuente de pestaña – Elige entre:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto de pestaña – Elige la alineación:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Tamaño del texto de pestaña – Usa el control deslizante o introduce un valor.

• Espaciado entre letras de pestaña – Ajusta el espaciado entre letras.

• Altura de línea del texto de pestaña – Ajusta la altura entre líneas.

• Sombra de texto de pestaña – Agrega sombra al texto de la pestaña con opciones de dirección, intensidad y color.

---

Tamaño

• Ancho – Define el ancho del módulo.

• Ancho máximo – Define el ancho máximo permitido.

• Alineación del módulo – Si se establece 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 exacta del módulo.

• Altura máxima – Define la altura máxima que puede tener el módulo.

---

Espaciado

Puedes agregar márgenes o relleno al módulo introduciendo valores numéricos.

• Margen agrega espacio fuera del módulo.

• Relleno agrega espacio dentro del módulo.

Para mantener proporciones iguales, haz clic en el ícono de cadena entre valores.
Los valores predeterminados para margen y relleno son 0.

---

Borde

Agrega un borde al módulo. Puedes aplicar un borde completo o solo a un lado. Ajusta el ancho con el control deslizante y selecciona color y estilo.

• Esquinas redondeadas – Escribe un valor numérico. Cuanto mayor sea el número, más redondas serán las esquinas. Puedes vincular o desvincular los valores para personalizar cada esquina.

• Estilos de borde – Aplica borde a todos los lados o a lados individuales (superior, derecho, inferior, izquierdo).

• Ancho del borde – Define el grosor. Debe ser al menos de 1px para que sea visible.

• Color del borde – Selecciona un color desde la paleta o con el cuentagotas.

• Estilo de borde – Elige entre: sólido, discontinuo, punteado, doble, ranura, cresta, inserción, salida o ninguno.

---

Sombra de caja

Agrega una sombra a todo el módulo. Una vez seleccionada, puedes personalizar:

• Posición horizontal – Define la posición de la sombra en el eje horizontal.

• Posición vertical – Define la posición en el eje vertical.

• Desenfoque – Ajusta la intensidad del desenfoque.

• Expansión de la sombra – Aumenta o reduce la densidad de la sombra.

• Color de la sombra – Selecciona el color de la sombra.

• Posición de la sombra – Define si está dentro o fuera del módulo.

---

Filtros

Ajusta los filtros del módulo:

• Tono – Define el ángulo del tono de color.

• Saturación – Define la intensidad del color.

• Brillo – Define la claridad del color.

• Contraste – Ajusta la diferencia entre zonas claras y oscuras.

• Invertir – Invierte los valores de tono, saturación y brillo.

• Sepia – Aplica un tono cálido amarillento/marrón.

• Opacidad – Define la transparencia del fondo.

• Desenfoque – Aplica desenfoque gaussiano al módulo.

Modo de fusión – Define cómo el módulo se mezcla con las capas debajo. Por defecto, es "normal".

---

Transformar

Opciones de transformación del módulo:

• Escalar

• Trasladar

• Rotar

• Inclinar

• Punto de origen

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de eslabón de cadena en la parte inferior derecha.

Configuración de transformación del Módulo de Pestañas de Divi

Animación

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

• Duración de la animación – Define la duración que tarda una animación en completar un ciclo.

• Retardo de la animación – Define la cantidad de tiempo que se debe esperar desde que se aplica la animación a un elemento hasta que comienza a ejecutarse. La animación puede comenzar más tarde, inmediatamente desde el inicio o inmediatamente desde un punto intermedio.

• Opacidad inicial de la animación – Define el valor de opacidad con el que comenzará la animación.

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

• Repetición de la animación – Por defecto, las animaciones se reproducen una sola vez. Si deseas que la animación se repita continuamente, elige la opción Repetir en bucle aquí.

Pestaña Avanzado

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

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes aplicar clases CSS personalizadas e identificadores (ID) al módulo, lo que permite personalizar los estilos con propiedades CSS más avanzadas o aplicar código CSS personalizado usando la clase del módulo.

---

---

ID y clases CSS

Asigna un ID CSS específico o una Clase CSS a este módulo. Esto es útil al aplicar CSS personalizado a un módulo desde la hoja de estilos de tu tema hijo.

---

CSS personalizado

• CSS libre – Escribe CSS libremente usando la palabra clave selector para dirigirte a este módulo.
  Ejemplo: selector h1 {color: red;}

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

---

Condiciones

Las condiciones de visualización te permiten elegir cuándo mostrar este módulo en función de un conjunto de condiciones, como por ejemplo:

• si el usuario está visitando la página,

• si ya ha comprado en tu empresa,

• qué navegador está usando,

• qué sistema operativo utiliza,
  entre otras.

Puedes añadir una condición o varias condiciones.

---

---

Visibilidad

• Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) en teléfonos, tabletas o computadoras de escritorio marcando la casilla correspondiente.

• Desbordamiento horizontal – Define lo que se muestra cuando el contenido se desborda horizontalmente:

  • Visible – El contenido se muestra aunque se desborde.

  • Desplazar – Se agrega una barra de desplazamiento horizontal para ver el contenido.

  • Oculto – Se oculta el contenido que se desborda horizontalmente.

  • Automático – El navegador decide si mostrar o no la barra de desplazamiento.

• Desbordamiento vertical – Define lo que se muestra cuando el contenido se desborda verticalmente:

  • Visible – El contenido se muestra aunque se desborde.

  • Desplazar – Se agrega una barra de desplazamiento vertical.

  • Oculto – El contenido que se desborda verticalmente se oculta.

  • Automático – El navegador decide si mostrar o no la barra de desplazamiento.

---

---

Transiciones

Controla la duración, retardo y curva de velocidad de la animación al pasar el cursor (hover).

• Duración de la transición – Define la duración de la transición en milisegundos.

• Retardo de la transición – Define cuánto tiempo tarda en comenzar la animación.

• Curva de velocidad de la transición – Define cómo se comporta la velocidad de la animación (lineal, aceleración, etc.).

---

---

Posición

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

  • Relativa (valor predeterminado) – El módulo se posiciona siguiendo el flujo normal del documento y se ajusta según los valores de desplazamiento vertical y horizontal. No afecta a otros elementos, y el espacio reservado en el diseño de la página es el mismo que si tuviera posición estática.

  • Absoluta – El módulo se elimina del flujo normal del documento. No ocupa espacio en el diseño y se posiciona con respecto al contenedor más cercano con posición definida o al bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

  • Fija – El módulo también se elimina del flujo del documento y se posiciona en relación con la ventana del navegador. Esto permite crear módulos que se mantengan visibles al hacer scroll (pegajosos o "sticky").

• Desplazamiento vertical – Define la posición vertical del módulo.

• Desplazamiento horizontal – Define la posición horizontal del módulo.

• Índice Z (Z-index) – Define el orden del módulo en la superposición de la página. Los módulos con un número más alto se muestran por encima de los de menor valor.

---

---

Efectos de desplazamiento

Esta sección define el comportamiento del módulo cuando el usuario se desplaza por la página.

• Puedes hacer que el módulo permanezca visible (pegajoso) en la parte superior, inferior o en ambas.

• También puedes decidir si el módulo debe transformarse mientras el usuario se desplaza.

Además, puedes habilitar el movimiento vertical, lo que permite ajustar la velocidad de desplazamiento del elemento sin afectar a los demás.

La opción Activador de efecto de movimiento permite elegir cuándo se activa el efecto de desplazamiento:
cuando la parte superior, media o inferior del módulo está visible.

---

---

Guardar tu diseño

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

---

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.

• O usar la barra de herramientas de Divi en la parte inferior haciendo clic en el ícono morado con tres puntos (…) para expandir la barra, y luego hacer clic en el botón verde de Guardar en la parte inferior derecha.

---

Salir del Constructor Visual

Una vez que todos los cambios están guardados, haz clic en Salir del Constructor Visual en la barra de administración superior para salir del entorno de edición.

---

Recursos del Módulo de Pestañas de Divi

Cómo estructurar tus preguntas frecuentes (FAQ) con pestañas personalizadas en Divi