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

💡 É bom saber
As landing pages estão disponíveis para as ofertas Business e Enterprise.

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:

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:

  • Margin (Margem) cria espaço ao redor de um componente, fora de quaisquer bordas definidas.
  • Padding (Preenchimento) cria espaço dentro de um componente, entre a seção ou o elemento e as bordas.

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

Visibilidade

Para seções:

  • A configuração Visibility (Visibilidade) permite que você controle a visibilidade das seções da landing page com base no dispositivo usado para visualizá-la. Você pode escolher Hide on Mobile (Ocultar no celular) e/ou Hide on Desktop (Ocultar no computador).
  • Ao optar por ocultar uma seção em um determinado dispositivo, a seção aparecerá riscada no editor e a seguinte mensagem aparecerá: "This section is not visible on mobile/desktop" (Esta seção não está visível no celular/computador), dependendo da opção selecionada.

Para elementos:

  • A configuração Visibility (Visibilidade) permite que você controle a visibilidade de alguns elementos da landing page com base no dispositivo usado para visualizá-la. Você pode escolher Hide on Mobile (Ocultar no celular) e/ou Hide on Desktop (Ocultar no computador).
  • Essa configuração não tem impacto visual no editor e afeta apenas as landing pages publicadas para evitar que você perca o controle do conteúdo dentro do editor.

 

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.
💡 É bom saber
A cor do texto mudará automaticamente com base na cor de fundo da seção.

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:

  • Caption (Legenda): adicione uma legenda para a imagem de fundo.
  • Remove (Remover): exclua a imagem de fundo atual.
  • Replace (Substituir): escolha uma nova imagem de fundo para substituir a atual.
  • Background size (Tamanho do fundo): selecione como a imagem de fundo deve se ajustar à seção ou ao elemento.
  • Background Repeat (Repetição de fundo): selecione se deseja repetir a imagem de fundo em toda a seção ou elemento.
  • Color Overlay (Sobreposição de cores): selecione uma cor para adicionar acima do conteúdo da seção ou elemento e gerencie a transparência.

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.
💡 É bom saber
Recomendamos nomear as seções para ajudar a controlá-las e navegar por elas com mais facilidade.

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:

  • Edge to Edge (De ponta a ponta): afeta o espaçamento horizontal nas laterais da seção.
  • Full Height (Altura total): exibe a imagem como uma imagem inteira.
  • Background Parallax (Parallax de fundo): use a rolagem Parallax para fazer com que a imagem de fundo da seção role mais lentamente que o conteúdo do primeiro plano.

Favorito

lp_bookmark_en-us.png

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

Rows (Linhas) estão disponíveis somente no editor de landing page clássico.

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

  • Hide gutters between columns (Ocultar lacunas entre colunas): defina o tamanho do espaço (lacunas) entre as colunas da sua linha.
  • Border radius (Raio da borda): arredonde os cantos da sua linha. 

Coluna

Columns (Colunas) estão disponíveis somente no editor de landing page clássico.

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.

mceclip11.png

Estilo

  • Resize (Redimensionar): escolha o tamanho que sua coluna deve ter.
  • Mobile size (Tamanho para dispositivos móveis): escolha o tamanho que sua coluna deve ter em dispositivos móveis.
  • Border radius (Raio da borda): arredonde os cantos da sua coluna. 

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:

  • Img URL (URL da imagem): insira o URL da imagem que você deseja adicionar.
  • Remove (Remover): exclua a imagem atual.
  • Replace (Substituir): escolha uma nova imagem para substituir a atual.
  • Resize (Redimensionar): escolha o tamanho que a imagem deve ter.

Estilo

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

  • Drop shadow (Sombra projetada): adicione uma sombra à imagem.
  • Border radius (Raio da borda): define o quão arredondada a imagem deve ser.
  • Border style and color (Estilo e cor da borda): adicione uma borda à imagem e selecione a cor.
  • Border width (Largura da borda): defina a largura que a borda da imagem deve ter.
  • Border radius (Raio da borda): selecione o quão arredondada a borda da imagem deve ser.

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

mceclip1.png

A configuração Image (Imagem) permite que você selecione um logotipo e altere o tamanho:

  • Caption (Legenda): adicione uma legenda ao logotipo.
  • Img URL (URL da imagem): insira o URL do logotipo.
  • Remove (Remover): exclua o logotipo atual.
  • Replace (Substituir): escolha um novo logotipo para substituir o atual.
  • Crop logo (Cortar logotipo): corte o logotipo no tamanho desejado.
  • Alt: adicione uma etiqueta alt para fornecer informações descritivas sobre o logotipo.
  • Link: adicione um link de redirecionamento ao logotipo.

Estilo

A configuração Style (Estilo) só estão disponíveis no novo editor de landing page.

A configuração Style (Estilo) permite que você defina a aparência do logotipo:

  • Border style and color (Estilo e cor da borda): adicione uma borda ao logotipo e selecione a cor.
  • Border width (Largura da borda): defina a largura que a borda do logotipo deve ter.
  • Border radius (Raio da borda): selecione o quão arredondada a borda do logotipo deve ser.

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:

  • Call to action (Chamada para ação): insira o texto que deseja exibir no botão de chamada para ação.
  • Pick an action (Escolha uma ação): escolha entre as três ações — vincular a um URL, ancorar a uma seção ou vincular a uma página neste funil.
    Se você ancorar em uma seção, selecione na lista suspensa em qual seção ela está ancorada.
    Se você vincular uma página nesse funil, selecione na lista suspensa a qual página ela está vinculada.
  • Pick a target (Escolha um destino): escolha para abrir o link em uma nova guia.
  • URL (link): adicione o link para onde o botão deve apontar.

Estilo

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

  • Color (Cor): escolha a cor do botão.
  • Outline style and color (Estilo e cor do contorno): escolha um tipo de contorno para o botão e a cor.
  • Outline width (Largura do contorno): defina a largura que o contorno do botão deve ter.
  • Full width (Largura total): escolha se o botão deve ter a mesma largura da sua página.
  • Fill (Preenchimento): escolha se o botão deve ser cheio ou vazio:
    mceclip0.png
  • Shape (Forma): escolha se o botão deve ser quadrado, redondo ou em formato de pílula.
  • Shadow (Sombra): adicione uma sombra clara ou escura ao botão.
  • Button icon (Ícone de botão): adicione um ícone ao botão e escolha a posição.

Divisor

💡 É bom saber
Somente um divisor horizontal pode ser adicionado.
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
mceclip24.png

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:

  • Replace (Substituir): escolha um novo ícone para substituir o atual.
  • Resize (Redimensionar): escolha o tamanho que o ícone deve ter.
  • Background (Plano de fundo): adicione uma cor de fundo ao ícone.
  • Foreground (Primeiro plano): adicione uma cor de primeiro plano ao ícone.
  • Border style and color (Estilo e cor da borda): adicione uma borda ao ícone e selecione a cor.
  • Border width (Largura da borda): defina a largura que a borda do ícone deve ter.
  • Border radius (Raio da borda): selecione o quão arredondada a borda do ícone deve ser.
  • Link: adicione um link de redirecionamento ao ícone.

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:

  • Border style and color (Estilo e cor da borda): adicione uma borda ao vídeo e selecione a cor.
  • Border width (Largura da borda): defina a largura que a borda do vídeo deve ter.
  • Border radius (Raio da borda): defina o quão arredondada a borda do vídeo deve ser.

Contêiner

O elemento Container (Contêiner) só está disponível no novo editor de landing page.

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:

  • Background color and transparency (Cor de fundo e transparência): adicione uma cor de fundo ao contêiner e gerencie a transparência.
  • Border style and color (Estilo e cor da borda): adicione uma borda ao contêinere selecione a cor.
  • Border position (Posição da borda): defina em qual lado do contêiner adicionar uma borda.
  • Border width (Largura da borda): defina a largura que a borda do contêiner deve ter.
  • Border radius (Raio da borda): selecione o quão arredondada a borda do contêiner deve ser.
  • Drop shadow (Sombra projetada): adicione uma sombra ao 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

💡 É 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 à agência parceira da Brevo certa.

💬 Este artigo foi útil?

Utilizadores que acharam útil: 0 de 13