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>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.
Inspecteur de elementos de navegaçãoFontes 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.
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.
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.
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.
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
Imagens na biblioteca de mídia podem ser incorporadas em qualquer página de aterrissagemNa 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 em uma página de aterrissagemIntegrate 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
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
Vídeo MP4 EmbutidoVocê também pode usar a tag de vídeo HTML5 para incorporar vídeo no formato mp4
<video width="100%" controla>
<source src="/resources/sample.mp4" type="video/mp4">
Seu navegador não suporta vídeo HTML5.
</video>
Google Maps
Embedded Google MapsVocê pode integrar um iframe responsivo com uma localização do Google Maps.
- Encontre sua localização em Google Maps e copie o código HTML "Share > Embed a map" (iframe).
- 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
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.
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.
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><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 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.