Visão geral do editor

A barra de navegação superior contém atalhos úteis para diferentes ações do site.

A barra de navegação superior permite que você:

O painel lateral serve como um kit de ferramentas abrangente para gerenciar vários aspectos do design e da funcionalidade do seu site. Você pode fazer mudanças amplas e abrangentes no design e na funcionalidade do seu site. Essas guias permitem que o senhor personalize a aparência do site, adicione novos recursos e widget, defina as configurações da página, gerencie o conteúdo, venda produtos on-line, publique postagens em blogs, instale aplicativos e otimize o site para os mecanismos de pesquisa.

Se você estiver no Editor Clássico usando o modo flexível ou no Editor 2.0, terá acesso ao painel Camadas. O painel Camadas fornece uma visão hierárquica dos elementos da página do seu site, permitindo que você navegue e gerencie estruturas complexas com facilidade. Aqui, é possível identificar rapidamente a disposição de widget, colunas e seções, simplificando o processo de localização e ajuste de elementos específicos. No painel Camadas, você pode realizar várias ações, como adicionar novos elementos, selecionar elementos, reorganizar elementos, renomear elementos e alternar a visibilidade do elemento em pontos de interrupção específicos.

A seguir estão as opções disponíveis no painel lateral:

A Área de Conteúdo/Tela é onde você pode mover ou adicionar qualquer um dos nossos recursos, ou clicar e editar para alterá-los. A área de conteúdo permite que você altere imagens, texto, botões de edição e exclusão e muito mais.

O painel de design oferece uma variedade de configurações de design para elementos selecionados, permitindo uma personalização precisa. Se você estiver ajustando o alinhamento do conteúdo do layout, o espaçamento entre elementos, animação e plano de fundo, o painel de design fornece um conjunto abrangente de ferramentas para aprimorar o apelo visual do seu site. As opções de design incluem ajustes de layout, configurações de dimensionamento, configurações de alinhamento e muito mais, personalizados para o elemento selecionado.

Ao selecionar um elemento e ajustar as configurações de preenchimento e margem, o preenchimento é o espaço interno entre o conteúdo e a borda da caixa, e a margem é o espaço externo ao redor da caixa. Isso significa que os ajustes de preenchimento podem alterar o tamanho de um elemento e influenciar a área visível da cor de fundo ou da imagem no interior da caixa. Por outro lado, o ajuste das margens determina o espaço entre um elemento e seus vizinhos ou com as bordas da tela, definindo seu posicionamento em relação a outros elementos na página, atuando como barreiras invisíveis.

Para saber mais sobre o Painel de design e suas seções, consulte Painel de design.

As linhas são as seções horizontais do seu site. Quando o senhor adiciona widget e colunas ao seu site, elas são colocadas dentro dessas linhas. Para alterar a forma como o conteúdo é exibido na visualização móvel, clique no botão inverter a ordem das colunas no editor de linhas.

O senhor pode adicionar linhas ao seu site arrastando widget para o site. Quando o usuário arrasta um widget entre linhas ou para um espaço onde deseja adicionar uma linha, uma nova linha será criada quando o widget for solto.

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.

Para obter informações detalhadas sobre edição e organização de linhas, consulte Editor de linhas.

Cada linha contém pelo menos uma coluna. As colunas contêm todos os widget em seu site e controlam sua disposição. 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. Como alternativa, clique no X vermelho no canto superior direito da coluna.

O senhor pode colocar o widget diretamente nas colunas ou estruturar ainda mais a coluna adicionando linhas internas.

Os controles deslizantes de imagem de fundo podem ser usados para definir imagens de fundo para linhas ou colunas.

Depois de selecionar várias imagens no seletor de imagens, clique em Concluído. Depois que o controle deslizante for criado, selecione uma transição de slide no menu suspenso e mova o controle deslizante para selecionar uma velocidade de slide (segundos).

Qualquer outra opção de imagem de plano de fundo, como Sobreposição de fundo, Posicionamento e Estilo de exibição, pode ser aplicada ao controle deslizante.

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 normais, as linhas internas podem ter seu próprio plano de fundo e espaçamento, ser divididas em até quatro colunas e ter a ordem das colunas alterada 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:

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:

Exemplo 1: 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. Observe que duas linhas separadas não podem compartilhar a mesma imagem de fundo e você precisa definir o espaçamento e o estilo de sangria separadamente para cada linha.

Exemplo 2: Adicione uma linha. Por padrão, cada linha contém uma coluna. Adicione 2 linhas internas à coluna. Coloque o título na linha interna 1. Divida a linha interna 2 em 3 colunas. Coloque um botão em cada coluna. Essas duas linhas internas compartilharão o plano de fundo, o espaçamento e a sangria da linha principal.

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, 4 colunas widget não pode ser colocado 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.

As seções são linhas pré-construídas de elementos que os usuários podem adicionar aos seus sites responsivos. As seções permitem que os usuários criem sites com ótima aparência rapidamente, economizando tempo durante o processo de design. A infraestrutura foi construída para proporcionar uma melhor experiência ao usuário com uma variedade de seções pré-fabricadas.

Ao alinhar o site widget na mesma coluna, o Website Builder tenta fazer com que o Snap to Align tenha exatamente o mesmo tamanho. Conforme você redimensiona, o construtor pula para frente ou para trás para se ajustar ao local. Isso deve facilitar a criação de widget com o mesmo tamanho exato.

Há também um recurso Snap to Grid. O recurso Snap to Grid ajuda a colocar widget nas páginas do seu site com precisão profissional. Esse sistema permite que o senhor alinhe o widget horizontal e verticalmente em colunas e linhas. As réguas são apresentadas 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.

O alinhamento é compatível com visualizações nos três dispositivos diferentes (computador, tablet, celular).

Para obter mais informações sobre como configurar cabeçalhos e rodapés, consulte: