This website uses necessary cookies to ensure that our website is ideally usable. We do not use cookies that process personal data without your prior consent. Read our Cookie Policy

Guida HTML e CSS

book reader icon
3 Minuti
facebook logo gray
linkedin logo gray
mail logo gray
Guida HTML e CSS

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>

Apprendi di più sui CSS nel W3 Schools CSS Tutorial

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 elementi del browser
Ispettore browser

Fonts 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

Come incorporare elementi multimediali

Immagini

Libreria multimediale
Le immagini della libreria multimediale possono essere incorporate in qualsiasi pagina di destinazione

Nella 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
Video Youtube incorporato in una pagina di destinazione

Integrare 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

Cornice video Vimeo incorporata
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 html incorporato
Video MP4 incorporato

È possibile utilizzare anche il tag video HTML5 per incorporare video in formato mp4

Maggiori informazioni e parametri aggiuntivi su incorporazione di video HTML5.

<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
Google Maps incorporato

È possibile integrare un iframe responsive con una posizione di Google Maps.

  1. Trovate la vostra località su Google Maps e copiate il codice HTML "Share > Embed a map" (iframe).
  2. 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

Per creare un modulo in una pagina di destinazione e inviare i dati al nostro server è possibile creare una pagina di destinazione dei lead.

Modulo di registrazione dei lead
Modulo personalizzato per la raccolta dei dati

Recuperare 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.

Scarica i lead
Scarica i lead

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 call-2-action
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).

Last update 1 year ago

Sostituire le icone sociali sul mio biglietto da visita con codice QR

Che cos'è un pulsante call-2-action (C2A)?