Como criar uma página da Web personalizada com o construtor de página de destino (Landing Page)?

Disponível no Freshmarketer: Growth, Pro e Enterprise.

Suite Freshsales: Growth, Pro e Enterprise.

O construtor de página inicial no aplicativo da web permite que os usuários criem páginas iniciais personalizadas a partir de um conjunto existente de modelos. No entanto, os usuários também podem personalizar esses modelos de acordo com seus gostos ou criar seus próprios com elementos fornecidos pelo aplicativo da web. 

Para entender isso melhor, vamos primeiro entender a estrutura de uma página de destino no aplicativo da web.

Cada página inicial no aplicativo da web segue esta hierarquia:

Seção > Linha > Coluna > Elementos

Vamos entender esses atributos estruturais.

• Seção

Uma seção refere-se a cada dobra em sua página de destino. Uma seção é um elemento onde você pode adicionar linhas para configurar sua página inicial. Veja como você pode configurar sua seção.
 

• Layout da Seção :  cada seção em uma página de destino é organizada verticalmente. Você pode alterar a ordem de uma seção arrastando-a para cima ou para baixo. Você também pode clonar uma seção clicando no  botão Copiar ícone.
  
  
  Para alterar as propriedades Para adicionar uma nova seção, clique em. Isso abre a galeria de seções onde você pode configurar sua seção.
    

• Galeria de Seções:  O aplicativo da web permite que você escolha configurar sua seção usando uma das duas opções:
  
  

  • Adicionar uma seção em branco:  clique empara adicionar uma seção em branco à dobra. Depois que uma seção for adicionada, configure o número de colunas que deseja adicionar à seção.
    
    
    
    Depois de escolher o número de colunas, a seção será preenchida com um layout onde você pode optar por adicionar Elementos.
    
    

  • Escolha a partir de um modelo:  em vez de criar uma seção do zero, você também pode optar pelos modelos fornecidos pelo aplicativo da web. Você pode escolher um dos seguintes modelos
    
    Cliquepara adicionar o modelo escolhido à página inicial.

                  
                Agora que a seção foi adicionada, você pode configurar as propriedades da seção. 

• Configurações da seção:  O aplicativo da web permite que você configure a propriedade de cada seção. Aqui está o que você pode modificar para cada seção:
  
  
  

• Nome:  adicione um nome a cada seção para facilitar a classificação.
  
  
  

• Cor do plano de fundo:  altere o plano de fundo escolhendo uma das cores predefinidas.
  
  
  Você também pode escolher uma cor que combine com o tema da sua marca clicando em, adicionando o Hex Code, e clique empara adicionar a cor à sua paleta.
  
  
  

• Imagem de fundo:  você pode adicionar ou substituir uma imagem de fundo em sua seção. Clique em  Substituir imagem  para carregar uma nova imagem. Isso abre uma caixa de diálogo onde você pode escolher uma imagem do computador ou uma imagem da internet e adicioná-la à página inicial.
  
  
  Banco de imagens:  você pode pesquisar imagens de estoque na barra de pesquisa ou clicar no menu suspenso e escolher entre as categorias oferecidas.
  
  
  Depois de escolher uma imagem, clique empara adicionar a imagem ao fundo.
  
  

• Estilo:  Configure o estilo da seção. Escolha se deseja esticar o conteúdo da seção de ponta a ponta, mantenha a altura total e defina o efeito de fundo como paralaxe. Use a alternância para ativar ou desativar esses estilos.
  
  
  

• Espaçamento:  Alterne entre 'Horizontal' e 'Vertical' para configurar o espaçamento das seções, respectivamente. Nas direções – horizontal ou vertical – você pode definir a Margem e o Preenchimento.
  https://freshsales.wistia.com/medias/pmud9h8drc 
  
  

  • Margem  é o espaçamento entre a seção e outras seções adjacentes.
    
    

  • Preenchimento  é o espaçamento entre os elementos dentro da seção.
    
    

Escolha a quantidade de espaçamento que deseja definir entre os elementos das seções. Você pode escolher entre as seguintes opções com base em suas preferências:

• XS (Extra Small)  - para telas menores que 576px

• SM (Pequeno)  - para telas iguais ou superiores a 576px de largura - idealmente, telefones e tablets 

• MD (Médio) -  para telas iguais ou superiores a 768px de largura, tablets e pequenos laptops 

• LG (Grande) -  para telas iguais ou superiores a 992px de largura - para laptops e desktops  

• XL (Extra Large) -  para telas iguais ou superiores a 1200px

• No Padding/ No Margin  - Não deixa espaço para preenchimentos e margens 
  

• Visibilidade:  Defina a visibilidade da seção. Opte por mostrá-lo apenas no computador, no celular ou em ambos.

• Linha: 

  
  Row é um elemento individual dentro de cada seção. Você pode configurar a linha usando as configurações de linha. Veja como você pode configurar a linha:
  

  • Cor de fundo

  • Espaçamento

  • Visibilidade
    
    
    

  • Avançado: 
    
    

• Ocultar calhas:  as calhas são o preenchimento entre as colunas. Eles podem ser usados para adicionar espaço responsivamente e definir alinhamento para o conteúdo. Ao ocultar as calhas, você pode remover o espaçamento entre as colunas e tornar a linha mais compacta.
  
  

• Raio da borda:  use o controle deslizante para aumentar ou diminuir o raio do canto

• Coluna:
  A coluna é uma subseção vertical dentro de uma linha. Você pode fazer as seguintes personalizações em uma coluna:
  
  • Estilo

  • Imagem de fundo

  • Cor de fundo

  • Espaçamento

  • Visibilidade
    
    
    
    

  • Alinhamento
    Você pode optar por definir o alinhamento de sua coluna dentro da linha. Você pode escolher entre:

    • Alinhamento à esquerda

    • Alinhamento à direita

    • Alinhamento Central

• Elemento:  Os usuários têm os seguintes elementos para escolher:
  
  
  

  • Texto:  arraste e solte o bloco Texto para adicionar texto à sua campanha. O bloco de texto vem com uma barra de ferramentas que permite formatar o texto com tamanho e tipo de fonte, alinhamento e muito mais. Você também pode optar por criar uma lista numerada ou com marcadores ou inserir um link. Além disso, você pode personalizar as propriedades do bloco com cores de texto e muito mais.
    
    
    

  • Imagem:  O bloco de imagem permite incorporar imagens em sua campanha de e-mail. Arraste e solte o bloco na seção e ele adiciona um espaço reservado para a imagem. Para adicionar uma imagem à sua campanha, clique em Substituir imagem. Isso permite buscar uma imagem para sua campanha de uma das três maneiras:
    
    

    • Carregue-  os do seu armazenamento local.
      
      
      

    • Pesquise as imagens oferecidas e cliquepara adicionar a imagem ao bloco.
      

Depois que sua imagem for carregada, você poderá personalizar a exibição e as dimensões da imagem no painel do lado direito. Você pode personalizar a largura da imagem, configurar o espaçamento, definir o alinhamento, adicionar links à imagem e muito mais. Você também pode adicionar uma sombra à imagem.

• Botão:  arraste e solte o bloco de conteúdo do botão para adicionar botões CTA ao seu e-mail. Edite o texto do botão usando a barra de ferramentas de edição. Para personalizar seu botão, você pode usar o painel de propriedades do conteúdo. Você pode definir o CTA do seu botão – escolher entre vincular a um URL, ancorar o botão a uma seção ou vincular a uma página no funil – e personalizar o alinhamento, cor, espaçamento, tamanho e muito mais. Você também pode optar por ocultar a seção de botões na área de trabalho ou em dispositivos móveis ou torná-la visível em ambos selecionando a opção.
  
  
  
  

• Divisor:  arraste e solte para adicionar um divisor à sua seção de conteúdo. O divisor permite que você defina claramente a demarcação entre as diferentes dobras da sua página de destino. Você pode personalizar o divisor para definir propriedades como tamanho (espessura), cor e espaçamento.
  
  
  
  

• Formulário:  Adicione um formulário em sua página inicial para capturar contatos automaticamente para o aplicativo da web e também obter campos relevantes preenchidos. Arraste e solte o bloco de formulário para inserir um formulário na página. Em seguida, você pode acompanhá-lo personalizando o formulário para adequá-lo ao seu caso de uso comercial. Veja como você pode personalizar o formulário.
  
  

  • Adicionando um campo de contato:  Clique no menu suspenso 'Adicionar um campo de contato' para adicionar um campo de contato ao seu formulário. Dessa forma, você pode converter um visitante da página em um contato e também pode capturar informações relevantes do visitante. Você também pode adicionar vários campos, reordená-los e também adicionar parâmetros de URL ao registro criado. Além disso, você também pode adicionar campos ocultos a um formulário.
    
    

  • Opções de redirecionamento:  Depois que o formulário for preenchido e a chamada para ação for clicada, você poderá optar por fazer uma das duas coisas:
    
    

    • Redirecionar para uma página no funil : escolha esta opção se a página de destino fizer parte do seu funil e você desejar que o visitante verifique a página. Geralmente é a página inicial ou a página de agradecimento. 
      
      

    • Link para um URL externo:  escolha esta opção se quiser que o visitante visite uma página externa.
      
      
      
      

  • Escolha o design do formulário:  adicione um design aos campos do formulário.
     
    

    
    

  • Espaçamento:  Configure o espaçamento para o formulário
    
    
    
    

  • Controles de envio de formulário:  clique na caixa de seleção para desativar o ReCAPTCHA no formulário. No entanto, tenha cuidado, pois isso remove o filtro de spam ou bot.
    
    

  • Botão:  Configure o botão CTA em seu formulário usando a seção PROPRIEDADES DO BOTÃO.
    
    
    

• Ícone:  arraste e solte o bloco de ícones para adicionar ícones à sua página de destino. Para adicionar o logotipo, clique em Substituir ícone. Isso abre uma caixa de diálogo que permite escolher um ícone de sua escolha na Biblioteca de Ícones.
  
  Veja como você pode personalizar o ícone:
  
  

  • Redimensionar:  Use o controle deslizante para aumentar ou diminuir o tamanho de um ícone.
    
    
    

  • Definir alinhamento:  defina o alinhamento do seu ícone dentro da caixa de conteúdo. Você pode escolher entre:

    • Alinhamento à esquerda

    • Alinhamento à direita

    • Alinhamento Central
      
      

  • Primeiro plano:  Escolha a cor do seu ícone. Você também pode adicionar cores usando códigos hexadecimais.
    

  • Hiperlink:  Adicione um link ao seu ícone.
    
    
    

• Vídeo:  incorpore um vídeo em sua página de destino adicionando o link
  
  
  

• Logotipo:  arraste e solte o bloco Logo para adicionar um logotipo à sua página de destino. Você pode adicionar ou substituir um logotipo em sua seção. Clique em  Substituir imagem  para carregar uma nova imagem de logotipo. Isso abre uma caixa de diálogo onde você pode escolher uma imagem do computador ou escolher uma imagem da internet e adicioná-la à página inicial.
  
  
  
  

• Código:  adicione um snippet de código à sua página de destino para executar um programa enquanto os visitantes estão na página . Arraste e solte o trecho de código na página de destino e preencha o código.