Elementi landing page

In questa guida vediamo come costruire la landing page, andando nello specifico a comprendere ogni sezione.

Elementi base, multimediali e colonne

Creare una riga singola o con più colonne

L'editor della nostra piattaforma ti permette di creare landing page ottimizzate sia per mobile che per desktop, quindi visibili al meglio sia da un dispositivo smartphone sia da uno schermo più grande.

Proprio per questo motivo, puoi suddividere le righe in più colonne: in tal modo la versione desktop è più accattivante perché si possono posizionare più elementi sulla stessa riga.

Per configurare la riga con una colonna, clicca su "aggiungi riga" in fondo alla pagina dell'editor e seleziona "colonna singola": otterrai una riga costituita da immagine, testo e bottone call to action.

A seconda di come vuoi strutturare i contenuti, nella colonna di destra puoi decidere se visualizzare l'immagine e il bottone (oppure non mostrarli) e stabilire la posizione rispetto al testo, caricare un'immagine oppure personalizzare con colori e link il bottone.

Per suddividere la riga in due o tre colonne, invece, clicca su "aggiungi riga" e seleziona l'apposita opzione, in modo da poter configurare due o tre articoli sulla stessa riga.

Inoltre puoi scegliere il colore dello sfondo o caricare un'immagine di sfondo ed impostarne le dimensioni. Per fare in modo che l'immagine si adatti a qualsiasi dispositivo (soprattutto a schermi grandi) usa l'opzione "scala per riempire spazio se necessario" 👇

Editor di testo

Per inserire un blocco di testo nella tua landing page clicca su "aggiungi riga" e seleziona "testo".

Cliccando su questa icona, viene inserita nella landing page una nuova riga con titolo e testo, che puoi personalizzare in modo molto semplice, cliccando sulle scritte:

Sulla destra trovi le impostazioni di base della riga, tra cui il layout della riga (sul contenuto o tutto schermo), il colore di sfondo (o immagine di sfondo) e i margini superiori e inferiori, per aggiungere degli spazi tra una riga e l'altra.

Per modificare il titolo e il testo, clicca sopra il testo nella landing page. Apparirà un riquadro di selezione del testo e un pannello contenente gli strumenti di formattazione.

Piccola precisazione: il font usato automaticamente sarà quello che hai scelto nelle impostazioni generali della pagina. Se vuoi modificarlo clicca in alto a destra su "impostazioni generali pagina" e "font pagina".

Se invece sei soddisfatto del font che hai scelto, ma vuoi cambiarlo solamente ad una frase(che potrebbe essere un titolo ad esempio) puoi farlo semplicemente selezionando il testo e cercando il font desiderato.

Inserire un'immagine singola

Per inserire un'immagine singola, clicca su "aggiungi riga" e seleziona l'icona "immagine", che ti permette di aggiungere un'immagine alla pagina e personalizzarla a piacere.

Una volta creata la riga "immagine", nella colonna di destra puoi caricare l'immagine desiderata, cliccando su "impostazioni immagine" e "carica un nuovo file".

Come per le altre righe, puoi decidere se impostare il layout sul contenuto o su tutto lo schermo e sbizzarrirti sullo sfondo stesso della riga, che può essere un colore oppure un'immagine.

Per esempio, per creare l'effetto dell'immagine qui sotto 👇 è stata inserita una riga "immagine". Su "impostazioni immagine" è stato caricato il logo con sfondo trasparente (quindi in formato .png), mentre su impostazioni riga è stato scelto il layout "tutto schermo" ed è stata caricata una foto come sfondo, con impostazione "scala per riempire spazio se necessario".

Ti piace l'effetto? Prova ad ottenerlo, è accattivante come intestazione della pagina!

Creare una gallery di foto o immagini

Nella landing page puoi anche inserire una galleria di immagini, utile se:

• vuoi mostrare un prodotto con scatti diversi,
• oppure se hai tante immagini ed inserirle una sotto l'altra occuperebbe troppo spazio,
• o ancora quando vogliamo ricreare l'effetto "sfoglia catalogo".

Ecco un video che ti mostra come compaiono le immagini della gallery 👇

Come creare una Gallery? Clicca su "aggiungi riga" e poi su "Gallery".

Una volta inserita la Gallery, nella sezione di destra troverai la voce "impostazioni galleria", dove puoi scegliere il formato galleria (Galleria formato 16/9, Galleria Fullscreen oppure Storytelling) e procedere al caricamento delle immagini 👇

Nella parte bassa troverai, in base alla tipologia scelta, delle note su cui basarti per avere una resa ottimale. Le riportiamo qui sotto 👇

Galleria formato 16/9:

• Per un'ottimale visualizzazione nei diversi dispositivi (smartphone, tablet e desktop) le immagini devono essere di 1024px x 576px (ratio 16/9),
• Le immagini più grandi o più piccole, purché della corretta proporzione (16/9), verranno scalate in modo da occupare tutto lo spazio,
• Le immagini con una proporzione diversa da 16:9 verranno visualizzate interamente inserendo degli spazi dove necessario.

Galleria full screen e Storytelling: le immagini devono essere tutte delle stesse dimensioni per un risultato ottimale

Inserire un video da YouTube

Aumenta l'efficacia delle tue landing page inserendo contenuti video direttamente da YouTube. Farlo è davvero semplicissimo. Parti dall'editor e clicca su "aggiungi riga" in basso e poi su "video YouTube" 👇

Nella colonna di destra inserisci l'URL del video desiderato e volendo, modifica le impostazioni di base della riga (decidendo se usare il layout "sul contenuto" o "tutto schermo" e impostando un colore o immagine di sfondo).

Come vedi, in pochi clic la tua landing page è integrata con YouTube!

Elementi avanzati

Oltre agli elementi base, nelle landing page puoi incorporare elementi avanzati:

• Bottoni call to action
• Countdown
• Codice HTML
• Google Maps

Vediamoli nel dettaglio 👇

Contatti

Vuoi aggiungere i contatti in modo dinamico? Nella landing page puoi inserire dei bottoni call to action, che richiamano alle seguenti azioni:

• Numero di telefono (azione: chiama)
• Coordinate GPS (azione: aprire la mappa)
• Sito Web (azione: apre il sito)
• Email (azione: apre una pagina con nuova mail indirizzata a questo indirizzo)
• Sms (azione: apre pagina per l'invio dell'SMS)

Per impostare i bottoni contatti clicca su "aggiungi riga" e poi sull' icona "contatti".

Countdown

Inserire il countdown è una strategia per invogliare gli utenti ad acquistare, perché trasmette un senso di urgenza: potrebbe essere interessante per comunicare i saldi! Oppure può essere utilizzato in vista di un evento, per "spingere" l'utente ad affrettarsi ad iscriversi, che "manca poco"!

Ma come fare ad inserirlo nelle tue landing page? Clicca su "aggiungi riga" e seleziona "countdown" 👇

A questo punto puoi personalizzare il colore del font e dell'eventuale bordo, decidere se mostrare il bordo arrotondato o meno ed, ovviamente, impostare la data di scadenza.

Codice HTML

Vuoi inserire nella tua landing page un Widget HTML o Javascript di terze parti? È molto semplice: clicca su "aggiungi riga" e seleziona "codice HTML".

Non ti resta che configurare la riga ed incollare il codice nell'apposito spazio: come puoi vedere nell'esempio sottostante, inserendo il codice HTML corretto comparirà il widget scelto (in questo caso previsioni meteo di terze parti).

Google Maps

Nelle landing page puoi inserire la mappa di Google, in maniera semplice ed automatica, per consentire agli utenti di raggiungere il tuo punto vendita, ufficio o altro.

Per farlo clicca su "aggiungi riga" e seleziona "Google Maps".

Sulla colonna di destra ti verrà chiesto di inserire la posizione, specificando:

• Titolo punto sulla mappa (è opzionale e ti permette di "nominare il punto sulla mappa es. Nome negozio)

  

• Coordinate punto sulla mappa (cliccando sull'apposito posizionatore si aprirà un popup in cui ti verrà richiesto di inserire via e numero civico della tua posizione)

  

Widget e integrazioni

Offerte - Promuovi prodotto

Puoi usare il widget "Offerta", per promuovere uno o più prodotti nella tua landing page, senza dover per forza avere un e-commerce.

Nello specifico puoi inserire:

• Nome del prodotto
• Prezzo originale
• Prezzo scontato
• Email account PayPal (inserire l'email dell'account Paypal sul quale si desidera ricevere il denaro)
• Immagine descrittiva del prodotto
• Link opzionale (per reindirizzare il cliente al click sull'immagine)

Tutte queste operazioni sono attuabili nella sezione "Impostazioni Offerta", presente sulla destra. Ad ogni cambiamento l'anteprima della landing si aggiornerà automaticamente.

Donazione

Questo elemento permette la creazione di un tasto "Dona Ora", a cui può essere collegato un account PayPal.

Con un clic puoi collegare il tuo account PayPal nella sezione "Impostazioni Offerta" sulla colonna di destra 👇

Form raccolta contatti

Vuoi raccogliere nuovi contatti? Inserisci nella landing page un form, che hai creato precedentemente nella piattaforma.

Il form ti permette di raccogliere con facilità nuovi lead oppure integrare i contatti esistenti chiedendo loro ulteriori dati ed informazioni (come data di nascita, preferenze, interessi, propensioni all'acquisto).

Per includere all'interno della tua landing page un form di raccolta contatti, il primo step è quello di aggiungere una riga e selezionare "Form raccolta contatti":

Nella colonna a destra scegli quale form utilizzare, decidi se:

• inserire un form già creato in precedenza (nella sezione Form raccolta contatti)
• oppure crearne uno nuovo premendo sul bottone "nuovo form".

Premendo il bottone per la creazione di un nuovo form ti apparirà in primo piano la finestra di configurazione sulla quale andrai a lavorare. Per configurare il form, ti consigliamo di 👉 seguire l'apposita guida

Il font utilizzato nel form è il font da te scelto nelle impostazioni generali della pagina. Per configurarlo clicca su "impostazioni pagina" in alto a destra dell'editor, seleziona la voce "font pagina" e scegli il font che preferisci.

Per farlo, dall'editor landing page seleziona la riga del form e clicca su "impostazioni riga". Qui ti consigliamo di selezionare "tutto schermo" nella voce layout sfondo, per avere un effetto ottimale anche da desktop.

Per inserire un'immagine come sfondo clicca semplicemente su "carica un nuovo file" (ti consigliamo un'immagine di larghezza 1500 px) e seleziona il file dal tuo PC oppure scegliendo tra gli ultimi caricati. Puoi anche impostare il margine superiore o inferiore del form.

Posizione del form

Per scegliere la posizione del form nella riga, seleziona la riga stessa e nella colonna di destra, alla voce "Impostazioni App Lead" seleziona dal menù a tendina la posizione desiderata. Puoi scegliere tra:

Centrato (senza testo ai lati)

Destra con testo a sinistra:

O sinistra con testo a destra:

Prenotazioni

Vuoi gestire le prenotazioni in modo semplice e veloce? Inserisci il calendario nella landing page e il gioco è fatto!

Nel menù di destra ti viene chiesto di selezionare il calendario desiderato e il risultato è questo:

Codice a barre o QR code

Nella landing page è possibile inserire un codice a barre, utile nel caso si voglia inserire un dato scansionabile da smartphone o da barcode scanner. Possono essere aggiunti dei codici fissi (nel formato Code 128 e EAN13) oppure un codice legato ad un campo personalizzato del tipo "Codice a Barre".

Il procedimento è molto semplice: clicca su "aggiungi riga" e poi su "Codice".

Ora sulla destra, oltre alle impostazioni di base della riga, troverai la voce "impostazioni Barcode". Puoi decidere se:

• inserire un codice fisso, scegliendo tra le tipologie di codice a barre disponibili (QR Code, Code128 oppure EAN13)
• oppure un campo personalizzato della rubrica da collegare.

Se scegli un campo personalizzato della rubrica del tipo Barcode, la Landing Page deve essere condivisa tramite SMS o Email, per fare in modo che venga creata l'associazione con il contatto. Nel caso l'associazione non sia disponibile verrà visualizzato il messaggio "Codice a Barre non disponibile".