Editor X: sobre a estrutura da sua página
4 min de leitura
Neste artigo
- Relações parent-child (pai-filho) entre elementos
- Criando a estrutura da sua página
- As camadas da sua página
- Re-parenting elementos
- Encontrando o lugar de um elemento na hierarquia
- Estruturação de sibling elements (elementos irmãos)
- Alterações de estrutura nos breakpoints
Ao estruturar páginas em seu site, você está basicamente aninhando elementos dentro de contêineres. Por exemplo, colocar um texto dentro de uma caixa contêiner. Isso cria uma relação entre os elementos e seu parent container (contêiner pai), derivado dos conceitos HTML e CSS modernos.
Neste artigo, aprenderemos sobre essa relação e como aproveitá-la para criar um site responsivo:
Relações parent-child (pai-filho) entre elementos
Quando um elemento é colocado dentro de um contêiner (ex.: seção, caixa contêiner, layouter, etc.), ele anexa o elemento e cria uma relação parent-child. Por exemplo, se você anexar seu logo ao cabeçalho, ele será encaixado automaticamente nas bordas mais próximas e se tornará "child" do cabeçalho.
Da mesma forma que o CSS, o design (ou seja, tamanho, posição, preenchimento, etc.) de um parent container influencia seus children elements. Adicionar preenchimento a um contêiner, por exemplo, diminui os elementos dentro para acomodar a alteração.
Nota:
Quando você empilha elementos para controlar sua ordem vertical, eles são colocados dentro de um contêiner flexível que atua como parent.
Dica:
Clique aqui para ler mais sobre o dimensionamento de elementos.
Criando a estrutura da sua página
Ao planejar o design do seu site, é importante começar criando uma estrutura em camadas. Recomendamos criar os parent containers primeiro e, em seguida, adicionar children elements arrastando e soltando-os no lugar certo.
As camadas da sua página
No Editor X, a estrutura que você cria é refletida no painel Camadas. As seguintes camadas compõem a estrutura do seu site:
- Página: no painel Camadas, você pode editar a cor do background da página e adicionar preenchimento. Clique no ícone Mostrar mais
ao lado de Página para controlar essas configurações. - Seções: cada página é composta por pelo menos uma seção. Você pode criar quantas seções verticais e horizontais você precisa. Você também pode criar Master sections que aparecem em várias páginas.
- Contêineres: aninhe elementos dentro de contêineres para criar facilmente uma estrutura responsiva e garantir que eles permaneçam no lugar. Adicione uma caixa contêiner básica ou recursos de layout inteligentes como Pilha, Layouters e Repetidores.
- Elementos: esses são os elementos que você adiciona do painel Adicionar (ex.: Texto, Botão, Formulários). Você pode encaixar elementos únicos ou empilhar vários elementos para garantir que eles permaneçam com a mesma ordem e espaçamento em todos os tamanhos de tela.
Importante:
Embora as grades não façam parte do modelo hierárquico, elas ainda podem afetar o tamanho e o posicionamento dos seus elementos. Saiba mais
Re-parenting elementos
A mudança de um child element para um novo parent container, é conhecido como "re-parenting". Para alterar o parent de um elemento, basta arrastá-lo e soltá-lo dentro do novo parent.
Encontrando o lugar de um elemento na hierarquia
Cada seção, contêiner e elemento em sua página tem breadcrumbs que indicam seu lugar na hierarquia. Você pode navegar facilmente entre as camadas da sua página clicando nos breadcrumbs.
Estruturação de sibling elements (elementos irmãos)
Siblings são elementos que compartilham o mesmo parent direto. Por exemplo, o texto e o botão dentro do contêiner abaixo são siblings, pois o contêiner é seu parent:
Se seus sibling elements estiverem em contêineres flexbox (ex.: Pilha, Layouters, Repetidores, eles podem afetar o tamanho e a posição uns dos outros. Criar essa relação pode ser útil para a criação de um site responsivo, pois você pode evitar que os elementos se sobreponham em tamanhos de tela menores.
No exemplo abaixo, você pode ver as margens que são criadas automaticamente entre sibling elements:
Alterações de estrutura nos breakpoints
O painel Camadas permite que você veja a relação (ou seja, a hierarquia) entre elementos, contêineres e seções em sua página e mova-os, conforme necessário.
A hierarquia da página faz parte da estrutura HTML do seu site, o que significa que as alterações feitas nela são refletidas em todos os breakpoints. Por exemplo, quando você separa um parent e um child (ex.: texto e seu contêiner), essa separação se aplica a todos os breakpoints.
Dica:
Para saber mais sobre como fazer seu design em breakpoints, clique aqui.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
