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

clickable_banner-pricing_3_en-us.png

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

Abbiamo creato una serie di articoli per aiutarti a creare le tue landing page:

Impostazioni comuni

Alcune impostazioni sono comuni tra le sezioni e gli elementi. Descriveremo prima le impostazioni comuni e poi quelle specifiche di ogni sezione o elemento.

Allineamento

L'impostazione Alignment (Allineamento) ti consente di scegliere come desideri allineare un elemento (in orizzontale e in verticale).

Spaziatura

L'impostazione Spacing (Spaziatura) ti consente di definire lo spazio verticale e orizzontale intorno e all'interno delle sezioni e degli elementi:

  • Margin (Margine) crea spazio intorno a un componente, al di fuori di qualsiasi bordo definito.
  • Padding (Spaziatura interna) crea spazio all'interno di un componente, tra la sezione o l'elemento e i relativi bordi.

Puoi scegliere diverse dimensioni di spaziatura da XS (più piccola) a XL (più grande).

Visibilità

Per le sezioni:

  • L'impostazione Visibility (Visibilità) ti consente di controllare la visibilità delle sezioni della tua landing page in base al dispositivo utilizzato per visualizzarle. Puoi scegliere Hide on Mobile (Nascondi su dispositivi mobili) e/o Hide on Desktop (Nascondi su dispositivi desktop).
  • Quando scegli di nascondere una sezione su un determinato dispositivo, la sezione apparirà come barrata nell'editor e verrà visualizzato il seguente messaggio: "This section is not visible on mobile/desktop" (Questa sezione non è visibile su dispositivi mobili/desktop) a seconda dell'opzione selezionata.

Per gli elementi:

  • L'impostazione Visibility (Visibilità) ti consente di controllare la visibilità di alcuni elementi della tua landing page in base al dispositivo utilizzato per visualizzarli. Puoi scegliere Hide on Mobile (Nascondi su dispositivi mobili) e/o Hide on Desktop (Nascondi su dispositivi desktop).
  • Questa impostazione non influisce sulla visualizzazione nell'editor e si applica solo alle landing page pubblicate per non perdere traccia dei contenuti all'interno dell'editor.

 

Colore di sfondo

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

Immagine di sfondo

L'impostazione Background Image (Immagine di sfondo) ti 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:

  • Caption (Didascalia): aggiungi una didascalia per l'immagine di sfondo.
  • Remove (Rimuovi): elimina l'immagine di sfondo corrente.
  • Replace (Sostituisci): scegli una nuova immagine di sfondo per sostituire quella corrente.
  • Background Size (Dimensioni sfondo): seleziona il modo in cui l'immagine di sfondo deve adattarsi alla sezione o all'elemento.
  • Background Repeat (Ripetizione dello sfondo): seleziona se desideri ripetere l'immagine di sfondo in tutta la sezione o in tutto l'elemento.
  • Color Overlay (Sovrapposizione colori): seleziona un colore da aggiungere sopra il contenuto della sezione o dell'elemento e gestiscine la trasparenza.

Sezione

Proprietà

L'impostazione Properties (Proprietà) ti consente di rinominare la sezione. Il nome delle sezioni viene visualizzato durante la navigazione nel pannello Layout.
💡 Buono a sapersi
Ti consigliamo di dare un nome alle tue sezioni per facilitarne il tracciamento e la navigazione.

Colore di sfondo, immagine di sfondo e spaziatura

Le impostazioni Background Color (Colore di sfondo), Background Image (Immagine di sfondo) e Spacing (Spaziatura) sono descritte nella sezione Impostazioni comuni di questo articolo.

Stile

L'impostazione Style (Stile) ti consente di personalizzare l'aspetto della sezione:

  • Edge to Edge (Da bordo a bordo): influisce sulla spaziatura orizzontale ai lati della sezione.
  • Full Height (Altezza intera): visualizza l'immagine come immagine completa.
  • Background Parallax (Parallasse di sfondo): utilizza lo scorrimento di parallasse per fare in modo che l'immagine di sfondo della sezione scorra più lentamente rispetto al contenuto in primo piano.

Segnalibro

lp_bookmark_en-us.png

Il pulsante Bookmark (Segnalibro) ti consente di salvare una sezione per riutilizzarla in altre landing page. Può essere utile per le intestazioni e i piè di pagina che usi sempre nelle tue landing page. 

Puoi trovare le sezioni salvate in Sections (Sezioni) > Bookmark (Segnalibro) nel pannello di sinistra dell'editor. 

Riga

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

Puoi modificare le impostazioni di una riga andando sulla scheda Layout nel pannello di sinistra, come abbiamo visto in Landing page - Parte 2: definizione della struttura della landing page. Puoi utilizzare anche il percorso di navigazione visualizzato nella parte superiore dello schermo quando clicchi su un elemento.

Colore di sfondo, immagine di sfondo, spaziatura e visibilità

Le impostazioni Background Color (Colore di sfondo), Background Image (Immagine di sfondo), Spacing (Spaziatura) e Visibility (Visibilità) sono descritte nella sezione Impostazioni comuni di questo articolo.

Avanzate

  • Hide gutters between columns (Nascondi spazi tra le colonne): imposta la dimensione dello spazio tra le colonne della tua riga.
  • Border Radius (Raggio dei bordi): arrotonda gli angoli della tua riga. 

Colonna

Le colonne sono disponibili solo nell'editor di landing page classico.

Puoi modificare le impostazioni di una colonna andando sulla scheda Layout nel pannello di sinistra, come abbiamo visto in Landing page - Parte 2: definizione della struttura della landing page. Puoi utilizzare anche il percorso di navigazione visualizzato nella parte superiore dello schermo quando clicchi su un elemento.

mceclip11.png

Stile

  • Resize (Ridimensiona): scegli le dimensioni della tua colonna.
  • Mobile size (Dimensioni per dispositivi mobili): scegli le dimensioni della tua colonna sui dispositivi mobili.
  • Border Radius (Raggio dei bordi): arrotonda gli angoli della tua colonna. 

Colore di sfondo, immagine di sfondo, spaziatura e visibilità

Le impostazioni Background Color (Colore di sfondo), Background Image (Immagine di sfondo), Spacing (Spaziatura) e Visibility (Visibilità) sono descritte nella sezione Impostazioni comuni di questo articolo.

Testo

Nuovo editor di landing page
Editor di landing page classico

Puoi utilizzare un elemento Text (Testo) per aggiungere e formattare il testo della tua landing page. 

Barra di formattazione

La barra di formattazione ti 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 a ulteriori opzioni.

Allineamento e spaziatura

Le impostazioni Alignment (Allineamento) e Spacing (Spaziatura) sono descritte nella sezione Impostazioni comuni di questo articolo.

Immagine

Nuovo editor di landing page
Editor di landing page classico

Le immagini sono un modo perfetto per personalizzare il design della tua landing page e renderla più accattivante. Puoi selezionare un'immagine dalla nostra libreria di immagini, da un URL o dal tuo computer.

Allineamento e spaziatura

Le impostazioni Alignment (Allineamento) e Spacing (Spaziatura) sono descritte nella sezione Impostazioni comuni di questo articolo.

Immagine

Le impostazioni Image (Immagine) ti consentono di selezionare un'immagine e modificarne le dimensioni:

  • Img URL (URL dell'immagine): inserisci l'URL dell'immagine che desideri aggiungere.
  • Remove (Rimuovi): elimina l'immagine corrente.
  • Replace (Sostituisci): scegli una nuova immagine per sostituire quella corrente.
  • Resize (Ridimensiona): scegli le dimensioni dell'immagine.

Stile

L'impostazione Style (Stile) ti consente di definire l'aspetto dell'immagine:

  • Drop Shadow (Ombreggiatura): aggiungi un'ombra all'immagine.
  • Border radius (Raggio dei bordi): definisci l'arrotondamento dell'immagine.
  • Border style (Stile del bordo) e Border color (Colore del bordo): aggiungi un bordo all'immagine e selezionane il colore.
  • Border Width (Larghezza del bordo): definisci la larghezza del bordo dell'immagine.
  • Border Radius (Raggio del bordo): definisci l'arrotondamento del bordo dell'immagine.

Logo

Nuovo editor di landing page
Editor di landing page classico

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

Allineamento e spaziatura

Le impostazioni Alignment (Allineamento) e Spacing (Spaziatura) sono descritte nella sezione Impostazioni comuni di questo articolo.

Immagine

mceclip1.png

L'impostazione Image (Immagine) ti consente di selezionare un'immagine e modificarne le dimensioni:

  • Caption (Didascalia): aggiungi una didascalia al logo.
  • Img URL (URL dell'immagine): inserisci l'URL del logo.
  • Remove (Rimuovi): elimina il logo corrente.
  • Replace (Sostituisci): scegli un nuovo logo per sostituire quello corrente.
  • Crop logo (Ritaglia logo): ritaglia il logo alle dimensioni desiderate.
  • Alt: aggiungi un tag alt per fornire informazioni descrittive sul logo.
  • Link: aggiungi un link di reindirizzamento al logo.

Stile

L'impostazione Style (Stile) è disponibile solo nel nuovo editor di landing page.

L'impostazione Style (Stile) ti consente di definire l'aspetto del logo:

  • Border style (Stile del bordo) e Border color (Colore del bordo): aggiungi un bordo al logo e selezionane il colore.
  • Border Width (Larghezza del bordo): definisci la larghezza del bordo del logo.
  • Border Radius (Raggio del bordo): definisci l'arrotondamento del bordo del logo.

Pulsante

Nuovo editor di landing page

Editor di landing page classico

Puoi utilizzare un elemento Button (Pulsante) per creare un link a un sito web o a un'altra sottopagina della tua landing page. L'aggiunta di pulsanti alla tua landing page è un'ottima soluzione per evidenziare i link specifici che desideri far cliccare agli utenti. 

Allineamento, spaziatura e visibilità

Le impostazioni Alignment (Allineamento), Spacing (Spaziatura) e Visibility (Visibilità) sono descritte nella sezione Impostazioni comuni di questo articolo.

Proprietà

L'impostazione Properties (Proprietà) ti consente di definire il link di reindirizzamento del pulsante:

  • Call to action (Invito all'azione): inserisci il testo che desideri visualizzare nel pulsante di invito all'azione.
  • Pick an action (Scegli un'azione): scegli fra le tre azioni: Link to a URL (Link a un URL), Anchor to a section (Ancoraggio a una sezione) o Link to a page in this funnel (Link a una pagina di questo funnel).
    Se scegli Anchor to a section (Ancoraggio a una sezione), seleziona nell'elenco a discesa a quale sezione è ancorato il pulsante.
    Se scegli Link to a page in this funnel (Link a una pagina di questo funnel), seleziona nell'elenco a discesa a quale pagina è collegato il pulsante.
  • Pick a target (Scegli destinazione): scegli se aprire il link in una nuova scheda.
  • URL (link): aggiungi il link di reindirizzamento del pulsante.

Stile

L'impostazione Style (Stile) ti consente di personalizzare l'aspetto del pulsante:

  • Color (Colore): scegli il colore del pulsante.
  • Outline style (Stile del contorno) e Outline color (Colore del contorno): scegli un tipo di contorno per il pulsante e il relativo colore.
  • Outline width (Larghezza del contorno): definisci la larghezza del contorno del pulsante.
  • Full width (Larghezza intera): scegli se il pulsante deve essere largo quanto la pagina.
  • Fill (Riempimento): scegli se il pulsante deve essere pieno o vuoto:
    mceclip0.png
  • Shape (Forma): scegli se il pulsante deve essere quadrato, rotondo o a forma di pillola.
  • Shadow (Ombra): aggiungi un'ombra chiara o scura al pulsante.
  • Button Icon (Icona del pulsante): aggiungi un'icona al pulsante e scegli la relativa posizione.

Separatore

💡 Buono a sapersi
È possibile aggiungere solo un separatore orizzontale.
Nuovo editor di landing page

Editor di landing page classico

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

Spaziatura

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

Stile

Scegli il livello di spessore del separatore: Thin (Sottile), Thick (Spesso) o Thickest (Il più spesso).

Colore

Scegli il colore del separatore.

Modulo

Nuovo editor di landing page

Editor di landing page classico

Puoi utilizzare un elemento Form (Modulo) per creare una landing page per la generazione di lead. Per ulteriori informazioni sui moduli in una landing page, consulta il nostro articolo dedicato Parte 4: aggiunta di un modulo alla landing page e utilizzo delle opzioni avanzate.

Icona

Nuovo editor di landing page

Editor di landing page classico
mceclip24.png

Puoi utilizzare un elemento Icon (Icona) per aggiungere del contenuto visivo e illustrare la tua landing page.

Allineamento e spaziatura

Le impostazioni Alignment (Allineamento) e Spacing (Spaziatura) sono descritte nella sezione Impostazioni comuni di questo articolo.

Impostazioni

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

  • Replace (Sostituisci): scegli una nuova icona per sostituire quella corrente.
  • Resize (Ridimensiona): scegli le dimensioni dell'icona.
  • Background (Sfondo): aggiungi un colore di sfondo all'icona.
  • Foreground (Primo piano): aggiungi un colore di primo piano all'icona.
  • Border style (Stile del bordo) e Border color (Colore del bordo): aggiungi un bordo all'icona e selezionane il colore.
  • Border Width (Larghezza del bordo): definisci la larghezza del bordo dell'icona.
  • Border Radius (Raggio del bordo): definisci l'arrotondamento del bordo dell'icona.
  • Link: aggiungi un link di reindirizzamento all'icona.

Video

Nuovo editor di landing page

Editor di landing page classico

Puoi utilizzare un elemento Video nella tua landing page per presentare il tuo brand o i tuoi prodotti senza utilizzare troppo testo.

Spaziatura

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

URL

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

Stile

L'impostazione Style (Stile) ti consente di gestire l'aspetto del video:

  • Border style (Stile del bordo) e Border color (Colore del bordo): aggiungi un bordo al video e selezionane il colore.
  • Border Width (Larghezza del bordo): definisci la larghezza del bordo del video.
  • Border Radius (Raggio del bordo): definisci l'arrotondamento del bordo del video.

Contenitore

L'elemento Container (Contenitore) è disponibile solo nel nuovo editor di landing page.

Puoi utilizzare un elemento Container (Contenitore) per raggruppare più elementi e spostarli o ridimensionarli tutti contemporaneamente.

Immagine di sfondo, spaziatura e visibilità

Le impostazioni Background Image (Immagine di sfondo), Spacing (Spaziatura) e Visibility (Visibilità) sono descritte nella sezione Impostazioni comuni di questo articolo.

Stile

L'impostazione Style (Stile) ti consente di personalizzare l'aspetto del contenitore:

  • Background Color (Colore di sfondo) e Transparency (Trasparenza): aggiungi un colore di sfondo al contenitore e gestiscine la trasparenza.
  • Border style (Stile del bordo) e Border color (Colore del bordo): aggiungi un bordo al contenitore e selezionane il colore.
  • Border Position (Posizione del bordo): definisci su quale lato del contenitore aggiungere un bordo.
  • Border Width (Larghezza del bordo): definisci la larghezza del bordo del contenitore.
  • Border Radius (Raggio del bordo): definisci l'arrotondamento del bordo del contenitore.
  • Drop Shadow (Ombreggiatura): aggiungi un'ombra al contenitore.

Codice

Nuovo editor di landing page

Editor di landing page classico

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

💡 Buono a sapersi
Il codice inserito nell'editor può essere testato solo sulle landing page 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 l'agenzia partner di Brevo giusta per te.

💬 Questo articolo ti è stato utile?

Utenti che ritengono sia utile: 0 su 16