Ora che hai organizzato le sezioni sulla landing page, è il momento di riempirle con elementi come testo, immagini o pulsanti. In questo articolo vedremo come impostare le sezioni, le righe, le colonne e gli elementi per creare una bella landing page!

Abbiamo creato una serie di articoli per aiutarti a costruire le tue landing page. 

• Introduzione: Che cos'è una landing page?
• Parte 1: Configurazione della landing page
• Parte 2: Definizione della struttura della landing page
• Parte 3: Modifica delle impostazioni di tutti gli elementi della landing page - TU SEI QUI
• Parte 4: Aggiunta di un modulo e utilizzo delle opzioni avanzate
• Parte 5: Pubblicazione della landing page

In questo tutorial vedremo gli argomenti seguenti:

Impostazioni comuni Sezioni Righe Colonne Testo Immagine, immagine di sfondo e logo Colore di sfondo

Pulsante Separatore Icona Video Codice Spaziatura Allineamento

Impostazioni comuni

Alcune impostazioni sono comuni tra sezioni, righe e colonne (e persino elementi). Inizieremo descrivendo le impostazioni comuni e poi vedremo quelle più specifiche.

Spaziatura

Innanzitutto scegli se vuoi modificare la spaziatura interna e il margine verticale o orizzontale.  Un margine è uno spazio esterno a qualcosa, mentre spaziatura interna è, come dice il nome, lo spazio interno a qualcosa. Margine: crea spazio intorno al componente, al di fuori dei bordi definiti. Spaziatura interna: crea spazio all'interno del componente, fra l'icona e il bordo. È possibile scegliere tra diversi tipi di spaziatura, da XS (più piccolo) a XL (più grande).

Visibilità

Queste impostazioni non hanno alcun impatto visivo nell'editor. Hanno effetto solo sulle pagine pubblicate per evitare che l'utente perda traccia dei contenuti all'interno dell'editor.

• Nascondi su tablet: nell'area di modifica puoi controllare la visibilità di ogni sezione della landing page a seconda del dispositivo utilizzato. 
• Nascondi su mobile: nell'area di modifica puoi controllare la visibilità di ogni sezione della landing page a seconda del dispositivo utilizzato.

Colore di sfondo e immagine di sfondo

Qui puoi aggiungere un colore di sfondo e aggiungere trasparenza.

Per l'immagine di sfondo, puoi aggiungere un'immagine dal tuo computer, dalla nostra galleria di immagini o utilizzando un URL. La nostra galleria di immagini raccoglie centinaia di foto di archivio (non soggette al pagamento di diritti) che puoi utilizzare per illustrare la tua landing page.

Sezioni

Proprietà della sezione

Qui puoi nominare la tua sezione. Il nome comparirà quando navighi in Layout dal pannello di sinistra.

Stile

Clicca su Stile per visualizzare le impostazioni di stile:

Da bordo a bordo: influisce sulla spaziatura orizzontale ai lati della sezione. Altezza intera: questa opzione permette di visualizzare l'immagine intera. Parallasse di sfondo: lo scorrimento in parallasse è una tecnica di computer graphics in cui l'immagine di sfondo scorre più lentamente del contenuto in primo piano.

Righe

Puoi modificare le impostazioni di una riga navigando nella scheda Layout dal pannello di sinistra come abbiamo visto in Le landing page - Parte 2: Definizione della struttura della landing page. Puoi anche utilizzare la traccia breadcrumb che appare nella parte superiore dello schermo quando clicchi su un elemento.

Colore di sfondo, spaziatura e visibilità

I primi parametri sono gli stessi visti più sopra per Impostazioni comuni. 

Avanzate

Nascondi margini fra le colonne: questa opzione permette di impostare le dimensioni dello spazio (margine) che separa le colonne della riga. Raggio dei bordi: questa opzione permette di arrotondare gli angoli della riga.

Colonne

Stile

La scheda Stile contiene le opzioni per impostare i parametri seguenti:

Dimensioni: questa opzione permette di impostare la larghezza della colonna. Dimensioni per mobile: questa opzione permette di impostare la larghezza della colonna per i dispositivi mobili. Raggio dei bordi: questa opzione permette di arrotondare gli angoli della colonna.

Colore/Immagine di sfondo, spaziatura e visibilità

Gli altri parametri sono gli stessi visti più sopra per Impostazioni comuni. 

Testo

È possibile modificare lo stile del testo utilizzando la barra di formattazione. Per visualizzare la barra non devi fare altro che selezionare il testo da modificare. Avrai accesso ad altre opzioni cliccando sui tre punti all'estremità destra.

Immagine e logo

Immagini e logo sono un modo perfetto per personalizzare il design delle tue email e renderlo più coinvolgente.

Per aggiungere un'immagine o un logo, digita il relativo URL oppure clicca su AGGIUNGI (o SOSTITUISCI) nella barra laterale di destra. Apparirà un popup per la gestione del file.

• Seleziona un file dal tuo computer.
• Scegli dalla galleria di immagini: sulla sinistra del software di creazione, apparirà un menu dove cercare immagini gratuite. Puoi sfogliare per categoria (business, coaching, consulting, fitness, marketing, ufficio, servizi).

Una volta selezionata l'immagine, hai diverse opzioni:

Dimensioni: scegli la larghezza di visualizzazione dell'immagine. ALT: aggiungi un testo alternativo per fornire informazioni descrittive sull'immagine. Link: aggiungi un link di reindirizzamento.

Modifica dello stile delle immagini e dei logo

• Ombreggiatura: aggiungi un'ombra all'immagine.
• Raggio dei bordi: imposta l'arrotondamento dei bordi dell'immagine.
• Allineamento: puoi posizionare l'immagine a sinistra, al centro o a destra.

Pulsante

Puoi utilizzare il nostro elemento Pulsante per creare un link a un sito web o a un'altra sezione. Aggiungere pulsanti alla landing page è un ottimo modo per evidenziare link specifici su cui desideri che gli utenti facciano clic. 

Proprietà

Call to action: digita il testo che vuoi visualizzare nel pulsante di invito all'azione. Scegli un'azione: puoi scegliere fra tre azioni diverse: collegamento a un URL, ancoraggio a una sezione o collegamento a una pagina di questo funnel. Se scegli l'ancoraggio a una sezione, seleziona la sezione prescelta nell'elenco a discesa. Se scegli il collegamento a una pagina del funnel, seleziona la pagina prescelta nell'elenco a discesa. Scegli una destinazione: scegli se il link si aprirà nella finestra corrente o in un'altra scheda. URL (link): aggiungi il link a cui punterà il tuo pulsante.

Modifica dello stile del pulsante

Clicca su Stile per modificare lo stile del pulsante.

Colore: scegli il colore del pulsante. Larghezza intera: indica se il pulsante è largo quanto l'intera colonna o no. Riempimento: indica se il pulsante è opaco o trasparente: Dimensioni: indica quanto deve essere grande il pulsante. Forma: questa opzione consente di indicare se il pulsante deve essere Quadrato, Rotondo o Ovale. Ombra: aggiunge un'ombra chiara o scura.

Spaziatura e visibilità

Gli altri parametri sono gli stessi visti più sopra per Impostazioni comuni. 

Separatore

Nella scheda Stile scegli lo spessore del separatore: sottile, spesso o molto spesso.

Modulo

Questo elemento viene trattato in una sezione dedicata della Parte 4: Aggiunta di un modulo e utilizzo delle opzioni avanzate.

Icona

Impostazioni dell'icona

Sostituisci icona: se clicchi sull'icona o sul pulsante Sostituisci, verrà visualizzato un popup con la libreria di icone. Ci sono più di 1400 icone diverse tra cui puoi scegliere. Puoi cercare le icone per nome grazie alla barra di ricerca. Puoi anche filtrare per gruppo di icone. Dimensioni: l'icona può essere ridimensionata come si preferisce. Allineamento: puoi posizionare l'immagine a sinistra, al centro o a destra. Link: aggiungi qui l'URL.

Spaziatura

Gli altri parametri sono gli stessi visti più sopra per Impostazioni comuni. 

Video

Nella scheda URL puoi aggiungere un link al tuo video. Puoi utilizzare un video ospitato su YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku e Coub.

Codice

Aggiungi il tuo codice HTML. Il codice inserito qui nell’editor può essere testato soltanto nelle pagine di "anteprima" e "pubblicate".

⏩ E adesso?

• Parte 4: Aggiunta di un modulo e utilizzo delle opzioni avanzate
• Parte 5: Pubblicazione della landing page
• Le landing page sono SEO friendly?
• Duplicazione di una landing page esistente
• Gestione delle sottopagine della landing page

🤔 Domande?

In caso di domande, non esitare a contattare il team dell’assistenza creando un ticket dal tuo account. Se ancora non hai un account, puoi contattarci qui.