Dicas de Edição Avançada de Landing Page

Atenção: é necessário ter conhecimento básico de HTML, CSS e JavaScript para realizar estas customizações. Os códigos abaixo são apenas exemplos. A Resultados Digitais não fornece suporte ou serviço de edição avançada.

Aparência

Ocultar elementos

1. Copie o seletor do elemento que você deseja remover.

2. Em Edição Avançada > CSS da aba Editor da Landing Page, cole o seguinte código (substituindo o valor do seletor pelo correto):

#SELETOR-DO-ELEMENTO-QUE-DESEJA-REMOVER {
  display: none !important;
}

3. Para remover mais de um elemento, use o exemplo abaixo:

#SELETOR-DO-PRIMEIRO-ELEMENTO-QUE-DESEJA-REMOVER,
#SELETOR-DO-SEGUNDO-ELEMENTO-QUE-DESEJA-REMOVER {
  display: none !important;
}

Utilizar Google Fonts

1. Acesse o Google Fonts e encontre a fonte que deseja utilizar. Adicione-a à sua coleção clicando no botão +;

2. Clique na barra preta na parte inferior da tela, 1 Family Selected. Nela, você vai poder customizar as propriedades da fonte de acordo com sua preferência;

3. Copie todo o código na seção EMBED > STANDARD.

4. Na sua Landing Page, em Edição Avançada > JavaScript em HEAD, cole o código que você copiou:

5. Após definir qual elemento da sua Landing Page terá a fonte definida, cole o código de CSS fornecido pelo Google Fonts na seção de CSS da Edição Avançada da Landing Page. Não se esqueça de substituir o valor do seletor pelo correto:

O código vai ficar da seguinte maneira:

#SELETOR-DO-ELEMENTO-QUE-DESEJO-ALTERAR-A-FONTE {
  font-family: 'Lato', sans-serif;
}

6. Clique no botão Salvar.

Adicionar favicon

Favicons são pequenas imagens (geralmente 16x16 px) que identificam a página do navegador. Via de regra, as empresas utilizam seus logotipos. Para definir o favicon da sua Landing Page, basta seguir os passos abaixo:

1. Na aba Editor da sua Landing Page, selecione Edição Avançada > JavaScript em HEAD, insira o código a seguir, substituindo COLE-SUA-URL-AQUI pela URL da sua imagem:

<link rel="shortcut icon" type="image/png" href="COLE-SUA-URL-AQUI">

Se a imagem estiver no seu computador, você deve hospedá-la em algum site (como o PostImage) e obter uma URL.

2. Clique em Salvar.

Atenção: se houver outros códigos JavaScript inseridos, você deve deixar o código referente ao Favicon acima dos demais.

Inserir contador regressivo

1. Na Edição Avançada de JavaScript em BODY da Landing Page, adicione o código abaixo:

<script src='https://s3-sa-east-1.amazonaws.com/rdstation-static/js/jquery.countdown.min.js'></script>
<script type='text/javascript'>
  $(document).ready(function() {
    data = 'ANO/MÊS/DIA HH:MM:SS';
    $('#SELETOR-DA-LANDING-PAGE').prepend('<div id="timer"></div>');
    $("#timer").countdown(data, function(event) {
      $(this).html('<p>'+ event.strftime('%D dias %H:%M:%S') + '</p>'); 
    });
  });
</script>

2. Substitua SELETOR-DA-LANDING-PAGE pelo seletor do elemento onde o contador deve aparecer. Saiba como aqui;

3. Substitua ANO/MÊS/DIA HH:MM:SS pela data a ser usada no contador. Por exemplo, se você quiser que o seu contador vá até o dia 5 de janeiro de 2018 às 18h 36min e 40seg, a linha do código ficará assim:

data = '2018/01/05 18:36:40';

4. Agora, na aba Editor, em Edição Avançada > CSS, adicione o seguinte código:

#timer {
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 0px;
  margin-left: 0px;
}
#timer p {
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

5. Clique no botão Salvar.

Você pode realizar customizações na aparência do contador editando o código de CSS adicionado. O plugin utilizado nestes códigos é o jQuery Countdown.

Inserir botões de compartilhamento

No Editor HTML da seção onde os botões devem ser inseridos, adicione o código abaixo para cada uma das redes sociais.

Substitua o trecho http://urldalp.com em cada código pela URL a ser compartilhada.

Twitter

1. Em Edição Avançada > JavaScript em Body adcione o script abaixo:

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2. Depois, na seção onde o botão será adicionado, clique em Editor HTML e adicione:

<a class="twitter-share-button" href="https://twitter.com/intent/tweet"> Tweet</a>

Facebook

1. Em Edição Avançada > JavaScript em Body adcione o script abaixo:

  <div id="fb-root"></div>
   <script>(function(d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.11";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));</script>

2. Depois, na seção onde o botão será adicionado, clique em Editor HTML e substitua o trecho http://urldalp.com em cada código pela URL a ser compartilhada:

<div class="fb-share-button" data-href="https://urldalp.com.br" data-layout="button_count"> </div>

1. Em Edição Avançada >JavaScript em Body adicione o script abaixo:

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: pt_BR</script>

2. Depois, na seção onde o botão será adicionado, clique em Editor HTML e substitua o trecho http://urldalp.com em cada código pela URL a ser compartilhada:

<script type="IN/Share" data-url="urldalp.com.br" data-counter="right"></script>

Formulário

Alterar o enunciado de um campo padrão

Em Edição Avançada > JavaScript em BODY, insira o código abaixo. No exemplo, estamos mudando o enunciado do campo name para Nome Completo:

<script type="text/javascript">
    $( document ).ready(function() {
        $('#name').parent().children('label').html('Nome completo');
    });
</script>

Perceba que o campo Nome é citado como #name no código. Segue abaixo os demais termos a serem usados nos campos padrão:

Nome do campo	Como usar no código
Nome	name
Email	email
Empresa	company
Cargo	job_title
Telefone	personal_phone
Celular	mobile_phone
Twitter	twitter
Facebook	facebook
Linkedin	linkedin
Website	website
Estado	uf

Transformar campo em data

Exemplo:

1. Em Edição Avançada > JavaScript em BODY da sua Landing Page, adicione o seguinte código:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>
<script type="text/javascript">
 (function () {
 $(document).ready(function () {
 $('#ID_DO_SEU_CAMPO').mask('00/00/0000');
 });
 }());
</script>

2. Substitua o valor ID_DO_SEU_CAMPO pelo identificador do campo que deve ter a máscara. Mantenha o # antes do ID.

Para obter o ID do seu campo, pré-visualize sua Landing Page e clique com o botão direito do mouse no campo desejado. Escolha a opção Inspecionar.

Procure pelo termo id e copie exatamente o que está escrito dentro do parâmetro.

O plugin utilizado nestes códigos é o jQuery Countdown. O estilo dele pode ser alterado via CSS.

Transformar campo em preço

O campo usado deve ser do tipo Campo aberto - Texto.

1. Em Edição Avançada > JavaScript em BODY da sua Landing Page, adicione o seguinte código:

<script type="text/javascript" src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var elements = $('#ID_DO_SEU_CAMPO');
        elements.mask('000.000.000.000.000,00', {reverse: true});
    });
</script>

2. Substitua o valor ID_DO_SEU_CAMPO pelo correto. Mantenha o # antes do ID.

Para obter o ID do seu campo, pré-visualize sua Landing Page e clique com o botão direito do mouse no campo desejado. Escolha a opção Inspecionar.

Procure pelo termo ID e copie exatamente o que está escrito dentro do parâmetro.

Alterar texto "Selecione" de caixa de seleção

Para alterar a mensagem da caixa de seleção, basta colar o código abaixo em Edição Avançada > JavaScript em BODY da Landing Page. Troque o valor TEXTO-DA-CAIXA-DE-SELECAO para o texto desejado.

<script type="text/javascript">
    $("select option").each(function() {
        if (!$(this).val()) { 
            $(this).text("TEXTO-DA-CAIXA-DE-SELECAO");
        }
    });
</script>

Como alterar o texto dos botões da Conversão Social

O texto dos botões de Conversão Social (imagem abaixo) podem ser alterados via JavaScript nas Landing Pages.

Copie o código abaixo e cole em Edição Avançada > JavaScript em BODY da sua Landing Page:

<script type="text/javascript">
    $( document ).ready(function() {
      $('.btn-google span').text("TEXTO-BOTAO-GOOGLE");
      $('.btn-facebook span').text("TEXTO-BOTAO-FACEBOOK");
      $('.btn-linkedin span').text("TEXTO-BOTAO-LINKEDIN");
    });
</script>

Não se esqueça de alterar os valores TEXTO-BOTAO-GOOGLE, TEXTO-BOTAO-FACEBOOK e TEXTO-BOTAO-LINKEDIN para o texto desejado.

Alterar um campo checkbox para já carregar marcado

Para alterar um campo de validação (checkbox) para que ele já carregue marcado na página, basta colar o código abaixo em Edição Avançada > JavaScript em BODY da Landing Page. Altere SELETOR_DO_CAMPO para o seletor que representa o campo que deseja afetar:

<script type="text/javascript">
 (function () {
 $(document).ready(function () {
 $('SELETOR_DO_CAMPO').attr('checked',true);
 });
 }());
</script>

Exemplo: o campo opt-in de e-mail, que é padrão do RD Station Marketing, tem o seletor #available_for_mailing. Um script com o objetivo de carregá-lo já marcado seria:

<script type="text/javascript">
 (function () {
 $(document).ready(function () {
 $('#available_for_mailing').attr('checked',true);
 });
 }());
</script>

Análises

Adicionar Pixel do Facebook

Adicionar tags de remarketing do Facebook

Adicionar Código de Acompanhamento do Adwords

Outros

Direcionar Landing Pages para outras páginas

Para direcionar uma Landing Page para outras páginas, é preciso adicionar uma meta tag com um refresh (atualização) na página que vai receber o redirecionamento.

1. Na aba Editor da Landing Page, em Edição Avançada > JavaScript em HEAD, cole o seguinte código:

<meta http-equiv="refresh" content="0;URL='URL-DE-REDIRECIONAMENTO'">

2. Troque o valor URL-DE-REDIRECIONAMENTO pelo link da página que você deseja redirecionar o usuário.

Como adicionar o parâmetro "email" no redirecionamento de uma Landing Page

Para fazer estas alterações, é preciso utilizar o script abaixo. Basta colocá-lo na área Edição Avançada > JavaScript em BODY da aba Editor:

<script>
$('#conversion-form').submit(function() {
  var email = $("#email").val();
  $("input[name='redirect_to'").val($("input[name='redirect_to'").val() + "?email=" + email);
});
</script>

Artigos nessa seção

Aparência

Formulário

Análises

Outros

Ainda precisa de ajuda?

Artigos nessa seção

Aparência

Twitter

Facebook

LinkedIn

Formulário

Análises

Outros

Artigos relacionados

Ainda precisa de ajuda?