Seções e contêineres
Seções e contêineres são a base estrutural das páginas construídas em Atomicat.
Uma seção é um bloco importante da página. Um contêiner fica dentro de uma seção ou outro contêiner e contém elementos da página, como texto, imagens, botões, formulários, vídeos e outros componentes.
Como funcionam seções e contêineres
As páginas Atomicat são armazenadas como uma estrutura aninhada. O construtor usa essa estrutura para renderizar a tela da página, mostrar itens no Navegador e preservar o layout ao salvar ou publicar.
| Item de estrutura | Finalidade |
|---|---|
| Seção | Área da página principal, como herói, benefícios, depoimentos, preços, perguntas frequentes ou rodapé. |
| Container | Wrapper de layout usado para agrupar e alinhar elementos dentro de uma seção. |
| Elemento | O conteúdo visível ou interação colocada dentro de um contêiner. |
Quando usar uma seção
Use uma seção ao criar uma nova parte principal da página.
Exemplos:
- Área heróica
- Benefícios do produto
- Prova social
- Carta de vendas em vídeo
- Formulário de captura de leads
- Bloco de preços ou ofertas
- FAQ
- Rodapé
Quando usar um contêiner
Use contêineres para organizar o layout dentro de uma seção.
Exemplos comuns:
- Um layout de destaque de duas colunas com texto de um lado e mídia do outro.
- Uma fileira de cartões de benefícios.
- Um bloco de formulário centralizado dentro de uma seção.
- Uma área aninhada que agrupa elementos de imagem, título, descrição e botão. Os contêineres
são especialmente importantes para o design responsivo porque controlam como os elementos filhos se alinham, empilham e dimensionam nas visualizações de desktop, tablet e dispositivos móveis.
Selecionando seções e containers
Você pode selecionar seções e containers diretamente na tela ou através do Navegador.
Use o Navegador quando:
- O elemento está profundamente aninhado.
- Vários contêineres se sobrepõem visualmente.
- Você precisa entender a hierarquia de páginas.
- Você deseja reordenar itens com mais precisão.
Considerações sobre layout responsivo
Ao criar páginas responsivas:
- Mantenha o aninhamento o mais superficial possível.
- Use contêineres para agrupar elementos que devem permanecer juntos.
- Verifique a visualização móvel após alterar larguras, alinhamento, espaçamento ou ordem.
- Evite usar recipientes vazios desnecessários.
- Use espaçamento consistente entre seções repetidas.
Melhores práticas
- Construa desde uma estrutura ampla até um estilo detalhado.
- Mantenha os elementos relacionados no mesmo contêiner.
- Use o Navegador para confirmar se os elementos estão colocados onde você espera.
- Salvar após grandes mudanças estruturais.
Documentos relacionados
Perguntas frequentes
Qual é a diferença entre uma seção e um contêiner?
Uma seção é um bloco principal da página, como hero, benefícios ou rodapé. Um contêiner agrupa e alinha elementos dentro de uma seção ou de outro contêiner.
Por que devo manter o aninhamento simples?
Aninhamento simples facilita a edição da página, melhora o comportamento responsivo e ajuda colegas a entender o layout no Navegador.
Quando devo usar o Navegador?
Use o Navegador quando um item é difícil de selecionar na tela, quando contêineres se sobrepõem ou quando você precisa confirmar onde um elemento está aninhado.
O que devo testar depois de alterar a estrutura?
Pré-visualize layouts desktop, tablet e mobile e depois teste formulários, botões, vídeos e outros elementos interativos dentro das seções alteradas.