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

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. 

💡 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

mceclip2.png

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.

  • Margem: cria espaço ao redor do seu componente, do lado de fora de quaisquer bordas definidas.
  • Preenchimento: cria espaço dentro do seu componente, entre o ícone e a borda.

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:

mceclip1.png
  • Ponta a ponta: afeta o espaçamento horizontal nas laterais da seção.
  • Altura total: exibe a imagem como tamanho total.
  • Parallax do plano de fundo: rolagem parallax é uma técnica de design gráfico computacional na qual a imagem do plano de fundo rola mais lentamente do que o conteúdo em primeiro plano.

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.

mceclip5.png

Cor do plano de fundo, Espaçamento e Visibilidade

Os primeiros parâmetros são os mesmos das Configurações comuns acima. 

Avançado

mceclip3.png
  • Ocultar as calhas entre as colunas: ajusta o vão (calha) entre suas colunas de linhas.
  • Raio da borda: permite que você arredonde os cantos de sua linha. 

Colunas

Estilo

Na aba Estilo, você será capaz de:

2020-11-12_12-04-05.png
  • Redimensionar: escolha a largura de sua coluna.
  • Tamanho no dispositivo móvel: escolha a largura de sua coluna no dispositivo móvel.
  • Editar raio da borda: permite que você arredonde os cantos de sua coluna. 

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.

Text_set_up_EN.png

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:

Edit_Image_EN.png
  • Redimensionar: escolha a largura na qual sua imagem vai ser exibida.
  • ALT: adiciona uma tag alt para dar informações descritivas sobre sua imagem.
  • Link: adiciona um link de redirecionamento.

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

Edit_Button.png
  • Call to action: digite o texto que você quer exibir em seu botão call to action.
  • Escolha uma ação: escolha entre as três ações, linkar a uma URL, ancorar a uma seção ou linkar a uma página neste funil.

    Se você ancorar a uma seção, selecione na lista suspensa a que seção está ancorado.

    Se linkar a uma página neste funil, selecione na lista suspenso a que página está linkado.

  • Escolha um alvo: escolha entre abrir o link na janela atual da nova aba
  • URL (link): adicione o link para onde seu botão apontará

Estilo do seu botão

Clique em Estilo para mudar o estilo do seu botão.

2020-11-12_11-41-22.png
  • Cor: escolha a cor do seu botão

  • Largura total: defina se largura do botão é o de toda a coluna ou não.

  • Preenchimento: escolha se seu botão é Cheio ou Vazado:
    mceclip0.png

  • Tamanho: o quão grande você quer que seu botão seja.

  • Formato: escolha se seu botão é Quadrado, Redondo ou no formato de uma Pílula.

  • Sombra: adicione uma sombra clara ou escura.

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

mceclip4.png
  • Substituir ícone: se você clicar no ícone ou no botão substituir, um pop up com a biblioteca de ícones será exibido. Existem mais de 1.400 ícones diferentes que você pode escolher. Você pode buscar ícones por nome, graças à barra de busca. Você também pode filtrar por conjunto.

  • Redimensionar: você pode redimensionar o ícone como quiser.

  • Alinhamento: você pode colocar sua imagem à esquerda, no meio, ou à direita

  • Link: adicione uma URL aqui.

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?