Come creare una pagina di destinazione HTML ad alta conversione

Ci sono poche cose più facili che accedere a tutte le informazioni del mondo. Tutto ciò che serve è fare clic su un annuncio, un collegamento o copiare un indirizzo web nel browser e probabilmente troverai tutto ciò che stavi cercando e altro ancora.

Non è stato sempre così facile, però.

L'anno era il 1989. Tim Berners-Lee lavorava al CERN di Ginevra, in Svizzera, dove propose un progetto ipertestuale globale, un progetto che divenne noto come World Wide Web.

Per due anni Tim ha lavorato al design, un design che includeva le specifiche di HTML, URI e HTTP. Nell'ottobre del 1990, il programma World Wide Web era disponibile al CERN e nell'estate del 1991 divenne disponibile per tutti nel mondo.

Il primo sito Web al mondo è stato attivato il 6 agosto 1991 e il suo scopo era fornire informazioni su come gli utenti potevano configurare un server Web e creare le proprie pagine Web.

Quel sito web è ancora attivo e ha questo aspetto:

Per gli standard moderni, la pagina non è appariscente o accattivante, non ha collegamenti di navigazione, nessun contenuto multimediale e nessuna struttura reale. Inoltre, ha richiesto molto tempo e la codifica HTML per essere completata.

Il mondo è inevitabilmente cambiato per questo. Ciò che non è cambiato è che ci vuole ancora un bel po' di tempo per creare una pagina web, incluse le pagine di destinazione post clic, da zero.

Questo rappresenta un po' un problema per i marketer che non parlano le lingue del codice.

Sì, sono le lingue : plurale.

Per creare landing page post clic, da solo, da zero, devi conoscere HTML e CSS.

Approfondiamo cosa sono HTML e CSS e quale ruolo svolgono nella creazione di landing page post-clic.

Che cos'è la pagina di destinazione HTML?

HTML (Hyper Text Markup Language) viene utilizzato per posizionare testi, immagini e altri elementi in una pagina Web, aiutando a definire il layout della pagina.

L'HTML è costituito da tag di markup e questi tag sono parole chiave racchiuse tra parentesi angolari.

Per dimostrare, l'immagine qui sotto è un esempio molto semplice di come i tag HTML determinano come apparirà la tua pagina:

Esistono diversi tag HTML per decidere il layout dei titoli, il logo del marchio, le immagini, i punti elenco, gli elenchi numerati, ecc. Durante la creazione di una pagina di destinazione HTML, è necessario inserire il codice:

1. Dove sarà il tuo titolo
2. La posizione della copia
3. Come elencare i vantaggi del tuo servizio
4. Cosa dovrebbe dire la tua copia del pulsante CTA e dove dovrebbe essere posizionato il pulsante

Ecco alcuni tag html comuni per gli elementi della pagina:

Ogni singolo elemento della pagina di destinazione post clic deve essere scritto con il rispettivo tag HTML.

Quando hai finito, il tuo lavoro HTML sarà simile a questo:

Sembra solo un mucchio di righe, parole e caratteri, vero? Quando in realtà, fa tutto parte di un grande puzzle che genera questa pagina web:

La tua pagina di destinazione post clic pubblicata avrà un bell'aspetto solo se hai inserito tutti i tag HTML correttamente nelle posizioni corrette. L'HTML è attualmente utilizzato nella sua quinta versione ed è noto come HTML5: l'ultima versione numerata, non ci sarà una versione 6.

HTML5 include nuovi elementi come:

• Elementi semantici, come intestazione, piè di pagina e sezione
• Attributi di controllo del modulo, ad esempio data e ora
• Elementi grafici, svg e canvas
• Elementi multimediali, audio e video

Per saperne di più, prova i corsi Codeacademy e Treehouse se sei interessato a imparare come creare una semplice landing page HTML post-clic.

Cos'è il CSS?

I CSS (Cascading Style Sheets) sono i fogli che descrivono come gli elementi HTML vengono visualizzati nella pagina web.

La parte "cascading" del CSS consente alle modifiche apportate su un foglio di stile di primo livello di propagarsi a cascata in tutta la pagina web. Ciò ti fa risparmiare tempo e ti consente di apportare modifiche importanti all'aspetto della tua pagina senza passare attraverso ogni singolo foglio di stile.

L'HTML è stato creato per descrivere il contenuto di una pagina. Il CSS, invece, è stato creato dal World Wide Web Consortium per definire lo stile della pagina, come il carattere e il colore della copia della pagina di destinazione post clic.

Ecco come può apparire un esempio CSS di carattere e colore:

Per l'opzione della pagina di destinazione post clic "fai-da-te codificata", è necessario combinare HTML e CSS per creare una pagina degna di generare lead.

Vediamo come si fa.

Come creare da soli una semplice landing page HTML post clic

Inizia aprendo un editor di testo: usa Blocco note per Windows e TextEdit per Mac. Non utilizzare elaboratori di testi come MS Office o OpenOffice perché questi programmi producono file che un browser Web non può leggere.

Per la codifica HTML e CSS è necessario iniziare con file di testo normale.

Digita il codice HTML in questo modo in un editor di testo:

Ora aggiungiamo alcuni colori a questo testo con l'aiuto dei CSS. Vai al file HTML e aggiungi il codice in rosso nella parte "head" del file:

Questo foglio di stile determina il colore della copia del corpo (viola) e il colore di sfondo (giallo verdastro). Ricorda di inserire i codici colore corretti nel foglio di stile, altrimenti la tua pagina finale non risulterà come volevi.

Ecco come apparirà la tua pagina:

Successivamente, è necessario aggiungere i caratteri. Per questo aggiungi le seguenti righe nel file HTML:

Ecco come appare la tua pagina dopo aver aggiunto quelle sezioni di codice:

Ora, ricorda, gli esempi sopra sono molto semplici e molto brevi. Una pagina di destinazione post clic ottimizzata sarebbe più dettagliata, con immagini, video, CTA, modulo e sarebbe anche più lunga. Immagina quanto tempo ci vorrebbe per codificare tutti quegli elementi nel modo tradizionale...

Pronto a personalizzare il codice per le tue pagine?

E se ti dicessimo che esiste un altro, molto più semplice, modo per creare la tua pagina di destinazione post clic. È ancora fai-da-te, ma non richiede di stressarti su numerose righe di codice in un editor di testo facendoti pensare "ho chiuso tutti i miei tag?"

Crea le tue pagine con Instagram

Instapage elimina la necessità di uno sviluppatore e un designer, il che consente ai marketer che non sono programmatori di creare pagine dedicate senza problemi in pochi minuti.

Abbiamo mostrato come creare una pagina con HTML e CSS, ora vediamo come creare una landing page HTML post clic con Instapage, senza bisogno di codifica.

Passo 1:

Crea un account su Instapage:

Passo 2:

Fai clic su "Crea nuova pagina:"

Passaggio 3:

Scegli come vuoi creare la tua pagina. Sia che tu voglia scegliere un modello pre-ottimizzato, scansionare una pagina esistente o caricare un file .instapage.

Iniziamo con l'opzione modello:

Passaggio 4:

Arrivi alla galleria dei modelli e puoi scegliere il modello più appropriato che meglio si adatta alla tua offerta. Per semplificare le cose, i modelli sono classificati in base al tipo di pagina di destinazione post clic nella parte superiore:

Passaggio 5:

Visualizza l'anteprima del modello scelto, fai clic su "modifica" e assegna un nome alla pagina:

Passaggio 6:

Personalizza la pagina come preferisci selezionando un elemento e quindi facendo clic su "modifica:"

Passaggio 7:

Passa dalla visualizzazione mobile a quella desktop con un semplice clic:

Passaggio 8:

Dopo aver apportato le modifiche desiderate, fai clic su "anteprima" per assicurarti che tutto sia corretto:

Passaggio 9:

Quando sei soddisfatto della tua pagina, fai clic su "pubblica" e scegli il tuo dominio di pubblicazione:

In pochi passaggi, puoi avere una landing page ottimizzata post clic live sul web e pronta per la conversione senza scrivere un solo pezzo di codice! Instapage gestisce tutto per te senza codice.

Tuttavia, se desideri ancora aggiungere tocchi personali, ti offriamo la possibilità di utilizzare HTML, Javascript e CSS personalizzati in modo da poter aggiungere il codice di monitoraggio degli annunci di Facebook o gli annunci di Google sulla tua pagina, ad esempio. Tutto quello che devi fare è incollare il codice necessario nella sezione appropriata e pubblicare le modifiche alla versione live della tua pagina.

Puoi anche incorporare widget HTML (video di YouTube, widget di social media, moduli di intenti di uscita, ecc.) Sulla tua pagina aggiungendo i codici HTML nel menu "impostazioni".

Crea bellissime pagine di destinazione post clic senza codice

Instapage elimina il fastidio dal processo di creazione della pagina di destinazione post-clic. Non c'è bisogno di fissare righe di codice, stressarsi per ottenere i codici colore corretti o perdere una parentesi in un tag HTML. Piuttosto, puoi focalizzare la tua attenzione su ogni elemento della pagina e perfezionarli per massimizzare i tuoi tassi di conversione.

La creazione di landing page post clic non è mai stata così facile, fino ad ora. Quindi, registrati oggi per una demo di Instapage Enterprise.