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 junho 22, 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. Blocos
  5. Formulários de Inscrição

 


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 para alterar a cor de fundo da seção específica.
  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


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.

 

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. Depois, adicione o mesmo formulário novamente seguindo os passos anteriores.
  5. Depois, adicione o mesmo formulário novamente seguindo os passos anteriores.

 

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 suporte@benchmarkemail.com (atendimento telefônico disponível apenas para Clientes Premium, na guia “Ajuda” de sua conta).

Sua Dúvida Foi Respondida?
1 0

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

Fale conosco por email