Deutsch
English
Español
Português
ItalianoGuia 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.
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.
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
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
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
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
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
Você 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
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.
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.
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">
<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
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.
