O editor está dividido em três áreas principais: a barra superior (em verde), o menu lateral (em vermelho) e a área de edição (em azul).
Barra superior
A barra superior possui alguns controles importantes para a edição da página:
-
Botões Desktop, Tablet, Celular: modificam o formato da página e a área de edição reflete como a página seria exibida em outro formato de tela.
-
Botões desfazer e refazer ações: desfaz as ações e refaz as ações.
-
Auto save: todas as suas alterações são salvas automaticamente.
-
Configurações: nome da página, link do Pixel do facebook, informações do SEO e paleta de cores.
-
Código da página: permite a edição do Head e Body do código.
-
Botão Fechar o Editor: Fecha o editor e por estar aberto em outra aba, direciona você para a página inicial da Hero.
-
Pré-visualizar a página: compila informações da página, javascript e css em uma visualização em tela cheia numa aba separada onde você pode visualizar como a página ficará
-
Publicar: publica a versão salva da página
Área de Construção da Página
A área de Construção da Página é onde a página é construída de fato. Nela geralmente estão contidos vários componentes, que podem ter suas configurações editadas através do Menu Lateral do Editor
Atenção! Caso tenha dúvidas quanto à navegação entre os componentes, confira o artigo "Como abrir as configurações de um componente".
Uma página possui 3 tipos de componentes: widgets, painéis e seções.
-
Widgets: Widgets (ou conteúdos) são componentes básicos, cada um tem um conjunto de configurações e uma função específica. Atualmente o editor suporta os seguintes widgets: Imagem, Vídeo, Texto, Botão e Formulário.
-
Painéis: Estrutura onde ficam contidos os widgets, utilizados principalmente para ajustar a disposição e layout dos elementos da página.
-
Seções: Estrutura onde ficam contidos painéis, define um contexto. É usado para organizar a página, e pode ser usado para delimitar áreas da sua página, como “Cabeçalho” ou “Área de depoimentos'', por exemplo.
Menu Lateral do Editor
O Menu Lateral do Editor é onde você realiza as configurações de todos os componentes.
