Principal Editor de páginas

Editor de páginas

Artigos sobre a utilização do Pages, o editor de páginas da Herospark.
Nicole Tassi
Por Nicole Tassi
• 17 artigos

Conheça a interface do editor (Pages)

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). 1.png   Barra superior A barra superior possui alguns controles importantes para a edição da página: 2.png - 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. 1.png - Painéis: Estrutura onde ficam contidos os widgets, utilizados principalmente para ajustar a disposição e layout dos elementos da página. 2.png - 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. 3.png Menu Lateral do Editor O Menu Lateral do Editor é onde você realiza as configurações de todos os componentes. unnamed.png

Última atualização em Jun 06, 2025

Como abrir as configurações dos componentes na página

Para editar um as configurações de um componente é necessário abrir essas configurações no Menu Lateral do Editor de Páginas. Antes de explicar como abrir um componente, precisamos de mais um pouco de vocabulário: Seção - Seção na qual um Painel está contido. Painel Pai - Painel que está contido em uma Seção. Painel Filho - Painel que está contido dentro de um Painel. Painel Aberto/Selecionado - Painel que está com as configurações abertas no menu lateral. Na imagem abaixo, o painel "Panel - Text" é filho do painel "Panel - Social Info”. unnamed__1_.png É possível abrir as configurações de um componente de 2 formas, uma dentro da área de edição da página clicando direto no componente e através da navegação do menu lateral.   Dentro da área de edição da página Ao clicar em um componente da página, suas configurações serão abertas no menu lateral do editor. O componente aberto será marcado com uma borda azul. 1.png Caso o painel contenha Painéis Filhos, estes serão indicados com uma borda vermelha. 2.png Logo acima da borda do painel aberto se encontra um indicador azul. Ao clicar no indicador será aberto o Painel Pai do painel selecionado. Para abrir um Painel Filho, clique no indicador vermelho que é exibido ao passar o mouse. 3.png   Dentro do Menu Lateral Para entrar num painel, é necessário clicar no ícone de “Editar”. 4.png Caso você esteja dentro de algum Painel filho você pode retornar ao Painel pai clicando no ícone da seta que substituirá o ícone da lista de seções. 5.png

Última atualização em Jun 06, 2025

Como configurar uma seção na página

Ao acessar uma seção (clicando sobre a seção na lista de seções ou navegando diretamente na página), será aberto o menu de configurações de uma seção. 2.png Editando a seção Dentro das configurações da seção você pode: - Alterar o nome da seção - Isso ajuda a tornar a navegação entre os painéis mais intuitiva, dê um nome que fique fácil de saber o que tem no painel. - Já que uma seção é constituída de painéis, aqui podemos alterar a ordem (clicando no ícone das 6 bolinhas) e tamanho dos painéis (clicando sobre a faixa rosa no final das caixas). - Adicionar um painel - Para adicionar um painel vazio clicando em “Adicionar Painel”. - Deletar ou duplicar o conteúdo da seção. 2.png Dentro de Propriedade da seção você pode: - Adicionar uma imagem ou GIF de fundo que ocupará toda a seção. - Escolha uma cor de fundo para a seção ou para ficar sobre a imagem. - Alterar o alinhamento do conteúdo - É possível alterar a disposição do conteúdo em relação às laterais do painel, horizontal e verticalmente. - Alterar as margens da seção - É possível alterar o espaçamento entre as laterais do painel e o conteúdo do painel. Você pode ajustar aumentando(+) ou diminuindo(-) pelos botões ou digitando o valor desejado na caixa de texto e pressionando enter para confirmar. - Largura Total - É possível remover as margens e deixar uma seção com largura total habilitando ou desabilitando o interruptor.3.png

Última atualização em Jun 06, 2025

Principais erros de usabilidade dentro do Editor

Sobreposição de blocos: Dentro do editor da HeroSpark, é importante evitar que os blocos dos painéis estejam sobrepostos. Isso por que você pode acabar impactando nas automações de features inseridas dentro do funil, principalmente em botões. Evite deixar um bloco em cima de outro, para que todas as features do funil funcionem corretamente. mceclip0.png A imagem acima mostra os blocos separados um do outro, o que garante o funcionamento correto do funil.   Informações não se ajustando quando acessadas por diferentes dispositivos: Caso você note que um segmento não está ficando como configurado no funil quando acessado por um outro dispositivo, é importante conferir as seguintes informações: - Certifique-se que as informações estão contidas dentro do bloco ou painel, e não estão alocadas para fora do seu respectivo campo. - Confira se as informações foram alteradas nas diferentes visões de acesso, como mostra nesse artigo. - Observe se não houve modificação de margens dentro do editor, dentro do respectivo campo que você observa o comportamento. - Evite trabalhar com imagens em tamanho fixo e de preferência para a opção "Ajustar ao do painel". Formulário de captura: O formulário de captura é uma ferramenta que está disponível para ser adicionada em qualquer página, porém o seu funcionamento é exclusivo para "páginas de captura" dentro do Funil de Captura. mceclip1.png Dessa forma caso esse formulário seja adicionado dentro de uma página de vendas por exemplo, é normal e esperado que os leads não sejam capturados, pois essa página não foi desenvolvida com essa funcionalidade. Além disso, os dados possíveis de serem capturados dentro deste formulário são: E-mail, nome e telefone. Qualquer dado fora desses três, não é passível de inclusão. Em caso de dúvida, não hesite em chamar nossa equipe de suporte!

Última atualização em Jun 06, 2025