Las columnas son uno de los elementos fundamentales para organizar el contenido dentro de una fila en Divi 5. Permiten distribuir horizontalmente los módulos y crear diferentes composiciones para estructurar una página de forma clara y visualmente equilibrada.
Mientras que las secciones definen las grandes zonas de una página y las filas organizan el contenido dentro de ellas, las columnas determinan cómo se reparte ese espacio entre los diferentes bloques de contenido.
Una columna es un espacio dentro de una fila en el que se pueden colocar uno o varios módulos de Divi.
Por ejemplo, una fila de dos columnas puede dividir el espacio disponible en dos zonas. En una de ellas podemos colocar un título y un texto, mientras que en la otra podemos colocar una imagen.
La estructura básica sería:
Sección
└── Fila
├── Columna 1
│ └── Módulos
└── Columna 2
└── MódulosLas columnas son, por tanto, el elemento que conecta la estructura de la fila con el contenido que finalmente verá el usuario.
Divi permite crear filas con diferentes distribuciones de columnas. La elección dependerá del tipo de contenido y del diseño que quieras conseguir.
Algunas de las estructuras más habituales son:
También puedes utilizar diferentes proporciones para crear composiciones más interesantes y adaptadas al contenido.
La distribución de columnas no debería elegirse únicamente por motivos estéticos. Es importante tener en cuenta la cantidad y el tipo de contenido que contendrá cada columna.
Por ejemplo, si una columna contiene un texto extenso y otra únicamente una imagen, probablemente no tenga sentido utilizar dos columnas exactamente iguales. Una distribución asimétrica puede proporcionar un resultado más equilibrado.
Antes de elegir una estructura conviene preguntarse:
La estructura debe adaptarse al contenido y no al contrario.
Las columnas iguales son una buena opción cuando los elementos tienen una importancia y una cantidad de contenido similares.
Por ejemplo, una sección de tres servicios puede utilizar tres columnas con la misma anchura:
Servicio 1 | Servicio 2 | Servicio 3En cambio, cuando existe una diferencia clara entre los contenidos, puede ser más adecuado utilizar columnas asimétricas.
Un ejemplo habitual es una sección de presentación:
Texto principal | Imagen
Mayor espacio | Menor espacioDe esta forma se puede dar mayor protagonismo al contenido que realmente lo necesita.
Una columna puede contener diferentes módulos. Esto permite combinar varios elementos dentro de un mismo bloque.
Por ejemplo, una columna puede contener:
Otra columna de la misma fila podría contener únicamente una imagen.
Esta flexibilidad permite crear composiciones muy diferentes utilizando la misma estructura básica.
El orden de los módulos dentro de una columna es importante porque determina cómo se presenta el contenido al usuario.
Una estructura habitual para un bloque de contenido podría ser:
Columna
├── Imagen
├── Título
├── Texto
└── BotónSin embargo, dependiendo del diseño, podría ser más apropiado colocar primero el título, después el texto y finalmente una imagen o una llamada a la acción.
La jerarquía visual debe corresponder con la importancia real de la información.
La separación entre columnas influye directamente en la percepción visual del diseño.
Si las columnas están demasiado juntas, el contenido puede parecer saturado. Si están demasiado separadas, puede perderse la relación visual entre los elementos.
El espacio debe ajustarse teniendo en cuenta:
En diseños profesionales es recomendable utilizar un sistema de espaciado coherente en lugar de establecer valores diferentes de forma arbitraria en cada sección.
Uno de los aspectos más importantes de las columnas en Divi 5 es su comportamiento en dispositivos móviles.
Una distribución que funciona perfectamente en escritorio puede resultar poco práctica cuando el espacio horizontal disponible se reduce.
Por ejemplo, una fila con cuatro columnas puede mostrar cuatro elementos en una misma línea en una pantalla grande. En un teléfono móvil, esos elementos normalmente deberán reorganizarse para facilitar la lectura y la interacción.
Por este motivo, al diseñar una estructura de columnas debes comprobar siempre su comportamiento en:
Divi permite realizar ajustes específicos para diferentes dispositivos, por lo que no es necesario utilizar exactamente los mismos valores en todas las resoluciones.
Las columnas también pueden utilizarse para establecer una jerarquía visual.
Por ejemplo, en una sección de servicios puedes utilizar tres columnas iguales si todos los servicios tienen la misma importancia. En cambio, en una sección de presentación de una empresa puede ser más interesante utilizar una columna amplia para el contenido principal y otra más pequeña para información complementaria.
De esta forma, la propia estructura ayuda al usuario a identificar qué información debe leer primero.
Las columnas no tienen por qué utilizarse exclusivamente para crear diseños tradicionales de texto y fotografía.
También pueden utilizarse para construir composiciones más modernas combinando:
Por ejemplo, una página de servicios puede utilizar una fila de tres columnas para crear tres tarjetas visualmente diferenciadas. Cada columna puede tener su propio fondo, borde, sombra y espaciado.
La estructura seguirá siendo sencilla, pero el resultado visual puede ser mucho más elaborado.
El diseño mediante columnas también debe tener en cuenta la accesibilidad. Una estructura visualmente atractiva no debe dificultar la lectura o la navegación.
Es importante mantener una jerarquía lógica de títulos y contenidos, utilizar textos suficientemente legibles y comprobar que el orden del contenido siga teniendo sentido cuando las columnas se reorganizan en dispositivos pequeños.
El diseño visual debe complementar la estructura del contenido, no sustituirla.
Uno de los errores más frecuentes es utilizar demasiadas columnas para intentar mostrar una gran cantidad de información en una sola fila.
Cuando cada columna contiene demasiado texto, el resultado puede ser difícil de leer, especialmente en pantallas pequeñas.
Otros errores habituales son:
Imagina una sección en la que quieres mostrar cuatro características de un servicio.
Puedes crear una fila con cuatro columnas:
Sección: Características
┌──────────┬──────────┬──────────┬──────────┐
│ Caracter.│ Caracter.│ Caracter.│ Caracter.│
│ 1 │ 2 │ 3 │ 4 │
└──────────┴──────────┴──────────┴──────────┘Cada columna puede contener un icono, un título y una breve descripción.
En escritorio los cuatro elementos pueden mostrarse horizontalmente. En móvil, la estructura puede adaptarse para que cada característica ocupe una línea o se distribuya en varias filas.
Esta es una de las aplicaciones más habituales de las columnas en Divi.
Otro patrón muy utilizado es combinar contenido textual con una imagen.
┌────────────────────────┬────────────────┐
│ │ │
│ Título │ │
│ Texto │ Imagen │
│ Texto │ │
│ Botón │ │
│ │ │
└────────────────────────┴────────────────┘En este caso puedes utilizar dos columnas y asignar una mayor proporción a la columna que contiene el texto si este necesita más espacio.
Este patrón es especialmente útil para páginas corporativas, páginas de servicios, páginas de inicio y landing pages.
Para trabajar de forma eficiente con Divi 5 es recomendable seguir algunas reglas sencillas:
Las columnas adquieren todavía más importancia cuando comienzas a utilizar herramientas avanzadas de Divi 5 como los presets, los layouts reutilizables y el Theme Builder.
Una estructura de columnas bien planteada permite aplicar estilos de forma consistente y reutilizar determinadas composiciones en diferentes partes del sitio.
Por eso, no conviene considerar las columnas únicamente como una herramienta para dividir una fila. Son una parte importante de la arquitectura visual de cualquier proyecto realizado con Divi 5.
Las columnas de Divi 5 permiten distribuir el contenido dentro de las filas y crear estructuras adaptadas a las necesidades de cada página. Gracias a las diferentes proporciones y combinaciones disponibles, es posible crear desde diseños sencillos de una columna hasta composiciones complejas con múltiples bloques de contenido.
La clave para utilizarlas correctamente está en elegir la estructura en función del contenido, mantener una jerarquía visual clara y comprobar siempre su comportamiento responsive.
Cuando domines la relación entre secciones, filas, columnas y módulos, tendrás una base sólida para comenzar a construir diseños más complejos y profesionales con Divi 5.
Rellena la mayor cantidad de datos posibles y acepta las políticas de privacidad para obtener más información de nuestros servicios:
© 2009-2025 webkamy diseño de páginas web y seo
