Site avançado: Organizar conteúdo

O Construtor de Sites é estruturado 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 largura de uma coluna ou linha, dificultando sua seleção. Para contornar isso, clique com o botão direito do mouse no widget da coluna ou linha que deseja selecionar, passe o cursor sobre a opção Selecionar Contêiner e selecione Coluna ou Linha.

As linhas são as seções horizontais do seu site. Quando você adiciona widgets e colunas ao seu site, eles são posicionados dentro dessas linhas. Para alterar a forma como o conteúdo é exibido na visualização para dispositivos móveis, clique na opção "Inverter ordem das colunas" no editor de linhas. Você precisa estar editando as opções de design da linha na visualização para dispositivos móveis para acessar a opção "Inverter ordem das colunas".

Você pode adicionar linhas ao seu site arrastando widgets para dentro dele. Ao arrastar um widget entre linhas ou para um espaço onde deseja adicionar uma linha, uma nova linha será criada ao soltar o widget.

Para excluir uma linha, clique com o botão direito do mouse em qualquer lugar da linha para abrir o menu de contexto e clique em Excluir. Como alternativa, clique no botão Linha no canto superior esquerdo da linha e clique em Excluir.

Cada linha contém pelo menos uma coluna. As colunas contêm todos os widgets do seu site e controlam sua disposição.

Cada linha pode conter até quatro colunas. Sempre que você adiciona uma nova coluna, ela aparece ao lado da coluna existente naquela linha.

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. Como alternativa, clique no X vermelho no canto superior direito da coluna.

Você pode inserir widgets diretamente nas colunas ou estruturar ainda mais a coluna adicionando linhas internas.

As linhas internas oferecem maior flexibilidade de design, permitindo adicionar linhas dentro de colunas. Com a ajuda das linhas internas, você pode 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 ter sua ordem alterada em dispositivos móveis. As colunas nas linhas internas podem ser preenchidas por qualquer widget, mas não é possível adicionar novas linhas internas a essas colunas.

Para adicionar uma linha interna a uma coluna, faça um dos seguintes procedimentos:

1. Clique com o botão direito do mouse na linha e clique em Adicionar Linha Interna. Se houver várias colunas na linha, escolha a qual coluna deseja adicionar as linhas internas.
2. Clique com o botão direito do mouse na coluna e clique em Adicionar linha interna.
3. Clique com o botão direito do mouse na linha interna e clique em Adicionar Linha para inserir uma linha interna abaixo da atual.

Para exemplificar como usar a linha interna, vejamos duas maneiras de criar um layout que contenha 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 fundo, sendo necessário definir o espaçamento e a sangria separadamente para cada linha.

• Adicione uma linha. Por padrão, cada linha contém uma coluna. Adicione duas linhas internas à coluna. Coloque o título na primeira linha interna. Divida a segunda linha interna em três colunas. Coloque um botão em cada coluna.

  • Essas duas linhas internas compartilharão o fundo, o espaçamento e a sangria da linha principal.

    

Algumas considerações importantes ao editar linhas internas:

• Você só pode usar as setas de inversão de ordem para trocar a ordem entre as linhas internas. Para inverter a ordem dos widgets e das linhas internas, você precisa arrastar e soltar manualmente os widgets acima ou abaixo da linha interna.
• Widgets de 2, 3 ou 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 selecione "Adicionar coluna".
• Diferentemente das linhas normais, as linhas internas não podem ser copiadas e coladas.

Os widgets contêm o texto, as imagens, os botões e outros conteúdos do seu site.

Para adicionar widgets ao seu site:

1. No painel esquerdo, clique em Widgets.
2. Procure o widget desejado e, em seguida, arraste e solte-o em seu site.

Para excluir um widget do seu site, clique com o botão direito do mouse em qualquer lugar do widget para abrir o menu de contexto e clique em Excluir. Como alternativa, clique no X vermelho no canto superior direito do widget.

Para organizar os widgets lado a lado, arraste um widget para o seu site, adicione uma coluna à linha onde o widget foi colocado e, em seguida, arraste outro widget para essa coluna. Como alternativa, arraste o widget de duas colunas para o seu site e, em seguida, arraste e solte os widgets em cada coluna.

Ao redimensionar widgets dentro da mesma coluna, o Guesty Websites tenta alinhá-los automaticamente para que tenham exatamente o mesmo tamanho. Conforme você redimensiona, o Guesty Websites avança ou retrocede para se ajustar à posição correta. Isso deve facilitar o ajuste de widgets para que tenham exatamente o mesmo tamanho.

O recurso "Ajustar à Grade" ajuda a organizar widgets nas páginas do seu site com precisão profissional. Este sistema permite alinhar widgets horizontal e verticalmente dentro de colunas e linhas. 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 ser alinhado com mais de um outro widget, dependendo do caso de uso específico.

Para obter mais informações sobre como adicionar e editar widgets, consulte Adicionar Widgets e Editar Widgets.