Creare Landing Page in meno di 30 minuti

Aggiornato il 26/03/2019
Questo tutorial ti insegnerà come creare una semplice pagina di destinazione (landing page appunto) per raccogliere indirizzi e-mail ed aumentare il database contatti della tua lista email.

Prendi “carta e penna” che tra poco si inizia.

Il frontend della landing page sarà scritto in HTML, CSS e Bootstrap 4. Non è richiesta alcuna conoscenza preventiva di queste tecnologie da seguire. La maggior parte delle definizioni sono prese da https://www.w3schools.com/ (che consiglio vivamente di dare un’occhiata dopo aver terminato questo tutorial).

Editor di testo

Se non hai installato un editor di testo HTML, ti consiglio uno dei seguenti (tutto gratuito e molto facile da installare):

  • https://code.visualstudio.com/
  • https://atom.io/
  • https://www.sublimetext.com/
  • http://brackets.io/

Landing Page: Creare Layout

Ogni pagina web deve conformarsi, in un modo o nell’altro, a un certo scheletro.

Creare un file index.html con i seguenti contenuti:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Landing Page</title>
</head>
<body>
    
</body>
</html>

Il tag <html> indica al browser che si tratta di un documento HTML.

  • L’attributo lang HTML può essere utilizzato per dichiarare la lingua di una pagina Web o di una porzione di una pagina Web. Questo ha lo scopo di aiutare i motori di ricerca e i browser.

L’elemento <head> è un contenitore per tutti gli elementi head, può includere un titolo per il documento, script, stili, meta informazioni e altro.

  • L’attributo charset specifica la codifica dei caratteri per il documento HTML.

Il tag <body> definisce il corpo del documento, contiene tutto il contenuto di un documento HTML, come testo, collegamenti ipertestuali, immagini, tabelle, elenchi, ecc.

Landing Page: Bootstrap 4 Installazione

Bootstrap è una libreria di componenti front-end più popolare al mondo per creare siti web responsive e mobili sul web. Sebbene non copriremo i layout reattivi in questo tutorial, ci darà un aspetto piacevole (anche se forse un po ‘troppo familiare) fuori dagli schemi.

Per aggiungere Bootstrap alla tua pagina, aggiungi semplicemente quanto segue all’interno della sezione head:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

Il tag <link> definisce un collegamento tra un documento e una risorsa esterna, viene utilizzato per collegarsi a fogli di stile esterni.

Landing Page: Lo Sfondo

La nostra attuale pagina HTML o per meglio dire landing page è vuota e noiosa, aggiungiamo un’immagine come sfondo.

Per procedere, copia qualsiasi immagine nella stessa directory del file index.html.

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Landing Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style>
        .sfondo {
            background: url(./nome-foto.jpg) no-repeat center center;
            background-size: cover;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="sfondo"></div>
</body>

</html>

Il tag <style> viene utilizzato per definire le informazioni di stile per un documento HTML, specificando in che modo gli elementi HTML devono essere visualizzati in un browser.

Il tag <div> definisce una divisione o una sezione in un documento HTML.

All’interno del tag style definiamo una classe css inserendo un punto (.), Seguito dal nome della classe (sfondo). Gli stili di questa classe sono applicati a tutti gli elementi HTML con quell’attributo di classe.

Crea un tag div vuoto e imposta la sua classe su sfondo.

Landing Page: Call To Action

Il prossimo passo è quello di specificare il nostro obiettivo: aggiungiamo un invito all’azione con un titolo di base per offrire ai nostri utenti un po ‘più di contesto.

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Landing Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style>
        .sfondo {
            background: url(./nome-foto.jpg) no-repeat center center;
            background-size: cover;
            height: 100vh;
        }
        .cta {
            position: relative;
            top: 35%;
            transform: translateY(-35%);
            background: rgba(0, 0, 0, 0.5);
            padding: 5rem; 
        }
    </style>
</head>

<body>
    <div class="sfondo">
        <div class="cta container rounded text-center text-white">
            <h1>Ricevi 4 Video Lezioni Gratuite</h1>
            <p class="lead p-3">
                Sei ad un passo dalla svolta. Bastano pochi minuti.
            </p>
        </div>
    </div>
</body>

</html>

Per la nostra CTA (abbreviazione di Call To Action), creiamo un’altra classe CSS personalizzata (.cta esattamente), posizioneremo il contenuto della CTA (più o meno) nel mezzo dello schermo. Aggiungeremo anche un po’ di padding (spazio attorno al contenuto dell’elemento) e uno sfondo trasparente scuro per far risaltare il testo bianco.

All’interno del nostro markup HTML noterai un paio di nuovi elementi:

  • H1: definisce l’intestazione più importante
  • P: definisce un paragrafo

Oltre alla nostra classe CTA personalizzata, vengono utilizzate alcune classi di utilità di Bootstrap:

  • Container: avvolge il contenuto per renderlo visualizzato piacevolmente su più dimensioni dello schermo
  • Rounded: arrotonda l’elemento
  • Text-center: centra il testo
  • Text-white: imposta il colore del testo sul bianco

Landing Page: Modulo Contatti

Il primo passo per raccogliere informazioni è fornire input:

Inserisci il seguente dopo il tag p:

<form class="form-inline justify-content-center">
  <input type="email" name="email" class="form-control form-control-lg mr-2" placeholder="La Tua Email...">
  <button type="submit" class="btn btn-lg btn-primary">Ok, Voglio Riceverli</button>
</form>

In modo da ottenere:

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Landing Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style>
        .sfondo {
            background: url(./nome-foto.jpg) no-repeat center center;
            background-size: cover;
            height: 100vh;
        }
        .cta {
            position: relative;
            top: 35%;
            transform: translateY(-35%);
            background: rgba(0, 0, 0, 0.5);
            padding: 5rem; 
        }
    </style>
</head>

<body>
    <div class="sfondo">
        <div class="cta container rounded text-center text-white">
            <h1>Ricevi 4 Video Lezioni Gratuite</h1>
            <p class="lead p-3">
                Sei ad un passo dalla svolta. Bastano pochi minuti.
            </p>
            <form class="form-inline justify-content-center">
                 <input type="email" name="email" class="form-control form-control-lg mr-2" placeholder="La Tua Email...">
                 <button type="submit" class="btn btn-lg btn-primary">Ok, Voglio Riceverli</button>
            </form>
        </div>
    </div>
</body>

</html>
  • <form> contiene elementi del modulo.
  • <input type = “email”> consente agli utenti di inserire dati e-mail.
  • <input type = “submit”> definisce un pulsante per l’invio dei dati del modulo a un gestore di moduli.

Se vuoi saperne di più sulle classi Bootstrap utilizzate per modificare questo modulo, controlla la documentazione di Bootstrap.

Landing Page: Integrare Formspark

Ora possiamo inserire un indirizzo email e premere il pulsante Ok, Voglio Riceverli… ma non succede nulla. Questo perché non esiste un back-end per raccogliere e memorizzare indirizzi email.

Ora, potrei impiegarmi un paio di giorni per apprendere come scrivere una soluzione di back-end personalizzata ma ciò comporterebbe l’introduzione ad almeno un linguaggio di programmazione ‘lato server’ (Javascript, PHP …) e quindi aumentare in modo significativo la complessità di questo tutorial.

Quindi, invece, integreremo Formspark che farà tutto il lavoro per noi. Formspark è un back-end per i moduli HTML, vedrai che è super facile da integrare nei moduli esistenti, ci permetterà anche di visualizzare, esportare e analizzare tutti i dati inviati tramite un particolare modulo.

Per iniziare, crea un account gratuito su https://formspark.io

Passa alla pagina “Forms” (moduli):

Formspark 1

Premi “+ New form” (+ nuovo modulo), inserisci un titolo e una descrizione e premi “Create” (crea):

Formspark 2

Verrai reindirizzato automaticamente alla pagina di istruzioni:

Formspark 4

Copia gli attributi ‘action’ e ‘method’ dell’esempio e aggiungili al modulo della tua pagina index.html:

<form action="https://submit-form.com/lzVjyMIAsszfKFtHKEv44" target="_self">
   <!-- Prevent spam without a captcha -->
   <input type="checkbox" name="_honeypot" style="display: none" tabindex="-1" autocomplete="off">
   <!-- All elements must have a name attribute -->
   <input type="text" name="name" placeholder="Tuo Nome">
   <input type="text" name="email" placeholder="Tua email..">
   <!-- A button of type submit -->
   <button type="submit">Ok, Voglio Riceverli</button>
</form>

Prova adesso ad inviare nuovamente il modulo:

Formspark 5

Conclusione

In questo tutorial hai imparato alcune nozioni di base su HTML e CSS, su come installare Bootrap 4 e integrare con Formspark per raccogliere i dati inviati dagli utenti.

Se vuoi, qui di seguito puoi scaricare il file index.html con incluso:

  • Codice HTML demo
  • Codice CSS (con inclusa foto di sfondo)
  • Modulo di contatto (ovviamente dovrai toglierlo e aggiungere il tuo)

Scarica da qui il file index.html

Prelanding Page

Oppure continua la lettura: