Como crear secciones, filas y módulos en Divi

En esta lección vamos a hablar sobre un concepto en el  Divi Builder: secciones, filas y módulos. Si entiendes esto, serás capaz de crear prácticamente cualquier diseño que te propongas en Divi. 

Objetivo 

Lo que queremos lograr aquí es que entiendas cómo se estructuran las páginas en Divi, utilizando secciones, filas y módulos. Al final de esta lección, podrás organizarlos de manera eficiente para construir sitios web completos y bien estructurados. 

1. Estructura en Divi 

Imagina que estás construyendo con bloques. Divi organiza el contenido en tres niveles: secciones, filas y módulos. 

• Secciones: Son el bloque más grande, como los cimientos o las paredes de una casa. Cada sección cubre una parte amplia de la página. Puedes tener múltiples secciones en una página, por ejemplo, una sección para el encabezado, otra para el cuerpo principal, y una última para el pie de página. 

• Filas: Dentro de cada sección, puedes añadir filas. Las filas dividen la sección en diferentes partes. Es como dividir el espacio de una pared para colocar ventanas o puertas. Las filas te permiten decidir cómo se distribuirán los elementos dentro de una sección, ya sea en una sola columna, dos columnas, o incluso tres. 

• Módulos: Los módulos son los elementos más pequeños, pero son los que realmente contienen el contenido, como el texto, imágenes, videos, etc. Son los detalles que colocas en cada fila para construir el diseño final. Imagina que son como los muebles que vas colocando dentro de cada espacio que has creado con las filas. 

Estos tres elementos trabajan juntos para que puedas estructurar y personalizar el diseño de tu página de manera flexible. 

2. Tipos de Secciones 

En Divi, tenemos tres tipos principales de secciones. Vamos a ver cada una: 

• Sección Regular: Esta es la sección estándar y la más común que vas a utilizar. Te permite añadir filas y módulos en su interior. Sirve para cualquier tipo de contenido, desde texto hasta imágenes o botones. Por ejemplo, puedes usarla para mostrar una presentación de servicios con un título grande, subtítulo y una imagen. 

• Sección Ancho Completo (Fullwidth): Esta sección se expande a lo largo de toda la pantalla, independientemente del tamaño del navegador. Es perfecta cuando quieres elementos que llamen la atención, como un gran encabezado con una imagen de fondo a pantalla completa, o una galería que ocupe todo el ancho. 

• Sección Especial (Specialty): Esta es un poco más avanzada. Te permite crear disposiciones de columnas más complejas dentro de la misma sección. Es ideal cuando necesitas combinar diferentes diseños de columnas dentro de un mismo espacio. Por ejemplo, puedes tener una columna grande con texto y al lado, dos columnas pequeñas con otros módulos. 

3. Filas y Columnas 

Ahora, vamos a hablar de las filas, que es lo que añadimos dentro de las secciones. 

• Filas: Son las encargadas de dividir el espacio en columnas. Cada fila puede tener una o más columnas, y eso es lo que te permite distribuir el contenido horizontalmente. 

• 1 columna: Ideal para contenido que quieres que ocupe todo el ancho de la sección, como un título o una imagen grande. 

• 2 columnas (50% – 50%): Perfecto cuando quieres mostrar dos elementos uno al lado del otro, por ejemplo, texto en un lado y una imagen en el otro. 

• 3 columnas (33% – 33% – 33%): Se utiliza cuando quieres organizar más elementos, como una lista de características de un producto o varios servicios en columnas. 

• Personalización de Filas: No solo se trata de añadir columnas, también puedes personalizar el diseño de la fila. Puedes cambiar su color de fondo, añadir bordes o sombras para darle más estilo. Incluso puedes ajustar el espacio entre las columnas para que el diseño sea más flexible. 

4. Módulos 

Los módulos son lo que realmente llenan tu página de contenido. Divi tiene una gran variedad de módulos, y estos son algunos de los más comunes: 

• Módulo de Texto: Esto es simplemente para añadir y editar texto. Puedes cambiar fuentes, colores, tamaños y más. 

• Módulo de Imagen: Te permite añadir imágenes en cualquier parte de la página. Simplemente selecciona tu imagen y personalízala. 

• Módulo de Botón: Un botón es esencial en cualquier página. Puedes personalizar su color, forma y destino, haciendo que dirija a otras páginas o secciones. 

• Módulo de Galería: Perfecto para mostrar múltiples imágenes en un formato organizado y visualmente atractivo. 

• Módulo de Vídeo: Si quieres incluir vídeos de YouTube, Vimeo u otras plataformas, este módulo te lo facilita. 

Lo bueno de los módulos es que todos son altamente personalizables. Puedes ajustar su diseño para que se alineen con la estética de tu sitio, cambiar colores, bordes, agregar animaciones y mucho más. Además, puedes moverlos o duplicarlos fácilmente dentro de tu diseño. 

5. Organización y Jerarquía de Contenido 

Es muy importante organizar bien tu contenido. Las secciones dividen tu página en grandes bloques; las filas te permiten organizar esos bloques de forma horizontal, y finalmente, los módulos colocan el contenido en esas filas. 

Mejores Prácticas: 

• Utiliza secciones para dividir tu página en partes claras (como una sección para el encabezado, otra para el contenido principal, y otra para el pie de página). 

• Usa filas y columnas para organizar el contenido dentro de cada sección. 

• Asegúrate de no sobrecargar una sola página con demasiados módulos; mantener las cosas simples hará que el diseño sea más efectivo y agradable a la vista. 

Por ejemplo, en un sitio web de empresa, podrías empezar con una sección de cabecera con una imagen de fondo que ocupe todo el ancho. Luego, en el cuerpo principal, podrías tener varias filas con texto e imágenes organizadas en columnas, y finalmente, una sección al final con un formulario de contacto.