Organização do conteúdo

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 widget 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 widget 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 widgets 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 widgets para o site. Quando você arrasta um widget entre linhas ou para um espaço em que deseja adicionar uma linha, uma nova linha será criada quando você soltar o widget.

Para excluir uma linha, clique com o botão direito em qualquer parte da linha para abrir o menu de contexto e clique em Excluir. Você também pode clicar no botão de Linha no canto superior esquerdo da linha e clicar em Excluir.

Colunas

Cada linha contém pelo menos uma coluna. As colunas contêm todos os widgets 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.

Nota
  • 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:

  1. 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.
  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 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:

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

Para excluir um widget do site, clique com o botão direito em qualquer parte do widget para abrir o menu de contexto e clique em Excluir. Outra opção é clicar no X vermelho no canto superior direito do widget.

Para organizar widgets lado a lado, arraste um widget para o seu site, adicione uma coluna à linha em que esse widget foi colocado e arraste outro widget para essa coluna. Você também pode arrastar o widget de duas colunas para o seu site e depois arrastar e soltar os widgets em cada coluna.

Ajustar para alinhar

Ao redimensionar os widgets dentro da mesma coluna, o Duda tentará Ajustar para alinhar, para que eles fiquem exatamente do mesmo tamanho. No redimensionamento, o Duda pula para frente ou para trás para encaixar no local. Assim, fica mais fácil criar widgets exatamente do mesmo tamanho.

Ajustar à grade

O recurso Ajustar à grade ajuda a posicionar os widgets nas páginas do site com precisão profissional. Este sistema permite alinhar os widgets 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 widget. Os elementos alinhados são marcados com uma borda colorida. Um widget pode estar alinhado a mais de um outro widget, dependendo da aplicação específica.

Nota

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.

Esse artigo foi útil?
Usuários que acharam isso útil: 0 de 0

Feedback sobre este artigo

0 comentário

Por favor, entre para comentar.

×

Faça o login como Profissional

O Suporte prioritário por telefone está disponível exclusivamente para profissionais. Acesse a sua conta Pro agora para ver nossos números de suporte internacional.

Registre-se
Não é profissional? Adquira um plano Pro!