Creare una landing one page con effetto scroll

4 Maggio 2016 Simone Baldassin web

creare landing onepage con effetto scroll

Una landing page è una pagina web creata ad hoc per campagne a pagamento come Google AdWords & co o comunque una pagina che il visitatore raggiunge dopo aver cliccato su un link o su una pubblicità. Viene perciò sviluppata seguendo una precisa anatomia e con contenuti mirati a portare il visitatore verso la conversione, ovvero eseguire un’azione che può essere la compilazione di un form di contatto, piuttosto che premere il noto pulsante della call to action.

L’argomento landing page viene applicato con molta concretezza nel mondo del web marketing ed è molto più logica questa associazione mentale ma, rientra di fatto, nelle competenze di un web designer per la sua strutturazione dal momento che rimane a tutti gli effetti una pagina HTML/CSS.

Seppure l’anatomia vera e propria di una landing page dovrebbe contenere la pura e semplice richiesta di un azione molto evidente e univoca non riportando, quindi, nessun’altra possibilità di interazione al suo interno come, per esempio, la presenza di altri link o collegamenti esterni ad altre pagine, esiste una scuola di pensiero che vuole in voga ogni tot le cosiddette onepage, i siti monopagina che possono essere spesso usati come modello per la creazione di una landing.

Queste strutture vedono la gestione della homepage come sintesi di un intero sito, tendenza, questa, sviluppata ampiamente anche per i temi premium dei cms, come possiamo verificare scrivendo landing one page sul sito themeforest.net.

landing 1

Il passo dal sito onepage (o singlepage) allo sviluppo di una landing con queste stesse dinamiche e caratteristiche è breve, ed è dettato dalla convinzione che il riassunto di un’intero sito ottimizzato per il motore di ricerca e il visitatore, sia un’ottima mossa di marketing per la visibilità di un prodotto e per aumentarne, di fatto, il tasso di conversione. Essendo questo un articolo web e non di marketing, non mi soffermo su quanto veritiera e utile possa essere questa scuola di pensiero ma passo direttamente allo sviluppo.

La prima cosa da dire è che questa tipologia di siti web si muove su una precisa navigazione verticale dove, nella maggioranza dei casi, viene utilizzata la tecnica dello scroll al click. Questo accade per poter agevolare e guidare il visitatore verso le call to action presenti nella pagina, ma, in una logica più da sviluppatore web e meno da SEO specialist, per dare un senso a un menù di navigazione che non avrebbe altro motivo di esistere data la non presenza di ulteriori pagine del sito.

Landing 2

Per questo layout abbiamo utilizzato il plug-in jQuery One Page Nav di Trevor Davis.

Landing 3

La navigazione verticale si presta, naturalmente, moltissimo alla visualizzazione mobile dai vari dispositivi, rendendo più veloce la fruizione dei contenuti. Per questo motivo il web designer e le sue competenze, ricoprono un ruolo fondamentale in fase di sviluppo.

Come prima cosa è indispensabile decidere la presenza o meno di uno slider di immagini che spesso nei siti web apre le danze al caricamento della pagina. L’alternativa è invece l’opzione hero section, una foto o illustrazione coinvolgente e mirata a catturare l’attenzione del visitatore e seguita da una headline, un intestazione, adeguata alla comunicazione del messaggio che vogliamo passare. Ovviamente la scelta tra slider o hero section dipende dal progetto.

Content is King, e questo vale sia per il marketing che per il social media marketing, possiamo quindi prevedere step mirati in queste direzioni nella nostra landing, come la presenza di un preciso riferimento/ancora a link del nostro blog piuttosto che della nostra sezione news. Questa pratica potrebbe però andare a cozzare con il concetto di landing dal momento che offre motivo di spostarsi verso argomenti che potrebbero essere differenti dal messaggio che stiamo veicolando. Potremmo quindi usufruirne piuttosto come approfondimento.

landing 4

Sappiamo oramai che nessuna realtà può prescindere dai social network e sarà nel footer dove, nella maggioranza dei casi, andremo a riportare le icone con i link di riferimento. La scelta dei profili social è strettamente legata alla tipologia di attività dell’azienda.

landing 5

Altri elementi utili, seppure non presenti nell’esempio di questo articolo, possono essere la presenza di un form di contatto, una mappa interattiva di Google, una gallery del prodotto, una sezione testimonial di acquirenti soddisfatti.

In conclusione, a differenza della classica anatomia di una landing page standard che vuole un pulsante in evidenza e un uso dei contenuti che giri completamente in funzione dello stesso. Ovviamente questo non ne determinerà il successo se gli elementi non saranno in grado di coinvolgere in maniera adeguata il vostro potenziale cliente.

A questo link potete scaricare gratuitamente un modello di landing onepage con effetto scroll.

Siete pronti a creare le vostre landing page?

Ancora nessun commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Clicca qui e Approfitta del Credito d’Imposta Formazione 4.0