0.4Estructura: contenedores y widgets
Lo esencial en 30 segundos
- Contenedor = la "caja" que estructura la página y aloja elementos; widget = el elemento de contenido (título, texto, imagen…) colocado dentro.
- Los contenedores se pueden anidar (una caja dentro de otra) para maquetaciones ricas.
- Los contenedores Flexbox (recientes, flexibles, ligeros) reemplazan al antiguo sistema de secciones/columnas.
Hilo conductor — Nadia estructura la página de inicio
Nadia quiere una página de inicio clara: una banda, luego una fila de 3 proyectos uno al lado del otro, luego una llamada a la acción. Si lo suelta todo "sin orden", nada se alinea. Esta sección le enseña a pensar en cajas (contenedores) que alojan elementos (widgets) — la base de cualquier maquetación.
Continúa el caso 0.3 — Nadia pasa de "dónde está qué" a "cómo organizarlo".
1. Contenedores y widgets
Elementor distingue dos naturalezas de elementos. Los contenedores son cajas que estructuran y organizan la página; no "muestran" nada por sí mismos, alojan. Los widgets son los elementos de contenido concretos — título, texto, imagen, botón, icono — colocados dentro de un contenedor. Regla simple: los contenedores estructuran, los widgets muestran.
Los contenedores se pueden anidar: un contenedor "fila" (horizontal) puede alojar tres contenedores "columna" (verticales), cada uno con sus widgets. Así es como Nadia consigue sus 3 proyectos alineados uno al lado del otro, cada uno con imagen + título + botón.
2. Flexbox frente a secciones/columnas
Históricamente, Elementor organizaba las páginas en secciones que alojaban columnas. El modelo moderno, los contenedores Flexbox, reemplaza ese sistema: más flexible (dirección, alineación, espaciado ajustables con finura) y más ligero (código más limpio, mejor para el rendimiento).
Para un sitio nuevo como el del carpintero, Nadia va directa a los contenedores. Solo tocará secciones/columnas si retoma un sitio antiguo que aún las tenga.
🔎 Ejemplo concreto — Tres proyectos alineados (caso Nadia)
Contenedor "fila" (dirección horizontal)
├─ Contenedor "columna" → imagen + título + botón (Cocina)
├─ Contenedor "columna" → imagen + título + botón (Armario)
└─ Contenedor "columna" → imagen + título + botón (Escalera)
→ Resultado: 3 tarjetas alineadas, fáciles de hacer responsive.Resultado: una estructura clara y reutilizable.
Lección: pensar en cajas antes que en contenido.
Vocabulario de la sección
- Contenedor
- Una caja que estructura la página y aloja otros elementos (widgets o contenedores).
Ejemplo sencillo: Nadia crea un contenedor "fila" para alinear 3 proyectos.
Lo que no es: verlo como un elemento de contenido visible como un título.
Reflejo: el contenedor aloja; no tiene contenido propio.
- Widget
- Un elemento de contenido concreto colocado en un contenedor: título, texto, imagen, botón, icono.
Ejemplo sencillo: en cada columna, Nadia coloca imagen + título + botón.
Lo que no es: confundir el widget con la caja que lo aloja.
Reflejo: si muestra contenido, es un widget.
- Anidamiento
- Colocar un contenedor dentro de un contenedor para maquetaciones complejas.
Ejemplo sencillo: una fila que aloja tres columnas, cada una con sus widgets.
Lo que no es: apilar contenedores inútiles sin motivo.
Reflejo: anida solo cuando la maquetación lo requiera.
- Contenedores Flexbox
- La forma moderna, flexible y ligera de estructurar las páginas de Elementor.
Ejemplo sencillo: Nadia ajusta dirección, alineación y espaciado de un contenedor.
Lo que no es: recrear a mano lo que Flexbox hace por sí solo.
Reflejo: sitio nuevo → contenedores Flexbox por defecto.
- Secciones / columnas (antiguo)
- El antiguo sistema (secciones que alojan columnas), reemplazado por los contenedores.
Ejemplo sencillo: Nadia solo las encuentra en sitios antiguos que retoma.
Lo que no es: empezar un sitio nuevo con secciones/columnas.
Reflejo: sitio antiguo → quizá secciones/columnas; nuevo → contenedores.
En la práctica — Estructurar una página con contenedores
- Esboza la página como "cajas" en papel: banda, fila de 3, llamada a la acción.
- En Elementor, crea un contenedor "fila" y pon su dirección en horizontal.
- Añade 3 contenedores "columna" dentro (anidamiento).
- Suelta los widgets elegidos en cada columna (imagen, título, botón).
Guion listo para decir — explicar la estructura al cliente (30 s)
"Construyo su página como cajas bien ordenadas: una caja para la banda, una caja que alinea sus tres proyectos, una caja para el botón de contacto. En cada caja, coloco el contenido — imagen, texto, botón. Ese orden limpio es lo que hace que la página quede clara y se adapte al móvil."
La imagen de las "cajas" le habla a todo el mundo, incluso a quien no es técnico.
Plantilla para copiar y pegar — plan de estructura de página
PÁGINA: _______________
CAJA 1 (contenedor): _______________ → widgets: _______________
CAJA 2 (contenedor): _______________ → widgets: _______________
└─ ¿anidada? columnas: _______________
CAJA 3 (contenedor): _______________ → widgets: _______________
MODELO: contenedores (Flexbox), no secciones/columnas (sitio nuevo)Sitio nuevo
Todo en contenedores Flexbox: flexibilidad y código ligero desde el principio.
Sitio antiguo retomado
Secciones/columnas aún presentes: déjalas o migra poco a poco a contenedores.
Maquetación sencilla
Basta un contenedor vertical que apila widgets: no sobre-anides.
Maquetación rica
Filas que alojan columnas: anida lo justo para alinear.
✓ Buenas prácticas
- Piensa "contenedores (estructura)" antes que "widgets (contenido)".
- Anida solo cuando la maquetación lo requiera.
- Opta por contenedores Flexbox en cualquier sitio nuevo.
✗ Errores frecuentes
- Confundir un contenedor (caja) con un widget (contenido).
- Sobre-anidar contenedores inútiles.
- Empezar un sitio nuevo con secciones/columnas.
Puntos clave
- Contenedor = caja que estructura; widget = contenido mostrado.
- Los contenedores se anidan (fila → columnas → widgets).
- Los contenedores Flexbox reemplazan secciones/columnas.
- Primero la estructura, luego el contenido.
Reto 48h — aplica mañana
Reproduce una fila de 3 tarjetas (imagen + título + botón) con un contenedor "fila" que aloja 3 contenedores "columna". Comprueba que todo se alinea. 20 minutos.
- Distingo un contenedor (estructura) de un widget (contenido).
- Sé anidar una fila y columnas.
- Opto por contenedores Flexbox en un sitio nuevo.
Preguntas frecuentes
¿Debo usar secciones/columnas o contenedores?
Para cualquier sitio nuevo, contenedores (Flexbox): más flexibles y ligeros. Las secciones/columnas solo se encuentran en sitios antiguos.
¿Cuánto anidamiento de contenedores es razonable?
El mínimo para lograr la maquetación que quieres. Demasiado anidamiento (cajas dentro de cajas sin motivo) complica el mantenimiento y el responsive (ver 5.2).
¿Un widget puede alojar otro widget?
No: los widgets alojan contenido, no otros elementos. Para agrupar elementos, usa un contenedor.
Nadia quiere 3 proyectos uno al lado del otro, cada uno con imagen + título + botón. ¿Qué estructura debe elegir?