Primeiros passos com o Editor de Landing Pages

Esse editor visual permite que você crie e publique landing pages otimizadas usando uma interface intuitiva de arrastar e soltar.

1. Barra lateral esquerda: Elementos e estrutura

A barra lateral esquerda reúne todos os componentes necessários para criar uma página do zero ou adicionar blocos de conteúdo.

• Abas de navegação superior:

Elemento: exibe os componentes de conteúdo individuais.

 Camada: permite que você gerencie a hierarquia e as camadas de elementos sobrepostos.

 Página: configurações básicas da página atual.

• Biblioteca de componentes (Elemento):

Texto e estética: Texto (parágrafos/títulos), Imagem (imagens), Divisor (linhas separadoras), Espaçador (espaços vazios).

Interação e navegação: Botão (botões de ação), Barra de Navegação (menu superior com links), Social (ícones de redes sociais).

• Conteúdo avançado: Herói (bloco de destaque da página inicial), Vídeo (player de vídeo), Código (inserção de código HTML/JS personalizável), Contagem regressiva (cronômetro de contagem regressiva), Tabela (tabelas de dados).

• Captura de leads: Formulário de assinatura (formulários de registro), Código QR (códigos QR para escaneamento).

• Seções e Layout:

• 1 coluna: bloco de largura total (100%).

• 2 colunas / 3 colunas: estruturas de grade divididas para organizar o conteúdo em colunas paralelas.

2. Bloco central: pré-visualização e edição ao vivo

A área central oferece uma pré-visualização em tempo real da landing page.

• Barra de controle superior:

Visualização de dispositivo: alterna entre as visualizações de desktop e mobile para verificar se o design é responsivo.

Desfazer/Refazer: setas para reverter ou aplicar as alterações recentes.

• Espaço de trabalho: exibe a estrutura interativa da página. Você pode clicar em qualquer bloco, por exemplo, um bloco de texto para editá-lo, ou um botão de call-to-action para editar suas propriedades e adicionar ou editar imagens.

3. Barra lateral direita: estilos e configurações (Estilo)

Permite que você personalize a aparência e as configurações técnicas do elemento selecionado ou da página como um todo.

• Atributos da página:

Nome da página / Título da página: define o nome interno e o título público visível na aba do navegador.

URL slug: personaliza o endereço web final (por exemplo, /webinar-transformation).

Publicada: alterna para publicar ou despublicar a página instantaneamente.

• Configurações gerais:

Plano de fundo do modelo / Plano de fundo do conteúdo: seleciona a cor de fundo da tela global e do contêiner de conteúdo usando códigos HEX (por exemplo, #FFFFFF).

Largura: ajusta a largura do contêiner em pixels (por exemplo, 700 px).

Margens: controla as margens superior (Margem superior) e inferior (Margem inferior).

• Menus suspensos de estilo avançado:

TEXTO & TÍTULOS: tipografia, tamanho da fonte, alinhamento e cores do texto.

Botões: estilos de borda, preenchimento, cor do botão e cor do texto ao passar o cursor.

Links: comportamento e estilo dos links.

4. Publicar a landing page

Clique em Publicar para disponibilizar o link da landing page e, em seguida, clique em Salvar.

Adicionar formulário à sua landing page

Clique e arraste o ícone Formulário no editor de landing page e escolha o formulário que você deseja no painel à direita.

 Se você estiver usando um modelo, verifique se ele já inclui um formulário e selecione o que você deseja exibir.

Fluxo de trabalho recomendado

1. Estrutura: arraste uma seção de colunas do painel esquerdo para a tela.

2. Inserir: posicione os elementos desejados (imagens, títulos, botões ou formulários) dentro das colunas.

3. Personalizar: selecione cada elemento para ajustar suas margens, fontes e cores no painel direito.

4. Verificar: alterne para a visualização mobile para verificar a legibilidade e publique ativando a opção Publicada.