Vai al contenuto principale

Landing pages - Parte 3: Modifica delle impostazioni di tutti gli elementi della landing page

💡 Buono a sapersi
Le landing pages sono disponibili per i piani Business ed BrevoPlus.

In questo articolo spieghiamo come configurare le sezioni e gli elementi della landing page. Ora che hai organizzato le sezioni sulla landing page, è il momento di riempirle con elementi come testo, immagini o pulsanti.

Abbiamo creato una serie di articoli per aiutarti a costruire le tue landing pages:

Impostazioni comuni

Alcune impostazioni sono comuni tra sezioni ed elementi. Inizieremo descrivendo le impostazioni comuni e poi vedremo quelle più specifiche per ciascuno.

Allineamento

mceclip6.png

L'impostazione Allineamento consente di scegliere come allineare un elemento (orizzontalmente e verticalmente).

Spaziatura

mceclip2.png

L'impostazione Spaziatura consente di definire lo spazio verticale e orizzontale attorno e all'interno di sezioni ed elementi:

  • Margine crea spazio intorno al componente, al di fuori dei bordi definiti.
  • Spaziatura interna crea spazio all'interno di un componente, fra la sezione o l'elemento e i bordi.

È possibile scegliere tra spaziature di diverse dimensioni, da XS (più piccola) a XL (più grande).

Visibilità

visibility_setting-en_us.png

Per le sezioni:

  • L'impostazione Visibilità consente di controllare la visibilità delle sezioni della landing page in base al dispositivo utilizzato per visualizzarla. Puoi scegliere Nascondi su mobile e/o Nascondi su desktop.
  • Quando si sceglie di nascondere una sezione su un determinato dispositivo, la sezione apparirà come barrata nell'editor e verrà visualizzato il seguente messaggio: "Questa sezione non è visibile su dispositivo mobile/desktop" a seconda dell'opzione selezionata.
mceclip0.png

Per gli elementi:

  • L'impostazione Visibilità consente di controllare la visibilità delle sezioni della landing page in base al dispositivo utilizzato per visualizzarla. Puoi scegliere Nascondi su mobile e/o Nascondi su desktop.
  • Questa impostazione non ha alcun impatto visivo nell'editor e influisce solo sulle landing pages pubblicate per evitare di perdere traccia dei contenuti all'interno dell'editor.

 

Colore di sfondo

mceclip1.png L'impostazione Colore di sfondo consente di aggiungere un colore di sfondo a una sezione o elemento e gestirne la trasparenza.
💡 Buono a sapersi
Il colore del testo cambierà automaticamente in base al colore di sfondo della sezione.

Immagine di sfondo

mceclip2.png

L'impostazione Immagine di sfondo consente di aggiungere un'immagine dalla nostra libreria di immagini, da un URL o dal tuo computer come sfondo di una sezione o di un elemento:

  • Rimuovi: elimina l'immagine di sfondo corrente.
  • Sostituisci: scegli una nuova immagine di sfondo per sostituire quella attuale.
  • Dimensioni dello sfondo: seleziona come l'immagine di sfondo deve adattarsi alla sezione o all'elemento.
  • Ripeti sfondo: seleziona se desideri ripetere l'immagine di sfondo in tutta la sezione o elemento.
  • Sovrapposizione colore: seleziona un colore da aggiungere sopra il contenuto della sezione o dell'elemento e gestiscine la trasparenza.

Sezione

Proprietà

name_section2-en_us.png

L'impostazione Proprietà consente di rinominare la sezione. Il nome delle sezioni viene visualizzato quando navighi nel pannello Layout.
💡 Buono a sapersi
Ti consigliamo di assegnare un nome alle sezioni per tenerne traccia e accedervi più facilmente.

Stile

mceclip1.png

L'impostazione Stile consente di personalizzare l'aspetto della sezione:

  • Da bordo a bordo: influisce sulla spaziatura orizzontale ai lati della sezione.
  • Altezza intera: questa opzione permette di visualizzare l'immagine ad altezza intera.
  • Parallasse di sfondo: usa lo scorrimento in parallasse per fare in modo che l'immagine di sfondo della sezione scorra più lentamente del contenuto in primo piano.

Colore di sfondo, Immagine di sfondo e Spaziatura

Le impostazioni Colore di sfondo, Immagine di sfondo e Spaziatura sono descritte nella sezione Impostazioni comuni di questo articolo.

Riga

Le righe sono disponibili solo nell'editor classico delle landing pages.

Puoi modificare le impostazioni di una riga andando alla scheda Layout dal pannello di sinistra come abbiamo visto in Le landing pages - 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.

mceclip5.png

Colore di sfondo, Immagine di sfondo, Spaziatura e Visibilità

Le impostazioni Colore di sfondo, Immagine di sfondo, Spaziatura e Visibilità sono descritte nella sezione Impostazioni comuni di questo articolo.

Avanzate

mceclip3.png
  • Nascondi margini fra le colonne: imposta le dimensioni dello spazio (margine) che separa le colonne della riga.
  • Raggio del bordo: questa opzione permette di arrotondare gli angoli della riga. 

Colonna

Le colonne sono disponibili solo nell'editor classico delle landing pages.

Puoi modificare le impostazioni di una colonna andando alla scheda Layout dal pannello di sinistra come abbiamo visto in Le landing pages - 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.

mceclip5.png

Stile

2020-11-12_12-04-05.png
  • Ridimensiona: scegli la larghezza della colonna.
  • Dimensioni per mobile: scegli la larghezza della colonna su dispositivo mobile.
  • Raggio del bordo: questa opzione permette di arrotondare gli angoli della colonna. 

Colore di sfondo, Immagine di sfondo, Spaziatura e Visibilità

Le impostazioni Colore di sfondo, Immagine di sfondo, Spaziatura e Visibilità sono descritte nella sezione Impostazioni comuni di questo articolo.

Testo

Nuovo editor delle landing pages
text_element-en_us.png
Editor classico delle landing pages
mceclip0.png

Puoi utilizzare un elemento Testo per aggiungere e formattare il testo sulla tua landing page. 

Barra di formattazione

Nuovo editor delle landing pages
mceclip4.png
Editor classico delle landing pages
Text_set_up_EN.png

La barra di formattazione consente di modificare lo stile del testo. Seleziona il testo che desideri modificare per visualizzare la barra di formattazione e clicca sui 3 punti all'estremità destra per accedere ad altre opzioni.

Allineamento e Spaziatura

Le impostazioni Allineamento e Spaziatura sono descritte nella sezione Impostazioni comuni di questo articolo.

Immagine

Nuovo editor delle landing pages
image_element-en_us.png
Editor classico delle landing pages
mceclip1.png

Le immagini sono un modo perfetto per personalizzare il design delle tue landing pages e renderlo più coinvolgente. Puoi selezionare un'immagine dalla nostra libreria di immagini, da un URL o dal tuo computer.

Allineamento e Spaziatura

Le impostazioni Allineamento e Spaziatura sono descritte nella sezione Impostazioni comuni di questo articolo.

Immagine

mceclip0.png

Le impostazioni Immagine consentono di selezionare un'immagine e modificarne le dimensioni:

  • URL immagine: inserisci l'URL dell'immagine che desideri aggiungere.
  • Rimuovi: elimina l'immagine corrente.
  • Sostituisci: scegli una nuova immagine per sostituire quella corrente.
  • Ridimensiona: scegli la larghezza dell'immagine.

Stile

image_style-en_us.png

L'impostazione Stile consente di definire l'aspetto dell'immagine:

  • Ombreggiatura: aggiungi un'ombra all'immagine.
  • Raggio del bordo: imposta l'arrotondamento dell'immagine.
  • Stile e colore del bordo: aggiungi un bordo all'immagine e selezionane il colore.
  • Larghezza del bordo: definisci quanto deve essere largo il bordo dell'immagine.
  • Raggio del bordo: definisci quanto deve essere arrotondato il bordo dell'immagine.

Logo

Nuovo editor delle landing pages
logo_element-en_us.png
Editor classico delle landing pages
mceclip2.png

I loghi sono un modo perfetto per mostrare il tuo marchio sulla tua landing page.

Allineamento e Spaziatura

Le impostazioni Allineamento e Spaziatura sono descritte nella sezione Impostazioni comuni di questo articolo.

Immagine

mceclip1.png

L'impostazione Immagine consente di selezionare un logo e modificarne le dimensioni:

  • URL immagine: inserisci l'URL del logo.
  • Rimuovi: elimina il logo corrente.
  • Sostituisci: scegli un nuovo logo per sostituire quello corrente.
  • Alt: aggiungi un testo alternativo per fornire informazioni descrittive sul logo.
  • Link: aggiungi un link di reindirizzamento al logo.

Stile

L'impostazione Stile è disponibile solo nel nuovo editor delle landing pages.

logo_style-en_us.png

L'impostazione Stile consente di definire l'aspetto del logo:

  • Stile e colore del bordo: aggiungi un bordo al logo e selezionane il colore.
  • Larghezza del bordo: definisci quanto deve essere largo il bordo del logo.
  • Raggio del bordo: definisci quanto deve essere arrotondato il bordo del logo.

Pulsante

Nuovo editor delle landing pages

button_element-en_us.png

Editor classico delle landing pages
mceclip3.png

Puoi utilizzare un elemento Pulsante per collegarti a un sito web o a un'altra sottopagina della tua landing page. Aggiungere pulsanti alla landing page è un ottimo modo per evidenziare link specifici su cui desideri che clicchino gli utenti. 

Allineamento, Spaziatura e Visibilità

Le impostazioni Allineamento, Spaziatura e Visibilità sono descritte nella sezione Impostazioni comuni di questo articolo.

Proprietà

button_properties-en_us.png

L'impostazione Proprietà consente di definire a cosa deve collegarsi il pulsante:

  • Invito all'azione: 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 di aprire il link in un'altra scheda.
  • URL (link): aggiungi il link a cui deve puntare il pulsante.

Stile

mceclip4.png

L'impostazione Stile consente di personalizzare l'aspetto del pulsante:

  • Colore: scegli il colore del pulsante.
  • Stile e colore del contorno: scegli un tipo di contorno per il pulsante e il suo colore.
  • Larghezza del contorno: definisci quanto deve essere largo il contorno del pulsante.
  • Larghezza intera: scegli se il pulsante deve essere largo quanto la pagina.
  • Riempimento: scegli se il pulsante deve essere opaco o trasparente:
    mceclip0.png
  • Forma: scegli se il pulsante deve essere quadrato, rotondo o ovale.
  • Ombra: aggiunge un'ombra chiara o scura al pulsante.

Separatore

💡 Buono a sapersi
È possibile aggiungere soltanto un separatore orizzontale.
Nuovo editor delle landing pages

divider_element-en_us.png

Editor classico delle landing pages
mceclip4.png

Puoi utilizzare un elemento Separatore per aggiungere una separazione visiva tra i diversi elementi e sezioni della tua landing page. 

Spaziatura

L'impostazione Spaziatura è descritta nella sezione Impostazioni comuni di questo articolo.

Stile

mceclip5.png

Scegli l'entità dello spessore del separatore: sottile, spesso o molto spesso.

Colore

mceclip6.png

Scegli il colore del separatore.

Modulo

Nuovo editor delle landing pages

form_element-en_us.png

Editor classico delle landing pages
mceclip5.png

Puoi utilizzare un elemento Modulo per creare una landing page per la generazione di lead. Per maggiori informazioni sui moduli nelle landing pages, leggi il nostro articolo Parte 4: Aggiunta di un modulo e utilizzo delle opzioni avanzate.

Icona

Nuovo editor delle landing pages

icon_element-en_us.png

Editor classico delle landing pages
mceclip6.png

Puoi utilizzare un elemento Icona per inserire nella landing page elementi grafici e illustrazioni.

Allineamento e Spaziatura

Le impostazioni Allineamento e Spaziatura sono descritte nella sezione Impostazioni comuni di questo articolo.

Impostazioni

mceclip7.png

Le Impostazioni di un'icona consentono di selezionare un'icona e personalizzarne l'aspetto:

  • Sostituisci: scegli un nuovo icona per sostituire quella corrente.
  • Ridimensiona: scegli la larghezza dell'icona.
  • Sfondo: aggiungi un colore di sfondo all'icona.
  • Primo piano: aggiungi un colore di primo piano all'icona.
  • Stile e colore del bordo: aggiungi un bordo all'icona e selezionane il colore.
  • Larghezza del bordo: definisci quanto deve essere largo il bordo dell'icona.
  • Raggio del bordo: definisci quanto deve essere arrotondato il bordo dell'icona.
  • Link: aggiungi un link di reindirizzamento all'icona.

Video

Nuovo editor delle landing pages

video_element-en_us.png

Editor classico delle landing pages
mceclip7.png

Puoi utilizzare un elemento Video nella landing page per mostrare il tuo marchio o i tuoi prodotti senza utilizzare troppo testo.

Spaziatura

L'impostazione Spaziatura è descritta nella sezione Impostazioni comuni di questo articolo.

URL

mceclip8.png L'impostazione URL consente di aggiungere il link al video. Puoi utilizzare un video ospitato su YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku o Coub.

Stile

video_style-en_us.png

L'impostazione Stile consente di gestire l'aspetto del  video:

  • Stile e colore del bordo: aggiungi un bordo al video e selezionane il colore.
  • Larghezza del bordo: definisci quanto deve essere largo il bordo del video.
  • Raggio del bordo: definisci quanto deve essere arrotondato il bordo del video.

Contenitore

L'elemento Contenitore è disponibile solo nel nuovo editor delle landing pages.

container-element-en_us.png

Puoi utilizzare un elemento Contenitore per raggruppare diversi elementi e spostarli o ridimensionarli tutti in una volta.

Immagine di sfondo, Spaziatura e Visibilità

Le impostazioni Immagine di sfondo, Spaziatura e Visibilità sono descritte nella sezione Impostazioni comuni di questo articolo.

Stile

mceclip10.png

L'impostazione Stile consente di personalizzare l'aspetto del contenitore:

  • Colore di sfondo e trasparenza: aggiungi un colore di sfondo al contenitore e gestiscine la trasparenza.
  • Stile e colore del bordo: aggiungi un bordo al contenitore e selezionane il colore.
  • Posizione del bordo: definisci su quale lato del contenitore aggiungere un bordo.
  • Larghezza del bordo: definisci quanto deve essere largo il bordo del contenitore.
  • Raggio del bordo: definisci quanto deve essere arrotondato il bordo del contenitore.
  • Ombreggiatura: aggiungi un'ombra al contenitore.

Codice

Nuovo editor delle landing pages

mceclip0.png

Editor classico delle landing pages
mceclip8.png

Puoi utilizzare un elemento Codice per aggiungere frammenti di codice alla tua landing page, come ad esempio una sezione dei commenti di Facebook

💡 Buono a sapersi
Il codice inserito nell’editor qui sotto può essere testato soltanto su landing pages pubblicate.

⏩ E adesso?

🤔 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 contattarcihere.