Neste artigo, explicaremos como configurar as seções e os elementos na sua landing page. Agora que você organizou as seções na landing page, é hora de preenchê-las com elementos como Texto, Imagens ou Botões.
Criamos uma série de artigos para ajudar você a criar suas landing pages:
- Prefácio: O que é uma landing page?
- Parte 1: configurar a landing page
- Parte 2: definir a estrutura da landing page
- Parte 3: editar as configurações de todos os elementos da landing page - VOCÊ ESTÁ AQUI
- Parte 4: adicionar um formulário a landing pages e usar opções avançadas
- Parte 5: publicar a landing page
Configurações comuns
Algumas configurações são comuns entre seções e elementos. Primeiro descreveremos as configurações comuns e depois as específicas de cada um.
Alinhamento
A configuração Alignment (Alinhamento) permite que você escolha como deseja alinhar um elemento (na horizontal e na vertical). |
Espaçamento
A configuração Spacing (Espaçamento) permite que você defina o espaço vertical e horizontal ao redor e dentro de seções e elementos:
Você pode escolher entre diferentes tamanhos de espaçamento, de XS (menor) a XL (maior). |
Visibilidade
Para seções:
|
|
Para elementos:
|
Cor do plano de fundo
A configuração Background Color (Cor do plano de fundo) permite que você adicione uma cor de fundo a uma seção ou elemento e gerencie sua transparência. |
Imagem de fundo
A configuração Background Image (Imagem de fundo) permite que você adicione uma imagem da nossa biblioteca de imagens, de um URL ou do seu computador como plano de fundo de uma seção ou um elemento:
|
Seção
Propriedades
|
A configuração Properties (Propriedades) permite que você renomeie a seção. O nome das seções aparece quando você navega no painel Layout. |
Cor de fundo, imagem de fundo e espaçamento
As configurações Background Color (Cor do plano de fundo), Background Image (Imagem de fundo) e Spacing (Espaçamento) são descritas na seção Configurações comuns deste artigo.
Estilo
A configuração Style (Estilo) permite que você personalize a aparência da seção:
|
Favorito
O botão Bookmark (Favorito) permite que você salve uma seção para reutilizá-la em outras landing pages. Pode ser útil para cabeçalhos e notas de rodapé que você usa o tempo todo em landing pages. Você pode encontrar as seções salvas em Sections > Bookmark (Seções > Favorito) no painel esquerdo do editor. |
Linha
Você pode editar as configurações de uma linha navegando até a guia Layout no painel esquerdo, como vimos em Landing pages - Parte 2: definir a estrutura da landing page. Você também pode usar o rastro de navegação que aparece na parte superior da tela quando clica em um elemento.
Cor do plano de fundo, imagem de fundo, espaçamento e visibilidade
As configurações Background Color (Cor do plano de fundo), Background Image (Imagem de fundo), Spacing (Espaçamento) e Visibility (Visibilidade) estão descritas na seção Configurações comuns deste artigo.
Avançado
|
Coluna
Você pode editar as configurações de uma coluna navegando até a guia Layout no painel esquerdo, como vimos em Landing pages - Parte 2: definir a estrutura da landing page. Você também pode usar o rastro de navegação que aparece na parte superior da tela quando clica em um elemento.
Estilo
|
Cor do plano de fundo, imagem de fundo, espaçamento e visibilidade
As configurações Background Color (Cor do plano de fundo), Background Image (Imagem de fundo), Spacing (Espaçamento) e Visibility (Visibilidade) estão descritas na seção Configurações comuns deste artigo.
Texto
Novo editor de landing page |
Editor de landing page clássico |
Você pode usar um elemento Text (Texto) para adicionar e formatar texto na sua landing page.
Barra de formatação
A barra de formatação permite que você modifique o estilo do seu texto. Selecione o texto que deseja editar para exibir a barra de formatação e clique nos 3 pontos na extremidade direita para acessar mais opções.
Alinhamento e espaçamento
As configurações Alignment (Alinhamento) e Spacing (Espaçamento) são descritas na seção Configurações comuns deste artigo.
Imagem
Novo editor de landing page |
Editor de landing page clássico |
As imagens são uma maneira perfeita de personalizar o design da sua landing page e torná-la mais envolvente. Você pode selecionar uma imagem da nossa biblioteca de imagens, de um URL ou do seu computador.
Alinhamento e espaçamento
As configurações Alignment (Alinhamento) e Spacing (Espaçamento) são descritas na seção Configurações comuns deste artigo.
Imagem
|
As configurações de Image (Imagem) permitem que você selecione uma imagem e altere o tamanho:
|
Estilo
|
A configuração Style (Estilo) permite que você defina a aparência da imagem:
|
Logo
Novo editor de landing page |
Editor de landing page clássico |
Os logotipos são uma maneira perfeita de exibir sua marca na landing page.
Alinhamento e espaçamento
As configurações Alignment (Alinhamento) e Spacing (Espaçamento) são descritas na seção Configurações comuns deste artigo.
Imagem
|
A configuração Image (Imagem) permite que você selecione um logotipo e altere o tamanho:
|
Estilo
|
A configuração Style (Estilo) permite que você defina a aparência do logotipo:
|
Botão
Novo editor de landing page |
|
Editor de landing page clássico |
Você pode usar um elemento Button (Botão) para criar um link para um site ou para outra subpágina da sua landing page. Adicionar botões à sua landing page é ótimo para destacar links específicos nos quais você quer que as pessoas cliquem.
Alinhamento, espaçamento e visibilidade
As configurações Alignment (Alinhamento), Spacing (Espaçamento) e Visibility (Visibilidade) são descritas na seção Configurações comuns deste artigo.
Propriedades
A configuração Properties (Propriedades) permite que você defina para onde o botão deve direcionar:
|
Estilo
A configuração Style (Estilo) permite que você personalize a aparência do botão:
|
Divisor
Novo editor de landing page |
|
Editor de landing page clássico |
Você pode usar um elemento Divider (Divisor) para adicionar uma separação visual entre os diferentes elementos e seções da landing page.
Espaçamento
A configuração Spacing (Espaçamento) é descrita na seção Configurações comuns deste artigo.
Estilo
Escolha o nível de espessura do divisor: fino, grosso ou mais grosso. |
Cor
Escolha a cor do divisor. |
Formulário
Novo editor de landing page |
|
Editor de landing page clássico |
Você pode usar um elemento Form (Formulário) para criar uma landing page de geração de leads. Para saber mais sobre formulários em uma landing page, confira nosso artigo dedicado Parte 4: adicionar um formulário na landing page e usar opções avançadas.
Ícone
Novo editor de landing page |
|
Editor de landing page clássico |
Você pode usar um elemento Icon (Ícone) para adicionar algum conteúdo visual e ilustrar sua landing page.
Alinhamento e espaçamento
As configurações Alignment (Alinhamento) e Spacing (Espaçamento) são descritas na seção Configurações comuns deste artigo.
Configurações
As Settings (Configurações) de um ícone permitem que você selecione um ícone e personalize a aparência:
|
Vídeo
Novo editor de landing page |
|
Editor de landing page clássico |
Você pode usar um elemento Video (Vídeo) na landing page para mostrar sua marca ou produtos sem usar muito texto.
Espaçamento
A configuração Spacing (Espaçamento) é descrita na seção Configurações comuns deste artigo.
URL
A configuração URL permite que você adicione o link ao vídeo. Você pode usar um vídeo hospedado no YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku ou Coub. |
Estilo
A configuração Style (Estilo) permite que você gerencie a aparência do vídeo:
|
Contêiner
Você pode usar um elemento Contêiner (Container) para agrupar vários elementos e movê-los ou redimensioná-los todos de uma vez.
Imagem de fundo, espaçamento e visibilidade
As configurações Background Image (Imagem de fundo), Spacing (Espaçamento) e Visibility (Visibilidade) estão descritas na seção Configurações comuns deste artigo.
Estilo
A configuração Style (Estilo) permite que você personalize a aparência do contêiner:
|
Código
Novo editor de landing page |
|
Editor de landing page clássico |
Você pode usar um elemento Code (Código) para adicionar snippets de código à sua landing page, como uma seção de comentários do Facebook.
⏩ O que vem a seguir?
- Parte 4: adicionar um formulário a landing pages e usar opções avançadas
- Parte 5: publicar a landing page
- Landing pages são compatíveis com o SEO?
- Como duplicar uma landing page existente
- Como administrar sub-páginas dentro da landing page
🤔 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.
Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar à agência parceira da Brevo certa.