¿Estás empezando con Elementor y te pierdes entre secciones, columnas y widgets? ¿O llevas tiempo pero tus diseños nunca quedan del todo bien en móvil? En este artículo te voy a enseñar, de una vez por todas, a dominar la base de todo diseño en Elementor: las secciones y las columnas. No es teoría abstracta, es la metodología que aplico en cada web que construyo para clientes reales.
Llevo desde 2017 diseñando webs profesionales, y te lo digo claro: el 90% de los problemas de diseño responsive y de maquetación que veo en webs hechas por principiantes (y por algunos que no lo son tanto) vienen de no entender bien esta jerarquía básica: Sección > Columna > Widget. Es el esqueleto de tu página, y si el esqueleto está torcido, por mucho contenido bonito que le pongas, la web cojeará. Yo mismo he cometido errores de principiante con los márgenes y paddings que luego he tenido que corregir a mano en CSS, ¿vale?
Dominar esto no es solo aprender a usar una herramienta, es comprender la lógica de construcción de cualquier página web moderna. Es la base sobre la que se sustenta todo lo demás, y saltársela o hacerlo mal es el error más común que veo en proyectos que luego no funcionan. Así que vamos a ver cómo lo hago yo.
La jerarquía que no te puedes saltar: Sección > Columna > Widget
Esto parece lo más básico, pero es donde casi todo el mundo se equivoca. No es una sugerencia, es la ley. La estructura fundamental de Elementor, y de casi cualquier constructor visual, se basa en un sistema de contenedores anidados: secciones contienen columnas, y las columnas contienen widgets. Punto.
¿Por qué este orden es sagrado?
Porque es la única manera de que Elementor (y el navegador) entiendan qué va dónde. Si intentas poner un widget directamente en una sección, sin columna, Elementor te creará una columna automáticamente. Pero si tú no entiendes esa jerarquía, vas a luchar contra la herramienta constantemente. Ajustarás márgenes donde deberías poner padding, forzarás anchos que no son necesarios y, lo peor de todo, tu diseño se romperá en móvil.
Las secciones y columnas son los elementos principales que permiten crear versiones responsive (adaptadas a móviles y tabletas) de un sitio web. Si no controlas estos contenedores, no controlas el responsive. Es la base de cualquier workflow de diseño moderno.
La analogía del esqueleto y la carne
Imagina que estás construyendo una casa. * La sección es la planta completa: la cocina, el salón, el dormitorio. Define un espacio grande y concreto. * Las columnas son las paredes que dividen esa planta en habitaciones. Deciden cómo se distribuye el espacio dentro de la sección. * Los widgets son el mobiliario: la mesa, la cama, el sofá. Van dentro de las habitaciones (columnas).
No se te ocurriría poner un sofá flotando en medio de la planta sin paredes que lo delimiten, ¿verdad? Pues en Elementor es lo mismo. Si tu esqueleto (secciones y columnas) está bien definido y es sólido, luego puedes poner la carne (widgets y contenido) que quieras, y todo se mantendrá en su sitio.
Configurando tu sección: Ancho de Caja vs. Ancho Completo (y por qué importa)
Una de las primeras decisiones que tomas al crear una sección es el ancho. Y no es una tontería. Elegir mal aquí es condenar a tu sección a parecer desproporcionada o a no integrarse bien con el resto de la página.
¿Cuándo usar cada uno? Te lo explico con criterios prácticos, no teóricos.
Usa Ancho de Caja para bloques de contenido principal, como el texto de tus artículos o descripciones de servicios. Es el estándar para que el contenido sea legible sin que el lector tenga que recorrer con los ojos de un extremo a otro de la pantalla. También lo uso para formularios de contacto o suscripción, porque quieres que destaquen pero dentro de un orden, y para tarjetas de precios o testimonios en fila, cuando quieres varios elementos uno al lado del otro dentro de un contenedor controlado.
Usa Ancho Completo para impacto visual. Encabezados hero, para que la imagen o el color ocupen de punta a punta. Barras de llamada a la acción (CTA), que tienen que sentirse anchas y sin límites para cortar el flujo de la página. Galerías de imágenes o sliders, para disfrutarlos a máxima anchura, y pies de página (footers), que tradicionalmente van de lado a lado.
El tamaño estándar de hoy en día: ¿1200px o 1300px?
Aquí hay debate. Hace años, 960px era lo común. Hoy, con monitores más grandes, el estándar se ha movido. En mis proyectos, casi siempre uso 1200px para el Ancho de Caja de las secciones de contenido. Es un buen equilibrio: suficiente espacio para trabajar, pero no tan ancho que en pantallas más pequeñas (como portátiles de 13″) se vea apretado o obligue a un scroll horizontal mínimo.
Algunos prefieren 1300px. Si tu público usa principalmente ordenadores de sobremesa con monitores grandes, puede tener sentido. Pero 1200px es más seguro y responsive-friendly. Pruébalo y verás.
El alto: ¿Dejar que fluya o forzar una altura mínima?
Por defecto, una sección tiene la altura de su contenido. Esto (Height: Default) es casi siempre lo que quieres. Deja que la sección crezca de forma natural.
Forzar una altura mínima (Min Height) solo lo hago en casos muy concretos: 1. Encabezados hero: Para que ocupen un buen trozo de pantalla nada más cargar, aunque tengan poco texto. 2. Secciones con fondo de imagen o color que deben tener una presencia visual fuerte, incluso si el contenido es escaso.
El error común es poner una altura fija (Height). Eso es una receta para el desastre en responsive. En móvil, el contenido se saldrá del contenedor o quedará un espacio enorme en blanco. Usa Min Height con unidades relativas como vh (viewport height), por ejemplo 70vh, para que se adapte al alto de la pantalla, pero nunca Height fija.
El poder oculto de las columnas: No son solo contenedores tontos
La gente subestima las columnas. Piensan que solo están ahí para dividir el espacio. Error. Son tu principal herramienta de control interno.
Aquí hay un detalle clave que mucha gente pasa por alto: a diferencia de las secciones, las columnas no se crean de forma independiente. Tienes que empezar por una sección, porque las columnas son parte intrínseca de su estructura. Es decir, eliges una plantilla de sección que ya trae una estructura de columnas (1, 2, 3…). A partir de ahí, el juego empieza.
Duplicar, mover y reorganizar columnas al vuelo
¿Necesitas una columna extra? No borres todo. Haz clic en el icono de «Añadir columna» (el +) que aparece entre columnas. ¿Quieres cambiar el orden? Arrastra la pestaña de una columna y suéltala a la izquierda o derecha de otra. Es intuitivo, pero mucha gente no se atreve a tocar y luego sufre.
Ajustar el ancho relativo de cada columna
Por defecto, en una sección de dos columnas, cada una ocupa el 50%. Pero ¿y si quieres una columna más estrecha para un icono y otra más ancha para texto? Pasa el cursor sobre la línea que separa las columnas, haz clic y arrastra. Verás que el ancho se ajusta con un porcentaje. Esto es mucho más limpio y responsive que intentar hacerlo con márgenes o paddings fijos en los widgets.
El padding de columna: tu mejor aliado para el espaciado interno
Este es mi truco favorito y uno de los más infrautilizados. En lugar de poner padding a cada widget dentro de una columna (un título, un texto, un botón), pon el padding en la propia columna.
¿Por qué? Porque consigues un espaciado uniforme para todo lo que haya dentro, y solo tienes que ajustarlo en un sitio. Si luego decides que quieres más aire alrededor del contenido, cambias un valor (el padding de la columna) y no diez (el de cada widget). Mantienes la coherencia y ahorras un montón de tiempo.
Margin vs. Padding: La diferencia que salva (o arruina) tu diseño
Aquí está el corazón del 90% de los problemas de maquetación que veo. La gente los mezcla, y el diseño se descompone.
La analogía del marco de un cuadro
Imagina un cuadro colgado en la pared. * El Padding es la distancia entre el lienzo (tu contenido) y el marco interior del cuadro. Es espacio interno. Afecta a cómo se ve el contenido dentro de su contenedor. * El Margin es la distancia entre el marco exterior del cuadro y la pared (o el cuadro de al lado). Es espacio externo. Afecta a la separación entre contenedores.
En Elementor: El padding de una sección aleja el borde de las columnas de dentro. El margin de una sección aleja esa sección de la de arriba o la de abajo.
El error más común y cómo solucionarlo
El error clásico: querer separar un título del borde superior de su sección y usar Margin Top en el título. Funciona… hasta que cambias a la vista móvil. De repente, ese margen que en escritorio estaba bien, en móvil es excesivo y deja un hueco enorme.
La solución profesional: Usa Padding Top en la sección o en la columna, no Margin en el widget. De esta manera, el espacio es parte del contenedor y se comporta de manera mucho más predecible al apilarse en móvil. Ajustas el contenedor, no cada pieza suelta dentro.
Usando el enlace de valores y cuándo NO hacerlo
El icono del eslabón (🔗) al lado de los valores de padding y margin te permite poner el mismo valor para arriba, derecha, abajo e izquierda. Es útil para crear espacios uniformes.
¿Cuándo NO usarlo? Casi siempre en los márgenes laterales (left/right) de las secciones en móvil. En escritorio, tu sección puede tener un padding lateral de 50px y quedar genial. En móvil, 50px es una barbaridad, te deja un contenido estrechísimo. Por eso, en la vista móvil, siempre desenlazo los valores horizontales y pongo uno mucho menor (como 20px). El eslabón es cómodo, pero en responsive, a menudo hay que romperlo para tener control fino.
Flujo de trabajo profesional: Cómo yo construyo una sección desde cero
Te voy a contar mi proceso exacto. No es magia, es sistemático. Así evito tener que volver atrás a corregir cosas.
Paso 1: Definir el propósito Antes de tocar nada, me pregunto: ¿Qué tiene que hacer esta sección? ¿Es un encabezado llamativo? ¿Un bloque de explicación? ¿Un formulario? Eso dictará si será ancho completo o en caja, y qué estructura de columnas necesitará.
Paso 2: Elegir la estructura de columnas Voy al panel de Elementor y arrastro una «Sección» nueva. Luego, elijo de la cuadrícula la estructura que necesito. Para un texto con una imagen al lado: 2 columnas (50%/50%). Para un título, texto y un botón centrado: 1 columna. Empezar con la estructura correcta ahorra trabajo.
Paso 3: Aplicar estilos base a la sección Aquí configuro lo fundamental: * Ancho: ¿Caja o Completo? Lo elijo. * Fondo: Si lleva color sólido, degradado o imagen. Lo pongo ahora. * Alineación vertical del contenido: Si es una sección alta (con min-height), uso esta opción para centrar el contenido verticalmente. Es un golazo visual.
Paso 4: Ajustar el espaciado (Padding/Margin) Este es el paso clave para la legibilidad y el responsive. 1. Pongo el Padding de la sección. Normalmente, algo como 80px arriba/abajo y 0 a los lados si es ancho completo, o un valor parecido a los lados si es en caja. 2. Reviso el Margin. Por defecto suele estar en 0. Lo dejo así a menos que necesite una separación especial con la sección anterior. 3. Acto seguido, cambio a la vista móvil (el icono del móvil) y ajusto esos paddings. Los verticales los reduzco (ej: de 80px a 50px) y los horizontales los pongo a un valor cómodo, como 20px.
Paso 5: Llenar con widgets y refinar Ahora sí, arrastro los widgets (título, texto, imagen, botón) a las columnas. Como ya tengo el esqueleto bien configurado y con padding en las columnas, todo entra con un espaciado agradable. Solo me queda afinar los estilos de los widgets (tipografía, colores) y hacer los últimos ajustes de responsive directamente en cada widget si es necesario.
Consejos de un friki: Atajos y trucos que uso a diario
Soy muy friki de estas cosas, y con los años he recogido atajos que me hacen ir el triple de rápido.
- El clic derecho es tu mejor amigo. Sobre cualquier sección, columna o widget, haz clic derecho. Ahí está la opción de Duplicar y Guardar como plantilla. Duplicar una sección compleja que ya has afinado es el mayor ahorro de tiempo posible. ¿Has hecho un bloque de servicios que se repite 3 veces con icono, título y texto? Perfecciona uno, duplícalo dos veces y solo cambia el contenido. La estructura y los estilos ya están listos.
- Cómo nombrar tus secciones para no volverte loco. En las opciones avanzadas de cualquier sección o widget, hay un campo llamado «CSS ID». Yo lo uso para poner nombres descriptivos como
hero-iniciooservicios-destacados. Luego, si tengo que enlazar a esa sección desde un menú o un botón, ya sé exactamente cómo se llama. Y si tengo que meter CSS personalizado, también. - La regla del 2×1: duplica y modifica. Este es un truco que va más allá del clic derecho. Cuando tengas una sección con varias columnas y widgets que funcione bien (un bloque de equipo, un grid de servicios), no la copies manualmente. Duplícala entera y luego solo cambia las imágenes y los textos. Así te aseguras de que todos los paddings, márgenes y estilos responsive se mantengan perfectos en cada copia. Es la manera más rápida de crear consistencia en toda la página.
Al final, todo se reduce a esto: sin un buen esqueleto, no hay diseño profesional que valga. Puedes tener los widgets más caros y las imágenes más bonitas, pero si las secciones y columnas están mal planteadas, la web no va a funcionar bien, ni en ordenador ni, mucho menos, en el móvil de tu cliente potencial.
Es la base. La que separa a los que «juegan» con Elementor de los que construyen herramientas que realmente venden. Y ahora ya la conoces.
Si quieres ver cómo aplico todo esto en directo, con casos reales y más trucos, te invito a que veas el video completo de donde salió esta guía. Y si te ha quedado alguna duda, ya sabes, déjamela en los comentarios del vídeo.
