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 Enterprise.

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

mceclip0.png

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

Spaziatura

mceclip1.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à

mceclip5.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.
mceclip6.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

mceclip7.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

mceclip8.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:

  • Didascalia: scrivi una didascalia per l'immagine di sfondo.
  • 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à

mceclip9.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

mceclip10.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.

mceclip11.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

mceclip12.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.

mceclip11.png

Stile

mceclip13.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
mceclip14.png
Editor classico delle landing pages
mceclip15.png

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

Barra di formattazione

mceclip16.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
mceclip18.png
Editor classico delle landing pages
mceclip19.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

mceclip21.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

mceclip22.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
mceclip23.png
Editor classico delle landing pages
mceclip33.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

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

  • Didascalia: scrivi una didascalia per il logo.
  • URL immagine: inserisci l'URL del logo.
  • Rimuovi: elimina il logo corrente.
  • Sostituisci: scegli un nuovo logo per sostituire quello corrente.
  • Ritaglia il logo: ritaglia il logo alla dimensione desiderata.
  • 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.

mceclip26.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

mceclip27.png

Editor classico delle landing pages
mceclip28.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à

mceclip29.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

mceclip30.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.
  • Icona del pulsante: aggiunge un'icona al pulsante e scegli la posizione.

Separatore

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

mceclip31.png

Editor classico delle landing pages
mceclip32.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

mceclip38.png

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

Colore

mceclip39.png

Scegli il colore del separatore.

Modulo

Nuovo editor delle landing pages

mceclip34.png

Editor classico delle landing pages
mceclip35.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

mceclip37.png

Editor classico delle landing pages
mceclip24.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

mceclip40.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

mceclip41.png

Editor classico delle landing pages
mceclip42.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

mceclip43.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

mceclip44.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.

mceclip45.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

mceclip46.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

mceclip47.png

Editor classico delle landing pages
mceclip48.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 contattarci qui.

Se stai cercando aiuto per un progetto che prevede l'utilizzo di Brevo, possiamo metterti in contatto con il giusto partner esperto certificato Brevo.

💬 Questo articolo ti è stato utile?

Utenti che ritengono sia utile: 0 su 11