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 é criado com cabeçalho, rodapé, linhas e coluna. Todo adicionado será inserido em uma dessas seções.
Os widgets costumam ocupam toda a coluna ou linha, por isso, é difícil selecioná-los. Para contornar essa situação, clique com o botão direito do mouse no na coluna ou linha que você quer 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 e colunas ao site, eles são colocados nessas linhas. Para alterar a forma como o conteúdo é exibido no celular, clique no botão reverter ordem da coluna no editor da linha.
Você pode adicionar linhas ao seu site arrastando para o site. Quando você arrasta um entre linhas ou para um espaço em que deseja adicionar uma linha, uma nova linha será criada quando você soltar o .
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.
Para obter informações detalhadas sobre como editar e organizar linhas, consulte Editor de linhas.
Colunas
Cada linha contém pelo menos uma coluna. As colunas contêm todos os do seu site e controlam a organização deles.
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 diretamente em colunas ou estruturar ainda mais a coluna adicionando linhas internas.
Para obter informações detalhadas sobre como editar e organizar colunas, consulte Editor de colunas.
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 , 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 ao seu site:
- No painel esquerdo, clique em Widgets.
- Procure o desejado, arraste-o e solte-o no site.
Para excluir um do site, clique com o botão direito do mouse em qualquer lugar do para abrir o menu de contexto e clique em Excluir. Ou clique no X vermelho no canto superior direito do .
Para organizar lado a lado, arraste um para o seu site, adicione uma coluna à linha em que esse foi colocado e arraste outro para essa coluna. Você também pode arrastar o de duas colunas para o seu site e depois arrastar e soltar os em cada coluna.
Ajustar para alinhar
Ao redimensionar os s 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. Assim, fica mais fácil criar s exatamente do mesmo tamanho.
Ajustar à grade
O recurso Ajustar à grade ajuda a posicionar os s nas páginas do site com precisão profissional. Este sistema permite alinhar os s de maneira horizontal e vertical dentro de colunas e linhas. As réguas são exibidas na movimentação dos elementos em suas linhas ou colunas ou no redimensionamento do . Os elementos alinhados são marcados com uma borda colorida. Um pode estar alinhado a mais de um outro , dependendo da aplicação específica.
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 , consulte Adicionar widgets e Editar widgets.