Las secciones son los bloques más grandes del constructor de Divi. Puede considerarlas como bloques horizontales apilables, los cuales se usan para agrupar el contenido dentro de áreas que se distinguen visualmente. En Divi, todo lo que construya debe comenzar en una sección. Este “envoltorio de contenido” tiene varios ajustes que se pueden configurar para lograr asombrosos resultados.

Antes de poder añadir un módulo de sección a una página, deberá activar el constructor de Divi. Luego de haber instalado el tema Divi en su sitio, notará un botón Usar el constructor de Divi en la parte superior del editor de la entrada al crear una nueva página. Si hace clic en este botón, se activará el constructor de Divi, el cual le dará acceso a todos los módulos disponibles. Haga clic en el botón Usar el constructor visual para activar el constructor en modo visual. También puede hacer clic en el botón Activar constructor visual al momento de visitar las páginas de su sitio luego de iniciar sesión en WordPress.

Una vez activado el constructor visual, podrá hacer clic en el botón del signo + azul para añadir una nueva sección a la página. Se abrirá una ventana emergente que le permitirá agregar cualquiera de los tres tipos de secciones de Divi: Estándar, Especial y Ancho completo.

Después de añadir la sección, se le pedirá insertar una estructura de columnas para la primera fila que estará contenida en esa sección, si insertó una sección Estándar o Especial. Si insertó una sección de Ancho completo, podrá insertar directamente los módulos propios de ese tipo de sección (para más información, vea Usar secciones de ancho completo).

Una vez seleccionada la estructura de columnas, estará listo para insertar módulos.

Al hacer clic en el botón Ajustes de sección, verá la lista de opciones de la sección; estas secciones están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Opciones de contenido

Dentro de la pestaña Contenido encontrará todos los elementos de contenido de la sección. Para las secciones estos elementos de contenido están limitados al enlace y al fondo.

Enlace

• URL del enlace de la sección – Escriba una URL válida en este campo para convertir la sección entera en un enlace. No se creará un enlace si se deja el campo en blanco y la imagen permanecerá como un elemento estático.
• Destino del enlace de la sección – Elija si el enlace se abre en la misma ventana o no.

Fondo

• Color – Si tan solo desea usar un color plano como fondo de la fila, use el selector de color para definir uno.
• Degradado – Puede usar para el fondo de la fila un degradado de dos colores con esta herramienta, y definir el tipo de degradado (lineal o radial), la dirección de degradado (en grados), la posición inicial y posición final (en porcentajes).
• Imagen – Si es definida, esta imagen se usará como fondo para la fila. Para quitar la imagen de fondo, simplemente borre la URL del campo de configuración. Si usa una imagen, podrá activar el efecto Parallax, con el cual la imagen de fondo permanecerá fija al desplazar la página, creando un asombroso efecto visual. También podrá definir el método usado para el efecto Parallax (CSS o True Parallax). Podrá, además, seleccionar el tamaño de imagen de fondo (Cubrir, Ajustar o Tamaño real), la posición (Superior izquierda, Superior centrada, Superior derecha, Centrada a la izquierda, Centrada, Centrada a la derecha, Inferior izquierda, Inferior centrada e Inferior derecha), el tipo de repetición (No repetir, Repetir, Repetir X horizontal, Repetir Y vertical, Espacio y Redondo) y el estilo de mezcla (Normal, Multiplicar, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Luminosidad y Color).
• Vídeo – Todos los vídeos deben ser subidos en formato .MP4 o .WEBM para asegurarse máxima compatibilidad con todos los navegadores. Suba la versión .MP4 en la opción Vídeo MP4 de fondo y la versión .WEBM en la opción Vídeo WEBM de fondo.
  Después de subir el vídeo, debe asignarle un ancho en la opción Ancho del vídeo de fondo. Debe ser igual al ancho real del vídeo, de lo contrario la posición del fondo será incorrecta. También debe asignarle una altura en la opción Altura del vídeo de fondo. Debe ser igual a la altura real del vídeo, de lo contrario la posición del fondo será incorrecta.
  Pausar vídeo cuando se reproduce otro – Permita que el vídeo sea pausado por otros reproductores cuando comiencen a reproducir.
  Pausar vídeo cuando no está a la vista – Si desea pausar el vídeo al hacer clic, seleccione esta opción.

Nota importante: Los vídeos de fondo se desactivan en dispositivos móviles. En su lugar, se utiliza una imagen de fondo. Por esta razón, debería definir ambos fondos, imagen y vídeo, para asegurarse mejores resultados. Nota importante: para que el formato de vídeo MP4 funcione en todos los navegadores, su servidor debe tener designados los tipos MIME correctos. Puede aprender más sobre cómo usar el archivo .htaccess para definir los tipos MIME aquí. Si nota que sus vídeos no se reproducen en ciertos navegadores, es probable que esta sea la razón.

Etiqueta de administración

La etiqueta de administración le permite cambiar el nombre para identificar la sección más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque de la sección en la interfaz del constructor.

Sistema de ayuda de Divi

Dentro de cada pestaña de los ajustes de las secciones, a continuación de las opciones, se incluye un enlace al sistema de ayuda de Divi, que incluye más de 70 vídeos completos con instrucciones de configuración y uso del constructor. Este sistema único les da a usted y a sus clientes la ayuda que necesiten, permitiéndoles aprender al mismo tiempo que crean sus sitios.

Los vídeos individuales de cada lista de reproducción se pueden abrir en una ventana emergente, fuera del cuadro de ayuda, lo cual le permite redimensionar o mover la interfaz del vídeo por toda la pantalla para que encuentre la mejor ubicación. El vídeo permanece abierto y anclado a su posición mientras usted explora el constructor, siguiendo el tutorial y construyendo la página. Puede visitar uno por uno los vídeos de la lista, cerrar el vídeo y volver a la lista de reproducción en cualquier momento. Los vídeos solo están disponibles en inglés.

Opciones de diseño

Dentro de la pestaña Diseño encontrará todas las opciones de estilo de la sección, tales como el tamaño y el espaciado. Esta es la pestaña que usará para cambiar la apariencia de la sección. Cada tipo de sección de Divi tiene una larga lista de ajustes de diseño que puede usar para cambiar casi todo.

Diseño

• Mostrar sombra interior – Aquí puede seleccionar si la sección mostrará una sombra interior o no. Esto puede lucir mejor si usa colores o imágenes de fondo.

Separadores

• Separadores – Aquí podrá seleccionar los estilos de la separación de la sección, tanto superior como inferior de manera independiente.
• Estilo del separador – Seleccione la forma del separador que desee usar. Las formas están representadas visualmente dentro de la lista.
• Color del separador – Elija un color para usar en el separador de sección. De manera predeterminada, tomará el color de la sección por encima o por debajo de esta sección para asegurar una transición natural.
• Altura del separador – Aumente o disminuya la altura de la forma del separador.
• Repetición horizontal del separador – Aumente o disminuya la altura de la forma del separador.
• Voltear separador – Voltee el separador horizontal o verticalmente para cambiar la forma y su dirección.
• Disposición del separador – Los separadores se pueden colocar por encima o por debajo del contenido de la sección. Si se coloca arriba del contenido de la sección, los módulos y filas dentro de la sección se ocultarán detrás del separador cuando se solapen.

Tamaño

• Ancho – De manera predeterminada, los elementos se ampliarán al ancho completo de su elemento contenedor. Si desea establecer un ancho estático personalizado, puede hacerlo con esta opción.
• Ancho máximo – Si se establece un ancho máximo, se evitará que el elemento sobrepase el valor de ancho definido. El ancho máximo se puede usar en combinación con el ajuste estándar de ancho. El ancho máximo reemplaza el valor de ancho normal.
• Alineación de sección – Aquí puede elegir la posición de la seccióno en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
• Altura mínima – Cuando se establece una altura mínima, el elemento siempre tendrá una altura de al menos la cantidad definida. Esto reemplaza los valores de altura estática más pequeños. A diferencia de la altura, la altura mínima no da como resultado un desbordamiento de contenido y permitirá que la altura del elemento permanezca dinámica.
• Altura – Esto establece un valor de altura estática para el elemento. Una vez establecida, la altura del elemento ya no será determinada por su contenido interno. El contenido que supere la altura estática del elemento desbordará el contenedor del elemento.
• Altura máxima – Si se establece una altura máxima, se evitará que el elemento sobrepase el valor de altura definido. A medida que el contenido del módulo aumenta y supera la altura máxima, desbordará el contenedor del elemento.

Espaciado

• Margen – Aquí puede ajustar el margen a valores específicos, o dejar en blanco para usar el margen predeterminado.
• Relleno – Aquí puede ajustar el relleno a valores específicos, o dejar en blanco para usar el relleno predeterminado.

Borde

• Esquinas redondeadas – Aquí puede controlar el radio de la esquina de la sección. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
• Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
• Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
• Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
• Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.

Sombra

• Sombra – Use estos ajustes para añadir una sombra en la sección. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).

Filtros

• Filtros – Seleccione aquí el tipo de filtro para aplicar a la sección: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.

Transformación

• Transformación – Con estos controles puede realizar ajustes visuales mediante una combinación de configuraciones de escala, traslación, rotación, sesgo y origen. Esto le permite crear efectos de diseño avanzados sin necesidad de un programa de diseño gráfico independiente.

Animación

• Estilo de la animación – Elija un estilo de animación para activar las animaciones en la sección. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
• Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
• Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
• Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
• Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
• Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
• Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salida de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.
• Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.

Opciones avanzadas

Dentro de la pestaña Avanzado encontrará opciones que podrían ser útiles para diseñadores web más experimentados, tales como los atributos CSS y HTML. Aquí puede aplicar código CSS personalizado a la sección, y también puede aplicar clases CSS e ID personalizadas, las cuales pueden ser usadas para personalizar la sección dentro de la hoja de estilos del tema hijo.

Clases & ID CSS

• ID CSS – Escriba una ID CSS opcional para usar en esta fila. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
• Clase CSS – Escriba una o varias clases CSS opcionales para usar en esta fila. Una clase CSS puede ser usada para aplicar estilos.

CSS personalizado

• Antes – Introduzca aquí el código CSS para aplicar antes (::before) del div de la fila principal.
• Elemento principal – Introduzca aquí el código CSS para aplicar al div de la fila principal.
• Después – Introduzca aquí el código CSS para aplicar después (::after) del div de la fila principal.

Visibilidad

• Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá la sección. Puede elegir desactivarla de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar filas distintas para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertas filas de la página.
• Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido
• Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.
• z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.

Transiciones

• Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.
• Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.
• Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.

Usar secciones de ancho completo

Las secciones de ancho completo le dan acceso a un nuevo conjunto de módulos de ancho completo. Estos módulos se comportan de manera un tanto diferente, ya que sacan ventaja del ancho completo del navegador. Los módulos de ancho completo solo pueden colocarse dentro de secciones de ancho completo.

Una vez que agregue a la página una nueva sección de ancho completo, podrá insertar un módulo de ancho completo directamente. A diferencia de las secciones normales, no existe el concepto de filas o columnas aquí, ya que los módulos de ancho completo siempre van a tomar el 100% del ancho de la pantalla. Los módulos de ancho completo representan una buena manera de añadir un corte visual en una página.

Un buen ejemplo de módulo de ancho completo es el carrusel. Este carrusel de ancho completo funciona igual que el carrusel estándar, solo que se expande al 100% del ancho del navegador. Mostrar un carrusel a semejante escala puede resultar deslumbrante: solo vea nuestra demostración de Divi para apreciar un ejemplo.

Usar secciones especiales

Las secciones especiales le brindan niveles adicionales de división vertical, los cuales permiten insertar columnas dentro de columnas. Estas secciones son útiles para crear diseños dinámicos con barras laterales.

A diferencia de las secciones normales, cuando use una sección especial, podrá agregar variantes complejas de columnas seguidas de barras laterales extendidas, sin ver rupturas de página no deseadas. Estos tipos de estructura no son posibles en las secciones normales.

Una vez que haya agregado una sección especial a la página, notará que un área tiene la opción Insertar módulo/s, mientras que la otra tiene la opción Añadir fila. El área para insertar módulos representa la barra lateral vertical. Puede agregar aquí todos los módulos que desee, en una sola fila, los cuales rellenarán toda la extensión de la sección, adyacentes a la estructura de columnas que cree en la sección siguiente. Al hacer clic en Añadir fila podrá agregar filas adicionales. Es decir, tiene la posibilidad de agregar filas dentro de filas.

Como resultado, podrá crear la estructura de columnas que desee, y todas lucirán estupendas. A continuación hay un ejemplo de una página creada con las secciones especiales. Como se ve, el diseño es de dos sectores, con una barra lateral y una estructura compleja de columnas contigua.