Come costruire un modello di pagina di destinazione Pagewiz, pronto per la vendita

Pagewiz è stato progettato per consentire ai professionisti del marketing, agli imprenditori e agli affiliati di avviare campagne di landing page da zero, in pochi minuti, e ottimizzarle facilmente verso un alto tasso di conversione. Questo tutorial ti guiderà attraverso la progettazione di pagine di destinazione con Pagewiz, in definitiva aiutandoti a confezionare e vendere i tuoi modelli di Pagewiz sul mercato Envato.

Suggerimenti per la progettazione orientata alla conversione

Quando si tratta di creare modelli di pagina di destinazione, è necessario assicurarsi che siano conformi alla conoscenza empirica del marketing online, raccolti attraverso migliaia di campagne di pagine di destinazione riuscite e / o fallite.

Se ti piacerebbe davvero saltare su questo hot wagon del marketing online e aspirare a progettare modelli di landing page orientati alle conversioni, dovresti leggere su:

Elementi di base che devono avere ogni pagina di destinazione

Ci sono cinque elementi di base che devono essere disposti su ogni pagina di destinazione:

  1. Titolo + sottotitolo
  2. Pulsante / modulo invito all'azione (CTA)
  3. Sottosezioni caratteristiche / vantaggi
  4. Costruttori di credibilità
  5. Riepilogo della linea di fondo

(1 - 2) I due elementi più importanti nella tua pagina dovrebbero essere il titolo + sottotitolo e il tuo invito all'azione. Il primo porta i visitatori nella porta e il secondo dà loro (e la campagna) il pay-off.

"Sopra la piega" - su una pagina online è tutto ciò che può essere visto senza dover scorrere verso il basso. In quest'area, il tuo visitatore dovrebbe vedere il tuo titolo + sottotitolo; questa è la copia che li attira con una promessa e offre il vantaggio chiave della vostra offerta.

Se la tua offerta non è complessa e / o il lettore tipico ha già molta familiarità con la tua offerta, è probabilmente utile posizionare il tuo primo pulsante / modulo CTA vicino al titolo + linea di sottotitoli above the fold. In altre parole, tutto ciò che un visitatore motivato ha bisogno di convalidare la propria decisione per arrivare alla propria pagina di destinazione è in primo piano e al centro. Non hanno bisogno di cercare in giro per intraprendere ulteriori azioni. Sono venuti. Loro videro. Hanno cliccato.

Riduci l'attrito: rendilo facile per loro.

Con quale facilità i visitatori della tua pagina di destinazione possono trovare il pulsante di invito all'azione (CTA)? Se la tua risposta non è stata "Come può mancare ?!" - allora potresti avere del lavoro da fare.

Il colore del pulsante CTA deve distinguersi dal resto della combinazione di colori della pagina. Quindi un pulsante CTA arancione può funzionare bene su una pagina composta da sfumature di blu, ma meno su una pagina in cui il rosso è dominante. Guarda la schermata in cui hai inserito un pulsante CTA. Qual è la prima cosa che attira i tuoi occhi? Se non è il tuo pulsante CTA, cambiare il colore potrebbe essere un buon ritocco per fare una variante che fornisci con il tuo template bundle.

(3 - 5) Il modo in cui scegli di impaginare l'elenco delle caratteristiche della tua pagina di destinazione e i relativi vantaggi, i suoi creatori di credibilità e il riepilogo del budget sono interamente a tua discrezione. Dovrai trovare un modo per unire quelli nel tuo progetto, prestando particolare attenzione a non far sparire i tuoi due elementi più importanti. Ricorda quei due da poche frasi indietro?

Ovviamente, le persone che acquistano il tuo modello avranno bisogno di avere spazio per la copia per elaborare le caratteristiche della loro offerta. Dovranno anche essere in grado di inserire alcune prove sociali come:

  • Testimonianze o tweet da persone reali.
  • Convalida dell'influencer, che può includere il logo o il badge dell'azienda dell'influente.
  • Includi sigilli di sicurezza come PayPal verificato e altri per dare il comfort è sicuro per l'acquisto sulla tua pagina.
  • Fornire informazioni di contatto complete tra cui un numero di telefono, un indirizzo email e badge social media. Possono raggiungerti se ne hanno bisogno.

Se il tuo modello diventa improvvisamente impacchettato, ricorda: Il disordine di progettazione della pagina di destinazione è confuso e non consente ai tuoi visitatori di concentrarsi. Lo spazio bianco è tuo amico e ti aiuterà a rendere il tuo modello più chiaro e più orientato alla conversione.

Nessuna navigazione!

Lo scopo di creare una pagina di destinazione è contro l'inclusione di una barra di navigazione.

Ricorda: non stai progettando un sito web.

L'unico scopo su cui dovrebbe concentrarsi la tua pagina di destinazione è convertire i suoi visitatori.

Se offri loro delle opzioni per girovagare, il tuo obiettivo primario è ostacolato. Quando la canalizzazione di conversione ha più scelte, è probabile che un potenziale cliente agisca in base a ciò a cui è diretto dal direttore della campagna. Questa è la semplice logica dietro al motivo per cui non dovresti posizionare un menu di navigazione sul design della tua pagina di destinazione.

La tua prima pagina di destinazione di Pagewiz

Una volta creato il tuo account Pagewiz e vuoi iniziare ad esportare il tuo template design su Pagewiz - accedi al tuo account e fai clic sul grande rosso + Crea una nuova pagina di destinazione pulsante in alto a destra:

Ti verrà quindi richiesto di scegliere il tipo di campagna della pagina di destinazione: desktop o dispositivo mobile.

Il tipo di campagna che selezioni influenzerà la larghezza della pagina del tuo modello: i modelli di pagina di destinazione del desktop sono generalmente di 960px su Pagewiz, mentre i modelli mobili hanno una larghezza consigliata di 320 px (anche se puoi sempre modificarlo in seguito).

È importante iniziare il design del modello personalizzato scegliendo il modello vuoto per iniziare in modo più semplice e non dover rimuovere nulla prima di iniziare:

Utilizzare le sezioni per costruire la tua pagina

È giunto il momento di utilizzare le sezioni per dividere saggiamente il modello della pagina di destinazione, quindi è più facile controllarlo e personalizzarlo:

Una volta posizionata una nuova sezione, posso impostare una texture, un colore di sfondo o un'immagine come sfondo. Userò una delle tante trame disponibili su Pagewiz:

Quindi clicco sul Espandere per estenderlo alla larghezza dello schermo (oltre la larghezza della mia pagina, che è 960px):

Se volessi, potrei anche impostare un'immagine come sfondo per quella sezione, selezionando la sezione a cui vorrei applicare un'immagine di sfondo e facendo clic su Texture> Usa un'immagine come trama.

Posizionamento e allineamento degli elementi

Quando aggiungi un elemento alla tua pagina, è posizionato in modo assoluto, ovunque tu scelga di posizionarlo. Pagewiz non ti chiederà di posizionare un elemento su un altro o di posizionarlo in modo non allineato. Lo posizionerà semplicemente.

Detto questo, Pagewiz ha alcuni strumenti di supporto per il posizionamento avanzato per assicurarsi che tutto sia posizionato con precisione, proprio come piace a te:

Posizionamento X, Y

Le coordinate di posizionamento sono disponibili per personalizzare molte cose. Ogni elemento che inserisci nella tua pagina ha i valori Top (y) e Sinistra (x), che puoi personalizzare dal menu in alto, in base alle misurazioni sul tuo file Photoshop / Illustrator.

In questo modo i tuoi disegni sono fedeli allo stesso pixel.

Allineamento degli elementi

Un altro ottimo modo per assicurarsi che gli elementi che posizionate sulla vostra pagina siano accuratamente allineati è usare gli strumenti di allineamento integrati di Pagewiz. Questi strumenti sono mostrati quando selezioni multipla gli elementi con Ctrl + facendo clic su di essi. Una volta selezionato più di un elemento, è possibile utilizzare gli strumenti di allineamento per allineare i bordi o i centri degli elementi selezionati.

Guarda il video:

Aggiunta e personalizzazione di un modulo

È possibile aggiungere un elemento del modulo al modello di pagina di destinazione per trasformarlo in una pagina di destinazione Generazione di lead, trascinando un Modulo elemento dalla barra degli strumenti a sinistra:

Personalizza i campi e le impostazioni del modulo come preferisci:

Pagina di destinazione click-through = nessuna scheda

Stai progettando un modello di pagina di destinazione click-through? Quindi non dovrebbe avere un modulo su di esso, ma semplicemente un pulsante CTA su cui fare clic. A tale scopo, trascina un elemento del pulsante sul design della pagina di destinazione e personalizzalo a tuo piacimento.

Elementi testuali

Per le tue intestazioni usa il Titolo elemento, e per il testo dei paragrafi si prega di utilizzare l'elemento rich text - entrambi sono nella barra degli strumenti sul lato sinistro, pronti per essere trascinati sul design.

Caratteri

L'intera libreria di Google Fonts è a tua disposizione quando scegli il tipo di carattere che desideri utilizzare sui tuoi modelli:

Anteprima della tua creazione

Il costruttore di pagine di Pagewiz ha un grande Anteprima pulsante per consentire di controllare costantemente come si presenta il modello. È importante dare un'occhiata all'anteprima prima di pubblicare effettivamente il tuo modello perché potresti scoprire che i diversi browser rendono la tua pagina in modo diverso, e probabilmente vorrai occuparti di qualsiasi imprecisione che potrebbe essersi verificata.

Mobilitare il tuo modello!

Importante: non lasciare il tuo modello privo di una versione della pagina di destinazione mobile. Gli acquirenti di template per la pagina di destinazione se lo aspettano, e potrebbe benissimo astenersi dall'acquistare il tuo design (per quanto attraente possa essere), solo perché hai trascurato di includere la versione mobile per questo.

È stato dimostrato più e più volte che molti potenziali lead che atterrano su una pagina di destinazione rimbalzeranno o semplicemente non convertiranno se non vengono visualizzati correttamente sul loro dispositivo mobile.

Se ciò non ti convince dell'importanza della progettazione di una pagina di destinazione ottimizzata per i dispositivi mobili, non stai ancora pensando come un marketer online ...

Come rendere il tuo modello mobile-friendly:

Ci sono due modi per farlo:

# 1 Crea un'altra pagina di destinazione vuota e scegli il Base del modello di pagina di destinazione mobile per un modello ottimizzato per tutti i tipi di browser per dispositivi mobili.

Questo ti permetterà di progettare la versione mobile da zero. Puoi quindi raggruppare la pagina di destinazione ottimizzata per dispositivi mobili insieme alla normale pagina di destinazione (di larghezza 960 pixel) che hai creato.

# 2 L'altro (più rapido) modo è quello di duplicare la pagina che hai creato per i browser desktop.

Dopo aver duplicato il tuo design, puoi impostare una nuova larghezza (mobile) su di esso. La larghezza consigliata per le pagine mobili è 320 pixel.

Una volta impostata la nuova larghezza della pagina su 320 px, dovrai assicurarti che nessun elemento rimanga fuori dai limiti della larghezza di 320 pixel trascinandoli all'interno e modificandone le dimensioni in base ai requisiti del progetto:

Preparazione del pacchetto per test A / B

Gli sforzi per una grande campagna non finiscono il giorno del lancio. Una volta eseguita la campagna, su Pagewiz può essere eseguito un test A / B illimitato per massimizzare la conversione e puoi aumentare la soddisfazione degli acquirenti del modello fornendo loro versioni diverse del modello di pagina di destinazione o in altre parole: varianti da testare con.

Puoi raggruppare più pagine diverse e offrire così ai tuoi acquirenti colori diversi o diversi metodi di conversione sul modello, ad esempio una pagina di click-through e una pagina di generazione di lead (che include un modulo). Magari bundle un'altra versione che focalizza l'attenzione su un video?

Quando impacchettate il modello di pagina di destinazione con alcune varianti ben pensate per gli utenti di marketing da utilizzare sulla loro campagna, la vostra reputazione di progettista di modelli orientati alle conversioni dovrebbe diffondersi e i professionisti del marketing preferiranno fare affari con voi più spesso!

Suggerimenti e trucchi di Pagewiz Design

Le immagini dell'eroe a larghezza intera sono diventate molto comuni e vengono spesso utilizzate nelle pagine di destinazione. Possono aiutare il design a comunicare una certa sensazione mentre visitano la pagina.

Per creare un'immagine di sfondo dell'eroe a tutta larghezza è necessario disporre di un'immagine di alta qualità, che raccomandiamo di ottimizzare per il web, prima di caricarla sui server di Pagewiz.

Per usarlo effettivamente sul tuo design, prima crea una nuova sezione trascinando l'elemento della sezione dal menu degli elementi del lato sinistro:

Per impostare l'immagine di sfondo della sezione:

  1. Seleziona la sezione facendo clic una volta
  2. Clicca sul Struttura pulsante, sul nastro superiore.
  3. Scegliere di Usa un'immagine come trama per aprire la libreria multimediale
  4. Carica la tua immagine di alta qualità e selezionala come immagine di sfondo della sezione.

Successivamente, puoi controllare la posizione dell'immagine di sfondo, che puoi fare dal fondo del Struttura menu:

  1. Clicca sul Struttura di nuovo, sul nastro superiore.
  2. In fondo è il Proprietà della trama controlli. Clic Posizione di sfondo per definire come si desidera posizionare l'immagine. Per lo più centriamo con centro proprietà.
  3. Assicurarsi che il Ripeti lo sfondo la proprietà è impostata su Nessuna ripetizione, se non ne hai bisogno.
  4. Per ridimensionare la sezione, puoi trascinare le frecce della sezione piccola ai suoi bordi:

Un'ultima cosa che devi fare è espandere la sezione a tutta larghezza facendo clic su Espandere pulsante:

La tua sezione ora ha un'immagine di sfondo a tutta larghezza.

Personalizza la griglia di progettazione

Oltre alle coordinate di posizionamento X e Y degli elementi, il generatore di pagine di Pagewiz ti fornisce anche Righelli e Guide, in modo che tu possa creare una griglia (proprio come in Photoshop, o qualsiasi altro software orientato al design) in cui può versare il tuo design.

Clicca il Righelli icona all'interno del generatore di pagine di destinazione per attivare i righelli:

Trascina tante guide per il righello di cui hai bisogno (dal lato destro / sinistro) per creare la tua griglia:

Imballando il tuo design per ThemeForest

Per aumentare le tue vendite su Envato Market ti consigliamo vivamente di creare un modello con più di una versione inclusa nel pacchetto:

  • Versione mobile
  • Versione Lead Generation (con un modulo)
  • Versione click-through

Ogni versione deve essere esportata separatamente e archiviata come file .zip. Pagewiz ti consente di esportare la tua pagina di destinazione sul Marketplace di ThemeForest. Per utilizzare la funzionalità di esportazione è necessario disporre di un account Autore Envato su Pagewiz. Puoi fare domanda per uno registrandoti su questa pagina di registrazione.

Per esportare prima una pagina di destinazione, vai a pagine di destinazione, quindi fare clic su impostazioni link sotto il nome della pagina che desideri esportare:

Clicca il Esportare pulsante.

Un file di Pagewiz verrà scaricato sul tuo computer.

Conclusione

Si spera che questo tutorial ti abbia fornito le informazioni necessarie sugli obiettivi principali delle campagne della pagina di destinazione e un'introduzione al modo in cui Pagewiz li ha creati. Ora sai anche come impacchettare i tuoi pacchetti di modelli Pagewiz in vendita su ThemeForest.