Una visión general de las secciones de Divi

Las secciones son los bloques de construcción más grandes del constructor Divi y se pueden utilizar de varias maneras. Existen 3 tipos distintos de secciones:

• Sección Regular

• Sección de Ancho Completo

• Sección Especializada

Puedes pensar en ellas como bloques horizontales apilables que agrupan tu contenido en áreas visualmente distinguibles.

Todo en Divi comienza con una sección

Este contenedor de contenido tiene varias configuraciones que te permiten hacer cosas sorprendentes.

Sección Regular

Este es el tipo de sección más utilizado en casi cualquier diseño de página en Divi. Permite el uso de diseños basados en columnas.

Sección de Ancho Completo

A diferencia de las secciones regulares, este tipo de sección no utiliza filas ni columnas, ya que los módulos que contiene siempre ocupan el 100% del ancho de la pantalla.

Los módulos de ancho completo son ideales para agregar pausas visuales en la página, como:

• Módulo de Código de Ancho Completo

• Módulo de Encabezado de Ancho Completo

• Módulo de Imagen de Ancho Completo

• Módulo de Portafolio de Ancho Completo

• Módulo de Deslizador de Publicaciones de Ancho Completo

• Módulo de Título de Publicación de Ancho Completo

• Módulo de Deslizador de Ancho Completo

Secciones Especializadas

Estas secciones fueron creadas para permitir estructuras de columnas más avanzadas. A diferencia de las secciones normales, las secciones especializadas te permiten agregar variaciones complejas de columnas junto con barras laterales verticales de ancho completo sin cortes no deseados en el diseño.

Estas estructuras no son posibles usando secciones normales.

Al agregar una sección especializada, notarás que una parte tiene el botón Agregar Módulo y otra el botón Insertar Fila.

• El área de Insertar Módulo representa la barra lateral vertical. Puedes añadir múltiples módulos en una sola fila, y estos ocuparán todo el alto de la sección, al lado de la estructura de columnas que agregues.

• Al hacer clic en Insertar Fila, podrás añadir filas a la izquierda o derecha de tu barra lateral. Es como agregar filas dentro de otras filas.
  

Cómo agregar una sección a tu página

1. 1- Desde el panel de WordPress ve a: Páginas → Todas las páginas y edita o crea una nueva página.
   
2. 2- Si:
   
3. La página ya tiene el Divi Builder activado, haz clic en Editar con Divi.
   

1. No tiene el Divi Builder activado, ábrela con el editor predeterminado de WordPress y haz clic en Usar el Constructor Divi.3 - Una vez en el Constructor Visual, haz clic en el botón azul + para agregar una nueva sección.  Aparecerá un cuadro emergente que te permitirá elegir entre los tres tipos de secciones de Divi. 
2.  Estándar (color azul)   
   
3. Sección Especializada (color rojo 
   
4.  Sección de Ancho Completo (color púrpura)
   

Opciones de configuración de la sección

Una vez agregada la sección, verás una lista de opciones organizadas en tres pestañas principales:

• Contenido

• Diseño

• Avanzado

Pestaña de Contenido

Aquí encuentras los elementos relacionados al contenido de la sección. Para las secciones, esta pestaña incluye:

• Enlace

• Fondo

• Etiqueta de Administración
  

• 
  

Enlace

• URL del enlace de la sección: define un enlace al cual redirigirá la sección al hacer clic.

• Destino del enlace de la sección:

  • En la misma ventana: abre el enlace en la misma pestaña.

  • En una nueva pestaña: abre el enlace en una pestaña nueva del navegador.
    

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 (ícono de balde de pintura).

2. Haz clic en Agregar color de fondo y elige un color desde 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 (í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.

• Haz clic en cualquier parte del control deslizante para añadir más puntos de color.

Opciones de degradado de fondo:

• Tipo de degradado: Selecciónalo desde el menú desplegable.

• Dirección del degradado: Ajusta el ángulo con el control deslizante o escribiendo 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 del degradado.

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

Cómo agregar una imagen de fondo

1. Haz clic en la tercera pestaña (ícono de imagen).

2. Haz clic en el signo + gris para abrir la Biblioteca de Medios, donde puedes subir una imagen nueva o elegir una existente.

Opciones de imagen de fondo:

• Usar efecto de parallax: Activa esta opción para aplicar un efecto de desplazamiento (parallax) que da un efecto 3D.

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

• Posición de la imagen de fondo: Define la posición desde el menú desplegable.

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

• Fusión de la imagen de fondo: Determina cómo se mezcla la imagen con otras capas.
  

Cómo agregar un video de fondo

1. Haz clic en la cuarta pestaña (ícono de video).

2. Haz clic en el icono gris + para abrir la Biblioteca de Medios y seleccionar o subir un video.

Opciones de video de fondo:

• MP4 vs WebM: Se recomienda subir ambas versiones, ya que no todos los navegadores soportan WebM. Esto garantiza compatibilidad total.

• Ancho del video: Ingresa un valor numérico para definir el ancho.

• Alto del video: Ingresa un valor numérico para definir la altura.

• Pausar video cuando otro se reproduce: Activa esta opción si deseas que el video de fondo se detenga cuando otro video empiece a reproducirse. Por defecto, el video se pausa si no está a la vista, pero puedes desactivar esto.

Cómo agregar un patrón de fondo

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

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

3. Elige el tipo de patrón que desees desde el menú desplegable.

Opciones de patrón de fondo:

• Color del patrón: Selecciona el color desde la paleta del sitio o usa el cuentagotas.

• Transformación del patrón: Puedes moverlo horizontal o verticalmente, rotarlo o invertirlo.

• Tamaño del patrón: Elige entre: tamaño real, cubrir, ajustar, estirar o tamaño personalizado.

  • Si eliges tamaño personalizado, aparecerán opciones de ancho y alto del patrón, que puedes ajustar con el control deslizante o un valor numérico.

• Origen de repetición del patrón: Define desde dónde se repetirá el patrón.

• Desplazamiento horizontal y vertical: Ajusta la posición del patrón.

• Repetición del patrón: Elige cómo se repetirá (horizontal, vertical, ambas, etc.).

• Modo de fusión del patrón: Define cómo se mezcla con otras capas. Hay 16 modos de fusión disponibles.
  

Cómo agregar una máscara de fondo

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

2. Haz clic en Agregar máscara de fondo y selecciona el tipo desde el menú desplegable.

Opciones de máscara de fondo:

• Color de la máscara: Selecciona desde la paleta del sitio o usa el cuentagotas.

• Transformación de la máscara: Mueve, rota o invierte la máscara.

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

• Tamaño de la máscara: Elige entre: tamaño real, cubrir, ajustar, estirar o tamaño personalizado.

  • Si eliges personalizado, puedes definir el ancho y alto manualmente.

• Modo de fusión de la máscara: Define cómo se mezcla la máscara con otras capas. Hay 16 modos disponibles.
  

Etiqueta de administración (Admin Label)

En esta sección puedes agregar una etiqueta interna que aparecerá en el editor de Divi en vista de esquema (Wireframe) o en vista de capas (Layers)

Esto es especialmente útil para organizar y reconocer secciones cuando trabajas con diseños complejos.

Pestaña de Diseño 

Aquí encontrarás todas las opciones de estilo para la sección, incluyendo:

• Divisores

• Tamaño

• Espaciado

• Borde

• Sombra

• Filtros

• Transformaciones

• Animación
  

La pestaña Diseño es donde se encuentran todas las opciones principales de estilo. Cada sección tiene una extensa lista de configuraciones de diseño que puedes usar para modificar prácticamente cualquier aspecto visual.

Diseño

• Mostrar sombra interior: Si se activa, añade una sombra interna a la sección.

Divisores

Permite crear y personalizar divisores en la parte superior e inferior de la sección.

Opciones de divisores:

• Estilo del divisor: 26 estilos disponibles.

• Color del divisor: Color del fondo del divisor.

• Altura del divisor: Define su altura.

• Repetición horizontal: Con qué frecuencia se repite verticalmente.

• Voltear divisor: Cambia la orientación horizontal o vertical.

• Disposición del divisor: Define si el divisor aparece encima o debajo del contenido de la sección.

Tamaño

Este grupo define el ancho y alto de la sección. Puedes establecer valores mínimos, máximos o personalizados.

Opciones de tamaño:

• Ancho: Por defecto, la sección ocupa todo el ancho del navegador.

• Ancho máximo: Limita el ancho de la sección.

• Altura mínima: Define el alto mínimo de la sección.

• Altura: Define el alto exacto.

• Altura máxima: Limita el alto máximo que puede tener la sección.

• Alineación de la sección:

  • Izquierda (predeterminado)
    
  • Centrada
    
  • Derecha
    

Espaciado

Puedes agregar márgenes o espaciado interno (padding) escribiendo valores numéricos.

• Margen: Agrega espacio fuera de la sección.

• Relleno (Padding): Agrega espacio dentro de la sección.

Para mantener proporciones iguales (por ejemplo, arriba y abajo), haz clic en el ícono de cadena entre los valores. Si está activado, los valores se mantendrán sincronizados.

Valores predeterminados de una Sección regular:

• Margen: 0 px

• Padding superior: 54 px

• Padding inferior: 54 px

• Padding izquierdo y derecho: 0 px

Borde

Permite agregar un borde completo o solo en un lado de la sección. Puedes ajustar el ancho con un control deslizante, seleccionar el color y elegir un estilo de borde desde un menú desplegable.

Opciones de borde:

• Esquinas redondeadas: Introduce un valor numérico. A mayor valor, más redondeadas serán las esquinas.

  • Las esquinas están vinculadas por defecto (ícono de cadena azul activado). Si deseas valores distintos por esquina, haz clic para desvincular.

• Estilo de borde: Elige entre aplicar borde en todos los lados o individualmente (arriba, derecha, abajo, izquierda).

• Ancho del borde: Establece el grosor del borde. El valor debe ser al menos 1 px para que sea visible.

• Color del borde: Selecciona un color desde la paleta o usa el cuentagotas.

• Tipo de borde: Puedes elegir entre:

  • Sólido,

  • Discontinuo (dashed),

  • Punteado (dotted),

  • Doble,

  • Surco (groove),

  • Cresta (ridge),

  • Interior (inset),

  • Exterior (outset)

  • o ninguno.

Sombra de caja 

Puedes agregar una sombra proyectada a toda la sección. Al seleccionar un estilo de sombra, puedes personalizar lo siguiente:

Opciones de sombra de caja:

• Posición horizontal: Ajusta qué tanto se desplaza la sombra hacia los lados.

• Posición vertical: Ajusta qué tanto se desplaza la sombra hacia arriba o abajo.

• Intensidad del desenfoque: A mayor valor, más difusa y amplia será la sombra.

• Intensidad de propagación: Aumenta la densidad de la sombra.

• Color de la sombra: Define el color.

• Posición de la sombra: Define si la sombra está dentro o fuera de la sección.

Filtros

Aquí puedes aplicar efectos visuales al contenido de la sección.

Opciones de filtro:

• Matiz (Hue): Cambia el ángulo de color.

• Saturación: Ajusta la intensidad del color.

• Brillo: Aumenta o reduce la luminosidad.

• Contraste: Aumenta o reduce la diferencia entre áreas claras y oscuras.

• Invertir: Invierte los colores de la sección.

• Sepia: Aplica un tono cálido marrón/amarillo.

• Opacidad: Controla la transparencia de la sección.

• Desenfoque (Blur): Aplica un desenfoque de tipo gaussiano.

• Modo de fusión (Blend Mode): Define cómo se mezcla la sección con las capas debajo. Por defecto está en normal.
  

Nota: Cualquiera de los filtros mencionados anteriormente también afectará a los elementos internos de la sección, como filas, columnas y módulos.

Transformaciones (Transform)

Opciones disponibles:

• Escalar (Scale)

• Trasladar (Translate)

• Rotar (Rotate)

• Inclinar (Skew)

• Puntos de origen (Origin Points)

Puedes cambiar entre las opciones usando las pestañas. Ajusta cada una ingresando valores numéricos o arrastrando/expandiendo el cuadro o círculo correspondiente.

Para mantener los valores iguales entre ejes (por ejemplo, X e Y), haz clic en el ícono de cadena en la esquina inferior derecha.

Animación

Puedes aplicar una animación a la sección. Al elegir un estilo, se pueden configurar las siguientes opciones:

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

• Retraso de la animación: Define cuánto tiempo espera antes de iniciar.

• Opacidad inicial de la animación: Define con qué opacidad comienza.

• Curva de velocidad de animación: Define cómo se acelera/desacelera (lineal, facilidad de entrada/salida, etc.).

• Repetición de la animación: Por defecto, se reproduce una vez. Si deseas que se repita, activa la opción de bucle (Loop).

Pestaña Avanzado (Advanced Tab)

Diseñada para usuarios avanzados. Incluye opciones como:

• ID y Clases CSS

• CSS Personalizado

• Condiciones de visualización

• Visibilidad

• Transiciones

• Posición

ID y Clases CSS

Puedes asignar un ID o una clase CSS específica a la sección. Esto es útil para aplicar CSS personalizado desde la hoja de estilos de tu tema hijo o mediante código adicional.

CSS Personalizado

• CSS libre (Free-Form CSS): Puedes escribir código CSS directamente, por ejemplo:
  selector h1 { color: red; }

• Elementos del módulo: Puedes aplicar estilos CSS personalizados a partes específicas de la sección desde pestañas individuales dentro del módulo.

Condiciones

Aquí defines cuándo se mostrará la sección, con base en reglas condicionales como:

• Si el visitante ya ha comprado antes

• Qué navegador u OS está usando

• Si está en una página específica, etc.

Puedes aplicar una o varias condiciones.

Visibilidad

Desactivar en dispositivos:

• Teléfonos

• Tablets

• Escritorio

Solo marca la casilla correspondiente.

Desbordamiento horizontal (Horizontal Overflow):

Define qué sucede si el contenido excede el ancho de la sección:

• Visible

• Desplazamiento (Scroll)

• Oculto (Hidden)

• Auto (el navegador decide)

Desbordamiento Vertical (Vertical Overflow)

Define qué sucede cuando el contenido excede la altura del elemento de bloque (es decir, cuando el contenido se sale por arriba o abajo de la sección). Las opciones son:

• Visible: El contenido que se desborda se mostrará normalmente, aunque sobrepase la altura definida de la sección.

• Scroll (Desplazamiento): Si el contenido excede la altura, aparecerá una barra de desplazamiento vertical para que el usuario pueda desplazarse y ver el contenido oculto.

• Hidden (Oculto): El contenido que se salga de la altura de la sección quedará oculto y no será visible.

• Auto: El navegador decidirá si debe mostrar una barra de desplazamiento o no, según el contexto.

Transiciones

Controla la animación de efectos hover.

• Duración de transición: Tiempo que dura la transición.

• Retraso de transición: Tiempo que espera antes de iniciar.

• Curva de velocidad de transición: Método de aceleración/desaceleración de la animación.

Posición

Tipos de posición:

• Relativa (valor por defecto): Sigue el flujo normal del documento.

• Absoluta: Se posiciona fuera del flujo y se ubica respecto al contenedor más cercano posicionado.

• Fija (Fixed): Se fija respecto a la ventana del navegador (útil para secciones flotantes o sticky).

Opciones adicionales:

• Desplazamiento vertical y horizontal: Ajusta la posición respecto al eje X o Y.

• Z-index: Determina qué sección aparece encima o debajo en el orden visual (valores más altos = más arriba).

Efectos de Desplazamiento (Scroll Effects)

Esta sección define el comportamiento de la sección cuando el usuario desplaza la página. Puedes hacer que la sección se quede fija (sticky) en la parte superior, inferior o en ambas, y decidir si la sección debe transformarse a medida que el usuario hace scroll.

Además, puedes habilitar el movimiento vertical en esta sección, lo que te permite ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos que lo rodean.

La función Motion Trigger Effect (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 de la sección esté visible en pantalla.