Creare Landing Page in meno di 30 minuti

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.

Creare Landing Page

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):

  • Visual Studio: https://code.visualstudio.com/
  • Atom: https://atom.io/
  • Sublime Text: https://www.sublimetext.com/
  • Brackets: 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:

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 in Bootstrap 4

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 una nuova libreria css direttamente gestita da Bootstrap:

  • Vai su Google e cerca Bootstrap CDN
  • Copia la stringa che inizia con <link rel=”stylesheet”> (la libreria CSS di BS)
  • Copia la stringa che inizia con <script src=”https://….”></script> (la libreria JS di BS)
  • Incolla entrambe le stringhe all’inizio del documento HTML (prima della chiusura di </head>) (Consigliato: il tag script va messo in fondo)
  • Et voilà. Abbiamo la nostra landing page con grafica responsiva.

Il tag 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.

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: aggiungere una call to action con un titolo di base per offrire ai nostri utenti un po ‘più di contesto.

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 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 modulo da incorporare. Per iniziare, crea un account gratuito su https://formspark.io Passa alla pagina “Forms” (moduli):

formspark

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

formspark

Verrai reindirizzato automaticamente alla pagina di istruzioni:

formspark

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

 

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.


Ti è servito questo articolo?