Este artigo aborda as áreas do editor e como adicionar e configurar seções, linhas, colunas, linhas internas e o alinhamento widget.
O editor pode ser dividido em várias áreas.
No editor, há várias seções predefinidas: a barra de navegação superior, o painel lateral, a área central de conteúdo (geralmente chamada de tela do editor)e o painel de design na lateral. Essas seções são a base para construir sites de acordo com a visão do usuário.
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ê:
-
Navegação de página: clique no menu de páginas para acessar um menu suspenso exibindo todas as páginas disponíveis em seu site. Você pode navegar entre as páginas selecionando-as nesse menu.
-
Alterne entre visualizações de diferentes tamanhos de tela (também chamadas de pontos de interrupção) clicando nos ícones do dispositivo. Isso permite que o senhor visualize como a página atual aparece em vários tamanhos de tela, do desktop ao tablet e ao celular. Para saber mais, consulte Tamanhos de tela e dispositivos.
-
Aba Feedback: Disponível somente para o Editor 2.0. Clique no ícone de comentário e brilho para fornecer feedback sobre o editor. Compartilhe sugestões, faça perguntas, relate bugs ou forneça outros comentários.
-
Funcionalidade de pesquisa: clique no ícone da lupa para pesquisar o que precisar no editor ou acessar a central de ajuda para obter ajuda.
-
Info e tool: Clique no ícone de informações para acessar as seguintes informações:
-
Informações do site. Exibe o nome do site, o status publicado, a versão do editor e um link para o painel do site.
-
Link de pré-visualização. Exibe o link de visualização do site. Para copiar o link, selecione o tipo de dispositivo e clique em Copiar.
-
Estatísticas. Exibe estatísticas básicas do site. Para ver mais informações, clique em Abrir estatísticas. Essas informações estão disponíveis apenas para sites publicados. Para obter mais informações, consulte Estatísticas e análises do site.
-
Idioma do editor. Mude o idioma do editor. Isso não afeta o idioma do site. Para mudar o idioma do editor, selecione um idioma no menu suspenso.
-
-
Salvar indicador de progresso: O ícone de marca de seleção serve como um indicador do progresso atual do seu site e se as alterações foram salvas com sucesso.
-
Desfazer ou refazer: você pode usar as funcionalidades de desfazer e refazer representadas pelas setas circulares para trás e para frente para reverter ou reaplicar ações recentes realizadas no editor.
-
Modo de desenvolvedor: entre no modo de desenvolvedor clicando no ícone apropriado. Esse modo permite que você acesse e modifique o código HTML e CSS do seu site.
-
Pré-visualizar alterações: clique no ícone do olho para visualizar seu site, incluindo alterações não publicadas, em todos os tamanhos de tela ou em dispositivos individuais.
-
Publicar ou republicar: use o botão publicar ou republicar para publicar seu site com as alterações mais recentes.
-
Botão Início: Clique no ícone da página inicial para retornar ao painel do site.
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:
-
Camadas (disponível somente no modo flexível e no Editor 2.0)
-
Tema
-
Páginas
-
Widgets
-
Conteúdo
-
Personalizar
-
Venda on-line
-
Adesão
-
Blog
-
SEO e configurações
-
Ocultar elementos (visível somente se você tiver elementos ocultos; aplicável apenas ao editor clássico, no editor 2.0 e no modo flexível, os elementos ocultos podem ser encontrados na tela de camadas)
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.
Nota
Para saber mais sobre as opções de edição de tela, consulte Ações e opções da tela.
Nota
Esse conteúdo é relevante para o modo Flex no Editor Clássico e no Editor 2.0. Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
O painel de design oferece uma variedade de configurações de design para elementos selecionados, permitindo uma personalização precisa. Seja para ajustar o alinhamento do conteúdo do layout, o espaçamento entre os elementos, a animação e o plano de fundo, o painel de design oferece um conjunto abrangente de tool 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.
O Website Builder é construído a partir de um cabeçalho, rodapé, linhas e colunas. Cada widget que o senhor adiciona é inserido em uma dessas seções.
Nota
Se você estiver usando o modo flexível no Editor Clássico ou no Editor 2.0, as linhas serão denominadas " seções ". Para saber mais, consulte Design com Flex.
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.
Nota
Se você estiver usando o modo flexível no Editor Clássico ou no Editor 2.0, as linhas serão denominadas " seções ". Para saber mais, consulte Design com Flex.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
Use o editor de linhas para alterar o plano de fundo da linha (cor ou imagem), adicionar uma borda ou ajustar o espaçamento interno e externo da linha. Use linhas para organizar e organizar o conteúdo em seu site.
Para configurar linhas:
-
hover sobre o canto superior esquerdo de uma linha até que apareça um botão de linha e clique em Row. O menu do editor de linhas é exibido.
-
Clique nas setas Mover linha para cima e Mover linha para baixo para mover a linha atual para cima ou para baixo.
-
Para abrir o editor de design de linha, clique em Editar design. Para obter mais informações, consulte Editor de design de linha. O editor de design de linha é exibido.
-
Clique em +Adicionar e selecione uma das seguintes opções:
-
Linha acima. Adicione uma nova linha acima da linha atual.
-
Linha abaixo. Adicione uma nova linha abaixo da linha atual.
-
Seção. Adicione uma seção à linha.
-
Coluna. Adicione uma coluna à linha.
-
Fileira interna. Adicione uma linha dentro da linha atual.
-
-
Para limpar o espaçamento interno dentro da linha, clique em Limpar preenchimento.
-
Para reverter o espaçamento para o que você definiu no espaçamento do tema, clique em Redefinir para o espaçamento padrão.
-
Para adicionar uma animação de entrada à linha (por exemplo, desvanecer da direita, pular, ampliar), clique em Animação de entrada e selecione uma opção.
-
Para salvar a linha como uma seção, clique em Salvar como seção e selecione salvar somente a linha atual, várias linhas ou a página inteira.
-
Para ocultar a linha atual em um dispositivo específico (desktop, tablet, celular), clique em Hide On Device (Ocultar no dispositivo) e selecione o dispositivo.
-
Para bloquear a linha para edição do cliente, clique em Bloquear para edição do cliente.
-
Para copiar a linha, clique em Copiar.
-
Para ancorar a linha na página ou excluir uma âncora existente, clique em Definir como âncora ou Editar âncora.
-
Para excluir a linha, clique em Excluir.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
Para editar o estilo do plano de fundo ou o espaçamento da linha:
-
hover sobre o canto superior esquerdo de uma linha até que apareça um botão de linha, clique em Row e, em seguida, clique em Edit Design.
-
Na guia Configurações, você tem as seguintes opções:
-
Linha de sangramento total. Para transformar a linha em uma linha com sangria total, o que permite que o conteúdo se estenda por toda a largura da tela, clique no botão Linha com sangria total. Se você optar por não ter linhas com margem total, a largura do conteúdo será limitada a 960 px.
-
-
Na guia Estilo, selecione usar uma cor de fundo, imagem ou vídeo. Você tem as seguintes opções:
-
Cor
-
Selecione uma cor de fundo. A cor do gradiente substitui a imagem e vice-versa.
-
Clique em Borda para selecionar um tipo de borda e mova o controle deslizante para definir a largura da borda.
-
Para adicionar uma sombra, clique no botão Sombra e selecione uma cor, um tipo e uma posição para a sombra.
-
-
Imagem
-
Para adicionar uma imagem ao plano de fundo, clique em + para abrir o seletor de imagens.
-
Para criar um controle deslizante de imagem de fundo, selecione várias imagens no seletor de imagens e consulte Controle deslizante de imagem de fundo.
-
Selecione para que a imagem seja exibida como capa, imagem completa, mosaico ou Sem repetição.
-
Para ativar a rolagem paralaxe em uma imagem de fundo, clique no botão de rolagem paralaxe. Quando isso está ativado, o conteúdo em segundo plano rola mais lentamente do que o conteúdo em primeiro plano.
Nota
-
A rolagem paralaxe não é uma opção para o controle deslizante de imagem de fundo ou em dispositivos móveis.
-
A opção de manter uma imagem de fundo estática não está disponível para tablets e celulares devido a uma limitação do iOS.
-
-
Configure a posição, a sobreposição do plano de fundo, a borda e a sombra da imagem.
-
-
Vídeo. Clique em Selecionar vídeo para ver os vídeos enviados ou cole o URL do vídeo do YouTube, Vimeo ou Dailymotion no campo fornecido. Para obter mais informações sobre planos de fundo de vídeo, consulte Planos de fundo de elementos.
Nota
Para obter mais informações sobre planos de fundo, consulte Planos de fundo do elemento.
-
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
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.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
Use o editor de colunas para mudar a cor ou a imagem de fundo de uma coluna, adicionar uma borda ou ajustar o espaçamento interno e externo da coluna. Use colunas para organizar e dispor o conteúdo em uma linha.
Para configurar uma coluna:
-
Clique com o botão direito do mouse na coluna. O menu do editor de colunas é exibido.
Nota
Se não houver espaço na coluna, o botão direito do mouse não estará diretamente acessível. Para acessar a coluna nesse caso, clique com o botão direito do mouse em um widget que esteja na coluna (isso deve abrir o menu de contexto do widget e anotar o nome dele na parte superior), clique em Select Container, selecione Column. Para verificar se ela mudou para o menu de contexto da coluna, consulte a parte superior; agora deve dizer Coluna.
-
Clique nas setas Mover coluna para a esquerda e Mover coluna para a direita para mover a coluna atual para a esquerda ou para a direita (as setas serão desativadas se houver apenas uma coluna).
-
Para abrir o editor de design da coluna, clique em Editar design. Para obter mais informações, consulte Editor de design de colunas. O editor de design da coluna é exibido.
-
Clique em +Adicionar e selecione uma das seguintes opções:
-
Coluna. Adicione uma nova coluna à linha atual (no máximo 4 colunas podem ser adicionadas por linha no desktop e 2 no celular).
-
Fileira interna. Adicione uma linha na coluna atual.
-
widget abaixo. Adicionar um widget.
-
-
Para limpar o espaçamento interno dentro da coluna, clique em Limpar preenchimento.
-
Para reverter o espaçamento para o que você definiu no espaçamento do tema, clique em Redefinir para o espaçamento padrão.
-
Para adicionar uma animação de entrada à coluna (por exemplo, desvanecer da direita, aumentar o zoom), clique em Animação de entrada e selecione uma opção.
-
Para ocultar a coluna atual em um dispositivo específico (desktop, tablet, celular), clique em Hide On Device (Ocultar no dispositivo) e selecione o dispositivo.
-
Para bloquear a coluna para edição do cliente, clique em Bloquear para edição do cliente.
-
Para copiar a coluna, clique em Copiar.
-
Para ancorar a coluna na página ou excluir uma âncora existente, clique em Definir como âncora ou Editar âncora.
-
Para excluir a coluna, clique em Excluir.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
Para editar o estilo do plano de fundo ou o espaçamento da uma coluna:
-
Clique com o botão direito na coluna e clique em Editar design.
-
Nota
Se não houver espaço na coluna, o botão direito do mouse não estará diretamente acessível. Para acessar a coluna nesse caso, clique com o botão direito do mouse em um widget que esteja na coluna (isso deve abrir o menu de contexto do widget e anotar o nome dele na parte superior), clique em Select Container, selecione Column. Para verificar se ela mudou para o menu de contexto da coluna, consulte a parte superior; agora deve dizer Coluna.
-
-
Na guia Estilo, selecione usar uma cor de fundo, imagem ou vídeo. Você tem as seguintes opções:
-
Cor
-
Selecione uma cor de fundo. A cor do gradiente substitui a imagem e vice-versa.
-
Clique em Borda para selecionar um tipo de borda e mova o controle deslizante para definir a largura da borda.
-
Para adicionar uma sombra, clique no botão Sombra e selecione uma cor, um tipo e uma posição para a sombra.
-
-
Imagem
-
Para adicionar uma imagem ao plano de fundo, clique em + para abrir o seletor de imagens.
-
Para criar um controle deslizante de imagem de fundo, selecione várias imagens no seletor de imagens e consulte Controle deslizante de imagem de fundo.
-
Selecione para que a imagem seja exibida como capa, imagem completa, mosaico ou Sem repetição.
-
Configure a posição, a sobreposição do plano de fundo, a borda e a sombra da imagem.
-
-
Vídeo. Clique em Selecionar vídeo para ver os vídeos enviados ou cole o URL do vídeo do YouTube, Vimeo ou Dailymotion no campo fornecido. Para obter mais informações sobre planos de fundo de vídeo, consulte Planos de fundo de elementos.
Nota
Para obter mais informações sobre planos de fundo, consulte Planos de fundo do elemento.
-
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.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
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:
-
Clique com o botão direito na linha e clique em Adicionar linha interna. Se houver várias colunas na linha, escolha em qual coluna você deseja adicionar as linhas internas.
-
Clique com o botão direito 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.
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.
Nota
-
As seções não usam qualquer CSS personalizado e são todas construídas dentro do editor por designers.
-
As seções não utiliza a cor do texto ou as configurações de fonte de texto das configurações do tema do site. No entanto, você sempre pode limpar o formato e usar o seu design.
-
As seções não podem ser usadas no cabeçalho. Para alternar a seção completa do cabeçalho, abra o editor de cabeçalho. Para obter mais informações, consulte Cabeçalhos.
Adicionar seções
Para adicionar seções do site widget:
-
hover entre as linhas e clique em Add Section (Adicionar seção).
-
Selecione Projetado. As seções são exibidas no painel lateral.
-
No Section Mode, uma galeria de seções pré-criadas está disponível no painel esquerdo, agrupadas em categorias (Intro, Features, About, Team, Testimonials e assim por diante).
-
No painel lateral, clique em uma seção para exibi-la como uma nova linha. Em seguida, você pode navegar pelas seções dentro do mesmo grupo usando as teclas de seta ou selecionando uma seção de um grupo diferente.
-
Para incorporar a seção ao site, clique em Salvar. Como alternativa, clique em Salvar & Adicionar outro para continuar adicionando seções ao seu site. A seção é convertida em uma linha e todos os elementos na seção são editáveis.
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 site 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: