Share
Ultimo aggiornamento: Abbiamo altre grandi notizie! Unbounce ha aggiunto diverse nuove funzionalità di progettazione, consentendo agli utenti di Unbounce di accedere a strumenti di progettazione molto potenti. Le nuove funzionalità sono:
Questi aggiornamenti consentiranno ai clienti di Unbounce di aggiungere queste funzionalità senza utilizzare soluzioni alternative di codice di terze parti. Tutte le operazioni aggiunte in questo aggiornamento possono essere eseguite rapidamente e facilmente - i web designer di tutte le strisce saranno in grado di sfruttare le nuove funzionalità di Unbounce.
Abbiamo aggiornato di nuovo il post per riflettere questi recenti cambiamenti. Ti mostreremo dove trovare le funzioni e come utilizzarle. Puoi saperne di più sugli ultimi aggiornamenti alla fine della Parte 2 di seguito!
Aggiornare: Grandi notizie! Le pagine di destinazione Unbounce ora sono mobili, il che significa che i designer possono creare e vendere modelli che si adattano automaticamente a qualsiasi dispositivo. Questo è il più grande aggiornamento di Unbounce prodotto fino ad oggi e migliaia di professionisti del marketing cercheranno di aggiornare le loro pagine di destinazione in modo che siano sensibili ai dispositivi mobili. In altre parole, avranno bisogno di nuovi modelli al più presto.
Abbiamo aggiornato questo post per illustrarti quali sono i dispositivi mobili reattivi e come puoi progettare un modello mobile-responsive in Unbounce. Puoi passare alla Parte 4 di seguito se hai già imparato a Unbounce e sei pronto per iniziare a progettare per dispositivi mobili!
In questo tutorial ti presenterò Unbounce, uno strumento per creare pagine di destinazione specifiche della campagna. Cammineremo attraverso l'anatomia di vari tipi di pagina di destinazione, analizzeremo le funzionalità dello strumento, quindi illustreremo cosa è necessario per vendere i tuoi modelli di Unbounce su Themeforest.
Unbounce è stato creato per risolvere un problema molto specifico; per consentire ai professionisti del marketing di creare pagine di destinazione specifiche per campagne belle e ad alte prestazioni. Cioè, senza l'aiuto di sviluppatori o - ecco dove arrivano i modelli - designer.
Dal momento che la principale base di utenti di Unbounce sono operatori di marketing che potrebbero non avere familiarità con strumenti di progettazione affidabili, il generatore di pagine di destinazione è progettato per essere facile da usare, con un'interfaccia drag and drop WYSIWYG. Detto questo, i progettisti esperti possono sentirsi ugualmente a casa; è possibile aggiungere JavaScript personalizzato, widget CSS e HTML e perfezionare gli elementi della pagina sul pixel.
Le pagine di destinazione sono pagine Web autonome che servono un obiettivo specifico e predefinito per i professionisti del marketing. Se i professionisti del marketing cercano di vendere un prodotto o un servizio, possono utilizzare una pagina di destinazione per informare l'utente prima di indirizzarlo alla pagina dei prezzi. Se promuovono un nuovo ebook, avranno bisogno di una pagina di destinazione per raccogliere le informazioni di contatto dei loro visitatori prima di consegnare il file. Per entrambe queste campagne (e quasi tutte le campagne!) Semplicemente inviando i visitatori alla loro homepage - invece di una pagina di destinazione dedicata - significherebbe fallimento del marketing.
In breve, le pagine di destinazione sono progettate per spingere gli utenti verso uno specifico obiettivo centrato sulla conversione.
Marketing professionisti per lo più con esperienza. Eseguono costantemente campagne di marketing e non possono / non vogliono affidarsi ai propri sviluppatori interni per creare una pagina di destinazione unica per ogni campagna. Circa un terzo dei nostri clienti fa parte del team di marketing di un'azienda, un altro terzo lavora presso un'agenzia di marketing e il restante terzo sono imprenditori.
Se i clienti di Unbounce non hanno le costolette di design per sentirsi a proprio agio nel costruire una pagina da zero, inizieranno da un modello o avranno il loro designer a creare un modello per loro. Dopo aver personalizzato un modello per soddisfare le esigenze della propria campagna, i clienti utilizzano spesso lo stesso modello per ogni campagna simile che eseguono.
Il test A / B è una caratteristica fondamentale di Unbounce. Gli utenti possono duplicare la loro pagina finita, apportare una modifica alla progettazione o copia della nuova pagina, dividere il traffico tra le due pagine e utilizzare i report di Unbounce per determinare quale versione converte meglio. Il test A / B consente ai clienti di migliorare costantemente le loro pagine di destinazione e le loro campagne di marketing.
Questa guida ti aiuterà a progettare e creare una pagina di destinazione ad alta conversione per la piattaforma Unbounce.
Invitiamo gli autori dei modelli a iscriversi all'account gratuito di Unbounce e ai modelli [email protected] per informarli che stai progettando modelli per la rivendita. Inviare un'email al nostro team garantirà che il tuo account rimanga gratuito se superi i 200 visitatori unici normalmente ammessi nel piano gratuito.
Scopriamo rapidamente cosa tratteremo in questo tutorial.
Confrontiamo la homepage di Webtrends (a sinistra) con una delle loro pagine di destinazione (a destra). La homepage è ben progettata e consente a un visitatore di svolgere una serie di compiti. Ci sono cinque concetti presentati nella principale area promozionale (tramite un banner rotante), quattro messaggi supplementari sotto e un totale di ventotto punti di interazione.
Tuttavia, le campagne di marketing dovrebbero essere incentrate sul laser, guidando gli utenti verso una singola azione. Quando si progetta una landing page da utilizzare nelle campagne di marketing, il concetto di Rapporto di attenzione deve essere considerato. Il rapporto di attenzione (AR) è definito come il rapporto tra elementi interattivi (link / perdite) sulla pagina, il numero di obiettivi di conversione della campagna (che è uno). In questa homepage, il rapporto di attenzione è 28: 1, il che significa che ci sono ventisette azioni di distrazione e un'azione desiderata.
Confronta la home page con una delle pagine di destinazione della generazione di lead (a destra). Nella pagina di destinazione, c'è solo un'azione da eseguire; agli utenti viene chiesto di compilare il modulo e fare clic sul pulsante CTA per completare la conversione. Ciò produce un'esperienza molto più mirata per i visitatori, mantenendo il rapporto di attenzione a 1: 1.
Ci sono cinque elementi fondamentali indispensabili in qualsiasi pagina di destinazione, che possono essere ulteriormente suddivisi in un elenco più dettagliato di elementi costitutivi:
Lo schema seguente rappresenta un esempio di layout. L'ordine e la posizione dei 5 elementi saranno determinati dalla storia che vuoi raccontare ai tuoi visitatori e potrebbero variare rispetto a questo esempio. Ma è utile considerarlo come riferimento mentre percorriamo ogni elemento.
Esistono due tipi principali di pagine di destinazione: lead generation (lead gen) e click-through.
Le pagine di lead gen sono utilizzate per acquisire dati dell'utente, come un nome e un indirizzo e-mail. L'unico scopo della pagina è raccogliere informazioni che consentano ulteriori comunicazioni con il potenziale cliente in un altro momento. Una pagina principale conterrà un modulo insieme a una descrizione di ciò che il visitatore riceverà in cambio dell'invio dei propri dati personali.
Portare il flusso gen Le pagine di destinazione click-through hanno l'obiettivo di persuadere il visitatore a fare clic su un'altra pagina.
Tipicamente utilizzati nelle canalizzazioni di e-commerce, possono offrire dettagli su un prodotto o servizio al fine di "riscaldare" un visitatore e avvicinarlo a prendere una decisione di acquisto. Quando il potenziale cliente fa clic per arrivare alla pagina seguente, saranno pronti con tutte le informazioni di cui hanno bisogno e saranno molto più propensi ad acquistare.
A Unbounce usiamo un sistema di grid standard che utilizza 12 colonne, creando un contenitore 940px. L'esempio seguente suddivide le combinazioni di colonne disponibili. Ti consigliamo di utilizzare la griglia Unbounce per i migliori risultati di progettazione della pagina di destinazione.
Unbounce offre un set standard di caratteri tipografici all'interno del suo generatore di pagine di destinazione, nonché un set di caratteri Web di Google. Si consiglia di utilizzare i seguenti caratteri tipografici durante la progettazione di Unbounce.
Di seguito è riportato un elenco di Google Web Fonts disponibili in Unbounce, utilizza / scarica solo i seguenti caratteri dalla Libreria di caratteri Web di Google.
Di seguito è riportato un elenco dei tipi di carattere standard disponibili in Unbounce.
Ogni pagina di destinazione ha un obiettivo in mente; spostare i visitatori per eseguire un invito all'azione, ad esempio completare un modulo o fare clic su un'altra pagina. Di seguito troverai una selezione dei tipi più comuni di pagine di destinazione.
Vengono mostrati sia i design minimalisti semplici sia gli esempi completamente stilizzati.
Attingere alle tendenze più comuni del web design può aiutare a impostare la pagina di destinazione a prescindere dagli altri, ma l'implementazione può essere difficile da codificare. Per consentire agli utenti di Unbounce di trarre vantaggio da alcuni trend di progettazione recenti ed efficaci, abbiamo creato nuovi strumenti nel builder Unbounce. Ora puoi integrare funzionalità come lo scrolling della parallasse nella tua pagina di destinazione con un clic di un pulsante senza dover fare affidamento su codice di terze parti.
Hai setacciato internet per ottenere l'immagine perfetta per la tua pagina. Lo aggiungi alla tua sezione ed è più grande del contenitore. C'è una soluzione semplice per questo in Unbounce.
Dopo aver aggiunto l'immagine alla sezione della pagina, seleziona Allunga per adattarsi alla sezione della pagina. Se desideri riempire l'intera pagina, puoi selezionare Allunga per adattarsi alla pagina.
Per creare un'immagine fissa che rimane sul posto mentre i visitatori scorrono verso il basso nella pagina (parallasse), seleziona la casella di controllo "Sfondo fisso mentre scorri". Un elemento di design che può essere molto efficace sulle pagine di destinazione, lo scrolling della parallasse di solito richiede un codice personalizzato. Unbounce consente di aggiungere questa funzionalità con il clic di un pulsante.
Nota: Questa funzione non verrà visualizzata quando i visitatori sono in visualizzazione mobile.
Usando la funzione di sovrapposizione colore, sarai in grado di aggiungere tinte alle immagini di sfondo che portano un colore specifico di tua scelta in primo piano.
È possibile regolare la trasparenza delle immagini selezionando la funzione Opacità. Una sovrapposizione di 100 colori permeerà il tuo sfondo con il colore scelto completamente.
Per assicurarti che la tua pagina abbia ancora l'aspetto e funzioni come previsto dopo che è stata condivisa, ti preghiamo di evitare di utilizzare quanto segue:
La traduzione di un disegno in una pagina di destinazione sulla piattaforma Unbounce deve essere eseguita in modo pixel perfetto. Nell'esempio seguente, la pagina di destinazione è strutturata per sezioni di pagina e colonne utilizzando la griglia Unbounce standard. Esportare tutte le risorse immagine in formato .png o .jpg prima di iniziare.
Quando crei una pagina di destinazione da un file di Photoshop, ti consigliamo di iniziare da una "pagina vuota" sulla piattaforma Unbounce.
Utilizzando il file Photoshop originale come guida, imposta la larghezza della pagina nel riquadro delle proprietà della pagina. Assegna il colore di sfondo alla pagina di destinazione. Carica un'immagine di sfondo, se necessario. Imposta il colore predefinito del testo come il colore del testo più comunemente usato nel tuo disegno. Assegna il colore del collegamento per completare le proprietà della pagina.
Ora è il momento di strutturare la pagina di destinazione. Trascina e rilascia le sezioni della pagina sulla tua pagina. In genere si aggiunge una sezione di pagina per ogni porzione verticale chiaramente definita del proprio disegno. Ad esempio, è possibile aggiungere sezioni di pagina per: intestazione, area di contenuto 1, area di contenuto 2 ecc., Il piè di pagina. Quindi puoi impostare l'altezza di ogni sezione in base alle misure nel file di Photoshop. Una volta che tutte le sezioni di pagina sono state impostate, apri il menu struttura ad albero sulla sinistra e dai un nome a ciascuna sezione di conseguenza. Ciò renderà più semplice modificare e organizzare la pagina di destinazione.
Ogni nuovo elemento che viene creato all'interno della pagina di destinazione apparirà nella struttura ad albero, quindi assicurati di nominare ogni nuovo elemento come è stato aggiunto, per riferimento futuro e facile modifica.
Puoi assegnare un colore di sfondo o un gradiente a una sezione di pagina, oppure puoi caricare un'immagine da usare come sfondo. Le immagini possono anche essere affiancate. Nell'esempio seguente, è stata caricata una trama di sfondo per l'area principale e un'altra per le strisce più scure sopra e sotto.
Le immagini che hai tagliato ed esportato da Photoshop possono ora essere caricate e aggiunte alla pagina di destinazione. Trascina e rilascia le immagini usando lo strumento immagine sulla barra degli strumenti a sinistra e posizionale sulla pagina di destinazione in base al design di Photoshop
Una volta posizionato, ricorda di chiamarli nella struttura ad albero. Per posizionare il video sulla tua pagina di destinazione, utilizza lo strumento video dalla barra degli strumenti a sinistra e incolla il codice embed di YouTube / Vimeo nella finestra che si apre. Ridimensiona e posizionalo secondo le dimensioni e le proporzioni desiderate.
Trascina e rilascia lo strumento di testo nella pagina. Posiziona ciascun blocco di testo in base al tuo file di photoshop e inserisci la tua copia utilizzando l'editor di testo di seguito. È possibile regolare la copia, il carattere, le dimensioni, l'altezza della linea e il colore in modo che corrispondano al file di Photoshop.
Puoi usare le scatole come contenitori per elementi come moduli, immagini o testo. Modifica il tratto, il colore e il raggio dell'angolo per il risultato visivo desiderato e persino trasforma le caselle in cerchi, se necessario.
Trascina e rilascia l'elemento del modulo sulla pagina di destinazione. Verrà richiesto con la finestra di sovrapposizione del generatore di moduli. Scegli i campi predefiniti o creane uno tuo. Quando si utilizza il campo di posta elettronica predefinito, attivare l'opzione "Convalida come indirizzo di posta elettronica". Una volta completato, fai clic per selezionare il modulo e lo stile modificando spaziatura, caratteri, colori, larghezza e altezza nel riquadro delle proprietà a destra.
Stilizzare i pulsanti per colore, sfumatura o aggiungendo un'immagine personalizzata. È anche possibile impostare gli stati di rollover. Modifica il testo del pulsante e modifica le impostazioni del carattere per adattarle al tuo design.
Se hai un modulo sulla tua pagina, una pagina di conferma verrà attivata quando il modulo sarà compilato. Puoi accedere alla scheda della pagina di conferma nell'angolo in alto a sinistra della tua pagina.
Modifica il design della pagina di conferma in modo che corrisponda al design della tua pagina di destinazione. Ciò rassicurerà gli utenti che hanno seguito il percorso corretto e forniscono un'esperienza senza interruzioni dall'approdo alla post-conversione
Ogni pagina di destinazione richiede un obiettivo di conversione. Puoi impostarlo facendo clic sulla scheda "Obiettivo di conversione" nel riquadro delle proprietà. Se hai un modulo, dovrebbe essere impostato come "Invio del modulo".
Una volta che tutti gli elementi della pagina di destinazione si trovano sulla pagina, trascinare semplicemente per riposizionare gli elementi in modo che corrispondano al file di Photoshop e creare il layout finale. Utilizza la modalità di anteprima per eseguire una revisione finale della tua pagina di destinazione.
Mobile Responsive in Unbounce ti consente di pubblicare automaticamente una versione mobile o desktop della tua pagina sui visitatori, a seconda delle dimensioni del browser, senza utilizzare un reindirizzamento. Quando Mobile Responsive viene impostato e attivato su una pagina, qualsiasi visitatore che utilizza un dispositivo mobile vedrà la visualizzazione mobile della tua pagina, mentre a chiunque utilizzi un dispositivo desktop verrà visualizzata la vista desktop.
Unbounce imposta il "punto di interruzione" per le tue pagine di Mobile Responsive a 600px. Ciò significa che a qualsiasi finestra del browser con una finestra di 600px o meno verrà visualizzata la visualizzazione mobile della pagina. Qualsiasi browser con un viewport superiore a 600 px visualizzerà la versione desktop della pagina.
Nota: i display retina, come l'iPhone, sono tecnicamente più grandi di 600 px a causa della loro alta risoluzione, ma il viewport si comporta come una finestra browser più piccola, quindi i telefoni retina mostreranno la versione mobile della pagina
Ci sono alcune cose che ti serviranno per personalizzare la tua pagina mobile responsive e iniziare a servirla ai tuoi visitatori mobili:
Fai clic sui pulsanti in basso a destra nella finestra di dialogo Page Builder per passare dalla visualizzazione Desktop a quella Mobile.
Puoi ridimensionare il testo dalla tua versione desktop per adattarla alla tua versione mobile. Seleziona la casella di testo e utilizza la barra della scala in alto a destra nella pagina delle proprietà. La casella di testo stessa può anche essere ridimensionata separatamente su desktop e mobile.
Nota: Qualsiasi modifica apportata al carattere, alla dimensione del carattere, al formato o all'altezza della linea eseguita dall'editor di testo (anziché dalla barra della scala) influirà su entrambe le viste.
I moduli e i pulsanti saranno gli stessi nella visualizzazione mobile e desktop. È possibile nascondere un pulsante su una vista e mostrarne uno diverso nell'altra vista. Il tuo modulo deve essere coerente in entrambe le versioni.
Se hai oggetti che desideri nascondere nella visualizzazione mobile o desktop, fai clic sull'oggetto, quindi fai clic sull'icona Visibilità nel pannello Proprietà.
Puoi anche controllare la visibilità facendo clic su Contenuto della pagina in basso a sinistra di Page Builder.
Quando selezioni oggetti all'interno di Page Builder, li vedrai evidenziati nel pannello Contenuti della pagina. Vedrai un occhio quando l'elemento è visibile o un cerchio solido se non lo è. Clicca per alternare tra i due.
Nota: Se si sceglie di nascondere una sezione di riquadro o pagina con oggetti nidificati all'interno, tutti gli elementi nidificati verranno nascosti.
Per impostazione predefinita, se un elemento viene spostato tra le sezioni di pagina, verrà spostato in entrambe le visualizzazioni. Per spostare elementi al di fuori di una sezione di pagina senza modificare effettivamente le sezioni di pagina, tieni premuto il tasto Comando (mac) o il tasto di controllo (Windows) mentre trascini un elemento. Ne vedrai un promemoria ogni volta che sposti un elemento da una sezione di pagina a un'altra senza tenere premuto il tasto Comando o Controllo.
Se più elementi sono nidificati in una finestra, spostando quegli elementi in una vista, si sposteranno anche tutti gli elementi nell'altra vista. Puoi anche usare Comando / Controllo + clic per annullare la visualizzazione di un elemento in una vista e spostarlo indipendentemente dall'altra vista.
Mancia: ricorda che puoi anche spostare + clic per spostare più di un elemento alla volta
Avvisi fuori limite: verrà visualizzato un avviso se uno dei tuoi oggetti è fuori dai limiti della tua pagina di destinazione. Basta spostare l'oggetto entro i limiti della pagina o nasconderlo per rimuovere l'avviso. Puoi anche disabilitare gli avvisi fuori dai limiti usando la casella di controllo in alto a destra del Page Builder.
Quando hai finito di preparare la tua pagina Mobile, vai al riquadro delle proprietà sulla destra e seleziona Mostra versione mobile ai visitatori per abilitare la visualizzazione mobile. Quindi salva e pubblica (o ri-pubblica) la tua pagina.
Nota: Pubblicare la tua pagina ti consente di fornire un collegamento di anteprima dal vivo nei marketplace dei modelli.
Un modello di pagina di destinazione dovrebbe essere personalizzabile. L'utente finale dovrebbe essere in grado di scambiare facilmente qualsiasi immagine di eroe o sfondi fotografici. Per garantire che la qualità della pagina di destinazione rimanga intatta e che la tua pagina superi l'approvazione di ThemeForest, segui queste linee guida:
Una volta creato un modello di pagina di destinazione bello e facile da personalizzare, è necessario scaricarlo prima di poterlo condividere (o vendere) al mondo. Per scaricare una pagina, vai nella panoramica della pagina (la sezione che elenca tutte le varianti e le statistiche della tua pagina), trova l'icona ingranaggio / ingranaggio in alto a destra e fai clic su "Scarica pagina".
Apparirà una finestra di dialogo, che ti invierà un'e-mail quando il file è pronto per il download. Il file avrà un'estensione ".unbounce". Una volta scaricato il file, sentiti libero di rinomina
Accentsconagua