Hai delle domande?

Home informazioni aero-right Landing pages aero-right Come creare una Landing Page

Come creare una Landing Page

Landing pages Aggiornato il aprile 13, 2022

Scopri cosa può fare il nostro editor di landing page per la tua attività. Crea una landing page in poco tempo come un professionista.

landing-page-builder

Seleziona l’argomento di cui hai bisogno di maggiori informazioni:

 


Primi passi: come creare la prima Landing Page

Inizia il divertimento! Per creare la tua prima landing page, devi accedere al tuo account Benchmark e seguire i passaggi seguenti:

  1. Dalla dashboard fai clic su Landing Page.
  2. Fai clic sul pulsante Crea nuova Landing Page.

  1. Dai un nome alla landing page. Questo nome è solo per uso interno, i visitatori non saranno in grado di vederlo. Fai clic su Avanti al termine.

Per creare un duplicato di una landing page, fai clic sull’icona Altre opzioni della pagina che desideri copiare. Assegna al tuo duplicato un nuovo nome o lascia il nome predefinito e fai clic su Salva.

Landing page duplicate, copia solo il contenuto della pagina originale, come testo, immagini e collegamenti. Devi completare il checklist della pagina per pubblicarla.

  1. Ora puoi vedere la checklist. Noterai che il pulsante Pubblica non è attivo. Sarà attivato solo una volta completata la checklist.

  1. Compila la checklist con le informazioni della landing page, il titolo e la descrizione. Il titolo e la descrizione della pagina possono aiutarti a migliorare le prestazioni, fai clic qui per saperne di più.

Nota: quando sono state aggiunte le informazioni in ogni punto dell’elenco, il segno di spunta diventa verde.

  1. Ora concentriamoci sul passaggio della progettazione.

È tempo di personalizzare la tua landing page. Nella checklist fai clic sul pulsante Disegna landing page.

 

L’editor per landing page è quasi una replica del nostro editor per email e, se hai familiarità con l’editor a blocchi, il disegno di una landing page sarà un gioco da ragazzi. Tuttavia, in caso contrario, continua a leggere e troverai informazioni molto utili.

 

In alto a sinistra, vedrai tre schede. Il primo selezionato per impostazione predefinita è Layout. Puoi iniziare la landing page da zero selezionando Layout vuoto oppure puoi accedere alla nostra sezione Modelli e scegliere uno dei modelli predefiniti. Ogni scelta è ottima ed entrambe le opzioni sono ottimizzate per i dispositivi mobili e facili da usare.

Una volta selezionato un layout, questa è la schermata che vedrai.

  1. Layout: questa opzione consente di tornare alle opzioni di layout, dov’è possibile passare a un modello predefinito o utilizzarne uno vuoto. Se scegli di modificare i modelli tutto il contenuto presente verrà cancellato definitivamente.
  2. Blocchi: in questa scheda troverai due opzioni:
    1. Sezioni
    2. Blocchi
  3. Stili globali: in questa scheda è possibile trovare l’opzione Colore di sfondo per modificare lo sfondo della landing page.
  4. Pulsante Mostra aree: questo pulsante mostra le sezioni nella landing page e il numero di colonne in ciascuna sezione.
  5. Pulsante Mostra blocchi: facendo clic qui, verrà posizionata una cornice verde su ciascun blocco e vedrai le opzioni per spostare, copiare ed eliminare i blocchi.
  6. Pulsante versione mobile: stai lavorando con un editor reattivo che organizza automaticamente i blocchi per ottimizzare la visualizzazione della landing page nei dispositivi mobili. Se non ti piace il layout mobile, puoi personalizzare le sezioni per adattare meglio i tuoi contenuti. Tieni presente che apportare modifiche qui cambia anche la versione desktop.
  7. Barra del titolo: nell’angolo in alto a destra, vedrai il nome della landing page, questo non è il titolo della pagina.
  8. Torna alla checklist: selezionando questa opzione, tornerai alla checklist principale, dove puoi completare le altre sezioni necessarie.
  9. Layout della landing page: è qui che verifichi il design della landing page. Trascina e lascia i blocchi in quest’area per personalizzare la tua pagina.
  10. Barra delle opzioni di salvataggio: Benchmark protegge il tuo lavoro mantenendo una copia di backup ogni pochi secondi. Puoi vedere l’ora dell’ultima copia salvata in questa barra.
  11. Anteprima: quest’opzione ti consente di vedere come apparirà la tua landing page nel browser.
  12. Salva e Avanti: facendo clic su quest’opzione, stai salvando il lavoro svolto e passi al checklist principale per pubblicare o continuare in un secondo momento.

Opzioni nascoste

Questa opzione consente di nascondere alcuni elementi in alcuni dispositivi. Per usarla, fai clic sull’elemento che vuoi nascondere, vai alla scheda Contenitore, quindi cambia la barra dal grigio al blu. È possibile nascondere alcuni elementi da dispositivi mobili o desktop.

 

Torna su


 

Sezioni

Le sezioni sono le parti in cui è suddiviso il layout della pagina. Una landing page può avere più sezioni e ogni sezione può avere blocchi diversi.

Puoi trovare l’opzione Sezioni dietro la scheda Blocchi. Puoi aggiungere tutte le sezioni che desideri nella pagina.S

Le sezioni disponibili sono divise in colonne, da una a quattro colonne.

Per aggiungere una sezione alla tua landing page, trascina e rilascia il blocco con il numero desiderato di colonne, come mostrato nella seguente gif.

Per vedere le sezioni del layout, fai clic sul pulsante Mostra aree.

Facendo clic su Mostra aree, è possibile visualizzare la landing page divisa in sezioni e ogni sezione avrà le informazioni sul numero di colonne per sezione e le seguenti opzioni:

  1. Freccia (e): questa opzione ti permetterà di spostare una sezione verso l’alto o verso il basso.
  2. Ingranaggio: apre le impostazioni della sezione in cui è possibile modificare il colore di sfondo.
  3. Copia: ti permetterà di copiare un’intera sezione.
  4. Cestino: quest’opzione elimina l’intera sezione. Questa azione non è reversibile.

Per uscire dalla modalità sezione, fai clic sul pulsante Nascondi aree.

 

 

Torna su


Come aggiungere un’immagine come sfondo

Le immagini di sfondo sono disponibili nell’area delle sezioni e nella scheda Impostazioni globali. Per aggiungere un’immagine di sfondo, segui questi passaggi:

Per aggiungere un’immagine di sfondo in una sezione

Questa opzione aggiungerà un’immagine di sfondo in una sezione specifica nel design della tua pagina di destinazione.

  1. Nella progettazione della tua pagina di destinazione, fai clic sull’opzione Mostra aree.
  2. Individua la sezione in cui desideri aggiungere un’immagine di sfondo e fai clic sull’ingranaggio.
  3. Le impostazioni della sezione verranno visualizzate a sinistra. Fai clic su Aggiungi sfondo.

Per aggiungere un’immagine di sfondo all’intero disegno

Aggiungendo un’immagine di sfondo dalla scheda Stili globali, aggiungerai un’immagine di sfondo all’intero design della tua pagina di destinazione.

  1. Nella progettazione della tua pagina di destinazione, fai clic sulla scheda Stili globali.
  2. Fai clic sull’opzione Immagine di sfondo.
  3. Quindi seleziona Aggiungi sfondo.

Per entrambe le opzioni:

Ora vedrai la tua galleria di immagini. Qui puoi scegliere un’immagine già esistente o aggiungerne una nuova.

Una volta inserita l’immagine, verranno visualizzate le nuove impostazioni.

 

Stili di sfondo.

  1. Riempire. L’immagine riempirà le dimensioni dello schermo coprendo l’intera sezione. Durante lo scorrimento l’immagine rimarrà ferma. Esempio di una pagina di destinazione che utilizza lo sfondo dello stile di riempimento. Per questa pagina di destinazione abbiamo utilizzato 1 sfondo all’inizio e un altro alla fine della pagina di destinazione. Nella sezione centrale abbiamo aggiunto un colore che corrisponde alla fine della prima immagine e all’inizio dell’ultima immagine, creando un effetto sfumato.

  1. Mosaico. L’immagine verrà piastrellata in base alle sue dimensioni. Le immagini costruiranno qualcosa di simile a un muro a mosaico. Il numero di copie verrà regolato in base alle dimensioni dello schermo.

  1. Parallasse. Questa opzione correggerà la tua immagine e darà l’effetto di un movimento dinamico durante lo scorrimento della pagina di destinazione. L’immagine occuperà il 100% dello schermo, puoi anche impostare la posizione dell’immagine.

Nota: l’effetto di parallasse si apprezza di più quando si scorre su e giù. Puoi passare da una sezione all’altra con l’aspetto che l’immagine precedente scompare mentre la nuova immagine la copre completamente. Come il vino in questo esempio.

  1. Posizione dell’immagine. Questi controlli consentono di modificare molto facilmente la posizione dell’immagine. Seleziona l’opzione che meglio si adatta alle tue necessità.
  2. Opzioni di modifica
    1. Modifica: utilizza il nostro editor di immagini per ridimensionare o aggiungere un effetto alla tua immagine.
    2. Sostituisci: se l’immagine non è ciò di cui hai bisogno e desideri sostituirla.
    3. Reimposta: questa opzione eliminerà l’immagine consentendo di utilizzare un’altra immagine o un colore di sfondo.
  3. Content Layout
    1. Sfondo incorniciato: questa opzione chiamata anche boxed, ha un’imbottitura sui lati e un colore di sfondo applicato ad essa. Il contenuto sarà centrato.
    2. Sfondo a tutta larghezza: questa opzione visualizzerà il contenuto senza alcuna imbottitura aggiunta attorno al contenuto.
  4. Al termine, non dimenticare di fare clic su Salva e chiudi.

 

Torna su


Blocchi

I blocchi possono essere elementi di design e anche funzionali. Facendo clic sulla scheda Blocchi, avrai due opzioni: Sezioni e Contenuto. Per trovare i blocchi disponibili, fai clic sull’opzione Contenuto sotto la scheda Blocchi.

Per aggiungere un blocco al layout, fai clic sul blocco e trascinalo nel punto in cui desideri posizionarlo, come mostrato nella seguente gif.

 

Di seguito sono riportati i blocchi disponibili. Continua a leggere per capire come usarli.

 

Torna su


 

 

Blocco immagine e blocco immagine e testo

Con questi blocchi, puoi caricare un’immagine o selezionarla dalle immagini già presenti nella tua galleria. Per utilizzare uno di questi blocchi, trascinali nella landing page e quindi procedi con l’aggiunta dell’immagine.

Un blocco di immagini aggiungerà un’immagine al tuo layout, mentre il blocco di immagine e testo aggiungerà un’immagine e un testo all’interno di una cornice al tuo layout.

Qui vedi un blocco di immagini a sinistra e un blocco di immagini e testo a destra.

Quale usare?

Utilizzare il blocco immagine quando è necessario aggiungere un’immagine semplice.

Utilizzare il blocco immagine e testo quando è necessario aggiungere una descrizione all’immagine se si sposta questo blocco, anche la descrizione si sposterà.

Per informazioni su come aggiungere un blocco di immagine e test, fai clic qui e per un blocco immagine, fai clic qui.

Potrebbe interessarti:

 

Torna al menù dei blocchi


 

Blocco immagine con didascalia

Un blocco immagine con didascalia è un blocco che consente di aggiungere del testo all’interno di un’immagine. La differenza principale tra i due blocchi è che quello con didascalia non ha la cornice o contenitore, invece l’altro ha la possibilità di regolare il bordo del layout come nell’esempio seguente (blocco con didascalia a sinistra, blocco di immagine e testo a destra).

Per informazioni su come aggiungere un blocco Didascalia immagine, fai clic qui.

 

Torna al menù dei blocchi


 

Blocco di testo

Puoi aggiungere testo alla tua landing page attraverso il blocco di testo. Per utilizzare questo blocco, trascinalo semplicemente nel punto desiderato. Una volta lì, fai clic su di esso e sostituisci il testo predefinito con il tuo.

Ecco alcune cose da notare sull’uso di questo blocco di testo.

Copia e Incolla

Se hai del testo che desideri copiare e incollare nella landing page, ti consigliamo di utilizzare l’opzione Incolla. L’uso di questa opzione rimuove tutti i caratteri nascosti nel testo che potrebbero interferire con la progettazione del testo.

Codice sorgente

Per aggiungere il codice sorgente, fare clic sull’icona del codice

e incollare il codice.

Se non vedi le opzioni sopra menzionate, fai clic sull’icona Altro dalla barra degli strumenti.

 

Torna al menù dei blocchi


 

Blocco video

I video sono strumenti visivi molto efficaci. Attraverso i video, puoi mostrare le qualità di un prodotto o i motivi per cui dovrebbero scegliere te invece di altri concorrenti. Non perdere l’opportunità di utilizzare i video sulla tua landing page.

Se vuoi imparare come caricare un video nella tua galleria video e come aggiungerlo, fai clic qui.

 

Torna al menù dei blocchi


 

Blocco divisore

Usa i divisori per creare spazi tra gli elementi nella tua pagina. I divisori non devono essere spazi vuoti, per aggiungere un blocco divisore trascinalo nella sezione desiderata. Scopri tutte le possibilità di divisori qui.

 

Torna al menù dei blocchi


 

Blocco pulsante

La CTA (call to action) è la parte più interessante della tua landing page. Qui è dove si decide se la pagina e tutto il lavoro sono stati fruttuosi. Per aggiungere un pulsante, trascinalo nella posizione desiderata. Nel pannello di sinistra, vedrai le opzioni per personalizzare il tuo pulsante. Continua a leggere per configurare il pulsante Contenuto.

  1. In questa casella, aggiungerai il testo del pulsante meglio noto come Call To Action. La tua pagina ha un obiettivo di marketing. La CTA ti aiuterà a raggiungere questo obiettivo. Rendi accattivante il tuo testo per attirare l’attenzione del tuo visitatore.
  2. Aggiungi l’URL in cui desideri reindirizzare i tuoi visitatori. Nota che potrebbe trattarsi di una URL esterna o anche una parte della landing page. Ad esempio, se il pulsante dice REGISTRATI, può essere reindirizzato a un modulo di iscrizione presente nella stessa pagina. Per aggiungere un collegamento alternativo:
    1. Fai clic sull’opzione di collegamento nella barra di modifica del testo.
    2. Nel popup, fai clic sul menu a discesa del tipo di collegamento e selezionare l’opzione desiderata. Nota: devi prima creare l’ancora. Per aggiungere un ancoraggio fai clic qui.
  3. Barra di modifica del testo. Trovi in questa barra le opzioni per personalizzare il tuo testo e anche l’opzione di collegamento.
  4. Se hai più pulsanti nella pagina, non è necessario andare uno per uno per personalizzarli. Personalizza un pulsante, quindi seleziona Applica stile a tutti i pulsanti.

 

Torna al menù dei blocchi


 

 

Barra di navigazione

La barra di navigazione consentirà ai tuoi visitatori di scoprire di più sulla tua attività.

  1. Per aggiungere un collegamento, fai semplicemente clic sull’icona più. Per personalizzare il collegamento, fai clic su di esso e le opzioni del collegamento verranno visualizzate nel pannello di sinistra. È possibile aggiungere fino a sei collegamenti. Esistono due opzioni di collegamento; testo o immagine; puoi scegliere qualsiasi opzione.
  2. Esistono tre tipi di layout disponibili per i collegamenti della barra di navigazione. È possibile combinare immagini e testo. Fai clic su tutti gli stili e scegli quello più adatto al tuo design.
  3. Utilizzare le opzioni di allineamento verticale e orizzontale per formattare la barra.
  4. Lo stile mobile consente di scegliere tra l’opzione predefinita, a pila verticale, a pila e al centro verticali. Puoi scegliere l’aspetto del tuo design su un dispositivo mobile.

 

Torna al menù dei blocchi


 

Modulo di iscrizione

Utilizza le landing page per raccogliere gli iscritti. Più iscritti avrai, più aumentano le possibilità di otterrai più vendite.

Segui queste istruzioni se hai già creato il modulo di iscrizione integrato. Per sapere come crearlo fai clic qui.
  1. Trascina l’icona del modulo di iscrizione sul layout nella posizione desiderata.

  1. Vai al pannello di sinistra e seleziona un modulo di iscrizione esistente dal menu a discesa. NOTA: nelle pagine sono consentiti solo moduli di iscrizione integrati.

  1. Il modulo di iscrizione verrà visualizzato nell’area selezionata. Nell’editor della pagina, puoi personalizzare la larghezza del modulo di iscrizione attivando l’interruttore grigio. Se devi personalizzare il modulo di iscrizione, fai clic sull’opzione Apri editor moduli. Si aprirà una nuova finestra in cui è possibile apportare modifiche al modulo. Al termine, fai clic su Salva e pubblica e conferma.
  2. Le modifiche non si rifletteranno ancora sulla pagina. Per visualizzare le nuove modifiche, elimina il modulo di iscrizione dalla pagina (per eliminare passa il mouse sul modulo, quindi fai clic sull’icona di eliminazione).
  3. Ora aggiungi di nuovo lo stesso modulo ripetendo i passaggi.

Nota: è possibile modificare il modulo di iscrizione in qualsiasi momento selezionando un nuovo modulo dal menu a discesa.

 

Torna al menù dei blocchi


 

Blocco e-Commerce

 

Il blocco Ecommerce può essere utilizzato per promuovere e vendere prodotti nelle tue landing page.

Il blocco Ecommerce include quanto segue:

  1. Immagine
  2. Descrizione del prodotto 
  3. Prezzo del prodotto 
  4. Sezione del pulsante

Per utilizzare il blocco del prodotto, clicca sul blocco e trascinalo in una sezione delle tue pagina di destinazione.

Per personalizzare il tuo blocco Ecommerce, segui i passi seguenti.

Per personalizzare il tuo blocco Ecommerce, segui i passi seguenti. 

  1. Comincia aggiungendo un’immagine del prodotto. 
  2. Aggiungi una descrizione del prodotto; questa dovrebbe essere breve e descrittiva. 
  3. Aggiorna il prezzo del tuo prodotto. 
  4. Quindi, è possibile personalizzare il pulsante del prodotto con quanto segue. 
    • Testo del pulsante.
    • Bottone URL, aggiungi un URL dove i tuoi contatti possono andare per completare il loro acquisto.
    • Infine, stilizza il pulsante per adattarlo al tuo marchio. Per risparmiare lavoro ripetitivo, puoi impostare lo stesso stile per tutti i pulsanti della tua email. Per saperne di più sulle opzioni di stile dei pulsanti, clicca qui. 

Se preferisci non usare nessuno degli elementi del blocco, semplicemente disattivali nella scheda Contenuto.

  1. Quando hai finito, clicca su Salva e poi su Salva e Avanti o semplicemente clicca fuori dall’e-mail per salvare il tuo lavoro. 

Ecco alcuni esempi di come il blocco Ecommerce può essere usato e stilizzato.

Torna al menù dei blocchi


 

Blocco prodotto Shopify

 

Per iniziare, clicca e trascina il blocco nella sezione desiderata della tua pagina di destinazione.

Per utilizzare il blocco Prodotto Shopify, avrai bisogno di un account Shopify attivo a pagamento. Quando usi questo blocco per la prima volta, dovrai integrare Shopify con il tuo account Benchmark. Per sapere come integrare il tuo negozio Shopify con Benchmark, clicca qui.

Una volta che hai integrato con successo il tuo account Shopify con Benchmark, vedrai una lista dei tuoi prodotti Shopify disponibili.

Selezioni uno dei tuoi prodotti disponibili. I blocchi riempiranno automaticamente le informazioni del prodotto usando i dettagli in Shopify.

Il blocco di Prodotto Shopify include quanto segue:

  1. Foto del prodotto
    • La foto del prodotto è estratta dall’URL del prodotto Shopify. Questa immagine non sarà salvata nella tua Galleria Immagini di Benchmark. Tuttavia, se l’immagine viene modificata utilizzando l’editor di immagini di Benchmark, l’immagine modificata verrà salvata come una nuova immagine nella Galleria Immagini.
  2. Descrizione del prodotto
    • La descrizione del prodotto prenderà il titolo del prodotto da Shopify.
  3. Prezzo del prodotto
    • Il prezzo del prodotto è l’importo del prezzo assegnato dal negozio Shopify.
  4. Bottone del prodotto
    • Il pulsante Prodotto si collega automaticamente all’URL del prodotto nel tuo negozio Shopify. L’URL del prodotto può anche essere usato per tracciare gli obiettivi di conversione.

Importante

  • Se il tuo account Shopify non è l’account amministratore, avrai bisogno delle Autorizzazioni prodotto. Per saperne di più sulle autorizzazioni utente Shopify, clicca qui.
  • Puoi collegarti solo a un negozio Shopify alla volta. L’utilizzo dell’opzione Cambia negozio rimuove tutti i prodotti del negozio precedente.

  • I dettagli del prodotto Shopify sono riempiti automaticamente con le informazioni fornite da Shopify. Pertanto, qualsiasi dettaglio cambiato in Benchmark non verrà aggiornato in Shopify.
  • Se un prodotto è già stato selezionato per una email o una landing page e viene successivamente aggiornato in Shopify, i dettagli del prodotto non si aggiorneranno automaticamente in Benchmark.
  • I prodotti archiviati non appariranno nella lista dei prodotti disponibili.
  • La duplicazione di un blocco ti permette di mantenere qualsiasi formattazione precedentemente aggiunta al blocco originale. Tuttavia, se selezioni un prodotto diverso, la formattazione precedente viene rimossa e dovrai riformattare.

Ecco alcuni esempi di come il blocco prodotto Shopify può essere usato e personalizzato.

Torna al menù dei blocchi


 

Blocco Salvato

 

Riduci il tuo tempo di progettazione usando i blocchi salvati. I blocchi di design possono essere salvati e memorizzati per essere riutilizzati in landing page future. Lo stile, il testo e le immagini del blocco vengono memorizzati quando si salva il blocco. Una volta che il blocco viene aggiunto al tuo progetto, puoi modificarne il contenuto e il blocco originale salvato rimarrà invariato.

Per salvare un blocco, passa sopra il blocco nel tuo progetto e clicca sull’opzione salva blocco. Dai un nome al blocco e clicca su Salva e chiudi.

Per usare un blocco salvato

  1. Trascina il blocco salvato sul tuo progetto e rilascialo nella sezione che preferisci.
  2. Seleziona un blocco da utilizzare e continua a modificare il blocco o salva e chiudi.
    • Passando il mouse su ogni blocco salvato, si vedrà un’anteprima del contenuto del blocco.

Eliminare i blocchi salvati

  1. Trascina il blocco salvato in qualsiasi sezione del tuo disegno. Vedrai un elenco dei tuoi blocchi salvati in precedenza sul lato sinistro.

  1. Clicca sull’icona del cestino e conferma la tua scelta selezionando l’opzione Elimina.

Se non ci sono più blocchi salvati, puoi cancellare il blocco salvato dalla tua landing page.

Torna al menù dei blocchi


 

Tipografia

Utilizza i caratteri di Google nelle tue pagine di destinazione e dai personalità ai tuoi progetti.

Per accedere ai caratteri di Google segui questi passaggi:

  1. Vai alla fase di progettazione della pagina di destinazione
  2. Fai clic sulla scheda Stili globali
  3. Individua l’opzione Tipografia e fai clic su di essa.
  4. Ora puoi selezionare il carattere che desideri per le intestazioni e il corpo del testo.

Torna su


Blocco animato

Stupisci i tuoi lettori animando i blocchi all’interno della tua pagina di destinazione, questo renderà la tua pagina di destinazione molto più dinamica e divertente.

Per accedere ai blocchi animati segui questi passaggi:

  1. Vai alla fase di progettazione della pagina di destinazione.
  2. Trascina qualsiasi blocco di cui hai bisogno nel layout della pagina di destinazione. L’opzione blocco animato è disponibile in tutti i blocchi.
  3. Una volta che il blocco è stato posizionato nel layout, vedrai le opzioni di impostazione per il blocco selezionato sulla sinistra.
  4. Trova l’opzione Blocco animato in basso e selezionala.

Verranno visualizzate le animazioni disponibili. Seleziona il tipo di animazione che desideri utilizzare, quindi la Durata dell’animazione. Puoi anche aggiungere un Ritardo, ovvero il tempo necessario affinché l’animazione appaia e l’offset ti consente di scegliere quanto deve essere distante l’oggetto dalla parte inferiore del browser prima che parta l’animazione.

Torna su


Se hai altre domande non esitare a contattarci via Email o LiveChat.


Hai trovato la risposta alla tua domanda?
Hai già votato!