Precisa de ajuda? Temos aqui as informações que você precisa!

Página Inicial da Base de Conhecimentos aero-right Landing Pages aero-right Como criar uma Landing Page

Como criar uma Landing Page

Landing Pages Atualizado em agosto 13, 2020

Descubra o que nosso editor de landing pages pode fazer pelo seu negócio. Crie como um expert e faça com que seus usuários acessem páginas incríveis!

landing-page-builder

Selecione o assunto que deseja aprender mais:

  1. Primeiros passos: Criando sua primeira landing page
  2. Como duplicar uma landing page
  3. Seções
  4. Como adicionar imagens de fundo
  5. Blocos
  6. Formulários de Inscrição
  7. Tipografia 
  8. Animações dos blocos

 


Primeiros Passos: Criando sua landing page

Vamos começar? Para criar sua primeira landing page, faça login na sua conta Benchmark e siga os passos abaixo:

  1. No painel principal, clique na opção de Landing Pages e então selecione Landing Pages.
  2. Clique no botão Criar Nova Landing Page.
  3. Escolha um nome para a sua Landing Page. Este nome será apenas de referência, os visitantes não poderão vê-lo. Ao concluir, clique em Próximo.

Para criar uma cópia de uma landing page existente, clique no ícone de mais opções da landing page que deseja duplicar. Atribua um novo nome à cópia ou simplesmente mantenha o nome padrão e clique em Salvar.

Criar uma cópia de uma landing page significa que apenas o conteúdo da página de entrada original será copiado, como textos, imagens e links. Ou seja, você ainda precisará preencher a checklist da landing page para poder publicá-la.

  1. Você passará a visualizar a checklist. Perceba que o botão de Publicar ainda não estará ativado. Ele permanecerá assim até que você complete todas as etapas.
  2. Preencha toda a checklist com as informações, o título e a descrição da sua landing page. O título e a descrição podem ajudar a melhorar o desempenho da sua página. Clique aqui para saber mais. Importante: Quando as informações em todas os etapas da lista forem adicionadas, o símbolo de marcação (✔) ficará verde.
  3. Agora, vamos nos concentrar na etapa de Design.

Para customizar sua landing page, na checklist, clique em Criar o Design da Landing Page.

 

O Editor de Landing Page é quase uma réplica do nosso Editor de Email e, se você estiver familiarizado com ele, criar uma landing page será fácil, fácil. Mas caso você não esteja, continue lendo para aprender a usar Editor de Arrastar e Soltar.

 

No canto superior esquerdo, você verá três guias. A primeira, selecionada por padrão, é Modelos. Você pode começar a criar do zero escolhendo Layouts em branco, ou pode clicar em Templates e selecionar um dos modelos existentes. Você pode escolher qualquer opção, ambas são adaptáveis a dispositivos móveis e fáceis de usar.

Depois que um layout é selecionado, esta é a tela que você vai ver.

  1. Modelos: Esta opção te levará de volta às opções de layout, onde é possível alterar para um modelo predefinido ou utilizar um modelo em branco. Caso opte por alterar os modelos, você irá deletar permanentemente qualquer conteúdo criado na sua landing atual. Esta ação não é reversível.
  2. Blocos: Nesta guia, você encontrará duas opções:
    1. Seções
    2. Conteúdo
  3. Estilos gerais: Nesta guia, você encontrará a opção Cor do plano de fundo, onde é possível alterar a cor do plano de fundo da sua landing page.
  4. Botão Mostrar Áreas: Este botão mostra as seções da sua landing page e o número de colunas em cada seção.
  5. Botão Mostrar Blocos: Ao clicar aqui, uma moldura verde é colocada sobre cada bloco e você verá as opções de Mover, Copiar e Excluir seus blocos.
  6. Botão Versão Mobile: Nosso editor responsivo organiza automaticamente os blocos para otimizar a exibição da sua landing page nos dispositivos móveis. No entanto, essa opção possibilita controlar como sua página será exibida num dispositivo móvel. Caso não goste do layout para celular, você poderá personalizar as seções para adaptar melhor o conteúdo. Importante: Fazer alterações nesta parte, também será alterada a exibição para desktop.
  7. Título: No canto superior direito, você verá o nome da sua landing page. Lembrando que este não é o título da página.
  8. Voltar ao Checklist: Ao selecionar esta opção, você retornará à Checklist principal, onde poderá concluir outras seções necessárias.
  9. Layout da Landing Page: É aqui que o design da sua página é feito. Arraste e solte blocos nesta área para personalizar sua landing page.
  10. Layout da Landing Page: É aqui que o design da sua página é feito. Arraste e solte blocos nesta área para personalizar sua landing page.
  11. Pré-visualize: Essa opção permite que você veja como a aparência da sua landing page vai ficar no seu navegador.
  12. Salvar & Próximo: Ao clicar nessa opção, você salva seu trabalho e passa para a Checklist principal para publicar imediatamente ou em outro momento.

Ocultar

Esta opção permite ocultar alguns elementos em alguns dispositivos. Para usá-la, clique no elemento que deseja ocultar, vá para a guia Contentor e alterne a barra de cinza para azul. Você pode ocultar alguns elementos de dispositivos móveis ou desktop.

 

Voltar ao topo


 

Seções

Seções são as partes em que o layout da sua landing page é dividido. Uma landing page pode ter várias seções, e cada seção pode ter diferentes blocos.

Você poderá encontrar a opção de Seções dentro da guia de Blocos e poderá adicionar quantas seções achar necessário.

As seções disponíveis estão divididas em colunas, ou seja, elas podem ter de 1 a 4 colunas.

Para adicionar uma seção na sua landing page, basta arrastar e soltar o bloco com o número de colunas que deseja ter, como mostra a imagem abaixo.

Para visualizar as seções no seu layout, clique no botão Mostrar Áreas.

Clicando neste botão, você poderá ver a landing page dividida em seções e cada seção mostrará  número de colunas por seção, bem como as seguintes opções:

  1. Seta(s): Esta opção permitirá que você mova a seção para cima ou para baixo.
  2. Engrenagem: Abre as configurações da seção onde você pode alterar a cor de fundo ou adicionar uma imagem de fundo para a seção selecionada.
  3. Copiar: Permite a cópia de uma seção inteira. A seção copiada é então inserida.
  4. Lixeira: Esta opção exclui a seção inteira, uma ação que não é reversível.

Para sair do modo de seção, clique no botão Esconder Áreas.

 

Voltar ao topo


Como adicionar uma imagem de fundo

As imagens de plano de fundo estão disponíveis na área de seções e na aba de Estilos Gerais. Para adicionar uma imagem de plano de fundo, siga as etapas abaixo:

Adicionar uma imagem de plano de fundo em uma seção

Essa opção adiciona uma imagem de plano de fundo a uma seção específica do layout da sua landing page.

  1. Na sua landing page, clique na opção Mostrar Áreas.
  2. Vá até a seção onde você deseja adicionar uma imagem de fundo e clique no ícone de engrenagem.
  3. As configurações da seção serão exibidas à esquerda. Clique em Adicionar Background.

 

Adicionar uma imagem de fundo em toda a página

Ao adicionar uma imagem de fundo através da aba de Estilos Gerais, a imagem será aplicada ao fundo de todo o design da sua landing page.
  1. No design da sua landing page, clique na aba de Estilos Gerais.
  2. Clique na opção Imagem de Fundo.
  3. Por fim, selecione a opção Adicionar Background.

 

Em ambas as opções:

Ao selecionar a opção de Adicionar Background, você verá a sua Galeria de Imagens. Você poderá então adicionar uma imagem existente ou adicionar uma nova.

Uma vez que a imagem for inserida, novas configurações aparecerão.

 

 

Estilos de Fundo

Preencher. A imagem preencherá o tamanho da tela, cobrindo a seção inteira. Ao rolar a página, a imagem ficará estática. Veja um exemplo de uma landing page usando o estilo Preencher. Para esta página, usamos um plano de fundo no começo e outro no final. Na seção do meio, adicionamos uma cor que corresponde cor final da primeira imagem e à cor inicial da última imagem, criando um efeito de gradiente.

Mosaico. A imagem será exibida lado a lado, baseada em seu tamanho. As imagens criarão um efeito semelhante a um mural com mosaico. O número de cópias da imagem será ajustado de acordo com o tamanho da tela.

Parallax. Essa opção corrigirá sua imagem e dará o efeito de um movimento dinâmico ao rolar pela sua landing page. A imagem ocupará 100% da tela, e você também pode definir a posição da imagem. Observação: O efeito parallax é melhor observado ao rolar para cima e para baixo. Você pode ir de uma seção para outra com a aparência de que a imagem anterior desaparece, enquanto a nova imagem a cobre completamente, como neste exemplo da taça de vinho.

  1. Posição da Imagem. Esses controles permitem alterar a posição da imagem facilmente. Selecione a opção que melhor atenda à sua necessidade.
  2.  Opções de Edição
    1. Editar: Utilize o nosso editor de imagens para redimensionar ou adicionar um efeito na sua imagem.
    2. Substituir: Se a imagem adicionada não é bem o que você precisa, você pode substituí-la.
    3. Reiniciar: Essa opção irá deletar a imagem, permitindo que você utiliza uma nova imagem ou uma cor de fundo.
  3. Layout do Conteúdo
    1. Background com Moldura: Essa opção, também chamada de caixa, possui um preenchimento nas laterais e uma cor de fundo aplicada a ela. O conteúdo ficará centralizado.
    2. Background com Largura Completa: Esta opção irá mostrar o conteúdo sem nenhuma moldura ao redor.
  4. Ao finalizar, não se esqueça de clicar em Salvar & Fechar.

 

Voltar ao topo


Blocos

Os blocos podem ser elementos de design ou mesmo funcionalidades. Clicando na guia de Blocos, você terá duas opções: Seções e Conteúdo. Para encontrar os blocos disponíveis, clique na opção Conteúdo abaixo da guia blocos.

Para adicionar um bloco ao seu layout, clique no bloco desejado e então arraste para onde deseja posicioná-lo, como mostra a imagem abaixo.

 

Agora, mostraremos os blocos disponíveis. Continue lendo para aprender como utilizá-los.

 

Voltar ao topo


 

 

Bloco Imagem e bloco Cartão de Imagem

Com estes blocos, você poderá carregar uma imagem ou selecionar uma imagem existente da sua galeria. Para utilizar qualquer um desses blocos, arraste-o para a sua landing page primeiro e, em seguida, adicione a imagem. Um Bloco Imagem irá incluir uma imagem no seu layout, enquanto o Bloco Cartão de Imagem irá incluir uma imagem com texto dentro de um quadro em seu layout.

Abaixo você pode ver um Bloco Imagem à esquerda e um bloco Cartão de Imagem à direita.

Qual utilizar, afinal?

Utilize o Bloco Imagem quando for necessário adicionar uma imagem simples.

Utilize o Bloco Cartão de Imagem qua ndo for necessário adicionar uma descrição à sua imagem, e caso você mova o bloco de lugar, a descrição também será movida.

Para aprender como adicionar um Bloco Imagem, clique aqui. Para aprender como adicionar um Bloco Cartão de Imagem, clique aqui.

Outros artigos que podem ser interessantes:

 

Voltar ao menu Blocos


 

Bloco de imagem com Legenda Inferior

Um Bloco de imagem com Legenda Inferior é um bloco que permite que você adicione um texto à sua foto. A principal diferença entre este bloco e o Bloco de Cartão de Imagem é que este bloco não possui um quadro ou container. Você pode ajustar o padding até a borda do layout, como mostrado abaixo, onde o bloco de legenda está à esquerda, e o bloco de cartão de imagem está à direita.

Para aprender como adicionar um Bloco de imagem com Legenda Inferior, clique aqui. 

 

Voltar ao menu Blocos


 

Bloco Texto

Você pode adicionar texto à sua landing page através do Bloco Texto. Para utilizá-lo, basta arrastar para onde deseja posicioná-lo. Após isso, mude o texto padrão e insira o seu próprio.

Abaixo, seguem algumas observações  sobre o uso dos Blocos de Texto:

Copiar e Colar

Caso você tenha um texto que gostaria de copiar e colar na sua landing page, nós recomendamos utilizar a opção Colar . Essa opção remove qualquer caractere oculto no seu texto que possa interferir na aparência do texto.

Código-fonte

Para adicionar um código-fonte, clique no ícone Código-fonte e então cole seu código.

Caso você não encontre a opção mencionada acima, clique no ícone Ver Mais na barra de ferramentas.

 

Voltar ao menu Blocos


 

Bloco Vídeo

Vídeos são ótimas ferramentas visuais. Através deles, você pode apresentar as qualidades de um produto ou as razões pelas quais eles deveriam escolher você ao invés de seus concorrentes. Sempre que possível, utilize vídeos em sua landing page.

Caso você queira aprender como fazer o upload de um vídeo na sua Galeria e como adicioná-lo em seu layout, clique aqui.

 

Voltar ao menu Blocos


 

Blocos Divisor

Divisores são uma ótima opção para criar espaços entre elementos da sua landing page, e não precisam ser necessariamente espaços em branco. Para adicionar um divisor, arraste o bloco até a posição desejada. Saiba quais são as possibilidades dos divisores aqui.

 

Voltar ao menu Blocos


 

Bloco Botão

A CTA (“Call to Action”, ou “Chamada para Ação” em português) é a parte mais interessante de sua landing page. Aqui é decidido se todo o trabalho colocado no design de sua landing page foram frutíferos. Para adicionar um botão, arraste-o para a posição desejada. No painel da esquerda, você verá as opções para customizar seu botão. Abaixo você terá mais informações sobre as configurações do botão Conteúdo.

  1. Clique na opção Link na barra de edição de texto.
  2. Na nova janela pop-up que surgir, clique no tipo de link no menu suspenso e selecione a opção desejada. Nota: Você precisa criar uma âncora antes. Para saber como criar uma âncora, clique aqui.
  3. Barra de edição de texto: Nela, você pode encontrar as opções de customização para o seu texto e também as opções de links.
  4. Caso você tenha vários botões em sua landing page, não é necessário ir um a um para customizá-los. Customize um botão e apenas marque a opção “Aplicar o estilo a todos”. Assim, todos os botões em sua landing page a partir desse momento terão o mesmo estilo.

 

Back to blocks menu


 

Mídias Sociais & Compartilhar nas Redes Sociais

Os blocos de mídia social são essenciais. Nosso editor oferece dois tipos de blocos para adicionar suas redes sociais. Para usar qualquer um dos blocos, arraste-o para a seção de sua escolha.

O bloco Mídias Sociais permite adicionar o ícone de suas mídias sociais ou o ícone + texto. Esse bloco permite adicionar até 20 serviços diferentes, incluindo Facebook, Twitter, Whatsapp, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor, entre outros.

O bloco Compartilhar nas Redes Sociais adiciona os seguintes serviços: Facebook, Twitter, Linkedin, Myspace e instapaper. Assim, esse bloco permitirá que os usuários compartilhem sua landing page diretamente nas redes sociais citadas.

Qual bloco utilizar?

Se você deseja redirecionar os visitantes da sua landing page para as suas redes sociais, utilize o bloco de Mídias Sociais, assim, seus visitantes poderão clicar nas mídias sociais onde gostariam de acompanhar ou seguir você.

Agora, se você deseja que os visitantes compartilhem o seu conteúdo, utilize o bloco Compartilhar nas Redes Sociais.

Siga as instruções abaixo para adicionar um serviço nestes dois blocos:

  1. Arraste o bloco desejado ou clique em um desses blocos já existente em seu layout.
  2. No painel esquerdo, vá até a guia Conteúdo.
  3. Clique no menu suspenso Adicionar um Serviço (ou Add Service), selecione um dos serviços e depois clique no ícone de adicionar ao lado do menu.
  4. Dentro do seu email, clique no ícone de serviço recém adicionado. As opções para personalizar serão exibidas no painel esquerdo.
  5. Adicione a URL do link e personalize os ícones. Ao finalizar as configurações, você pode usar a opção Aplicar raio para todos os blocos no texto para adicionar o mesmo raio a todos os botões.

 

Além disso, ao passar o mouse sobre um dos ícones, você terá a opção de movê-lo ou excluí-lo.

 

Voltar ao menu Blocos


 

 

Bloco da Barra de Navegação

A barra de navegação ajuda seus visitantes a descobrirem mais sobre seu negócio.

  1. Para adicionar um link, clique no ícone “(+)”. Para customizar esse link, clique nele, e as opções de customização irão aparecer no painel da esquerda. Você pode adicionar até seis links. Existem duas opções de link: Texto ou imagem. Você pode selecionar qualquer uma dessas opções.
  2. Existem três tipos de layout disponíveis para seus links de navegação. Você pode combinar imagens e textos. Clique nos estilos e selecione o que melhor se encaixa no seu design.
  3. Use as opções de alinhamento horizontal e vertical para customizar sua barra. A opção Tamanho determina o espaçamento entre cada link.
  4. Na Estilização Mobile, você pode escolher as opções Padrão, Vertical e Vertical centralizada para determinar a aparência da sua página em um dispositivo móvel.

 

Voltar ao menu Blocos


 

Formulário de inscrição

Landing pages são uma ótima maneira de obter novos contatos para a sua lista. Quanto mais contatos você tiver, mais pessoas o seu conteúdo irá alcançar, o que torna sua página capaz de aumentar suas vendas.

Siga essas instruções caso você já tenha criado um formulário de cadastro incorporado. Para saber como criar um, clique aqui.

  1. Arraste o ícone de Formulário de Inscrição para a posição desejada no layout.
  2. Vá ao painel da esquerda e selecione “Formulário Incorporado” no menu suspenso. Importante: Apenas formulário incorporados são permitidos nas landing pages.
  3. Seu formulário irá aparecer na área selecionada. No editor da landing page, você pode customizar a largura ativando a Largura Customizada. Caso você precise customizar seu formulário, clique na opção Abrir Editor de Formulários. Essa opção irá abrir uma nova janela onde você poderá alterar seu formulário. Quando terminar, clique em Salvar & Publicar e depois em Confirmar.
  4. Alguns segundos depois, as alterações serão aplicadas em sua landing page. Se você não conseguir visualizar as novas alterações, exclua o formulário de inscrição da sua landing page (para excluir, passe o mouse sobre o formulário e clique no ícone de excluir) e adicione o mesmo formulário novamente, repetindo as etapas acima.

Voltar ao topo


 

Tipografia

Você pode utilizar as fontes do Google em suas Landing Pages e trazer mais personalidade ao seu design de página.

Para acessar as fontes do Google, siga as seguintes etapas:

  1. Vá para a etapa de Design da landing page.
  2. Clique na guia Estilos Gerais.
  3. Localize e clique na opção Tipografia.
  4. Aqui, você poderá selecionar a fonte desejada para os títulos e para o texto do corpo de seu email.

 

Voltar ao topo


Bloco Animado

Impressione os seus visitantes ao animar os blocos da sua landing page! Isso tornará sua página muito mais dinâmica e divertida.

Para acessar a opção de animação dos blocos, siga as etapas abaixo:

  1. Vá para a etapa de Design da landing page.
  2. Arraste qualquer bloco que deseja incluir no layout da sua página. A opção de bloco animado estará disponível em todos os blocos.
  3. Depois que o bloco for colocado no layout do seu email, você verá as opções de Configuração do bloco no menu à esquerda.
  4. Encontre a opção Bloco Animado na parte inferior e selecione-a.

As animações disponíveis serão exibidas e então, basta selecionar o tipo de animação que gostaria de usar e, em seguida, a Duração (tempo) da animação. Você também pode adicionar um Atraso (delay), que será o tempo que leva para a animação aparecer, e um Offset, que fará com que a animação se repita.

 

Voltar ao topo


Caso tenha quaisquer dúvidas relacionadas a este assunto, entre em contato com um de nossos especialistas através do Chat ou do email.

 

Sua Dúvida Foi Respondida?
1 0

Não está encontrando a resposta para sua dúvida?

Abrir um Chamado