Este website usa apenas os cookies necessários para garantir que nosso website seja utilizado corretamente. Nós não utilizamos cookies que processam dados pessoais sem o seu consentimento prévio. Leia nosso política de cookies

Guia HTML & CSS

book reader icon
5 Minutos
facebook logo gray
linkedin logo gray
mail logo gray
Guia HTML & CSS

Ao criar um Landing Page você pode adicionar qualquer código HTML ou CSS em suas caixas de área de texto. O guia a seguir lhe dá algumas idéias sobre possibilidades de estilo e como incorporar conteúdo multimídia.

Como incorporar CSS

Você pode incorporar CSS personalizado em suas páginas de desembarque, na seção de marca ou nos campos css personalizados. Aqui estão alguns exemplos de trechos de código CSS.

<estilo>
/* Mudar a cor de fundo */
corpo {background:#000}

/* Gradiente de fundo */
corpo {background: linear-gradient(to right, red , yellow)}

/* Incorporar imagem de fundo */
corpo {background: url("/img/background-example.jpg") no-repeat}

/* Imagem de fundo em tela cheia */
corpo {

  imagem-fundo: url("/img/background-example.jpg");

  /* Altura total */
  altura: 100%;

  /* Centralizar e escalar bem a imagem */
  posição de fundo: centro;
  fundo-repetição: não-repetição;
  tamanho do fundo: capa;
}

/* Mudar a cor do texto do título */
h1 {color:#f4f !importante}

/* Mudar tipo de letra */
div {
    família de font-family: "Times New Roman", Geórgia, Serif;
}
</estilo>

Saiba mais sobre o CSS no W3 Schools CSS Tutorial

Elementos da página de aterrissagem de estilo

Com o seu navegador inspector você pode selecionar um elemento na página de desembarque. Após você ter selecionado um elemento, a etiqueta e a classe do elemento serão mostradas na janela do inspetor abaixo.

Na seção de marca de uma página de destino, você pode agora definir seu próprio estilo para este elemento no campo "Custom CSS". O exemplo a seguir mostra como você pode mudar o tamanho da fonte do elemento de cabeçalho selecionado h1.headline.

Se você quiser reutilizar seu código CSS para outras páginas de destino, você pode salvar o código CSS em um modelo css clicando no botão Add.

Inspetor de elementos de navegação
Inspecteur de elementos de navegação

Fontes Google Embutidas

<style>
@import url('//fonts.googleapis.com/css?family=Open+Sans');
body{font-family: 'Open Sans', sans-serif;}
</style>

Utilizar @importar diretriz sempre no início do seu css. Saiba mais sobre Google Fonts

Por favor note que na Europa desde 25 de maio de 2018 o novo Regulamento Geral de Proteção de Dados se aplica. Se você integrar conteúdo de servidores externos (como o Google Fonts) em suas páginas de destino, você deve incluir um aviso em sua política de privacidade com cada serviço. Você pode colocar um link personalizado para sua política de privacidade em cada página de desembarque na seção GDPR.

Incorpore suas próprias fontes em Landing Pages

Para incorporar suas próprias fontes em suas landing pages, vá para a seção de mídia e carregue a fonte que deseja incluir clicando no botão Carregar fonte.

Carregar fonte
Carregar fonte

Observe que os seguintes formatos de fonte são aceitos woff, woff2, ttf e eot.

Todos os arquivos de fontes carregados estão listados na seção de mídia. Para usar a fonte em sua landing page, abra a guia de fontes clicando no ícone de caneta da fonte correspondente.

Carregar fonte
Carregar fonte

Na aba você pode escolher entre um link de origem e um link de URL. Para copiar o link da fonte, clique no ícone de cópia.

Link da fonte para copiar
Link da fonte para copiar

Vá para a landing page que você criou, abra a seção de Branding da landing page e insira o link no campo CSS personalizado conforme mostrado na captura de tela abaixo. Salve a entrada.

Cole o link da fonte na seção de Branding
Cole o link da fonte na seção de Branding

Teste sempre seu Código CSS

Antes de inserir o código CSS em sua página, sempre teste a correção sob a Validador CSS

Como incorporar elementos multimídia

Imagens

Biblioteca de Mídia
Imagens na biblioteca de mídia podem ser incorporadas em qualquer página de aterrissagem

Na Biblioteca de Mídia você pode carregar imagens ou documentos pdf. Após carregar um arquivo você pode clicar no ícone pencil da imagem e você verá um snippet HTML para incorporar o documento em qualquer uma de suas páginas de destino, e.g.

<img alt="qr icon" src="/img/qr-icon32.png"/>

Vídeos do YouTube

Vídeo do Youtube embutido
Vídeo do Youtube embutido em uma página de aterrissagem

Integrate vídeos do YouTube, Vimeo ou qualquer outra plataforma de vídeo facilmente. O seguinte trecho de código mostra como incorporar um vídeo do YouTube via iFrame em sua página de aterrissagem. O vídeo é automaticamente re-dimensionado para a largura da tela.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div>
Cautela: Por favor sempre use o link para embutir do YouTube //youtube.com/embed/1234 e não use o link da barra de endereços //youtube.com/watch?v=1234

Vimeo videos

Vimeo frame embed de vídeo
Embedded Vimeo video

O seguinte trecho de código mostra como incorporar um vídeo Vimeo via iFrame em sua página de aterrissagem. O vídeo é automaticamente re-dimensionado para a largura da tela.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//player.vimeo.com/video/44454530"></iframe>
</div>

vídeos doMP4

html video embed
Vídeo MP4 Embutido

Você também pode usar a tag de vídeo HTML5 para incorporar vídeo no formato mp4

Mais informações e parâmetros adicionais em Integração de vídeo HTML5.

<video width="100%" controla>
  <source src="/resources/sample.mp4" type="video/mp4">
  Seu navegador não suporta vídeo HTML5.
</video>

Google Maps

Google Maps embed
Embedded Google Maps

Você pode integrar um iframe responsivo com uma localização do Google Maps.

  1. Encontre sua localização em Google Maps e copie o código HTML "Share > Embed a map" (iframe).
  2. Use o seguinte código em suas páginas de destino para exibir o mapa do Google.
<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3167.607952022468!2d-122.16294098474549!3d37.44636533875898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb38fa3f36f9%3A0xf5692002b984147!2sApple%20Palo%20Alto!5e0!3m2!1sen!2ses!4v1581585855657!5m2!1sen!2ses" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Embed JavaScript

Você pode incluir código JavaScript em áreas de texto. No entanto, certifique-se de inserir o código como um liner. Quebras de linha irão causar erros de JavaScript.

<script>alert('olá');</script>

Embed iFrames

Inclua iFrames por exemplo, na seção "Sobre mim" do seu cartão de visita móvel.

<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>

Embarcado Websites externos

Se você quiser incluir um website externo em sua página de desembarque personalizada, você tem que puxar todos os recursos externos como js, css e imagens em sua página de desembarque. Para fazer isso, há uma ferramenta útil em Github - Inliner

Formulários personalizados

Lead Landing Page

Para criar um formulário em uma página de desembarque e enviar os dados para nosso servidor você pode criar uma lead landing page.

Lead form register
Formulário personalizado para coleta de dados

Retomar dados do formulário

Você pode então consultar os dados transmitidos do formulário para uma página de destino coletivamente sob o item de menu Leads ou através da API.

Leads download
Download leads

Como criar um formulário personalizado com HTML & JavaScript

No entanto, você também pode criar um formulário e enviar os dados do formulário facilmente para nosso servidor usando o seguinte trecho em uma página de desembarque personalizada.

<script>
    $(function() {
        $('#submit').on('click', function() {
            $.post("/api/post", $("form").serialize()).done(
                function(data) {
                    alert('Obrigado pelo registro!');
                });
            return false;
        });
    });
</script>
<form>
    <label>Seu Nome</label>
    <input name="name">
    <label>Seu E-Mail</label>
    <input name="email">
    <a href="#" id="submit">Registre-se</a>
</form>

Campos do Formulário Opcional

<input name="notify" type="hidden" value="1">
<input name="webhook" type="hidden" value="https://yourwebsite.com/api/webhook/lead">
<input name="rewardurl" type="hidden" value="https://yourwebsite.com/resources/test.pdf">
notify você pode habilitar ou desabilitar notificações por e-mail quando um novo lead foi geradoli> Com o campo webhook você pode definir uma URL externa para a qual o novo lead gerado será submetidoli> Com o campo rewardurl você pode definir uma URL externa que o usuário receberá por e-mail após a inscrição
<input name="lng" type="hidden">
<input name="lat" type="hidden">
<input name="accuracy" type="hidden">

Os campos lng, lat e accuracy podem ser preenchidos com o seguinte snippet JS se a função GPS estiver ativada.

<script>
    $(function() {
        const urlParams = nova URLSearchParams(window.location.search);
        $('input[name=lng]').val(urlParams.get('lng'));
        $('input[name=lat]').val(urlParams.get('lat'));
        $('input[name=accuracy]').val(urlParams.get('accuracy'));
    });
</script>

Ações de Chamada-2

Adicionar call-2-action
Adicionar call-2-action button a uma página de desembarque

Você pode adicionar botões de chamada de ação 2 em qualquer página de aterrissagem diretamente do editor da página de aterrissagem clicando no ícone Adicionar. Um botão call-2-action pode ser ligado a um site, um documento PDF, iniciar uma chamada ou enviar um e-mail. Você pode aprender mais em nosso tutorial O que é um botão call-2-action (C2A) tutorial.

Última atualização faz 1 semana