Quando si crea una Landing Page è possibile aggiungere qualsiasi codice HTML o CSS nelle caselle dell'area di testo. La seguente guida fornisce alcune idee sulle possibilità di styling e su come incorporare contenuti multimediali.
Come incorporare i CSS
È possibile incorporare CSS personalizzati nelle landing page, nella sezione del branding o nei campi css personalizzati. Ecco alcuni esempi di snippet di codice CSS.
<style>
/* Change Background Color */
body {background:#000}
/* Background Gradient */
body {background: linear-gradient(to right, red , yellow)}
/* Embed Background Image */
body {background: url("/img/background-example.jpg") no-repeat}
/* Fullscreen Background Image */
body {
background-image: url("/img/background-example.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Change Heading Text Color */
h1 {color:#f4f !important}
/* Change Type Font */
div {
font-family: "Times New Roman", Georgia, Serif;
}
</style>Elementi di stile della pagina di atterraggio
Con l'ispettore del browser è possibile selezionare un elemento nella pagina di destinazione. Dopo aver selezionato un elemento, il tag e la classe dell'elemento verranno mostrati nella finestra dell'ispettore sottostante.
Nella sezione branding di una landing page, è ora possibile definire il proprio stile per questo elemento nel campo "Custom CSS". L'esempio seguente mostra come modificare la dimensione del carattere dell'elemento di intestazione selezionato h1.headline.
Se si vuole riutilizzare il codice CSS per altre landing page, si può salvare il codice CSS in un modello css cliccando sul pulsante Aggiungi.
Ispettore browserFonts di Google incorporati
<style>
@import url('//fonts.googleapis.com/css?family=Open+Sans');
body{font-family: 'Open Sans', sans-serif;}
</style>Usare la direttiva @import sempre all'inizio dei css. Per saperne di più su Google Fonts
Si ricorda che in Europa dal 25 maggio 2018 si applica il nuovo Regolamento generale sulla protezione dei dati. Se integrate contenuti da server esterni (come Google Fonts) nelle vostre landing page, dovrete includere un avviso nella vostra privacy policy con ogni servizio. Potete inserire un link personalizzato alla vostra informativa sulla privacy in ogni landing page nella sezione GDPR.
Testate sempre il vostro codice CSS
Prima di inserire il codice CSS nella pagina, verificarne sempre la correttezza con il CSS Validator
Immagini
Le immagini della libreria multimediale possono essere incorporate in qualsiasi pagina di destinazioneNella Libreria multimediale è possibile caricare immagini o documenti pdf. Dopo aver caricato un file, potete cliccare sull'icona matita dell'immagine e vedrete uno snippet HTML per incorporare il documento in una qualsiasi delle vostre landing page, ad esempio
<img alt="qr icon" src="/img/qr-icon32.png"/>
Video su YouTube
Video Youtube incorporato in una pagina di destinazioneIntegrare facilmente video da YouTube, Vimeo o qualsiasi altra piattaforma video. Il seguente frammento di codice mostra come incorporare un video di YouTube tramite iFrame nella propria Landing Page. Il video viene automaticamente ridimensionato in base alla larghezza dello schermo.
<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div>
Attenzione: Si prega di utilizzare sempre il link per l'incorporazione da YouTube //youtube.com/embed/1234 e non utilizzare il link dalla barra degli indirizzi //youtube.com/watch?v=1234
Video di Vimeo
Video Vimeo incorporato Il seguente frammento di codice mostra come incorporare un video Vimeo tramite iFrame nella propria Landing Page. Il video viene automaticamente ridimensionato in base alla larghezza dello schermo.
<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//player.vimeo.com/video/44454530"></iframe>
</div>
Video MP4
Video MP4 incorporatoÈ possibile utilizzare anche il tag video HTML5 per incorporare video in formato mp4
<video width="100%" controls>
<source src="/resources/sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Google Maps
Google Maps incorporatoÈ possibile integrare un iframe responsive con una posizione di Google Maps.
- Trovate la vostra località su Google Maps e copiate il codice HTML "Share > Embed a map" (iframe).
- Utilizzate il seguente codice sulle vostre landing page per visualizzare la Google Map responsive.
<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>Inserire JavaScript
È possibile includere codice JavaScript nelle aree di testo. Tuttavia, assicurarsi di inserire il codice in un'unica riga. Le interruzioni di riga causano errori JavaScript.
<script>alert('hello');</script>Immettere iFrames
Includete iFrames ad esempio nella sezione "Chi sono" del vostro biglietto da visita mobile.
<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>
Inclusione di siti web esterni
Se si vuole includere un sito web esterno nella propria landing page personalizzata, è necessario estrarre tutte le risorse esterne come js, css e immagini nella landing page. Per farlo esiste un utile strumento su Github - Inliner
Moduli personalizzati
Pagina di atterraggio dei leader
Modulo personalizzato per la raccolta dei datiRecuperare i dati del modulo
È quindi possibile interrogare i dati del modulo trasmessi per una landing page collettivamente sotto la voce di menu Leads o tramite l'API.
Come creare un modulo personalizzato con HTML & JavaScript
Poi, è possibile creare un modulo e inviare facilmente i dati del modulo al nostro server utilizzando il seguente snippet su una landing page personalizzata.
<script>
$(function() {
$('#submit').on('click', function() {
$.post("/api/post", $("form").serialize()).done(
function(data) {
alert('Thank you for registration!');
});
return false;
});
});
</script>
<form>
<label>Your Name</label>
<input name="name">
<label>Your E-Mail</label>
<input name="email">
<a href="#" id="submit">Register</a>
</form>Campi opzionali del modulo
<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">
- Con il campo notify è possibile attivare o disattivare le notifiche via e-mail quando è stato generato un nuovo lead
- Con il campo webhook è possibile impostare un URL esterno a cui inviare il nuovo lead generato
- Con il campo rewardurl è possibile impostare un URL esterno che l'utente riceverà per e-mail dopo la sottoscrizione
<input name="lng" type="hidden">
<input name="lat" type="hidden">
<input name="accuracy" type="hidden">
I campi lng, lat e accuracy possono essere riempiti con il seguente snippet JS se la funzione GPS è attivata.
<script>
$(function() {
const urlParams = new 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>Chiamata-2-Azioni
Aggiungi un pulsante call-2-action a una landing pageÈ possibile aggiungere pulsanti call-2-action a qualsiasi pagina di destinazione direttamente dall'editor della pagina di destinazione, facendo clic sull'icona Aggiungi. Un pulsante call-2-action può rimandare a un sito web, a un documento PDF, avviare una chiamata o inviare un'e-mail. Per saperne di più, consultate il nostro tutorial Che cos'è un pulsante call-2-action (C2A).