In questo articolo vediamo come puoi creare una Landing Page con Elementor. Sarà una guida completa. Per questo mi aiuterò attraverso un tutorial video che ho realizzato qualche settimana fa per il mio canale YouTube.
Ritengo sia impossibile poter essere esaustivi solo attraverso immagini e testo. Il media audiovisivo invece permette un feedback immediato su come eseguire ogni singola specifica azione.
Utilizzando il supporto video ogni singolo capitolo di questo articolo farà riferimento al minutaggio esatto da tenere in considerazione.
Qui di seguito trovi l’indice dei contenuti.
Indice dei contenuti.
- Creare Landing Page con Elementor, i primi passi.
- Le singole sezioni della pagina di atterraggio.
- Creare una Landing Page con Elementor: conclusione.
Creare Landing Page con Elementor, i primi passi.
Per creare una Landing Page con Elementor abbiamo bisogno di una piattaforma WordPress e del plugin Elementor installato.
Dati questi per scontati, ti riporto qui di seguito il video che terremo d’ora in poi come riferimento.
Il video è stato realizzato con una filosofia puramente pratica. Ho deciso di ricreare una landing page reale che possa essere utilizzata da subito in un progetto reale.
I settaggi preliminari sul tema e su Elementor.
I primi passi sono descritti dall’inizio del video fino al minuto 06:04. In particolare ti spiego come impostare i font, la paletta colori e i pulsanti a livello globale. Questa soluzione ti permetterà di avere una coerenza visiva tra le pagine andando a risparmiare tempo ed energie. Infatti non dovrai più stilizzare ogni singolo elemento dentro Elementor perché questi saranno già stati stilizzati a livello globale dal tema della tua installazione WordPress.
Ti basterò quindi aggiungere titoli, testi e pulsanti su Elementor e questi saranno già pronti e finiti.
Nell’esempio riportato in video il tema utilizzato è Neve, ma le stesse cose puoi riprodurle con qualsiasi altro tema. Personalmente trovo i temi Neve e Kadence i migliori. La loro versione gratuita è comunque completa e facile da usare.
Creazione della Landing Page con Elementor.
Una volta sistemato l’ambiente andiamo a creare la nostra nuova pagina. In questa breve sezione ciò che dobbiamo fare è andare alla voce Pagine e cliccare sul pulsante “Aggiungi pagina”.
Nel video l’ho chiamata Video Landing Page e subito dopo l’ho pubblicata. Potevo salvarla anche come bozze, ma in questo momento è abbastanza relativo.
Una volta pubblicata ciò che dovrai fare sarà cliccare sul tasto “Modifica con Elementor”. In questo modo stai dicendo che questa pagina sarà costruita con il famoso page builder.
Questa parte è descritta in video a partire dal minuto 06:04 fino al minutaggio 07:25.
Le singole sezioni della pagina di atterraggio.
Una pagina web è costruita al proprio interno con una intelaiatura ben precisa. Oltre all’header e al footer (elementi sempre presenti in un sito) il contenuto al suo interno è sempre suddiviso in sezioni.
Una Landing Page con Elementor segue sempre uno semplice schema. Sezione dopo sezione struttura il contenuto che porta ad una chiamata all’azione.
Qui di seguito ti vado ad elencare ogni singola sezione che creeremo nella nostra pagina di atterraggio.
Prima sezione della Landing Page.
Ogni sezione di una pagina ha delle proprietà ben precise e deve comunicare una ben determinata cosa.
Le proprietà più comuni sono la larghezza del proprio contenuto e la gestione dei margini e dei rientri. Elementor permette come prima cosa di creare delle sezioni e impostare le proprietà qui di seguito riportate.
Come vedi riportato in Figura 2 alla voce Layout settiamo la larghezza del contenuto, mentre in Avanzato il margine ed il rientro.
Più che fare una descrizione infinita di ciò che dovrai fare, ti lascio il riferimento del minutaggio corretto all’interno del video: tra il minuto 07:25 e 17:25 vado a costruire la prima sezione.
Al suo interno viene inserita la headline della Landing Page. Questa è una parte fondamentale perché è ciò che catturerà il lettore e lo spingerà a leggere oltre.
Guardando il video scoprirai come inserirla al meglio, scomodando i titoli e i sottotitoli di Elementor.
Oltre a questo, nella prima sezione ti spiego come inserire un gradiente di sfondo e dare un effetto ondulato nella parte in basso della sezione.
Seconda sezione della Landing Page.
Prima di passare alla seconda sezione andiamo a pulire la pagina rimuovendo la visualizzazione dell’Header (la testata) del Sito Web.
Questa azione ha lo scopo di non sviare il lettore verso una pagina esterna alla landing page. Ricordo che in una pagina di atterraggio è fondamentale mantenere l’attenzione focalizzata al suo contenuto. Se una persona esce da questa pagina dopo poco tempo avremo perso la sua attenzione e probabilmente anche un potenziale cliente.
Dal minuto 17:25 al 18.35 ti spiego come rimuovere la testata.
A partire dal minuto 18.35 e fino al 29esimo minuto ti spiego invece come costruire la seconda sezione.
Bene, ora possiamo andare avanti con la prossima sezione.
Come riportato in Figura 3, in questa sezione troviamo scritto l’obiettivo della pagina e una breve presentazione della persona dietro al servizio proposto.
Oltre a questo avremo un altro separatore sagomato che farà da connettore per la sezione successiva.
Anche in questo caso ti consiglio di visionare il video per farti un’idea approfondita di come ho inserito al suo interno i vari elementi.
Terza sezione della Landing Page.
Passiamo ora alla terza sezione, l’ultima della pagina e quella più lunga e complessa. In questo articolo trovi anche una quarta e una quinta sezione, ma in realtà sono interne alla terza. Possiamo vederle come delle sottosezioni.
In questa parte troviamo la form di contatto dove raccoglieremo i dati dei miei potenziali clienti. Per una questione pratica non riporto in questo post la guida su come realizzarla, ma demanderò il tutto ad un articolo successivo.
Se sei curioso di sapere come ho realizzato questo modulo di contatto ti invito a visionare il video tutorial che ho girato a riguardo: Modulo di Contatto con FORMINATOR, il Plugin WordPress gratuito n° 1 (guida completa).
L’inizio della terza sezione parte con un carosello di immagini pensato per essere uno showcase del servizio proposto.
Anche in questo caso, per non appesantire questo articolo, scriverò in un prossimo futuro un post più specifico su come realizzarlo. Di nuovo, puoi guardare il video Carosello di IMMAGINI con Elementor: la Guida che stai cercando per soddisfare subito la tua curiosità.
Dal minuto 29:00 al minuto 40:20 ti mostro come realizzare la prima parte della sezione.
In particolare vediamo come creare una sottosezione con 3 colonne che descriveranno i benefici del mio servizio. In Figura 4 la puoi vedere raffigurata.
Quarta sezione della Landing Page.
Siamo quasi giunti alla fine della nostra Landing Page. Questa quarta sezione sarà molto breve e conterrà esclusivamente una descrizione legata alla form di contatto sottostante.
Nel nostro video di riferimento andiamo dal minuto 40:20 al minuto 41:40.
In questo breve lasso di tempo inseriremo una intestazione ed un breve paragrafo.
Quinta sezione della Landing Page.
Subito sotto è giunta l’ora di inserire il modulo di contatto in cui recupereremo i dati dei nostri potenziali clienti.
La form è creata con il plugin Forminator (come già promesso, in un prossimo futuro ti spiegherò come questa è stata realizzata).
Ti riporto nuovamente il video che ho realizzato sul tema: Modulo di Contatto con FORMINATOR, il Plugin WordPress gratuito n° 1 (guida completa).
In Figura 5 puoi vedere graficamente come ho strutturato il modulo di contatto creato con Forminator.
Questa quinta sezione si distribuisce nel video dal minuto 41:40 al minuto 46:10.
Creare una Landing Page con Elementor: conclusione.
Il video termine con alcuni accorgimenti essenziali. Tra i più importanti il rendere la Landing Page ottimizzata per Tablet e Smartphone.
Questa parte va dal minuto 46:10 al minuto 54:46.
Fatte anche queste ultime migliorie, possiamo dire finalmente di essere giunti al termine della nostra pagina.
Riconosco che non sia una cosa banale saper creare una Landing Page con Elementor. È richiesto un certo grado di determinazione, tempo e voglia… soprattutto per chi è alle prime armi con WordPress.
Comunque, con l’aiuto di questa guida e la possibilità di visionare quasi un’ora di video tutorial, credo che ora tu possa avere le competenze iniziali necessarie per realizzare le tue personali pagine di atterraggio.
Spero quindi di essere riuscito a soddisfare la tua curiosità.
Se avrai bisogno comunque di una mano puoi tranquillamente contattarmi in privato scrivendomi su WhatsApp o via email. Scrivi a ufficio@lazymix.it oppure su WhatsApp al numero +39 0433 786197.
Puoi anche scrivermi direttamente un commento qui sotto.
E niente, anche per oggi abbiamo finito… non mi rimane altro che augurarti una buona creazione della Landing Page!
Stammi bene e passa un’ottima giornata.
