Costruire la tua pagina di destinazione Instapage

Nella prima parte di questa breve serie abbiamo trattato i fondamenti di quali sono le pagine di destinazione. In questa parte, esamineremo il processo di costruzione di una pagina di destinazione Instapage.

Come costruire la tua pagina

I progetti che sono stati creati per la prima volta all'interno di Photoshop devono essere convertiti in una pagina di destinazione perfetta per i pixel sulla piattaforma Instapage. Tutte le pagine sono strutturate seguendo il sistema di griglia 960 e utilizzando le sezioni di pagina orizzontale spiegate di seguito.

Inizia con una pagina vuota

Instapage offre ai suoi utenti una varietà di modelli tra cui scegliere. Mentre ci concentriamo su modelli specifici del settore per i nostri utenti generici, inizierai con una tela bianca. 

Non è necessario utilizzare alcun altro programma per completare completamente il modello Instapage, tuttavia è possibile convertire o importare gli altri temi precedentemente progettati, se lo si desidera. Sono supportati anche i CSS e i JavaScript personalizzati.

Aggiunta di elementi della pagina di destinazione

Con Instapage puoi iniziare ad aggiungere gli elementi della pagina di destinazione facendo clic su AGGIUNGERE NUOVA opzione sulla barra degli strumenti principale e poi selezionando quale elemento aggiungere alla tua pagina.

In genere, l'aggiunta di un elemento in una sezione di pagina chiaramente definita è l'ideale. Tuttavia, hai la piena capacità di strutturare la pagina come preferisci. Puoi anche regolare l'altezza delle sezioni di pagina in base agli elementi che hai aggiunto.

All'interno dell'applicazione c'è un tooltip X / Y che apparirà ogni volta che muovi un elemento. Ciò sarà di aiuto se sei abituato a progettare tramite questo metodo o se stai convertendo da un altro tema. Le coordinate sono determinate dalla metà dell'elemento che viene spostato rispetto a quanto è lontano dalla parte superiore sinistra della colonna della pagina principale.

La colonna Pagina principale ha una larghezza di pagina standard definita di 960 px.

Puoi aggiungere i seguenti elementi al tuo modello di pagina di destinazione personalizzato: 

  • Sezioni di pagina
  • Titolo
  • Testo (Paragrafo)
  • Immagine
  • video
  • Pulsante CTA
  • Le forme
  • Mappe
  • Pulsanti di condivisione sociale
  • Link HTML
  • forme

Tutti questi sono aggiunti facendo clic su quale elemento si desidera aggiungere e quindi posizionando / modificando sulla tua pagina. Discuteremo di aggiungere elementi in maggior dettaglio di seguito.

Sezioni e scatole di pagine

Le sezioni di pagina vengono utilizzate per separare aree di contenuto diverse nella pagina di destinazione. La sezione copre sempre l'intera larghezza della pagina e non può essere ridimensionata orizzontalmente. Le sezioni della pagina possono essere riposizionate verticalmente in qualsiasi punto della pagina (come mostrato nel video)

Puoi raggruppare il contenuto sia con sezioni che con scatole in due modi. Se hai già dei contenuti nella tua pagina, puoi aggiungere una casella (scegliendola dall'elemento forme) e quindi trascinare il contenuto in quella casella. Oppure, puoi prima creare la scatola e poi trascinare gli oggetti direttamente nella casella che li anniderà.

Una volta che gli oggetti sono nidificati, puoi ora spostarli sulla tua pagina come un singolo oggetto. Seleziona la casella e procedi da lì.

La forma Box viene in genere utilizzata per creare un quadrato o un rettangolo standard che è possibile utilizzare per evidenziare forme, immagini, testo e altro. Non dovrebbe estendersi per l'intera larghezza della pagina.

Quando modifichi sezioni di pagina o forme di scatole ti verranno forniti i seguenti attributi:

  • Colore di sfondo: Cliccando su questo ti permette di scegliere un colore primario per lo sfondo della forma.
  • Colore del bordo: Cliccando su questo ti permette di scegliere un colore per il bordo che circonda la scatola.
  • Larghezza del bordo: Inserisci qui un numero per determinare lo spessore del bordo.
  • Stile del bordo: Solido, tratteggiato, punteggiato, doppio.
  • Immagine di sfondo: Imposti un'immagine come un motivo come sfondo della tua forma.
  • Angoli arrotondati: Fai clic sulle piccole frecce su / giù su qualsiasi angolo per regolare il giro che desideri.
  • Trasparenza: Puoi usarlo per migliorare l'aspetto delle tue pagine facendo cose come rivelare lo sfondo della pagina qui sotto.

Aggiunta di testo alla tua pagina di destinazione

È possibile aggiungere un titolo e un paragrafo facendo clic sulle rispettive opzioni dalla barra degli strumenti. Quando fai clic sul pulsante paragrafo o titolo vedrai un paragrafo preimpostato apparire sulla tua pagina, puoi quindi modificare questo paragrafo di conseguenza.

L'editor di testo ti consente di modificare il colore, la dimensione del carattere, l'allineamento e puoi anche aggiungere elenchi numerati o creare un collegamento.

Aggiunta di immagini e video

Dopo aver fatto clic per aggiungere un nuovo elemento immagine, ti verrà data la possibilità di sceglierne uno esistente da una cartella o di caricarne uno nuovo. Le immagini che carichi verranno salvate sui nostri server e potrai utilizzarle in un secondo momento senza doverle ricaricare.

Puoi sostituire le immagini in qualsiasi momento selezionando l'immagine> facendo clic su Modifica> scegliendo Sostituisci.

Usa le immagini per aumentare il tuo prodotto o servizio (le foto valgono più di mille parole), ma ancora una volta non farti trasportare troppo. Troppa visualizzazione distrarrà gli utenti dall'obiettivo di conversione.

Per ulteriori informazioni su come utilizzare le immagini su una pagina di destinazione può migliorare la conversione dai un'occhiata a Usa immagini sulla tua pagina di destinazione per aumentare le conversioni.

Puoi caricare un video sulla tua pagina di destinazione selezionando l'opzione video e collegandoti al video scelto di YouTube o Vimeo. Puoi ridimensionare e posizionare il video in base alle tue esigenze. Quindi scegli se desideri che il video riproduca automaticamente o nascondi la barra di avanzamento.

Aggiunta di moduli

Selezionare AGGIUNGERE NUOVA dalla barra degli strumenti principale e quindi fare clic su LE FORME. Questo popolerà un modulo sulla tua pagina di destinazione. È possibile trascinare e ridimensionare il modulo in base alle proprie esigenze di progettazione specifiche e personalizzare lo stile, lo stile, il colore e il carattere dei pulsanti facendo clic sul MODIFICARE pulsante dopo aver fatto clic sul modulo.

Puoi anche impostare i campi predefiniti o creare i tuoi menu a discesa personalizzati. I moduli possono essere collegati ai nostri servizi di posta elettronica integrati come Mailchimp o Aweber o possono funzionare da soli. Forniamo anche un'opzione di reindirizzamento (entrambe le integrazioni e i reindirizzamenti di moduli non devono essere utilizzati sulla tua pagina).

Aggiunta di pulsanti

Per aggiungere un pulsante alla tua pagina clicca AGGIUNGERE NUOVA dalla barra degli strumenti principale. Questo popolerà un pulsante sulla tua pagina di destinazione. Se fai clic sul pulsante sarai in grado di ridimensionare, cambiare il colore o il carattere e trascinare la funzione ovunque ti piaccia.

Dopo aver fatto clic sul pulsante, sopra vedrai un'icona di collegamento. Questo è un evento di collegamento caratteristica. Verrà aperto un gestore di link che ti consentirà di aggiungere un link in uscita al tuo pulsante, un popup (Lightbox) al tuo pulsante, un download di file o un link a un'altra pagina di destinazione della pagina di Instapage.

Aggiunta di una finestra popup

Molte pagine di destinazione utilizzano una procedura di registrazione in due passaggi in cui un visitatore fa clic su un pulsante che apre un popup. All'interno del pop-up è la forma di generazione di piombo. Per questo motivo e perché i pop-up possono essere utili per rivelare più informazioni, abbiamo reso molto semplice aggiungere pop-up a pulsanti, immagini e collegamenti testuali.

Basta fare clic su uno di questi tre tipi di elementi> fare clic sul pulsante di collegamento> e quindi selezionare l'opzione a comparsa.

Puoi ridimensionare la finestra pop-up come faresti con qualsiasi altro elemento. Qualsiasi tipo di contenuto può essere aggiunto all'interno del pop-up.

Implementazione della versione mobile (richiesta)

Poiché Instapage offre una completa personalizzazione drag & drop, al momento non supportiamo la progettazione responsive automatica. Per questo motivo è necessario ricostruire la pagina del desktop nella vista mobile in base alle dimensioni dello schermo più piccole e ciò che ha senso all'interno di un contesto mobile.

Puoi spostare elementi tra il desktop e la versione mobile copiando e incollando.

Utenti Mac:

  • ⌘Command-C = Copia
  • ⌘Command-V = Incolla

Utenti PC:

  • Ctrl-C = Copia
  • Ctrl-P = Incolla

Visualizza la tua pagina in anteprima

Per vedere il layout finale del tuo modello Instapage fai clic sul pulsante Anteprima opzione e rivedere il modello prima di fare clic Pubblicare.

La tua lista di controllo

  • Rivedi immagini e layout
  • Rivedi copia e font
  • Link di test
  • Modulo di prova e pulsante
  • Pubblica pagina
  • Quando crei il tuo documento di aiuto per il modello, ti preghiamo di includere questo link alle istruzioni per l'uso. Se nel modello sono stati inclusi JavaScript / CSS personalizzati, è necessario includere istruzioni dettagliate su come utilizzare o aggiornare gli script e le funzionalità.

Nota: La pubblicazione della pagina consente di fornire un collegamento di anteprima dal vivo nei marketplace dei modelli.

Requisiti di approvazione di ThemeForest

Tutti i modelli di pagina di destinazione devono essere personalizzabili. Gli utenti di Instapage dovrebbero essere in grado di scambiare facilmente qualsiasi elemento desiderino.

Per assicurarsi che i modelli non perdano la loro qualità quando l'utente finale apporta modifiche, è importante che la tua pagina superi l'approvazione di ThemeForest. Tieni presente le seguenti linee guida:

  • Le immagini dovrebbero essere facili da scambiare
  • Le sezioni di pagina dovrebbero essere utilizzate per segmentare correttamente la pagina
  • Il codice Javascript deve iniziare con un commento che includa le informazioni di contatto dell'autore e le istruzioni di supporto
  • Non ci dovrebbero essere elementi spezzati
  • I pulsanti del modulo devono essere collegati saldamente alle rispettive forme
  • La tua pagina dovrebbe avere una versione mobile attivata

Download del tuo modello

Per poter utilizzare, condividere o vendere il modello finito, è necessario scaricarlo. Per scaricare, fare clic su più opzioni pulsante trovato sul cruscotto e selezionare Pagina di download.

Il file avrà un'estensione ".instapage". Una volta scaricato il file, sentiti libero di rinominarlo come necessario, ma lascia intatta l'estensione ".instapage".

Imballare più layout insieme

Vuoi impacchettare più layout dello stesso modello? Per favore, evita di utilizzare le varianti di pagina per imballare più layout insieme.

Invece, crea ciascun layout come una pagina separata e scarica ciascun layout separatamente. Ciò garantirà un collegamento di anteprima funzionale per ogni layout e ridurrà la confusione dal downloader, poiché le varianti vengono utilizzate specificamente per i test A / B.

Conclusione

Speriamo che questo ti abbia dato un'introduzione approfondita a Instapage e alla creazione di modelli Instapage per la vendita su marketplace come ThemeForest. C'è ancora molto da imparare, quindi, se hai qualche domanda non esitare a chiedere via nei commenti.

Inoltre, controlla la competizione di Instapage Most Wanted di Envato in questo momento!