Qué es un contenedor
Un contenedor es la caja que organiza los widgets. En Elementor, los contenedores usan lógica Flexbox, lo que permite controlar si los elementos van en fila, en columna, centrados, alineados o distribuidos.
Piensa en el contenedor como una bandeja: dentro colocas títulos, textos, imágenes y botones.
Dirección y alineación
La dirección define si los elementos se colocan en horizontal o vertical. La alineación define cómo se distribuyen dentro del espacio.
- Fila: útil para dos columnas, iconos en línea o botones.
- Columna: útil para títulos, textos y botones apilados.
- Centrado: útil para hero, cards y llamadas a la acción.
- Espacio entre elementos: útil para menús, grids o bloques con separación equilibrada.
Ancho, altura y huecos
El ancho determina cuánto ocupa el contenedor. La altura mínima permite crear secciones más respiradas. El hueco controla la separación entre elementos.
En móvil, es mejor usar menos altura fija y más padding para evitar que el contenido se corte.
Contenedores anidados
Un contenedor puede ir dentro de otro. Esto sirve para agrupar elementos. Por ejemplo, una card puede ser un contenedor que contiene icono, título, texto y botón.
La regla: usa los contenedores necesarios, pero evita crear demasiadas capas. Cuantas más capas, más difícil será mantener el diseño.
Responsive
En Elementor puedes cambiar entre escritorio, tablet y móvil. Cada dispositivo puede tener ajustes específicos de tamaño, márgenes, padding, orden y alineación.
Un diseño correcto no se limita a encoger el escritorio. En móvil, normalmente conviene apilar columnas, reducir tamaños de texto y ampliar botones.
Buenas prácticas
- Diseña primero la estructura, después el estilo.
- Usa contenedores para agrupar, no para decorar sin necesidad.
- Revisa móvil antes de publicar.
- Evita alturas fijas si no son necesarias.
- Usa gap antes que márgenes manuales repetidos.
- Comprueba que los botones son cómodos en móvil.
Checklist de contenedores
- La estructura se entiende.
- Los widgets están dentro del contenedor correcto.
- La dirección tiene sentido.
- El diseño funciona en móvil.
- No hay capas innecesarias.
Prompt útil
Explícame cómo organizar esta sección de Elementor con contenedores Flexbox: [describe la sección]. Quiero saber qué contenedores crear, qué dirección usar, cómo alinearlos y cómo adaptarlo a móvil.Pregunta al Agente Virtual 420 o usa este recurso como apoyo para avanzar en tu proyecto.