Como usar o editor de landing page

Visão geral

Neste tutorial, ajudaremos você a aprender como usar o editor para criar sua própria landing page.

Primeiro, tire um momento para aprender: o que é uma landing page?

Dica: landing pages estão disponíveis para planos Premium e superiores.

Editar configurações

Configurações de largura de página podem ser definidas em Etapa 1 - Configurando sua landing page sob Configurações opcionais.

Para dar a você uma compreensão maior de como uma página é estruturada, veja Passo 2 - Como criar sua landing page.

A aba Administrar o layout ajuda você a navegar entre seções, linhas e colunas. Para editar suas configurações, veja nosso guiar Editar as configurações dos componentes da landing page.

Dica: para mover rapidamente de um componente para o outro, segure a tecla shift do seu teclado e (ao mesmo tempo) clique no componente que deseja editar.

Adicionar um novo componente

Adicionar uma página

Para adicionar uma nova página, na barra lateral esquerda, clique na aba Administrar páginas e então no botão + ADICIONAR UMA PÁGINA EM BRANCO.

Adicionar uma seção

Para adicionar uma nova seção, você tem três opções:

  1. Na barra lateral esquerda, clique na aba Adicionar seções e então no botão + ADICIONAR SEÇÃO.
  2. Alternativamente, se seu mouse estiver sob a seção, embaixo você pode clicar no botão ADICIONAR LINHA OU SEÇÃO, então em ADICIONAR SEÇÃO. À esquerda, será exibido o menu para adicionar seção.
  3. Outra forma para adicionar uma nova seção é a partir da aba Administrar layout, clicando no botão + ADICIONAR SEÇÃO.

Escolha se você deseja:

  • Adicionar uma seção vazia
  • Adicionar uma seção pré-definida. Você pode usar a lista suspensa para filtrar por tipo (todas, capa, cabeçalho, formas, recursos, chamar para ação, depoimentos).

Adicionar uma linha

Para adicionar uma nova linha, role até a seção com o seu mouse. Embaixo você terá o botão ADICIONAR LINHA OU SEÇÃO. Clique nele e então em ADICIONAR LINHA.

Escolha quantas colunas sua nova linha deve ter (entre 1 e 4).

Adicionar um elemento

Clique na aba ADICIONAR ELEMENTOS. Em seguida, simplesmente arraste e solte um elemento nos espaços.

Os elementos disponíveis estão listados abaixo. Siga este link para um guia detalhado sobre como editar as configurações dos componentes.

  • Texto: simplesmente digite seu texto. Em seguida você pode editá-lo usando as abas "Tipografia" e "Espaçamento".
  • Imagem: você pode adicionar imagens à sua landing page adicionando uma URL, carregando uma imagem ou selecionando uma imagem na galeria. Você pode editar usando as abas "Imagem", "Estilo", "Espaçamento" e "Alinhamento".
  • Botão: adicionar um botão de ação e personalizar o texto do botão. Diferentes ações são possíveis: “Link para uma URL”, “Ancorar para uma seção” e “Link para uma página neste funil”. Cor, estilo, espaçamento e alinhamento do botão podem ser editados.
  • Divisor: você pode adicionar um divisor horizontal.
  • Forma: para adicionar uma forma, siga este guia.
  • Ícone: escolha e edite um ícone a partir de nossa galeria, para incluir ícones de redes sociais, por exemplo. Existem mais de 1.400 ícones diferentes que você pode escolher.
  • Vídeo: você pode usar uma URL da Wista, YouTube, Vimeo, Twitch, Dailymotion, Canal+, Youku, e Coub.
  • Logotipo: você pode incluir sua logotipo, adicionando uma URL ou carregando uma imagem.
  • Código: adicione um código HTML personalizado.
  • Gráfico (em breve)

Duplicar ou excluir um componente

Se você tiver cometido um erro, use os botões UNDO/REDO, no canto superior direito do construtor.
hmRyt0krhnlrDkfT86vzuCxyOWntjI80OHbs5kp6BhGGJeyFzy0rlB7LqCTZHHA4nwmf8MhvZYJ501_Nmv74aDMHMsLYxymgvvZ128wa4ZrgeRc0NJ3d3u-BaeFDZAoaW6On_MCx.png

Existem duas formas de duplicar ou excluir um componente:

  • Quando a barra lateral direita de edição for exibida, na parte de baixo, clique em DUPLICAR ou EXCLUIR.8cJg2eiGoh8FuPx3AoLKVJUGGgGLo3p2tSiseGM2a1xOjthvEHbV_PvyoMYn8PwIkuCB9980pzsYKeNAvTO1e-REYxXtz0whiAVnW_42NxqzMMaTAdHxgmXPRoe1so-GwqplpZdF.png
  • Outra forma é por meio da aba Administrar layout, clicando nas folhas de papel ou na lixeira.

Personalizar a paleta de cores

Você pode selecionar uma cor presente, limpar cor ou adicionar uma nova cor.
customize-color-1.png

Para usar uma cor personalizada, clique em + ADICIONAR COR.

Escolha uma for a partir da paleta de cores ou adicione um código hex (#RRGGBB).

customize-color-2.png

Clique em Salvar.

Personalizar exibição em dispositivos móveis

customize-color-3.png

Graças aos botões no canto superior à direita, você pode testar o carregamento de sua landing page no desktop, no tablet, e no smartphone.

Para cada seção de sua landing page, você pode controlar sua visibilidade por tipo de dispositivo dentro da seção editar. Você pode:

  • Ocultar no celular
  • Ocultar no tablet
  • Ocultar no desktop

Observe que se você ocultar no celular ou no tablet, a seção aparecerá no preview e no construtor, caso precise fazer edições. No entanto, na página publicada após o lançamento, isso não será exibido.

Quando você tiver concluído a criação de sua landing page, clique em PRÓXIMO no canto inferior direito para ir até Etapa 3 - Como lançar sua landing page.