A organização do conteúdo no site é muito importante. Organizar bem o conteúdo facilita que os visitantes encontrem o que estão procurando e permite destacar seções do site que, de outra forma, poderiam ser ignoradas. Uma página bem organizada faz com que o site ganhe uma aparência profissional e ajuda a aumentar as vendas, permitindo que os visitantes tenham facilidade para encontrar o que estão buscando.
Estrutura do Construtor de Sites
O Construtor de Sites é construído a partir de um cabeçalho, rodapé, linhas e colunas. Cada widget que você adiciona é inserido em uma dessas seções.
Os widgets costumam ocupar toda a coluna ou linha, por isso, é difícil selecioná-los. Para contornar isso, clique com o botão direito do mouse no widget na coluna ou na linha que deseja selecionar, passe o mouse sobre a opção Selecionar contêiner e selecione coluna ou linha.
Linhas
As linhas são as seções horizontais do site. Quando você adiciona widgets e colunas ao site, eles são colocados nessas linhas. Para alterar a forma como o conteúdo é exibido na visualização móvel, clique na ordem inversa da coluna alternar no editor de linha.
Você pode adicionar linhas ao seu site, arrastando widgets para o site. Quando você arrasta um widget entre linhas ou para um espaço onde deseja adicionar uma linha, uma nova linha será criada quando você soltar o widget.
Para excluir uma linha, clique com o botão direito do mouse na linha para abrir o menu de contexto e clique em Excluir. Ou clique no botão de Linha no canto superior esquerdo da linha e clique em Excluir.
Colunas
Cada linha contém pelo menos uma coluna. As colunas contêm todos os widgets em seu site e controlam sua disposição.
Cada linha pode ter até quatro colunas. Sempre que você adiciona uma nova coluna, ela aparece ao lado da coluna existente nessa linha.
- Enquanto os modos de exibição para desktop e tablet permitem que cada linha contenha até quatro colunas, sites para celulares só podem exibir no máximo duas colunas em cada linha.
- As colunas adicionadas no modo de exibição para computador ou tablet abrangerão toda a largura da página quando forem mudadas para o modo de exibição para celular; para criar uma linha com duas colunas no modo de exibição para celular, primeiro mude para exibição para celular e, em seguida, adicione um widget de duas colunas.
Para excluir uma coluna, clique com o botão direito do mouse em qualquer lugar da coluna para abrir o menu de contexto e clique em Excluir. Ou clique no X vermelho no canto superior direito da coluna.
Você pode colocar um widget diretamente em colunas ou estruturar ainda mais a coluna adicionando linhas internas.
Linhas internas
As linhas internas dão flexibilidade extra ao design, permitindo a inclusão de linhas dentro de colunas. Com a ajuda das linhas internas, é possível variar o layout da coluna e manter o design geral da linha (por exemplo, plano de fundo, espaçamento, sangria).
Assim como as linhas regulares, as linhas internas podem ter seu próprio plano de fundo e espaçamento, ser divididas em até quatro colunas e alterar a ordem das colunas no celular. As colunas nas linhas internas podem ser preenchidas por qualquer widget, mas as linhas internas não podem ser adicionadas a essas colunas.
Para adicionar uma linha interna a uma coluna, faça o seguinte:
- Clique com o botão direito do mouse na linha e clique em Adicionar linha interna. Se houver várias colunas na linha, será necessário escolher a qual delas deseja adicionar as linhas internas.
- Clique com o botão direito do mouse na coluna e clique em Adicionar linha interna.
- Clique com o botão direito do mouse na linha interna e clique em Adicionar linha para colocar uma linha interna abaixo da atual.
Exemplo de linha interna
Para dar um exemplo de como usar a linha interna, vejamos duas maneiras de criar um layout que contém um título e três botões:
- Adicione duas linhas. Coloque o título na linha 1 com 1 coluna. Divida a linha 2 em 3 colunas. Coloque um botão em cada coluna.
- Duas linhas separadas não podem compartilhar a mesma imagem de plano de fundo, sendo necessário definir o estilo de espaçamento e de margens separadamente para cada linha.
- Adicione uma linha. Por padrão, cada linha contém uma coluna. Adicione 2 linhas internas à coluna. Insira o Título na linha interna 1. Divida a linha interna 2 em 3 colunas. Insira um botão em cada coluna.
- Essas duas linhas internas compartilharão o fundo da linha principal, espaçamento e preenchimento.
Algumas considerações importantes quando se trata de editar linhas internas:
- Você pode usar apenas as setas de troca de ordem para alternar a ordem entre as linhas internas. Para alterar a ordem dos widgets e linhas internas, você precisa arrastar e soltar manualmente os widgets acima ou abaixo da linha interna.
- 2 colunas, 3 colunas e 4 colunas não podem ser colocados em linhas internas. Para adicionar uma coluna, clique com o botão direito do mouse na linha e clique em Adicionar Coluna.
- Diferentemente da linha regular, as linhas internas não podem ser copiadas e coladas.
Widgets
Os widgets contêm o texto, as imagens, os botões e outros conteúdos do site.
Para adicionar widgets ao seu site:
- No painel esquerdo, clique em Widgets s.
- Procure o widget desejado, arraste-o e solte-o no site.
Para excluir um widget de seu site, clique com o botão direito do mouse em qualquer lugar do widget para abrir o menu de contexto, e depois clique em Excluir. Alternativamente, clique no vermelho X no canto superior direito do widget.
Para organizar widgets lado a lado, arraste um widget para o seu site, adicione uma coluna à linha onde esse widget foi colocado e arraste outro widget para essa coluna. Como alternativa, arraste o widget de duas colunas para seu site e arraste e solte os widgets em cada coluna.
Ajustar para alinhar
Ao redimensionar os widgets dentro da mesma coluna, o Construtor de sites tentará Ajustar para alinhar, para que eles fiquem exatamente do mesmo tamanho. No redimensionamento, o Construtor de sites pula para frente ou para trás para se encaixar no local. Isso deve facilitar a criação de widgets do mesmo tamanho.
Ajustar à grade
O recurso Snap to Grid ajuda a colocar widgets nas páginas de seu site com precisão profissional. Esta função permite que você alinhe widgets horizontal e verticalmente em colunas e linhas. As réguas são exibidas ao mover um elemento em sua linha ou coluna ou ao redimensionar o widget. Os elementos alinhados são marcados com uma borda colorida. Um widget pode estar alinhado a mais de um outro widget, dependendo do caso de uso específico.
O alinhamento é compatível com visualizações nos três dispositivos diferentes (computador, tablet, celular).
Para obter mais informações sobre como adicionar e editar widgets, consulte Adicionar widgets e Editar widgets.