Secciones y Contenedores
Las secciones y los contenedores son la base estructural de las páginas creadas en Atomicat.
Una sección es un bloque importante de la página. Un contenedor se encuentra dentro de una sección u otro contenedor y contiene elementos de la página como texto, imágenes, botones, formularios, videos y otros componentes.
Cómo funcionan las secciones y los contenedores
Las páginas Atomicat se almacenan como una estructura anidada. El constructor utiliza esta estructura para representar el lienzo de la página, mostrar elementos en el Navegador y conservar el diseño al guardar o publicar.
| Elemento de estructura | Propósito |
|---|---|
| Sección | Área de la página principal, como héroe, beneficios, testimonios, precios, FAQ o pie de página. |
| Contenedor | Envoltorio de diseño utilizado para agrupar y alinear elementos dentro de una sección. |
| Elemento | El contenido visible o la interacción colocada dentro de un contenedor. |
Cuándo usar una sección
Utilice una sección cuando esté creando una nueva parte principal de la página.
Ejemplos:
- Área de héroe
- Beneficios del producto
- Prueba social
- Carta de ventas en vídeo.
- Formulario de captura Lead
- Bloqueo de precios o ofertas.
- FAQ
- Pie de página
Cuándo usar un contenedor
Utilice contenedores para organizar el diseño dentro de una sección.
Ejemplos comunes:
- Un diseño de héroe de dos columnas con texto en un lado y medios en el otro.
- Una fila de tarjetas de beneficios.
- Un bloque de formulario centrado dentro de una sección.
- Un área anidada que agrupa elementos de imagen, título, descripción y botón.
Los contenedores son especialmente importantes para el diseño responsivo porque controlan cómo se alinean, apilan y dimensionan los elementos secundarios en las vistas de escritorio, tableta y dispositivo móvil.
Seleccionar secciones y contenedores
Puede seleccionar secciones y contenedores directamente en el lienzo o mediante el Navegador.
Utilice el Navegador cuando:
- El elemento está profundamente anidado.
- Varios contenedores se superponen visualmente.
- Es necesario comprender la jerarquía de páginas.
- Quiere reordenar los artículos con mayor precisión.
Consideraciones de diseño responsivo
Al crear páginas responsivas:
- Siga anidando lo menos profundo posible.
- Utilice contenedores para agrupar elementos que deben permanecer juntos.
- Verifique la vista móvil después de cambiar los anchos, la alineación, el espaciado o el orden.
- Evite el uso de recipientes vacíos innecesarios.
- Utilice un espaciado constante entre las secciones repetidas.
Mejores prácticas
- Construya desde una estructura amplia hasta un estilo detallado.
- Mantener los elementos relacionados en el mismo contenedor.
- Utilice el Navegador para confirmar que los elementos estén colocados donde espera.
- Ahorrar después de grandes cambios estructurales.
Documentación relacionada
Preguntas frecuentes
¿Cuál es la diferencia entre una sección y un contenedor?
Una sección es un bloque principal de la página, como hero, beneficios o footer. Un contenedor agrupa y alinea elementos dentro de una sección o dentro de otro contenedor.
¿Por qué debería mantener el anidamiento simple?
Un anidamiento simple facilita editar la página, mejora el comportamiento responsive y ayuda a que otros compañeros entiendan el layout en el Navegador.
¿Cuándo debo usar el Navegador?
Usa el Navegador cuando un elemento sea difícil de seleccionar en el canvas, cuando los contenedores se superpongan o cuando necesites confirmar dónde está anidado un elemento.
¿Qué debo probar después de cambiar la estructura?
Previsualiza layouts de escritorio, tablet y móvil, y luego prueba formularios, botones, videos y otros elementos interactivos dentro de las secciones modificadas.