En Divi, las secciones son los bloques de construcción más grandes. Funcionan como contenedores principales o "cajas" maestras dentro de los cuales se organizan las filas, columnas y módulos de tu página web. Se identifican fácilmente porque están marcadas con el color azul en el constructor.
¿Qué tipos de secciones existen?
En Divi 5 puedes encontrar principalmente tres tipos:
- Sección Regular (Estándar): La más utilizada. Se adapta a los márgenes estándar de la página y dentro de ella puedes colocar filas con diferentes estructuras de columnas.
- Sección de Ancho Completo (Fullwidth): Se extiende de extremo a extremo de la pantalla, sin importar el tamaño del monitor. Es ideal para grandes encabezados con vídeo, imágenes panorámicas o separadores visuales.
- Sección Especializada: Permite crear estructuras de diseño más complejas combinando columnas laterales con otras apiladas.
¿Cómo usar las secciones en Divi 5?
El sistema de la versión 5 ha mejorado para que el uso de contenedores sea mucho más intuitivo gracias a la integración nativa de CSS Grid y Flexbox. Sigue estos pasos para utilizarlas:
1. Añadir una sección
Divi ofrece una Sección por predeterminado o «Default». Para crear una sección en tu constructor visual, simplemente desplázate y haz clic en el botón azul con el símbolo de + para crear una nueva sección. Al hacerlo, podrás elegir entre las tres tipologías mencionadas arriba.
2. Darle diseño y estilo
Para editarla, haz clic en el icono de engranaje (Configuración) que aparece junto al contenedor azul. En la pestaña de Diseño podrás ajustar:
- Fondos: Puedes aplicar colores sólidos, degradados, imágenes o incluso vídeos de fondo.
- Separadores: En Divi 5 es muy fácil añadir formas (ondas, picos, diagonales) en la parte superior o inferior de la sección para darle dinamismo visual.
- Alineación: Gracias al soporte para Flexbox, puedes alinear verticalmente todo el contenido de tu sección hacia arriba, abajo o centrado con un solo clic.
3. Organizar y anidar
Dentro de tu sección azul, el siguiente paso es añadir una fila (color verde). En esa fila podrás dividir tu contenido en columnas para insertar por fin tus módulos o elementos (color negro).
