Cómo agregar, configurar y personalizar el módulo Divi Divider.

El Módulo Divi Divider (Divisor)

El módulo Divider facilita la adición de líneas horizontales en tu diseño web para crear separación. Puedes definir el color del divisor, grosor, ancho y alineación.

---

Ejemplo del Módulo Divi Divider

---

Cómo agregar el módulo Divi Divider a tu página

1. Agrega una nueva página o edita una existente.
   Por defecto, el editor estándar de Gutenberg se carga cuando se crea una nueva publicación 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.

3. La página se recargará con el Constructor Visual Divi.

---

Opciones al recargar la página:

• Construir desde cero

• Elegir un diseño predefinido

• Construir con IA

Construir desde cero:

carga Divi Builder con un diseño en blanco para comenzar tu página desde cero.

Elegir un diseño predefinido:

selecciona entre la amplia biblioteca de diseños Divi predefinidos o diseños que has guardado previamente.

Construir con IA:

crea un diseño completo usando Divi AI, con ayuda de prompts de texto y datos de tu sitio.

---

Cómo añadir el módulo Divi Divider

• Cuando cargas el Constructor Visual, Divi agrega automáticamente una sección.

• 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 Divi.

• Busca el módulo Divider y haz clic para añadirlo.
  También puedes usar la barra de búsqueda para encontrarlo.

---

Todas las opciones del módulo Divi Divider explicadas

Después de añadir el módulo, aparecerán las configuraciones divididas en tres pestañas: Contenido, Diseño y Avanzado.

---

Pestaña Contenido

Aquí encontrarás las opciones de contenido del módulo:

• Visibilidad
  Mostrar divisor - Por defecto está activado. Para ocultarlo, desactiva esta opción.

• Enlace
  Puedes añadir un enlace clickable a todo el módulo.

  • URL del enlace: pega aquí la URL a la que quieres dirigir.

  • Objetivo del enlace: abrir en la misma ventana o en una pestaña nueva.
    

• Fondo
  Aquí puedes configurar:

  • 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

• Selecciona la pestaña del ícono del balde de pintura.

• Haz clic en "Agregar color de fondo" y elige uno de la paleta o usa el cuentagotas para seleccionar otro color.

---

Cómo agregar un degradado de fondo

• Selecciona la pestaña del ícono de degradado.

• Haz clic en "Agregar degradado de fondo".

• Cambia los colores en los puntos del degradado y ajusta la dirección, repetición, unidad y si el degradado aparece encima de la imagen de fondo.

---

Cómo agregar una imagen de fondo

• Selecciona la pestaña del ícono de imagen.

• Haz clic en el ícono gris para abrir la Biblioteca de Medios y selecciona o sube una imagen.

• Puedes activar el efecto Parallax, definir tamaño, posición, repetición y modo de fusión.

---

Cómo agregar un video de fondo

• Selecciona la pestaña del ícono de video.

• Sube archivos mp4 y webm para asegurar compatibilidad.

• Define ancho, alto, y si el video se pausa al reproducirse otro video o cuando no está en vista.

---

Cómo agregar un patrón de fondo

• Selecciona la pestaña del ícono de patrón.

• Haz clic en "Agregar patrón de fondo".

• Selecciona tipo, color, transformación, tamaño, origen de repetición, desplazamientos, repetición y modo de mezcla.

---

Cómo agregar una máscara de fondo

• Selecciona la pestaña del ícono de máscara.

• Haz clic en "Agregar máscara de fondo".

• Elige tipo, color, transformaciones, proporción de aspecto, tamaño y modo de mezcla.

---

Etiqueta de administración

• Asigna un nombre visible solo para ti para organizar y entender mejor el módulo en el backend.

---

Pestaña Diseño

Aquí están todas las opciones de estilo y diseño:

• Línea

  • Color: selecciona un color o usa el cuentagotas.

  • Estilo: sólido, punteado, doble, etc.

  • Posición: arriba, centrado vertical, o abajo.
    

• Tamaño

  • Grosor del divisor: ajusta el grosor con un número o deslizador.

  • Ancho y ancho máximo del módulo.

  • Alineación: izquierda, centro o derecha.

  • Altura mínima, altura y altura máxima.
    

• Espaciado

  • Añade márgenes (espacio externo) o relleno (espacio interno).

  • Puedes bloquear las proporciones para que top y bottom sean iguales, por ejemplo.
    

Borde

1. 
   Agrega un borde al Módulo Divi Divider. Puedes agregar un borde completo o un borde solo a un lado del módulo. Ajusta el ancho con el control deslizante y selecciona un color. Elige un estilo de borde haciendo clic en el menú desplegable.
2. Esquinas Redondeadas – Escribe un valor numérico para redondear las esquinas del borde. Mientras más alto sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve en el ícono de cadena azul resaltado en el medio); sin embargo, si deseas tener valores diferentes para cada esquina, haz clic en la cadena azul para desvincular los valores. Si los valores están vinculados automáticamente, siempre tendrán el mismo valor y se actualizarán automáticamente si se cambia uno.
3. Estilos de Borde – Aquí puedes agregar un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo e izquierda).
4. Ancho del Borde - Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para que se muestre.
5. Color del Borde – Aquí puedes elegir el color del borde. Puedes seleccionar un color de la paleta predeterminada de tu sitio o hacer clic en el ícono del cuentagotas para elegir un nuevo color.
6. Estilo del Borde – Aquí puedes seleccionar el estilo del borde que deseas: sólido, punteado, rayado, doble, ranurado, en relieve, incrustado, sobresaliente o ninguno.

Sombra de Caja

Una vez que seleccionas un estilo de sombra, puedes personalizar las siguientes opciones:

1. Posición Horizontal de la Sombra - Define la posición horizontal de la sombra.
2. Posición Vertical de la Sombra - Define la posición vertical de la sombra.
3. Fuerza de Desenfoque de la Sombra - Define la fuerza del desenfoque de la sombra. Mientras mayor sea el valor, mayor será el desenfoque, y la sombra será más amplia y clara.
4. Fuerza de Extensión de la Sombra - Define la fuerza de expansión del desenfoque. Al aumentar esta fuerza, se incrementa la densidad de la sombra. Mayor densidad resulta en una sombra más intensa.
5. Color de la Sombra - Define el color de la sombra.
6. Posición de la Sombra - Define si la sombra está dentro o fuera del módulo.
7. Configuraciones de Sombra de Caja del Módulo Divi Divider

Filtros

1. Matiz - Define el ángulo del color.
2. Saturación - Define qué tan intensa debe ser la saturación del color.
3. Brillo - Define qué tan brillante deben ser los colores.
4. Contraste - Define cuán distinguibles son las áreas claras y oscuras.
5. Invertir - Invierte el matiz, saturación y brillo por el valor especificado.
6. Sepia - Define una apariencia más cálida, con tonos amarillos/marrones.
7. Opacidad - Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).
8. 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 debajo de él. Por defecto está seleccionado “normal”.

Transformar

1. 
   Escalar
2. Trasladar
3. Rotar
4. Sesgar
5. Puntos de origen

Navega por pestañas para acceder a cada opción. Configura cada opción introduciendo valores numéricos o arrastrando y expandiendo el cuadro o 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

1. Duración de la Animación - Define el tiempo que tarda una animación en completar un ciclo.
2. Retraso de la Animación - Define cuánto tiempo esperar desde que se aplica la animación hasta que comienza a ejecutarse. La animación puede comenzar más tarde, inmediatamente desde el principio o inmediatamente y parte de la animación.
3. Opacidad Inicial de la Animación - Define el valor de opacidad inicial.
4. Curva de Velocidad de la Animación - Define el método de aceleración de la animación. Aplicar easing crea un efecto más suave que una curva de velocidad lineal.
5. Repetición de la Animación - Por defecto, las animaciones solo se reproducen una vez. Si quieres que se repita continuamente, elige la opción Loop (bucle).

Avanzado

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e IDs CSS personalizados al módulo, que pueden usarse para personalizar estilos con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase del módulo.

ID & Clases CSS

Configuraciones de ID y Clases CSS del Módulo Divi Divider

CSS Personalizado

Elementos del Módulo - También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en Elementos del Módulo, verás secciones individuales para añadir propiedades CSS personalizadas.

Condiciones

Puedes añadir una o varias condiciones.

Visibilidad

1. Desactivar en - Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) en vista para Teléfono, Tableta o Escritorio marcando la casilla correspondiente.
2. Desbordamiento Horizontal - Define qué sucede cuando el contenido excede los bordes izquierdo y derecho de un elemento de bloque. Puede ser:
3. Visible - El contenido se muestra si excede la altura del módulo.
4. Scroll - Si el contenido excede la altura, se mostrará una barra de desplazamiento vertical.
5. Oculto - La parte del contenido que exceda la altura será oculta.
6. Auto - El navegador decide si muestra barra de desplazamiento.
7. Desbordamiento Vertical - Define qué sucede cuando el contenido excede los bordes superior e inferior. Puede ser:
8. Visible
9. Scroll
10. Oculto
11. Auto

Transiciones

1. Duración de la Transición - Define la duración (en milisegundos) de la transición de la animación hover.
2. Retraso de la Transición - Define el retraso de la transición (en milisegundos).
3. Curva de Velocidad de la Transición - Define la curva de velocidad de la transición de la animación hover.
4. Configuraciones de Transiciones del Módulo Divi Divider
   

Posición

Posición: Esto 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 al 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 en relación con su ancestro posicionado más cercano (si lo hay) o con el 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 él en el diseño de la página. El módulo se posiciona según las opciones de ubicación en relación con la ventana del navegador. Esto se puede usar para crear un módulo “pegajoso” (sticky).
• Desplazamiento vertical: Define la posición vertical del módulo.
• Desplazamiento horizontal: Define la posición horizontal del módulo.
• Z-index: Define el orden del módulo en el diseño de la página. Los módulos con un número de z-index más alto se superponen a los módulos con un número más bajo.
  

Efectos de Desplazamiento

También puedes habilitar el movimiento vertical, ajustando la velocidad del desplazamiento del elemento sin afectar a los elementos alrededor.

El Efecto de Disparo de Movimiento permite elegir cuándo se activa el efecto: cuando la parte superior, media o inferior del elemento está visible.

Guardar Tu Diseño

Guardar el Diseño de la Página

Salir del Visual Builder

Guardar y Salir del Visual Builder

Continuar Aprendiendo

1. 
   Usar Módulos Divider para Crear Formas de Fondo con las Opciones de Transformación de Divi
2. 10 Formas Divertidas de Usar el Módulo Divider con las Nuevas Opciones de Divi