Agora que você arrumou as seções de sua landing page, é hora de preenchê-las com elementos tais como Texto, Imagens ou Botões. Neste artigo, você vai aprender mais sobre como configurar as seções, linhas, colunas e elementos para criar a melhor landing page!
Criamos uma série de artigos para ajudar você a criar suas landing pages.
- Prefácio: o que é uma Landing Page?
- Parte 1: configurando sua Landing Page
- Parte 2: definindo a estrutura de sua Landing Page
- Parte 3: editando as configurações de todos os elementos de sua Landing Page - VOCÊ ESTÁ AQUI
- Parte 4: adicionando um formulário e usando opções avançadas
- Parte 5: publicando sua Landing Page
💡 Dica
Landing pages estão disponíveis para os planos Premium e Empresa.
Neste tutorial:
Configurações comuns
Algumas configurações são comuns entre seções, linhas e colunas (e até mesmo elementos). Primeiro vamos descrever as configurações comuns e então as mais específicas.
Espaçamento
![]() |
Primeiro, escolha se quer editar preenchimento e margem Vertical ou Horizontal. Margem é um espaço fora de algo, enquanto que preenchimento é o espaço dentro de algo.
Você pode escolher entre diferentes tipos de espaçamento entre XS (menor) a XL (maior). |
Visibilidade
Estas configurações não tem impacto visual no editor. Elas apenas afetam as páginas publicadas para evitar que você perca o controle do conteúdo dentro do editor.
- Ocultar no tablet: para cada seção de sua landing page, você pode controlar sua visibilidade por dispositivo, dentro da seção editar.
- Ocultar no celular: para cada seção de sua landing page, você pode controlar sua visibilidade por dispositivo, dentro da seção editar.
Cor e imagem do plano de fundo
A partir daqui você pode adicionar uma cor e transparência ao plano de fundo.
Para a imagem do plano de fundo, você pode adicionar uma imagem do seu computador, da nossa galeria de imagem ou usando uma URL. Nossa galeria de imagens reúne centenas de fotos (royalty-free) que você pode usar para ilustrar sua landing page.
💡 Dica
A cor do texto será alterada automaticamente dependendo da cor do plano de fundo.
Seções
Propriedades de sua seção
Aqui você pode nomear sua seção. O nome vai aparecer quando você navegar em Layout a partir do painel esquerdo.
💡 Dica
Recomendamos nomear sua seção para ajudar você a navegar entre todas as seções.
Estilo
Clique em Estilo para exibir as configurações de estilo:
![]() |
|
Linhas
Você pode editar as configurações de uma linha navegando na aba Layout a partir do painel à esquerda, como vimos em Landing pages - Parte 2: definindo a estrutura de sua Landing Page. Você também pode usar a trilha que aparece na parte de cima de sua tela, ao clicar em um elemento.
Cor do plano de fundo, Espaçamento e Visibilidade
Os primeiros parâmetros são os mesmos das Configurações comuns acima.
Avançado
![]() |
|
Colunas
Estilo
Na aba Estilo, você será capaz de:
![]() |
|
Cor/Imagem do plano de fundo, Espaçamento e Visibilidade
Os outros parâmetros são os mesmos como em Configurações comuns acima.
Texto
Você pode modificar o estilo do texto usando a barra de formatação. Basta selecionar o texto que deseja editar para exibir a barra. Você terá acesso a outras opções clicando nos três pontos no extremo direito.
Imagem e logomarca
Imagens e logomarcas são o modo perfeito para personalizar o design de seus e-mails e torná-los mais engajadores.
Para adicionar uma imagem ou logomarca, digite sua URL ou clique em ADICIONAR (ou SUBSTITUIR) na barra lateral direita. Um pop up gerenciador de arquivo vai surgir.
- Selecione um arquivo a partir do computador.
- Escolha da galeria de imagem: à esquerda do construtor, um menu vai exibir para que você procure por imagens royalty-free. Você pode buscar por categoria (comercial, coaching, consultoria, fitness, marketing, escritório, serviços).
Uma vez tendo selecionado sua imagem, você tem diferentes opções:
|
|
Estilo de suas imagens e logomarcas
- Sombra projetada: adicione uma sombra à sua imagem.
- Raio da borda: defina o quanto as bordas de sua imagem são arredondadas.
- Alinhamento: você pode colocar sua imagem à esquerda, no meio, ou à direita
Botão
Você pode usar nosso elemento Botão para vincular a um site ou outra seção. Adicionar botões à sua landing pare é ótimo para destacar links específicos onde você quer que as pessoas cliquem.
Propriedades
![]() |
|
Estilo do seu botão
Clique em Estilo para mudar o estilo do seu botão.
![]() |
|
Espaçamento e visibilidade
Os outros parâmetros são os mesmos que nas Configurações comuns acima.
Separador
Na aba Estilo, escolha a espessura do seu separador: fino, grosso ou mais grosso.
💡 Dica
Apenas um separador horizontal pode ser adicionado.
Formulário
Leia nossa seção dedicada na próxima parte Parte 4: adicionando um formulário e usando opções avançadas.
Ícone
Configurações do seu ícone
![]() |
|
Espaçamento
Os outros parâmetros são os mesmos que em Configurações comuns acima.
Vídeo
Sob a aba URL, adicione um link para o seu vídeo aqui. Você pode usar um vídeo hospedado no YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku, e Coub.
Código
Adicione seu próprio código HTML. O código inserido aqui no editor pode ser testado em "pré-visualizar" e apenas páginas "publicadas".
⏩ O que vem a seguir?
- Parte 4: adicionando um formulário e usando opções avançadas
- Parte 5: publicando sua Landing Page
- Landing pages são compatíveis com o SEO?
- Como duplicar uma Landing page existente
- Como administrar sub-páginas dentro de suas Landing pages
🤔 Dúvidas?
Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.