Visão geral do editor

A barra de navegação superior dentro do editor 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.

A seguir estão as opções padrão 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

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 você adiciona widgets e colunas ao seu site, eles são colocados 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

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 em qualquer lugar da linha para abrir o menu de contexto e clique emExcluir. Como alternativa, clique noLinhabotão no canto superior esquerdo da linha e clique emExcluir.

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

Cada linha contém pelo menos uma coluna. As colunas contêm todos os widgets do seu site e controlam sua organização. Sempre que você adiciona uma nova coluna, ela aparece ao lado da coluna existente nessa linha.

Enquanto as visualizações para computadores e tablets permitem que cada linha tenha até quatro colunas, os sites para dispositivos móveis só podem mostrar no máximo duas colunas em uma linha. As colunas adicionadas nas visualizações de desktop ou tablet assumirão a largura total da página quando alternadas para a visualização móvel; para criar uma linha com duas colunas na visualização móvel, primeiro mude para a visualização móvel 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 emExcluir. Como alternativa, clique no vermelhoXno canto superior direito da coluna.

Você 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 emFeito. 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

Qualquer outra opção de imagem de fundo, como sobreposição de fundo, posicionamento e estilo de exibição, pode ser aplicada ao controle deslizante.

As linhas internas permitem maior flexibilidade de design, permitindo que você adicione linhas dentro das 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 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

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, vamos ver duas maneiras pelas quais um layout que contém um título e 3 botões pode ser projetado:

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

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ê só pode usar as setas de troca de ordem para alternar a ordem entre as linhas internas. Para alternar 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 colunas, 3 colunas, 4 colunas não podem ser colocados nas linhas internas. Para adicionar uma coluna, clique com o botão direito na linha e clique em Adicionar coluna.

• Ao contrário da linha normal, 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 widgets na mesma coluna, o criador de sites tentaEncaixar para alinhareles devem ter 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 widgets do mesmo tamanho

Há também um recurso Snap to Grid. Snap to Grid O recurso ajuda a colocar widgets nas páginas do seu site com precisão profissional. Esse sistema permite alinhar widgets horizontal e verticalmente dentro de 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 estar alinhado com mais de um outro widget, dependendo do caso de uso específico

O alinhamento é suportado nas visualizações dos três dispositivos diferentes (desktop, tablet, celular).

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