Personalizza Landing Page in 15 Minuti

Cosa ci vuole a un non-esperto di tecnologie per creare una landing page personalizzata? Deve aspettare che il designer disegni lo skech, poi, che il coder lo costruisca, lo specialista di QA lo testi, il programmatore corregga i bug... E poi, se vorrai solo cambiare un piccolo elemento - tutto inizia da capo. Prova i nostri 5 nuovi template di landing page con il costruttore "drag and drop" incorporato e potrai creare le pagine di destinazione personalizzate in mezz'ora.

Prima di tutto, queste landing page ricche di funzionalità con editor HTML drag-and-drop sono destinate per gli utenti finali che non hanno conoscenze di HTML o CSS. Non vi è alcun bisogno di perdere tempo con il backend – la personalizzazione si svolge presso il frontend. Basta trascinare e rilasciare i blocchi predefiniti sulla tela vuota, modificarli, aggiungere il proprio testo, e voilà! La pagina è pronta per consegnare il messaggio della tua campagna di marketing. Tranne gli utenti finali, anche i sviluppatori professionisti possono trovare questi template utili, in quanto riducono la durata di lavoro al minimo.

Quindi, come è fatto questo costruttore HTML? Questo customizer elegante è costruito con HTML, CSS, JavaScript e un singolo file PHP con lo scopo di esportare il markup che creerai. Una volta entrato al pannello di controllo, vedrai un menu hamburger con diversi blocchi predefiniti a sinistra. È possibile spostare i blocchi alla tela trascinando e rilasciando, cambiare la loro posizione, cancellarli separatamente o tutti insieme in una volta. In termini di editing, è possibile personalizzare i link, le immagini, video, icone, titoli, testo e altri elementi. Grazie alla personalizzazione così facile, puoi testare diversi design.

Ora, esploriamo i tipi di blocchi predefiniti e le opzioni di stile che puoi utilizzare durante la costruzione di landing page. Ricorda che il loro numero varia in ogni template. Puoi utilizzare tutti i blocchi disponibili per costruire una lunga pagina informativa o solo alcuni di essi per farla più breve. Sta a te decidere. La cosa curiosa è che le pagine di destinazione lunghe generano al 220% più contatti rispetto alla sezione above the fold.

Blocchi Intro

I template di landing page con il costruttore drag-and-drop offrono 5-7 layout di blocchi intro da scegliere a seconda del tuo obiettivo. Ci sono opzioni eleganti per evidenziare i dettagli del prodotto, invitare i clienti a sottoscriversi con il modulo integrato, e creare un senso di urgenza con la funzione di contatori.

* * *

Blocchi di Navigazione

In termini di navigazione, è possibile scegliere da 3 a 11 variazioni a seconda del template che usi. Sentiti libero di scegliere tra gli sfondi trasparenti, colorati, chiari o scuri. Il blocco di navigazione della landing page può anche comprendere il logo della società, le voci di menu, icone di social media, e il pulsante di registrazione.

* * *

Blocco dei Vantaggi e Caratteristiche

Per consentire di evidenziare i vantaggi e le caratteristiche dei tuoi prodotti, i template offrono 5-11 diversi layout. Metti le informazioni in una riga o colonna(e), aggiungi le icone, lascia solo i titoli o aggiungi anche brevi descrizioni, - le opzioni sono davvero tante. In più, puoi lasciare lo sfondo pulito o aggiungere un'immagine.

* * *

Blocchi Call-to-Action

Ci sono 5-8 stili tra cui scegliere per la costruzione di un blocco con call-to-action. Per richiedere il feedback dei clienti o spingerli all’acquisto puoi usare i pulsanti CTA colorati o trasparenti. Alcuni layout predefiniti dispongono anche delle informazioni di contatto. Inoltre, il blocco CTA della landing page può avere uno sfondo colorato o con un’immagine.

* * *

Blocchi di Contenuto

Questi template sono dotati di 5-11 layout per costruire un blocco di contenuto. È possibile visualizzare i punti principali del tuo business in modo compatto con elenchi, accordion e toggles. Ci sono inoltre carousel per introdurre i membri della tua squadra e svelare i prossimi eventi. Alcuni blocchi dispongono anche di un split layout, che ti aiuterà a focalizzare l'attenzione su due tipi di contenuto contemporaneamente.

* * *

Tipi di Colorbox

Per visualizzare il contenuto, è possibile anche scegliere tra 3-4 tipi di colorbox divisi in 2-4 sezioni. Alcuni dispongono di sfondi colorati, con immagini, didascalie e un pò di testo, mentre gli altri hanno un aspetto più minimalista, con solo icone e titoli.

* * *

Stili di Galleria

Mostra i tuoi progetti in una delle gallerie con 2-5 piastrelle quadrati. È possibile aggiungere le descrizioni sulle immagini, visualizzarli sotto o lasciare solo le foto senza alcun testo. Le immagini possono essere posizionati in una o due righe o in 2-3 colonne.

* * *

Blocco dei Moduli

I template danno un accesso a 6-8 blocchi per moduli di iscrizione, di contatto e di registrazione. Come sfondo, è possibile scegliere tra lo stile con le immagini, colorato, chiaro e scuro. Alcune blocchi comprendono solo i moduli, mentre gli altri possono avere anche le icone sociali, contatori, paragrafi di testo, ecc.

* * *

Blocco dei Partner

Dai un aspetto rispettabile alla tua pagina con il blocco dei partner. È possibile scegliere tra 2-3 stili: due file di loghi divisi con linee, due righe senza le linee e una sola riga.

* * *

Blocco dei Prezzi

È possibile visualizzare la politica dei prezzi della tua azienda in cerchi o tabelle. Puoi scegliere tra lo sfondo di immagini, colorato, bianco o sfocato. Sono disponibili 3-6 stili di blocchi dei prezzi da utilizzare con queste landing page.

* * *

Contatori

I numeri sono noti come elementi molto potenti nella psicologia del web design. Quindi, usa i contatori dinamici per impressionare i tuoi potenziali clienti con statistiche curiose. È possibile scegliere tra 4-5 layout, dove i contatori vengono posizionati in cerchi incorniciati, senza la cornice, con le icone, e vengono mostrati sullo sfondo chiaro, con il colore sfumato o con una immagine di sfondo.

* * *

Blocco di Testimonianze

Conferisci maggiore affidabilità alla tua landing page con l'aiuto di testimonianze. Ogni template dispone di 3-4 layout con cui giocare. È possibile posizionare le testimonianze in più colonne o mostrarle una per una in carousel. Possono anche essere strutturate in scatole, aggiungendo un senso della struttura all'intero blocco. Gli autori di testimonianze vengono mostrati con i nomi, posizioni e le foto. Puoi anche utilizzare il layout senza le loro foto, se vuoi.

* * *

Stili di Footer

Il tocco finale delle landing page è importante quanto la sua introduzione. Ogni template offre una varietà di stili del footer per farti scegliere l'opzione più efficace. Sul footer puoi mettere il tuo indirizzo, numero di telefono, e-mail, ore di lavoro, e collegamenti agli account sociali. Al posto dei contatti, puoi utilizzare una mappa interattiva alimentata da Google Maps API. Se desideri combinare i contatti con la mappa, lo puoi fare. A seconda del template, è possibile scegliere lo sfondo scuro, chiaro o colorato.

* * *

Ora, dai un'occhiata alle nostre nuove landing page e alle liste delle loro caratteristiche. È possibile utilizzarli anche così come sono, se ti piace.

Template di Landing Page Responsive Mobile Repair Service

Demo | Dettagli

• 5 blocchi intro
• 3 tipi di navigazione
• 5 blocchi dei vantaggi e caratteristiche
• 5 tipi di call-to-action
• 5 blocchi di contenuto
• 4 stili di testimonianze
• 1 footer

* * *

Template di Landing Page Responsive Event Planner

Demo | Dettagli

• 6 blocchi intro
• 11 tipi di navigazione
• 9 blocchi dei vantaggi e caratteristiche
• 5 tipi di call-to-action
• 9 blocchi di contenuto
• 4 tipi di colorbox
• 2 stili di galleria
• 6 blocchi dei moduli (2 moduli di iscrizione, 2 moduli di contatto, 2 moduli di registrazione)
• 1 mappa
• 2 blocchi dei partner
• 6 stili dei prezzi
• 4 contatori
• 3 stili di testimonianze
• 6 stili del footer

* * *

Template di Landing Page Responsive Real Estate

Demo | Dettagli

• 6 blocchi intro
• 5 tipi di navigazione
• 7 blocchi dei vantaggi e caratteristiche
• 8 tipi di call-to-action
• 11 blocchi di contenuto
• 4 tipi di colorbox
• 3 stili di galleria
• 6 blocchi dei moduli (2 moduli di iscrizione, 2 moduli di contatto, 2 moduli di registrazione)
• 3 blocchi dei partner
• 3 stili dei prezzi
• 5 contatori
• 3 stili di testimonianze
• 6 stili del footer

* * *

Template di Landing Page Responsive Financial Advisor

Demo | Dettagli

• 7 blocchi intro
• 7 tipi di navigazione
• 11 blocchi dei vantaggi e caratteristiche
• 6 tipi di call-to-action
• 6 blocchi di contenuto
• 3 tipi di colorbox
• 5 stili di galleria
• 8 blocchi dei moduli (2 moduli di iscrizione, 4 moduli di contatto, 2 moduli di registrazione)
• 3 blocchi dei partner
• 4 stili dei prezzi
• 4 contatori
• 3 stili di testimonianze
• 8 stili del footer

* * *

Template di Landing Page Responsive Education

Demo | Dettagli

• 6 blocchi intro
• 6 tipi di navigazione
• 8 blocchi dei vantaggi e caratteristiche
• 5 tipi di call-to-action
• 12 blocchi di contenuto
• 4 tipi di colorbox
• 2 stili di galleria
• 6 blocchi dei moduli
• 4 blocchi dei partner
• 5 stili dei prezzi
• 4 contatori
• 3 stili di testimonianze
• 5 stili del footer

* * *

Questo articolo è stato tradotto da inglese. L’originale puoi trovare qui: Customize Landing Pages on the Fly in 15 Minutes