Landing pages - Parte 3: editando as configurações de todos os elementos de sua landing page

💡 É bom saber
Landing pages estão disponíveis para os planos Business e Enterprise.

Neste artigo, vamos explicar como configurar seções e elementos em sua landing page. Agora que você definiu suas seções em sua landing page, é hora de preenchê-las com elementos como Texto, Imagens ou Botões.

Criamos uma série de artigos para ajudar você a construir suas landing pages:

Configurações em comum

Algumas configurações são comuns a seções e elementos. Primeiro vamos descrever as configurações em comum e então as específicas de cada um.

Alinhamento

mceclip0.png

A configuração Alinhamento permite que você escolha como quer alinhar um elemento (horizontal e verticalmente).

Espaçamento

mceclip1.png

A configuração Espaçamento permite que você defina o espaço vertical e horizontal ao redor e dentro das seções e dos elementos:

  • Margem cria espaço ao redor de um componente, fora de qualquer borda definida.
  • Preenchimento cria espaço dentro de um componente, entre a seção ou elemento e suas bordas.

Você pode escolher entre diferentes tamanhos de espaçamento, do XS (menor) ao XL (maior).

Visibilidade

mceclip5.png

Para seções:

  • A configuração Visibilidade permite que você controle a visibilidade das seções de sua landing page com base no dispositivo usado para visualizá-la. Você pode escolher Ocultar no celular e/ou Ocultar no desktop.
  • Quando você escolhe ocultar uma seção de um determinado dispositivo, ela aparecerá riscada no editor e a seguinte mensagem irá aparecer: "Esta seção não está visível para celular/desktop" dependendo da opção selecionada.
mceclip6.png

Para elementos:

  • A configuração Visibilidade permite que você controle a visibilidade de alguns elementos de sua landing page com base no dispositivo usado para visualizá-la. Você pode escolher Ocultar no celular e/ou Ocultar no desktop.
  • Esta configuração não tem impacto visual no editor e só afeta landing pages publicadas, para evitar que você perca o rastreio de conteúdo dentro do editor.

 

Cor de fundo

mceclip7.png A configuração Cor de fundo permite que você adicione uma cor de fundo a uma seção ou elemento e controle sua transparência.
💡 É bom saber
A cor do texto mudará automaticamente com base na cor de fundo da seção.

Imagem de fundo

mceclip8.png

A configuração Imagem de fundo permite que você adicione uma imagem de nossa biblioteca de imagens, de uma URL, ou do seu computador como fundo de uma seção ou elemento:

  • Legenda: escreva uma legenda para o imagem de fundo.
  • Remover: exclui a imagem de fundo atual.
  • Substituir: escolha uma nova imagem de fundo para substituir a atual.
  • Tamanho do fundo: selecione como a imagem de fundo deve se ajustar na seção ou no elemento.
  • Repetir fundo: selecione se quer repetir a imagem de fundo por toda a seção ou elemento.
  • Sobreposição de cor: selecione uma cor para adicionar sobre o conteúdo da seção ou elemento e controle sua transparência.

Seção

Propriedades

mceclip9.png

A configuração Propriedades permite que você renomeie a seção. O nome de suas seções aparece quando você navega pelo painel Layout.
💡 É bom saber
Recomendamos nomear suas seções para ajudar você a manter o rastreio sobre elas e navegar por elas mais facilmente.

Estilo

mceclip10.png

A configuração Estilo permite que você personalize a aparência da seção:

  • Borda a borda: afeta o espaçamento horizontal nas laterais da seção.
  • Altura total: exibe a imagem como imagem completa.
  • Paralaxe de fundo: usa a rolagem Paralaxe para tornar a imagem de fundo da seção mais lenta do que o conteúdo em primeiro plano.

Cor e imagem de fundo e espaçamento

As configurações de Cor e imagem de fundo e Espaçamento são descritas na seção Configurações em comum deste artigo.

Linha

Linhas só estão disponíveis no editor Clássico de landing page.

Você pode editar as configurações de uma linha navegando para a aba Layout no painel à esquerda, como vimos em Landing pages - Parte 2: defina a estrutura em sua landing page. Você também pode usar a trilha de localização que aparece na parte de cima de sua tela, ao clicar em um elemento.

mceclip11.png

Cor e imagem de fundo, espaçamento e visibilidade

As configurações Cor e imagem de fundo, espaçamento e visibilidade são descritas na seção Configurações em comum deste artigo.

Avançado

mceclip12.png
  • Ocultar medianizes entre colunas: define o tamanho do espaço (medianizes) entre as colunas de sua linha.
  • Raio da borda: arredonda os cantos de sua linha. 

Coluna

Colunas só estão disponíveis no editor Clássico de landing page.

Você pode editar as configurações de uma coluna navegando pela aba Layout no painel à esquerda, como vimos em Landing pages - Parte 2: defina a estrutura de sua landing page. Você também pode usar o rastreio de localização que aparece na parte de cima de sua tela ao clicar em um elemento.

mceclip11.png

Estilo

mceclip13.png
  • Redimensionar: escolha o quanto sua coluna deve ser grande.
  • Tamanho no celular: escolha o quanto sua coluna deve ser grande no celular.
  • Raio da borda: arredonde os cantos de sua coluna. 

Cor e imagem de fundo, espaçamento e visibilidade

As configurações Cor e imagem de fundo, espaçamento e visibilidade são descritas na seção Configurações em comum deste artigo.

Texto

Novo editor de landing page
mceclip14.png
Editor clássico de landing page
mceclip15.png

Você pode usar o elemento Texto para adicionar e formatar o texto em sua landing page. 

Barra de formatação

mceclip16.png

A barra de formatação permite que você altere o estilo de seu texto. Selecione o texto que quer editar para exibir a barra de formatação e clique nos 3 pontos à direita para acessar mais opções.

Alinhamento e espaçamento

As configurações Alinhamento e Espaçamento são descritos na seção Configurações em comum deste artigo.

Imagem

Novo editor de landing page
mceclip18.png
Editor clássico de landing page
mceclip19.png

Imagens são uma maneira perfeita de personalizar o design de sua landing page e torná-la mais engajadora. Você pode selecionar uma imagem em nossa biblioteca de imagem, de uma URL, ou do seu computador.

Alinhamento e espaçamento

As configurações Alinhamento e Espaçamento são descritas na seção Configurações em comum deste artigo.

Imagem

mceclip21.png

A configuração Imagem permite que você selecione uma imagem e altere seu tamanho:

  • Img URL: insira a URL da imagem que deseja adicionar.
  • Remover: exclua a imagem atual.
  • Substituir: escolha uma nova imagem para substituir a nova.
  • Redimensionar: escolha o quanto a imagem deve ser grande.

Estilo

mceclip22.png

A configuração Estilo permite que você defina a aparência da imagem:

  • Sombra projetada: adicione uma sombra à imagem.
  • Raio da borda: defina o quanto a imagem deve ser arredondada.
  • Estilo e cor da borda: adicione uma borda à imagem e selecione sua cor.
  • Largura da borda: defina o quanto a borda deve ser larga.
  • Raio da borda: selecione o quanto a borda da imagem deve ser arredondada.

Logo

Novo editor de landing page
mceclip23.png
Editor clássico de landing page
mceclip33.png

Logos são uma maneira perfeita de exibir sua marca em sua landing page.

Alinhamento e espaçamento

As configurações Alinhamento e Espaçamento são descritas na seção Configurações em comum deste artigo.

Imagem

mceclip1.png

A configuração Imagem permite que você selecione uma logo e altere seu tamanho:

  • Legenda: escreva uma legenda para o logo.
  • Img URL: insira a URL da logo.
  • Remover: exclua a logo atual.
  • Substituir: escolha uma nova logo para substituir a atual.
  • Cortar logo: cortar o logo no tamanho desejado.
  • Alt: adicione uma tag alt para dar informações descritivas sobre a logo.
  • Link: adicione um link de redirecionamento para a logo.

Estilo

A configuração Estilo está disponível apenas no Novo editor de landing page.

mceclip26.png

A configuração Estilo permite que você defina a aparência da logo:

  • Estilo e cor da borda: adicione uma borda à logo e selecione sua cor.
  • Largura da borda: defina a largura da borda.
  • Raio da borda: selecione o quanto a borda da logo deve ser arredondada.

Botão

Novo editor de landing page

mceclip27.png

Editor clássico de landing page
mceclip28.png

Você pode usar um elemento Botão para vincular a um site ou a outra subpágina de sua landing page. Adicionar botões à sua landing page é ótimo para destacar links específicos nos quais deseja que as pessoas cliquem.

Alinhamento, espaçamento e visibilidade

As configurações Alinhamento, espaçamento, e visibilidade são descritas na seção Configurações em comum deste artigo.

Propriedades

mceclip29.png

A configuração Propriedades permite que você defina ao que o botão deve ser vinculado:

  • Call to action: insira o texto que deseja exibir no botão call-to-action.
  • Escolha uma ação: escolha entre as três ações — vincular a uma URL, ancorar a uma seção ou vincular a uma página neste funil.
    Se ancorar a uma seção, selecione a seção na lista suspensa.
    Se vincular a uma página neste funil, selecione a página na lista suspensa.
  • Escolha um alvo: escolha abrir o link em uma nova aba.
  • URL (link): adicione o link para o qual o botão deve apontar.

Estilo

mceclip30.png

A configuração Estilo permite que você personalize a aparência do botão:

  • Cor: escolha a cor do botão.
  • Estilo e cor do contorno: escolha um tipo de contorno para o botão e sua cor.
  • Largura do contorno: defina a largura do contorno do botão.
  • Largura total: escolha se o botão deve ter a largura da sua página.
  • Preenchimento: escolha se o botão deve ser preenchido ou vazado:
    mceclip0.png
  • Formato: escolha se o botão deve ser redondo, quadrado ou em forma de cápsula.
  • Sombra: adicione uma sombra clara ou escura ao botão.
  • Ícone do botão: adicione um ícone ao botão e escolha sua posição.

Divisor

💡 É bom saber
Apenas um divisor horizontal pode ser adicionado.
Novo editor de landing page

mceclip31.png

Editor clássico de landing page
mceclip32.png

Você pode usar um elemento Divisor para adicionar um separador visual entre os diferentes elementos e seções de sua landing page. 

Espaçamento

A configuração Espaçamento esta descrita na seção Configurações em comum deste artigo.

Estilo

mceclip38.png

Escolha o nível de espessura do divisor: fino, grosso ou mais grosso.

Cor

mceclip39.png

Escolha a cor do divisor.

Formulário

Novo editor de landing page

mceclip34.png

Editor clássico de landing page
mceclip35.png

Você pode usar um elemento Formulário para criar uma landing page geradora de leads. Para saber mais sobre formulários em uma landing page, consulte nosso artigo dedicado Parte 4: adicione um formulário em sua landing page e use opções avançadas.

Ícone

Novo editor de landing page

mceclip37.png

Editor clássico de landing page
mceclip24.png

Você pode usar um elemento Ícone para adicionar algum conteúdo visual e ilustrar sua landing page.

Alinhamento e espaçamento

As configurações Alinhamento e Espaçamento estão descritas nas seção Configurações em comum deste artigo.

Configurações

mceclip40.png

As Configurações de um ícone permitem que você selecione um ícone e personalize sua aparência:

  • Substituir: escolha um novo ícone para substituir o atual
  • Redimensionar: escolha o quanto o ícone deve ser grande.
  • Fundo: adicione uma cor de fundo ao ícone.
  • Primeiro plano: adicione uma cor de primeiro plano ao ícone.
  • Estilo e cor da borda: adicione uma borda ao ícone e selecione sua cor.
  • Largura da borda: defina a largura da borda do ícone.
  • Raio da borda: selecione o quanto a borda do ícone deve ser arredondada.
  • Link: adicione um link de redirecionamento para o ícone.

Vídeo

Novo editor de landing page

mceclip41.png

Editor clássico de landing page
mceclip42.png

Você pode usar um elemento Vídeo em sua landing page para exibir sua marca ou produtos sem utilizar muito texto.

Espaçamento

A configuração Espaçamento está descrita na seção Configurações em comum deste artigo.

URL

mceclip43.png A configuração URL permite que você adicione o link para o vídeo. Você pode usar um vídeo hospedado no YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku, ou Coub.

Estilo

mceclip44.png

A configuração Estilo permite que você gerencie a aparência do vídeo:

  • Estilo e cor da borda: adicione uma borda ao vídeo e selecione sua cor.
  • Largura da borda: defina a largura da borda do vídeo.
  • Raio da borda: defina o quanto a borda do vídeo deve ser arredondada.

Contêiner

O elemento Contêiner só está disponível no Novo editor de landing page.

mceclip45.png

Você pode usar um elemento Contêiner para agrupar vários elementos e movê-los ou redimensioná-los de uma vez só.

Imagem de fundo, espaçamento e visibilidade

As configurações Imagem de fundo, espaçamento, e visibilidade são descritas na seção Configurações em comum deste artigo.

Estilo

mceclip46.png

A configuração Estilo permite que você personalize a aparência do contêiner:

  • Cor de fundo e transparência: adicione uma cor de fundo ao contêiner e controle sua transparência.
  • Estilo e cor da borda: adicione uma borda ao contêiner e selecione sua cor.
  • Posição da borda: defina de que lado do contêiner adicionar uma borda.
  • Largura da borda: defina a largura da borda do contêiner.
  • Raio da borda: selecione o quanto a borda do contêiner deve ser arredondada.
  • Sombra: adicione uma sombra ao contêiner.

Código

Novo editor de landing page

mceclip47.png

Editor clássico de landing page
mceclip48.png

Você pode usar um elemento Código para adicionar trechos de código à sua landing page, tais como seção de comentários do Facebook

💡 É bom saber
O código inserido no editor pode ser testado somente em landing pages publicadas.

⏩ O que vem a seguir?

🤔 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 o parceiro especialista certificado em Brevo.

💬 Este artigo foi útil?

Utilizadores que acharam útil: 0 de 11