Qual è il modo migliore per creare una landing page da solo? Come creare tu stesso una landing page: istruzioni passo passo

Creare una landing page (landing page) o una landing page, landing page, semplifica il più possibile il percorso dell’utente verso l’obiettivo desiderato. Tale pagina è progettata per influenzare gli istinti fondamentali di una persona, per incoraggiarla a compiere azioni mirate: fare clic, chiamare, ordinare, acquistare “proprio adesso”.

Le pagine di destinazione sono più adatte per condurre campagne pubblicitarie per un servizio o un'offerta specifica con un prezzo unico (basso), nonché per attirare il pubblico target dai sistemi di pubblicità contestuale Google AdWords, Yandex.Direct, social network e newsletter via email:

Cos'è la pagina di destinazione?

La pagina di destinazione è una pagina separata utilizzata per:

• vendita di un prodotto o servizio specifico;
• creazione di una base di abbonamenti.

Dopo aver deciso di creare una landing page, è necessario utilizzare i trigger di influenza necessari che spingano l'utente a prendere rapidamente una decisione (acquistare un prodotto, inserire informazioni per ricevere uno sconto, seguire un corso, webinar, ecc.).

Dal punto di vista dell’utente, una landing page è la pagina sulla quale egli si ritrova dopo aver cliccato su un informatore, un banner, un post pubblicitario, ecc. Una landing page è fondamentalmente diversa da un negozio online. Per vendere un prodotto e condurre una campagna pubblicitaria, crei la tua pagina e utilizzi diversi trigger di influenza.

Tipi di pagine di destinazione:

• Autonomo. Questo è il tipo più comune di pagina di destinazione. Il compito principale è invogliare l'utente all'acquisto o a compiere un'azione specifica consigliata dalla pagina;
• Microsito. Un sito Web piccolo, spesso separato, composto da non più di 5 pagine contenenti informazioni su un prodotto o servizio;
• Sito principale. Per una pagina di destinazione, utilizza una o più pagine di risorse;
• Sito Lando. Una risorsa composta interamente da pagine di destinazione indipendenti:

Tipi di pagine di destinazione

• Pubblicità. Contenere una grande quantità di informazioni testuali, grafiche e video sul servizio;
• Virale. L'annuncio è mascherato da articolo o gioco. Spesso si tratta di email, social network, chat;
• Pagine lead mirate. Progettati per raccogliere informazioni sul pubblico di destinazione, di norma contengono un minimo di informazioni.

Una landing page ben progettata può aumentare la conversione dei visitatori in veri acquirenti.

Perché hai bisogno di una pagina di destinazione?

Lo scopo principale di una landing page è la vendita. La pagina di destinazione contiene testo di vendita, una presentazione di un prodotto o servizio e un invito all'azione. La pagina di destinazione è uno strumento eccellente per avviare rapidamente un servizio o un prodotto su Internet. Le pagine di destinazione consentono di raccogliere abbonati e richieste di servizi, ecc.

Se presenti correttamente il tuo prodotto/servizio, fai una buona presentazione, indicando i punti di forza, e imposti anche un flusso di traffico (pubblicità sui social network, pubblicità contestuale, ecc.), tutto ciò che devi fare è raccogliere le richieste dei tuoi clienti e vendere loro il prodotto/servizio pubblicizzato.

Vantaggi dell'utilizzo della pagina di destinazione

La destinazione, rispetto alle normali pagine di risorse che offrono servizi o prodotti, presenta numerosi vantaggi:

• Targeting per un pubblico specifico. La landing page non offre tante decisioni che richiedono all'utente di scegliere, ma un'offerta unica a cui è difficile resistere;
• Alta conversione. Secondo le statistiche, l’utilizzo delle landing page per scopi pubblicitari può aumentare la conversione del 10-15%;
• Informazioni complete sul prodotto/servizio offerto, ma senza transizioni e collegamenti aggiuntivi;
• La possibilità di raccogliere i contatti dei visitatori e ricostituire il database di potenziali clienti, ai quali è possibile successivamente inviare informazioni sulle prossime promozioni/concorsi a premi;
• Basso costo per la creazione di una landing page. Anche gli imprenditori alle prime armi possono permettersi di creare una landing page, testando così nicchie di prodotto per iniziare a vendere su Internet:

Dove e come vengono utilizzate le pagine di destinazione?

Puoi rendere una pagina di destinazione la pagina interna o principale di una risorsa aziendale, un sito Web di una pagina o una pagina su un social network. Recentemente è diventato sempre più popolare (pagine offline) per i prodotti chiave, in un momento in cui l'azienda dispone già di un sito Web aziendale. Questo è ciò che fanno le società legali e mediche, le banche, gli operatori di telefonia mobile e molti altri.

Dove vengono utilizzate le pagine di destinazione?

• Nelle campagne pubblicitarie che utilizzano pubblicità contestuale con pay-to-click (PPC) in Yandex.Direct, Google AdWords, Begun. In questo caso, il traffico viene reindirizzato a pagine di destinazione ottimizzate per le query chiave;
• Nelle campagne pubblicitarie su banner, a condizione che il materiale grafico sia inserito su risorse tematiche pensate per il pubblico di destinazione. Ad esempio, sui portali di notizie nel segmento per specialisti nel campo delle tecnologie IT vengono inseriti banner pubblicitari per nuovi prodotti nel campo dell'elettronica;
• Nelle newsletter di lettere informative e di marketing contenenti un collegamento alla pagina di destinazione. Ad esempio, newsletter per un negozio online che tengono conto degli acquisti precedenti dell’utente;
• Conduzione di campagne blog in cui l'utente viene reindirizzato alla pagina di destinazione della risorsa, con il proprietario della quale il blogger ha precedentemente stipulato un accordo di partnership per il posizionamento di banner pubblicitari, articoli postali e PR;
• Campagne sui social network (VKontakte, Facebook, Twitter, ecc.) o sui siti di hosting di media popolari (ad esempio YouTube, Flickr, ecc.). Gli utenti vengono reindirizzati alla pagina di destinazione dell'inserzionista che ha un accordo per inserire materiale pubblicitario con la risorsa multimediale selezionata:

Modi di base per creare una pagina di destinazione

• Modelli e generatori di pagine di destinazione gratuiti. Al giorno d'oggi ci sono molte opzioni su Internet per modelli e designer gratuiti che ti consentono di generare una landing page. Il servizio più popolare. Questa è un'ottima opzione per le aziende con un budget limitato, ma con uno staff di specialisti esperti in marketing e design;
• Contattare gli specialisti. Puoi ordinare il testo per una landing page da un copywriter, lo sviluppo del design da un designer e l'integrazione con il motore da un programmatore. Allo stesso tempo, l'azienda deve avere nello staff un marketer che monitorerà il progetto in tutte le sue fasi. I vantaggi di questo metodo includono costi relativamente bassi e risultati abbastanza elevati, gli svantaggi sono il rischio di errore nella scelta degli specialisti;
• Esternalizzazione dell'agenzia. Questo metodo di creazione di una landing page prevede il contatto con un'agenzia che si occuperà dell'analisi dei concorrenti, selezionerà un concept, svilupperà una strategia per la campagna pubblicitaria, risolverà il problema dell'integrazione con il motore e lancerà il progetto. Tutto ciò che ti viene richiesto è un brief per la creazione di una landing page e l'agenzia si occuperà dello sviluppo di una landing page chiavi in ​​mano. I vantaggi di questo metodo includono l'elevata efficienza e il risparmio di tempo, gli svantaggi sono i costi più elevati rispetto alle opzioni precedenti;
• Mantenere uno staff di specialisti che si occuperà... Questo è il modo più costoso ed efficace. Il tuo team, composto da designer, copywriter, marketer e programmatore di layout, ti consentirà di promuovere pienamente il tuo prodotto/servizio sul mercato.

È possibile creare da soli una Landing Page?

Puoi creare tu stesso una landing page, ma dovrai possedere determinate competenze nello sviluppo web, nell'analisi e nella progettazione. Se non hai tale esperienza, utilizza servizi che offrono modelli già pronti in cui devi solo compilare il testo e configurare il dominio e l'hosting.

Creare tu stesso una landing page ti farà risparmiare tempo e denaro. Su Internet è possibile trovare risorse con modelli di vari argomenti, dotati di istruzioni per un'installazione rapida e software che consente la modifica. Il costo di tali kit può essere molto inferiore al prezzo di sviluppo di una landing page in un'agenzia specializzata:

È possibile creare una Landing Page gratuitamente?

Poiché l'interesse per le pagine di destinazione è in costante crescita, gli sviluppatori offrono sempre più strumenti per creare pagine di destinazione basate su modelli. Ecco un elenco dei metodi e dei servizi più popolari:

• Puoi creare una landing page gratuita se ti registri su Wix;
• Puoi creare una landing page utilizzando Adobe Photoshop;

La terza opzione è più adatta ai principianti che hanno un minimo di conoscenze e non vogliono perdere tempo ad apprendere complessi sistemi di programmazione web.

Ottimizzazione della pagina di destinazione

Creare una landing page è metà dell’opera, è importante ottimizzarla correttamente. I siti Web di una pagina presentano uno svantaggio, ma piuttosto significativo: è abbastanza difficile per i motori di ricerca trovarli. Le risorse multipagina hanno titoli univoci, collegamenti adeguati e una struttura complessa che indica il peso delle pagine, ecc.

L'architettura di un sito di una pagina non consente di effettuare un'ottimizzazione interna di alta qualità nel senso classico, per “adattare” il sito alle esigenze dei motori di ricerca. Una soluzione di Google ci ha permesso di eliminare questo problema: layout utilizzando JavaScript e il metodo PushState.

Per ottimizzare la tua landing page, dovresti fare quanto segue:

• suddividere la landing page in blocchi;
• Ogni blocco deve ricevere il proprio indicatore univoco, titolo, descrizione e titolo, URL.

Cioè, ogni blocco deve avere le stesse proprietà di ogni singola pagina del sito, mentre il robot di ricerca percepirà il tuo sito come diverse pagine uniche. I visitatori della landing page potrebbero non accorgersi di questa decisione; solo i più attenti noteranno che scorrendo la pagina, l'URL e il titolo cambiano. Per realizzare un progetto del genere, avrai bisogno di determinate conoscenze nel campo del SEO e del layout con JavaScript.

Se hai solo bisogno di informazioni sui servizi con cui puoi creare una landing page, vai direttamente al passaggio 5: scegli uno strumento di layout. Se vuoi comprendere l'algoritmo per creare una landing page dalla A alla Z, leggi l'intero articolo.

Come creare una landing page: istruzioni passo passo in 9 fasiFase 1. Preparazione Scopo della landing page

Innanzitutto determiniamo lo scopo della landing page, cosa vogliamo ricevere dai visitatori della pagina. In genere questa è una delle tre cose:

1. Vendita di beni/servizi (esempio: vendere miele, vendere servizi di progettazione di loghi, vendere un corso online);
2. Ricevi un contatto (esempio: iscrizione alla newsletter, richiesta di misurazione);
3. Informazioni (esempio: invito ad un evento offline gratuito, pagina promo di un negozio con promozioni).

Determiniamo il pubblico target e ciò che è importante per loro

In questa fase è importante per noi capire a chi è rivolto la nostra offerta, quali sofferenze hanno, quali desideri, quali paure e cosa queste persone vogliono ricevere. È importante comprendere tutto questo affinché gli elementi del sito web, come testo e design, siano realizzati concentrandosi sul pubblico di destinazione (target audience).

Come determinare il pubblico di destinazione?

• Analizza quei clienti con cui hai già lavorato o stai attualmente lavorando;
• Chiedi ai clienti cosa è importante per loro. Sì, esatto, basta chiamare o scrivere, preparare in anticipo una lista di domande;
• Ricorda, o meglio ancora, scrivi le domande che ti vengono poste più spesso sul tuo prodotto;
• Leggi siti/forum tematici, scopri cosa preoccupa i tuoi clienti.

Osservare i concorrenti (benchmarking)

Dopo aver annotato tutti i tuoi pensieri e le tue idee riguardo alla futura landing page, è il momento di iniziare ad analizzare i concorrenti (benchmarking). Se conosci già i tuoi concorrenti, bene; se non ancora, cerca sui motori di ricerca utilizzando le parole chiave della tua nicchia.

Lo scopo dell'analisi è trovare e vedere cosa i concorrenti stanno facendo male e non ripetere i propri errori, e cosa stanno facendo bene, per esaminare idee, blocchi mancanti, soluzioni progettuali interessanti. Questo non significa che devi solo copiarli, ovviamente non è necessario farlo, salvali per te, poi nella fase di scrittura del testo e di sviluppo del design, adattali al tuo progetto.

Come faccio: creo una cartella separata chiamata "Idee" e faccio screenshot di blocchi interessanti.

Fase 2. Scrittura del testo per la landing page

Per molti (me compreso), scrivere un testo è la fase di sviluppo più difficile, quindi personalmente cerco sempre di delegare questa fase a un copywriter.

Metti su carta il caos che hai in testa

Semplicemente, senza pensare alla sequenza, trasferisci su carta tutti i pensieri e le idee per il futuro. Scrivi tutto ciò di cui vuoi parlare. Quando scrivi un elenco di pensieri di questo tipo, oltre a esaminare le idee dei concorrenti, il passo successivo è combinare tutto questo e comporre i blocchi e la struttura della pagina di destinazione.

Realizzare blocchi di atterraggio

Una landing page è composta da determinati blocchi; non puoi semplicemente scrivere un testo solido come un articolo e poi pubblicarlo. Sarà terribilmente imbarazzante da leggere.

Ecco l'elenco principale dei blocchi che si possono trovare sul 90% delle landing page:

Prima schermata con USP (proposta di vendita unica)

Informativa sul prodotto (Descrizione del servizio o del prodotto)

Informazioni sull'autore/azienda

Recensioni

Casi (storie di successo)

Modulo/invito all'azione

FAQ (risposte alle domande più frequenti)

Contatti/footer del sito

Quali altri blocchi potrebbero esserci sul sito:

• I fatti in numeri
• Benefici (vantaggi)
• video
• Portafoglio
• Per chi
• Fasi della cooperazione (o Come effettuare un ordine, Come lasciare una richiesta)
• Tariffe e prezzi
• Partner
• Galleria
• Programma
• Squadra
• Certificati, diplomi, lettere di ringraziamento
• Documentazione
• Timer

Quando la struttura della landing page è pronta, iniziamo a scrivere il testo. Puoi farlo da solo o affidarlo a un copywriter.

Mettiamo la cosa principale all'inizio. Non è necessario scrivere di te all'inizio del sito; mostra prima il tuo prodotto.

Sostituisci le parole generiche con i fatti. Non è necessario convincere i visitatori di nulla, lasciamo loro questo diritto. (Esempio: non scrivete che siete leader di mercato di cui ci si può fidare, mostrate recensioni di aziende a cui avete fornito servizi e sono rimaste soddisfatte, inoltre allegate la recensione originale per non essere infondata).

Funziona particolarmente bene sulla prima schermata e USP. Dopo che un visitatore arriva sulla tua pagina di destinazione, hai tre secondi per attirare la sua attenzione. Se non hai tempo, la persona chiuderà la pagina e continuerà a navigare. La prima schermata dovrebbe essere il più pertinente possibile alla query attraverso la quale il visitatore è arrivato al sito. (Esempio: se una persona cerca "Contabilità per un imprenditore individuale", non è necessario mostrare una pagina di destinazione con l'intestazione "Contabilità per una LLC").

USP (proposta di vendita unica). In poche parole, il titolo principale e la descrizione, che dovrebbero raccontare in modo sintetico di cosa tratta questa pagina di destinazione. Puoi creare un USP utilizzando la tecnologia 4U.

Più corto è, meglio è. Prova a scrivere blocchi di testo quanto più brevi possibile. Nessuno legge testi lunghi, oggi le persone hanno sempre poco tempo e di questo bisogna tenerne conto. Se hai ancora bisogno di fornire molte informazioni, suddividile in paragrafi e blocchi.

Più titoli. I paragrafi di testo non dovrebbero essere scritti così, senza titolo. La maggior parte dei visitatori, quando visita un sito web, innanzitutto scorre il sito cercando di valutare se ci è arrivato oppure no. E qui sono i titoli che giocano un ruolo importante, perché esaminerà il sito e valuterà il sito proprio in base ad essi.

Non vuoi comporre tu stesso il testo? Trova un copywriter che lo farà per te.

Dove cercare un copywriter

Scambio di copywriting ContentMonster.ru

Scambio di copywriting Etxt.biz

Aziende private o specialisti. Puoi cercarli tramite una ricerca o sui social network (VK, Facebook, Instagram).

Puoi rivolgerti a un copywriter non solo per sviluppare il testo da zero. Ad esempio, puoi contattarci con un elenco di blocchi già pronto, con schizzi iniziali o anche con testo già compilato, che il copywriter “ravviverà”, renderà più interessante e correggerà gli errori.

Fase 3. Realizzazione di un prototipo

Prima della fase di progettazione è importante realizzare un prototipo, lasciate che vi spieghi perché. Ci sono diversi motivi:

Senza un prototipo passerai più tempo, stranamente :) All'inizio della mia carriera, dopo aver scritto il testo, ho subito realizzato il design. Pensavo che in questo modo avrei risparmiato tempo, ma in realtà si è scoperto che tutto ha richiesto ancora più tempo, perché non è conveniente inventare subito elementi di design senza cornice.

Problemi con il cliente se crei una landing page su ordinazione. Tutti avevano questa situazione. Hai approvato il testo e hai subito iniziato a realizzare il disegno, hai passato molto tempo, lo hai inviato al cliente e lui dice che è tutto sbagliato e deve essere rifatto, il testo invertito, ecc. Questo è molto più difficile da fare quando il design è già pronto rispetto a quando hai solo un prototipo composto da testo e cerchi.

Un prototipo può essere paragonato allo schizzo che fai prima di dipingere. Poche persone possono prendere i colori e dipingere immediatamente un quadro. Quindi qui, prima facciamo uno schizzo, vediamo come risulta approssimativamente, quali blocchi possono essere spostati, modificati, aggiunti o rimossi testo, ecc.

Un esempio tratto dal mio caso di prototipo e progetto realizzato utilizzando questo prototipo.

Esempio di prototipo

Esempio di progettazione del prototipo

Sul prototipo indichiamo:

• Posizionamento del testo, evidenziazione dei titoli;
• Dove verranno posizionati gli elementi grafici (immagini, icone)?
• Dove saranno i pulsanti?
• Su quale blocco lo sfondo sarà chiaro e su quale blocco sarà scuro.

Servizi di prototipazione:

• Photoshop. Lo faccio in Photoshop. Dopo aver approvato il prototipo con il cliente, è conveniente realizzare qui un progetto basato sul prototipo.
• Servizio Moqups. Un servizio speciale con elementi già pronti, basta trascinare e rilasciare e aggiungere il testo.
• Su carta. Puoi abbozzare un prototipo a mano se la pagina di destinazione non è complicata e non vuoi preoccuparti troppo.

Inizio sempre un prototipo su carta, per me è più conveniente. Poi lo trasferisco su Photoshop.

Utilizza la griglia Bootstrap

Ti consiglio inoltre di realizzare il disegno su una griglia in modo che in seguito possa essere facilmente adattato ai diversi dispositivi. Se scegli uno strumento di progettazione per il layout, in cui il design stesso si adatta a diversi schermi (ne parleremo più avanti sugli strumenti di layout) e non utilizza una versione mobile separata del sito, allora il design deve essere sviluppato su una griglia.

Il modello di griglia di Photoshop che utilizzo nel mio lavoro, puoi.

Fase 4. Realizzazione del progetto

Tutti gli elementi di progettazione della pagina di destinazione possono essere divisi in tre parti, questa è la selezione:

Font

Colori

Grafici (foto, icone, immagini)

Ogni elemento crea un certo stato d'animo; per noi è importante scegliere una tale combinazione di tutti gli elementi in modo che il visitatore sviluppi il giusto atteggiamento di fiducia nei confronti della nostra azienda e del nostro prodotto.

Ad esempio: su un sito che offre servizi funebri, difficilmente saranno appropriati colori vivaci e una ragazza dal sorriso radioso con la scritta a grandi lettere PROMOZIONE!. O un sito sull'organizzazione delle vacanze in colori grigi, sbiaditi, con pulsanti neri e un carattere Slab Serif, dopo aver visto il quale vuoi cadere in depressione e non ordinare una vacanza per tuo figlio. Gli esempi sono, ovviamente, esagerati; difficilmente li vedrai nella vita (anche se è possibile), ma penso che tu abbia capito il concetto.

Discutiamo ogni elemento in modo più dettagliato.

Font

Il testo è la base di qualsiasi sito Web, quindi il carattere non è meno importante del colore o della grafica. Un font può anche creare l’atmosfera; può essere leggero o brutale, evocare una sensazione di dispendiosità o semplicità, ecc.

In base al tuo argomento e all’emozione che vuoi suscitare nei visitatori.

Se non vuoi preoccuparti di inventare combinazioni, prendi le opzioni neutre già pronte che ho preparato per te. Si adatteranno a qualsiasi tema. Questo:

• Roboto
• Aperto senza
• Pt sans

Scegline uno o due e mescola.

Per esempio:

Titolo - Roboto (grassetto)
Testo - Roboto (Luce)

Titolo - Open sans (grassetto)
Testo - Roboto (Luce)

Intestazione - Pt sans (regolare)
Testo - Aperto sans (Leggero)

Dove posso trovare i caratteri?

Esistono font gratuiti e a pagamento. Nelle prime fasi ti consiglio di utilizzare i font gratuiti di Google Fonts. Ci sono buone opzioni lì e ci sono anche quelle che ho descritto sopra.

Perché consiglio i caratteri Google?

Perché la loro licenza ti consente di utilizzare i caratteri sia per te stesso che per scopi commerciali. Se decidi di acquistare il font che ti piace dagli sviluppatori o in appositi negozi online, allora ok, non ci sono problemi, ma se prevedi di scaricare font gratuitamente da siti di terze parti, allora è importante controllare la licenza, perché puoi violare il copyright se usi un font a pagamento, ma non lo hai acquistato.

Se stai creando un sito web per te stesso, sostituisci te stesso; se lo stai realizzando per un cliente, sostituisci il cliente.

ColoreCome scegliere la giusta combinazione di colori per un sito web?

I colori bianco, grigio e nero sono già inclusi nel set, vengono sempre utilizzati, ad esempio il carattere è bianco, grigio o nero, lo sfondo del sito è bianco, grigio o nero. Qualunque cosa tu dica, questi colori saranno già utilizzati nella pagina di destinazione. Si chiamano acromatici (non contengono sfumature di colore). Non resta che selezionare i colori cromatici (tonalità di colore).

Tipicamente, un sito web utilizza uno, due o tre colori cromatici. Ti consiglio di sceglierne uno o al massimo due, altrimenti c'è il rischio che non riesca ad abbinarli armoniosamente e il sito sembrerà brutto e disarmonico.

Guarda un video interessante su questo argomento

Devi anche selezionarli in base al tuo argomento.

Esempi di umore evocato da ciascun colore:

Il materiale sui colori è tratto da qui.

Grafica (foto, icone, immagini)

La tendenza recente è che è meglio utilizzare quante più foto possibile piuttosto che utilizzare immagini di stock o gratuite da Internet. Ciò è accaduto perché le foto d’archivio sono già diventate noiose; donne identiche e sorridenti in un call center o traslocatori felici e atletici in tuta blu evocano un sentimento, come minimo, di sfiducia.

A dire il vero ho peccato anche con questo prima, ma ora chiedo (prego) ai clienti di mandare quante più loro foto “dal vivo” di prodotti, personale, locali, ecc.

È vero, è meglio scattare una foto con il telefono, anche se di qualità inferiore, ma il cliente capirà che non ti nascondi dietro la maschera di un'immagine presa da Internet, stai mostrando il tuo volto, un altro punto a favore confida nella tua persona.

Certo, ci sono argomenti in cui non c'è niente di speciale da mostrare, quindi puoi già ricorrere alle foto d'archivio. Consiglio comunque di acquistare foto lì piuttosto che cercare quelle gratuite nella ricerca, perché vengono utilizzate più spesso su altri siti.

Qualcuno dirà: “Ilya, le foto d’archivio sembrano un aeroplano!” - esiste una cosa del genere :) C'è un modo per scaricare immagini per un dollaro, riguardo al servizio. Bene, se stai realizzando un progetto per una grande azienda commerciale, allora è meglio preventivare questo importo e acquistare immagini da uno stock fotografico ufficiale, sempre per proteggerti.

• Servizio ShopDiz.pro: scarica immagini da stock per 0,5-1 dollaro.
• Il servizio ShutterStock è lo stock più popolare con un gran numero di foto, vettori e video.

Quando scegli le immagini, concentrati anche sull'argomento e su quali emozioni vuoi suscitare nei clienti. Fiducia, gioia, affidabilità, felicità, ecc.

Come trovare idee di design per i blocchi? Non esiste una regola universale qui. L'importante è rimuovere tutto ciò che ti sembra non necessario, abbreviare il testo, utilizzare la grafica con moderazione e non sovraccaricarla. Guarda esempi di buone pagine di destinazione, prendi appunti per te stesso, fai screenshot dei blocchi che ti piacciono, in modo da poter poi fare qualcosa di simile nei tuoi progetti.

Fase 5. Seleziona uno strumento di layout

Gli strumenti di layout oggi disponibili sono tantissimi, parlerò solo di quelli che ho utilizzato io stesso e che sono più convenienti per me e per i clienti.

1. CMS WordPress + WPBakery o generatore di Elementor

Installi il CMS WordPress, installi il modello, il builder WPBackery è a pagamento, ma viene fornito gratuitamente con il 99% dei modelli che ho. C'è un secondo designer conveniente, questo è Elementor, è gratuito, ma per espandere le sue funzionalità, acquista la versione Pro di Elementor. Per me entrambi i designer sono convenienti, non posso consigliarne uno, ognuno ha i suoi vantaggi. Guarda le descrizioni e le opzioni dei siti con entrambi i costruttori e scegli quello appropriato.

Utilizzo questa opzione principalmente se, oltre alla landing page, abbiamo bisogno di pagine aggiuntive, ovvero stiamo realizzando un sito multipagina. Oppure, per non essere vincolati a nessuna piattaforma, il sito dovrebbe trovarsi sul tuo hosting personale.

Ad esempio, su questo blog utilizzo il modello The7, fornito con il plugin WPBakery.

Puoi selezionare un dominio sul servizio:

• Reg.ru - registrazione del dominio
• Timeweb.com: se acquisti immediatamente un dominio con hosting, è più redditizio acquistarlo qui

La registrazione del dominio è uguale per tutti i servizi:

Registrare un account sul servizio;

Seleziona un'opzione di dominio, il nome deve essere libero;

Seleziona una zona (ru, com, рф, ecc.);

Inserisci i dettagli del tuo passaporto, se ti stai registrando come persona giuridica, quindi i dettagli dell'azienda;

Pagare un dominio per un anno (o più anni contemporaneamente);

Pronto!

Per associare un dominio al designer o all'hosting selezionato è necessario registrare ns server nelle impostazioni del dominio. Il supporto ti aiuterà a far fronte a questo compito se non riesci a capirlo da solo.

Fase 7. Layout della pagina di destinazione

Quando il progetto è pronto e hai deciso il metodo di layout. Il prossimo passo è finire tutta questa faccenda.

Sarebbe impossibile parlare di tutti gli strumenti di layout in un unico articolo; dovrai studiarli tu stesso. Opzioni su come eseguire questa operazione:

- questo è il mio corso, che ho registrato utilizzando il template The7 e il costruttore WPBakery;

Tilda.Education - lezioni e webinar sul designer Tilda;

Canale WPlovers- il ragazzo sta registrando le lezioni su Elementor;

Base di conoscenza LPGenerator: risposte alle domande più frequenti sulla piattaforma LPGenerator.

Fase 8. Allega strumenti aggiuntiviChat online

La chat online aumenta la conversione, dimostrato! Se c'è qualcosa che una persona non capisce e ha bisogno di consigli. Non tutti chiameranno o invieranno un'e-mail al supporto, è più conveniente chiedere e ricevere immediatamente una risposta in una chat online. Puoi connetterti, ad esempio, Jivosite, lo uso io stesso, mi “porta” nuovi clienti. Puoi scrivermi nella chat “Ciao!”

CallbackMetrica

È importante tenere traccia degli indicatori del sito web; senza numeri sarai come un gattino cieco. È importante capire quante persone hanno visitato il sito, quante hanno lasciato una richiesta, quali indicatori generali ha il sito, puoi anche osservare il comportamento dei visitatori, come visualizzano il sito. Puoi installare Yandex Metrics e/o Google Analytics.

Retargeting

Se prevedi di pubblicare pubblicità sui social network, installa il codice per il social network desiderato sul tuo sito web. Questo codice raccoglierà un elenco di visitatori che hanno visitato la tua landing page (cioè interessati all'offerta) e che hanno un profilo sui social network. Successivamente potrai mostrare loro la tua pubblicità sul social network selezionato.

CRM

Il CRM ha il compito di garantire che non scompaia una sola applicazione dal sito, in modo che per ogni applicazione si capisca quale azione è necessario intraprendere (richiamare, inviare una richiesta, incontrarsi, ricordarsi di te tra 14 giorni, ecc.). Questo è vero se hai un flusso di clienti, ma se ne hai 2-3 al mese, penso che non tu abbia bisogno del CRM.

I CRM più popolari sono:

• AmoCRM (prezzo 499 - 1499 rubli/mese)
• Bitrix24 (prezzo, dal piano gratuito a 11.990 rubli/mese)
• Foglio di calcolo Google, Excel o carta e penna (se ne hai bisogno con un budget limitato)

Calcolatrice

Per alcune nicchie è importante utilizzare una calcolatrice per calcolare un servizio o un prodotto. Ciò non è solo conveniente, ma aumenta anche la conversione delle applicazioni. Perché è sempre interessante premere pulsanti, muovere le leve e vedere quale sarà il prezzo finale. E aumenta anche gli indicatori comportamentali per i motori di ricerca.

La calcolatrice può essere ordinata dagli sviluppatori, il che è costoso, oppure è possibile utilizzare un servizio già pronto. Esiste un servizio uCalc, che può essere adattato ai CMS più diffusi, ai designer o a un sito Web personalizzato. Costruisci la tua calcolatrice utilizzando un comodo costruttore e aggiungila al sito.

Raccolta di una base di abbonati

Se decidi di raccogliere i contatti dei clienti in un database di abbonati per inviare successivamente e-mail o messaggi SMS, devi utilizzare un servizio speciale. Potresti prendere in considerazione SendPulse, ho recentemente recensito questo servizio, cosa che puoi. SendPulse ha un piano gratuito con cui puoi testare il servizio. Se non è il suo, ci sono altre offerte sul mercato, ad esempio MailerLite, UniSender, JustClick, GetResponse, ecc.

Fase 9. Verifica

COSÌ! Tutto è predisposto, collegato, il sito è già su Internet, evviva, complimenti. Ora è il momento di verificarlo. Cosa devo controllare esattamente?

Controllo del testo

Assicurati di rileggere il testo o di contattare un correttore di bozze/copywriter per farlo. Controlliamo il testo per eventuali errori, blocchi copiati accidentalmente durante l'impaginazione, ecc. Niente rovina l'impressione di un'azienda seria più degli errori nel testo.

Verifica di adattabilità

Assicurati di controllare il layout della pagina di destinazione sul tablet e sul telefono. Si sta adattando tutto bene? Sì, a volte capita che non sia possibile disporre tutto alla perfezione, ma almeno dovrebbe essere leggibile e più o meno ordinato. Se un blocco non può essere adattato correttamente, è necessario creare due blocchi identici, nasconderne uno nella versione per computer e nascondere il secondo sui dispositivi mobili. E ogni blocco è conveniente da configurare per la risoluzione selezionata.

Testare i pulsanti

Controlla che a tutti i pulsanti sia associato il valore richiesto: ancora alla posizione desiderata, apri una finestra modale, vai a un'altra pagina, ecc.

Controllo dei moduli di domanda

Invia una richiesta di prova e verifica la consegnabilità dell'e-mail. Se hai effettuato l'integrazione con CRM, controlla che l'applicazione sia inclusa in CRM.

Esempi di pagine di destinazione

Puoi vedere esempi di landing page che ho sviluppato

Se hai bisogno di creare una landing page per ordinare, scrivi nei commenti o lascia una richiesta

RISULTATO

Se hai completato tutti i passaggi, congratulazioni, la tua landing page è pronta! Ora hai bisogno che la tua landing page ti porti clienti, per questo devi impostare la pubblicità, ma questa è una storia per un altro articolo. Spero che questo articolo ti sia stato utile e che tu sia riuscito a comprendere l'intero processo di sviluppo di una landing page chiavi in ​​mano di alta qualità. Per qualsiasi domanda potete scrivere nei commenti sotto questo post. Puoi anche scrivere i tuoi metodi e trucchi durante la creazione di un sito Web, sarà interessante leggere e apprendere i tuoi risultati :)

Caratteri Google

Scrivi i tuoi pensieri nei commenti. Ci vediamo in altri articoli!

Landing, landing, landing, landing page, sito di una pagina, lang page, one page, sito di vendita, landing page.

Tanti nomi, anche del tutto pervertiti, della stessa cosa. Il punto è che quasi qualunque cosa tu faccia, hai bisogno di un sito del genere.

Bene, poiché è necessario, risolviamo il problema della sua creazione. Creare tu stesso una landing page? Dopo questo articolo – nessuna domanda!

Inoltre, è corretto, significativo e centra l’obiettivo. Come si suol dire, puoi creare tu stesso la tua amata landing page di vendita.

Per ogni evenienza o fase 0

Di solito si dice che i siti di una pagina vengono creati per vendere o mettere online i contatti di una persona, ma in realtà qui la gamma di attività è molto più ampia:

Ricevere nuove richieste di beni/servizi;

Aumentare la notorietà del marchio;

Informare sulla fornitura di beni/servizi;

Fornire consulenza sui servizi;

Ricevere curriculum dai candidati;

Attrarre partner, rivenditori, rappresentanti;

Fornire l'accesso al servizio;

E così via.

Prima di iniziare a creare, devi ricordare che non puoi provare a vendere un prodotto e attirare rivenditori su un sito. E tutto perché si tratta di compiti diversi e questo significa pagine di destinazione diverse.

Importante. Prima di crearla, devi definire chiaramente lo scopo della tua landing page. E ricorda: dovrebbe esserci un obiettivo.

Lascia che ciò riduca la portata di potenziali persone, ma aumenti l'efficacia della pagina, che giustificherà tutto finanziariamente.

PASSO 1 – Dona o realizzalo tu stesso

A questo punto, devi determinare quale delle due opzioni di soluzione sceglierai.

Cosa fare, cosa fare

E saranno selezionati in base alle tue risorse finanziarie e di tempo. Diamo un'occhiata a ciascuno di essi con i loro pro e contro.

Costruttore

Una volta, un cliente ci ha scritto un reclamo dopo aver ricevuto il sito. La sua essenza era che non prendevamo molti soldi in modo giustificato.

Sembrava tutto molto strano, perché aveva già familiarizzato con tutto e firmato l'accordo. Ma non siamo un'azienda povera, quindi per noi è più facile lasciare andare il cliente in pace (non sempre) che provare a dimostrare qualcosa. Questo è quello che abbiamo fatto.

E tutto questo è successo perché ha trovato un designer di landing page su Internet e ha scoperto che poteva fare tutto da solo, dedicandoci letteralmente 5-6 ore e pagando non più di 1.000 rubli al mese.

Ma tu ed io capiamo che puoi assemblare una "macchina" da solo, ma quanto lontano andrà, quanto sarà individuale, quanto avrà l'attrezzatura tecnica corretta...

Abbiamo descritto in dettaglio tutte le fasi della creazione di una landing page con scadenze nell'articolo.

Professionisti :

• Economico. Così tanto. 500-1000 rubli al mese e sei il felice proprietario di un sito web di una pagina;
• Appena. Non devi pensare al layout, all'adattamento per i dispositivi mobili o al collegamento delle notifiche SMS sulle nuove applicazioni al tuo telefono. Tutto questo è già lì ed è stato fatto per tua comodità;
• Veloce. Puoi fare e configurare tutto molto velocemente. Inoltre, anche apportare modifiche non sarà difficile;
• Supporto tecnico. Avete una domanda? Ti risponderanno nel modo più rapido ed esauriente possibile. Un vantaggio enorme;
• Periodo di prova gratuito. Ora quasi tutti i designer di landing page hanno un periodo di prova gratuito di 14 giorni. Registrati e...

Una piccola verità della vita. “14 giorni di omaggi! Durante questo periodo guadagnerò soldi utilizzando una landing page sul costruttore del sito e ordinerò un bellissimo sito web da un’agenzia”, hanno pensato.

Dopo 14 giorni, essendo riusciti a malapena a sconfiggere il designer, avendo sbagliato tutto e non avendo ricevuto un solo ordine tramite il sito, si sono resi conto che i one-pager non funzionavano.

Aspetti negativi:

• Conoscenza. Devi sapere quali blocchi usare, la loro sequenza, ecc.

  Hai deciso di dare un'occhiata ai tuoi concorrenti? Grande! Ma come fai a sapere se i tuoi concorrenti hanno una landing page efficace e mostrano buone prestazioni?

• Progetto. Se lavori con un designer per la prima volta, non potrai guardare il design della landing page alla fine del lavoro senza lacrime.

  Anche se questa non è la prima opzione. Non aspettarti un design interessante che dirà "Wow!"

• Limitazione. Il numero di blocchi già pronti è limitato, così come la loro funzionalità. Anche le soluzioni di design non sono presentate nella gamma più ampia.

  Pertanto, se vuoi che un uccello voli qui quando una persona lascia una domanda (come se la sua domanda volasse via da te con i piccioni viaggiatori), puoi dimenticare un'idea del genere.

Personalmente, possiamo consigliare questo costruttore di pagine di destinazione. Di solito indirizziamo i clienti a coloro che hanno appena iniziato o stanno testando una nicchia.

Liberi professionisti

Andiamo dritti al punto e partiamo dall'esperienza. Trovare un libero professionista che crei da solo una landing page di vendita da zero e chiavi in ​​mano è IMPOSSIBILE. Beh è vero.

È possibile trovare singoli specialisti: un designer che creerà il design di un futuro sito web, o un programmatore che lo metterà insieme, ma non esiste un mostro che possa realizzare QUALITÀ un sito web dentro e fuori.

Per tutto il lavoro intendo anche persone come: internet marketer, copywriter, project manager. È semplicemente impossibile essere bravi in ​​tutto, almeno fisicamente.

Pertanto, il modo ideale per lavorare con un libero professionista è analizzare, raccogliere e preparare tutto da solo.

E il designer e il designer di layout trovati nello scambio freelance lo implementano semplicemente e senza alcuna iniziativa.

Professionisti :

• Tempo. Sia un vantaggio che un svantaggio. Il vantaggio è che ti sollevi dalla maggior parte del fastidio di implementare l'aspetto e la componente tecnica.
• Qualità. Il vantaggio principale. Faranno meglio del cento per cento rispetto a te che lo fai da zero.

  Come minimo, perché hanno esperienza e conoscenza che hai tu nel loro campo, siamo onesti, quasi nessuna.

Aspetti negativi:

• Responsabilità. Se il sito non funziona, la colpa non è di nessuno tranne te. Dal momento che sei tu quello che li controlla e parla secondo necessità.

  Ricerca. È necessaria una conoscenza specifica di dove cercarli, come assegnargli i compiti e... devi anche compilare un brief, mostrare le specifiche tecniche, ecc.

• Tempo e nervi. Tempo per trovare un libero professionista, tempo per creare attività, tempo per realizzare un prototipo di landing page, tempo per controllare. Perderai molto tempo e nervi.

  La maggior parte dei liberi professionisti sono sciatti (mi scuso, ma è così), quindi si verificheranno ritardi nelle scadenze e perdite periodiche dai radar di comunicazione.

  E questo è il minimo che puoi aspettarti quando vuoi realizzare una landing page a buon mercato.

• Soldi. Dovrai sborsare soldi, dal momento che un buon specialista senza "connessioni" costa parecchio.

  Un design di qualità media costerà circa 8-10 mila, anche il layout costerà circa questa cifra. Ancora una volta, tutto dipende dalla complessità del progetto e dagli stessi artisti.

• Truffatori. Il lavoro è strutturato come segue: 50/50 Pagamento anticipato e poi il saldo dopo il completamento del progetto.

  Non voglio offendere nessuno, ma tra i liberi professionisti ci sono molte persone che... non accettano il progetto dopo aver ricevuto un anticipo. In poche parole, si perdono.

Ora un po 'di pagamento: se decidi di lavorare con un libero professionista, ti consiglio il seguente schema di pagamento: effettua un pagamento anticipato del 50% come transazione sicura (quasi tutti gli scambi ce l'hanno).

E trasferisci il resto dell'importo direttamente al libero professionista. In questo caso pagherai più del 15%, ma ti proteggerai.

Trucchetto per la vita. Se un libero professionista ti truffa, ti dissuaderà da una transazione sicura. Questo sarà il tuo segnale.

Fase 2 – a chi e cosa?

Il blocco più noioso (ma più necessario) in questo articolo. Non importa in che direzione vai. Realizzerai tu stesso una landing page efficace o la invierai ad un'agenzia specializzata. In ogni caso devi sapere 3 cose:

Il tuo pubblico di destinazione;

La scala di caccia;

L'interno della tua azienda.

L'unica differenza è che se crei una landing page da solo, dovrai scrivere e pensare a tutto da solo.

L'agenzia ti darà da compilare un brief dettagliato, grazie al quale faranno da sole la programmazione del target di riferimento e così via. Noi, invece, prendiamo una strada diversa e compiliamo noi stessi il brief, comunicando con te via Skype.

Crediamo sinceramente che questo sia l'unico modo per ottenere tutte le informazioni, poiché è possibile porre le seguenti domande durante la conversazione. E tali domande appaiono sempre.

Il pubblico di destinazione

Abbiamo già scritto sulla definizione del pubblico target o, ancora più approfonditamente, sulla definizione del cliente.

Questo studio ti aiuterà a comprendere chi è il tuo potenziale cliente, quali paure, obiezioni e desideri ha in relazione al tuo prodotto/servizio.

Su cosa dovresti fare pressione in una futura landing page, quali parole usare, quali immagini è meglio inserire. Un diagramma riassuntivo semplificato è simile al seguente:

La scala di caccia del pubblico target

Ma cosa darà la conoscenza della scala di Hunt? Proprio come l’avatar del cliente, fornirà la struttura stessa della futura landing page.

Te lo racconto brevemente, ma in applicazione ad un sito web di una pagina, perché molto spesso gli imprenditori non capiscono in quale stadio di consapevolezza si trova il loro potenziale cliente (se sei troppo pigro per leggere, allora guarda il video).

In breve, prima di prendere una decisione di acquisto una persona attraversa 5 passaggi/livelli di consapevolezza:

Fase “Indifferenza”. Non c'è problema.

Fase “Consapevolezza”. C’è un problema, ma non c’è soluzione.

Fase “Confronto”. Le opzioni per risolvere il problema vengono confrontate tra loro.

Fase “Selezione”. L'opzione di soluzione è stata selezionata. Alla ricerca di prodotti.

Fase “Acquisto”. Scelta tra i fornitori di prodotti.

In che modo questa complessità può aiutarti nella creazione di una landing page? Diamo un'occhiata a ogni fase e come procedere:

Fase “Indifferenza”. Devi prima creare il problema nella testa della persona. Dimostra che se non lo compra, allora tutto andrà male.

Fase “Consapevolezza”. È necessario mostrare nelle prime schermate che esistono diverse opzioni per risolvere il suo problema.

Fase “Confronto”. Devi comunicare che la tua soluzione è migliore di altre e per questo puoi creare una tabella comparativa, offrire una recensione del prodotto, risultati della ricerca, consulenza personale sulla selezione, ecc.

Fase “Selezione”. Devi mostrare quale offerta è adatta a lui, o meglio in quale forma/pacchetto. Per fare ciò, riveliamo ulteriori vantaggi dei nostri prodotti.

Fase “Acquisto”. Devi mostrare, prima di tutto, i vantaggi di lavorare con la tua azienda, e solo dopo parlare del prodotto e del fatto che è il migliore.

Sembra che tu non ne abbia bisogno, ma... Ad esempio, se una persona sceglie tra acquistare un appartamento e costruire la propria casa, allora la pagina di destinazione della casa dovrebbe avere un blocco che spieghi perché una casa è meglio di una appartamento.

Pacchetto

Puoi immaginare approssimativamente come apparirà il tuo sito web nella tua testa. Ed è positivo se hai un’identità aziendale o un brand book (l’ideale, direi addirittura).

E i vantaggi del tuo prodotto o della tua azienda nel suo insieme? E diverse dozzine di altre domande a cui devi rispondere prima di passare alla creazione di un prototipo e di un sito web.

Perché le domande giuste formano le risposte giuste, che prendi e inserisci nel tuo sito web. Questa fase ti aiuterà a prendere tutte le cose più preziose della tua azienda e a metterle in mostra.

Per capirne l'essenza, ecco un esempio di 10 domande che ti aiuteranno a comprendere meglio/più a fondo la tua azienda e il tuo prodotto, e a servirlo “con una salsa meravigliosa”:

Formula 3-5 “motivi per cui è oggettivamente più redditizio acquistare da te piuttosto che dai concorrenti”.

Quali caratteristiche produttive ha la vostra azienda?

Fornite formazione al personale interno?

Confronta il prodotto con prodotti simili. Indica i vantaggi e gli svantaggi.

Chi è la persona o le persone della società?

Quali bonus sei disposto a dare ai clienti quando acquistano grandi quantità?;

Descrivere in dettaglio le fasi del lavoro con il cliente dal primo contatto fino al completamento del lavoro.

Raccontaci le condizioni finanziarie del lavoro (pagamento anticipato, rate, dilazione dei primi pagamenti, prestiti di prodotti, sconti, prodotto in vendita, riacquisto di beni illiquidi, ecc.).

Quali pubblicazioni esistono sull'azienda o provenienti dall'azienda? (commenti di esperti, interviste, giudici di programmi televisivi, rubriche, articoli).

I tuoi clienti sono delle star.

FASE 3 – Prototipo

Finalmente siamo arrivati ​​alla parte più interessante. Ora creeremo il tuo futuro sito web.

O meglio, per ora, come realizzare un prototipo da soli, ma almeno questo è più interessante della semplice descrizione del pubblico di destinazione.

Passaggio 1. Struttura del prototipo

Un prototipo è la struttura e la sequenza di blocchi di una futura landing page, che puoi facilmente costruire in base ai criteri di selezione e alle obiezioni del tuo pubblico target.

Il modo migliore per farlo è il seguente: prendere un foglio di carta e scrivere una sequenza di blocchi/significati. Sembra qualcosa del genere:

Un berretto;

Benefici aziendali;

Catalogare;

Produzione propria;

Azione;

Squadra;

eccetera.

Siamo tu ed io a prescrivere i blocchi, ma non dobbiamo dimenticare anche le due classiche strutture su cui è costruito qualsiasi materiale pubblicitario, e la landing page non fa eccezione:

(prodotti e servizi);

PmPHSA(). Sta per Dolore, più Dolore, Speranza, Soluzione, Azione (dolore, aumento del dolore, speranza, soluzione, invito all'azione).

Per non tormentarti su come trasmettere uno dei significati selezionati e renderti la vita molto più semplice quando crei tu stesso un prototipo, questo articolo ti aiuterà.

Scusate la franchezza, ma per me è dannatamente bello vedere gente che lavora anche di notte (basta farlo senza compromettere la salute). Ho cominciato a pensare che i maniaci del lavoro fossero estinti. Per quanto riguarda i risultati della collaborazione, mi limiterò a menzionare questo fatto: nei giorni di punta ricevevamo 140 richieste al giorno e dovevamo assumere un intero reparto vendite per il canale di marketing su Internet. Grazie!

recensione aperta Dmitry Novozhilov, D-color

Sai cos'è l'email marketing? Ad esempio, non lo sapevo prima di incontrare i ragazzi di Convert Monster. Credevo ingenuamente che questa fosse solo una bella parola. Ho creduto e allo stesso tempo sentito che aiuta a lavorare in modo più efficace con la base clienti. Sei mesi fa abbiamo acquisito una base di clienti. È stato compilato in base alle richieste quotidiane di franchising di asili nido. Ci sono state molte applicazioni, ma la conversione è rimasta a un livello molto basso. Ho lottato con questo fenomeno: ho provato io stesso a inviare lettere al database. Non c'era sempre abbastanza tempo: per comporre bene la newsletter successiva ci voleva mezza giornata lavorativa. Con ogni minuto trascorso, nasceva sempre di più la necessità di creare una catena competente. Ma finora le lettere sono state inviate una volta alla settimana o una volta ogni 2 mesi. Non c'era coerenza nel lavoro. Mancava qualcosa. Per molto tempo non siamo riusciti a capire cosa esattamente. I ragazzi di Convert Monster si sono messi subito al lavoro. I primi risultati non tardarono ad arrivare. Dopo aver abilitato la catena di posta elettronica iniziale, abbiamo effettuato diverse transazioni utilizzando il vecchio database. Hanno coperto i costi di lancio dell'e-mail marketing. Dopo un paio di mesi notiamo un aumento delle conversioni triplicato. E questo è solo l'inizio. Attualmente stiamo lavorando per aumentare ulteriormente l'attuale tasso di conversione. Ad esempio, altre tre volte. Calcola tu stesso: - quanto denaro porterà un aumento del tasso di conversione di 2 volte? È minimo! - quanto otterrai se chiudi la percentuale minima di clienti dalla tua base esistente? Sei ancora indeciso se contattare Convert Monster?

recensione aperta Sergey Degtyarev

Utilizziamo il traffico Internet per attirare clienti da molto tempo. Circa un anno e mezzo. Durante questo periodo, abbiamo cambiato 2 fornitori finché non ci è stato consigliato Convert Monster. I termini di collaborazione per la maggior parte delle aziende che forniscono servizi simili sono simili: budget mensile, elaborazione di una campagna pubblicitaria e via. Quindi la campagna diventa obsoleta, inizia il declino e, di conseguenza, la mancanza di clienti. Quindi chiedi ai manager di cambiare tattica, strategia, titoli, nucleo semantico: fai appello a tutti i santi. E loro (i manager, non i santi) non fanno nulla. O forse lo fanno, ma non ci sono risultati. Un giorno ti fa venire i denti, lasci questo ufficio per un altro, poi inizi a cercare quello successivo. Importante! Prima di iniziare a cercare il primo, provalo tu stesso. Naturalmente, i tuoi risultati in questo momento sono i migliori possibili, sono semplicemente ZERO! Siamo arrivati ​​a Convert Monster in preda alla disperazione. Questo è stato il momento in cui Yandex ha creato una configurazione: hanno rimosso la garanzia su cui ci sedevamo così bene e l'hanno munta il più possibile e IMPOSSIBILE. Avevamo capito che la felicità non sarebbe arrivata subito, ma l'abbiamo aspettata. E senza dubbio! Ha iniziato a bussare lentamente alle nostre porte: le richieste e le vendite hanno cominciato ad affluire. Poi il fallimento: estate, fuori stagione, lavoro in meno. Ma i ragazzi non si sono arresi e non abbiamo ridotto i budget, perché sappiamo COSA minaccia. Non abbassare mai il tuo budget né abbandonare il sito che ti porta entrate! Risultato finale: oltre 6 milioni di ricavi tramite Yandex.Direct. Siamo più che soddisfatti della nostra collaborazione! Se hai qualche dubbio se lavorare con Convert Monster o meno, contattaci! Ti diremo da dove cominciare. Quindi il tuo percorso verso di loro sarà più lungo e l'uscita finale per Convert Monster sarà la tua "espirazione" e la luce alla fine del tunnel. Tutti i percorsi porteranno comunque a loro. Se li stai cercando, ovviamente. È questione di tempo. Posizionati semplicemente come un’azienda pronta a svilupparsi e ad espandersi. Altrimenti, semplicemente non saranno interessati a te.

revisione aperta Isabella Ritz, Ritz Group LLC

Prima di contattarti, ho ordinato una landing page da un'azienda e la configurazione di Yandex Direct da un'altra. Entrambe le società sono ben note sul mercato, ma ciascuna delle nostre combinazioni sito + campagna pubblicitaria non ha cercato di aiutare, ma ha solo criticato l'altro interprete: programmatori - directologi, directologi - programmatori. Di conseguenza, sulla base della tua raccomandazione, ti abbiamo contattato e in soli 4 mesi abbiamo aumentato il numero di richieste di 4 volte (fino a 120 al mese) e il fatturato delle nostre vendite online a diversi milioni di rubli.

recensione aperta Vladislav Shupenya, azienda Kimberlit

Saluti, miei cari lettori. Oggi parleremo degli aspetti tecnici con cui possiamo aumentare la conversione delle vendite dei nostri beni o servizi. Uno dei punti importanti è una landing page ben progettata con i prodotti. La cosiddetta landing page, della cui creazione parleremo più avanti e otterremo codici di pagina già pronti.

Cos'è una pagina di destinazione? Questa è la pagina a cui solitamente arrivano le persone dopo aver fatto clic su un annuncio. Creato per un'offerta: prodotto, servizio o abbonamento. Una landing page efficace è la pietra angolare del marketing online di successo. Il prodotto può essere il migliore sul mercato, gli annunci sono perfezionati, ma senza una buona pagina di destinazione gli sforzi non producono risultati al 100%. Dice ai visitatori cosa c'è in offerta e perché dovrebbero volerlo. Un senso di urgenza contribuisce a un rapido processo decisionale e al passaggio dell'utente alla categoria di cliente.

Come creare una pagina di destinazione? È sbagliato credere che la risposta risieda nella capacità di impaginazione. Una buona landing page è il risultato di un lavoro coordinato su obiettivi, testo, design e codice. Le pagine di destinazione, di cui verranno forniti esempi di seguito, aiuteranno i principianti ad apprendere le basi per lavorare con il layout, ma non sostituiranno i testi di conversione e la comprensione del pubblico di destinazione. Puoi anche crearli utilizzando vari designer di pagine di destinazione.

Quindi, prima di creare una landing page, chiediti:

• Cosa farà una persona dopo essere arrivata sulla landing page? Comprerà qualcosa? Compilerai il modulo? Iscriviti alla newsletter? Prima di monitorare il tasso di conversione, stabilisci obiettivi chiari.
• Chi sono i miei concorrenti? In realtà, le domande sono tre: chi, quanto successo hanno e come possono essere applicati i loro risultati? L'imitazione è la più sincera forma di adulazione. Se i tuoi concorrenti stanno facendo qualcosa che funziona, replicalo sul tuo sito.
• Chi è il mio pubblico? Quanto meglio comprendi la tua nicchia e il tuo pubblico di destinazione, maggiori sono le possibilità che i tuoi sforzi vengano ripagati.

Devi offrire tutte le informazioni necessarie, ma non così tante da sopraffare e allontanare il tuo potenziale cliente.

Esempi di creazione di una landing page + codifica per manichini

Prima di iniziare, diamo una rapida occhiata a HTML e CSS. Capire come funzionano ti aiuterà a creare un atterraggio.

HTML è un linguaggio di markup del browser per la visualizzazione di siti web. Scritto utilizzando tag racchiusi tra parentesi angolari che definiscono il contenuto.

Il tag si apre () e si chiude () attorno al ripieno:

contenuto

Per la messa a punto, gli attributi vengono aggiunti dopo il nome:

contenuto

CSS: definisce come disporre gli elementi HTML. È costituito da selettori, proprietà e valori:

#selettore (proprietà: valore;)

Il selettore corrisponde al nome di un tag specifico in html. La modifica dei valori e l'aggiunta di proprietà ne modifica l'aspetto. Puoi creare pagine dall'aspetto diverso l'una dall'altra applicando stili CSS diversi allo stesso HTML.

5 passi iniziali

Per un layout rapido, utilizzeremo un modello dal design minimale basato su bootstrap. Si tratta di un sistema con propri selettori, utilizzato in tutto il mondo per velocizzare il layout.

Sembra modesto.

Da questo pesce viene creato in più fasi un sito web per tutti i gusti.

Struttura delle directory nella cartella:

• index.html: questo è il file principale che modificheremo.
• /assets: i file ausiliari si trovano qui:
• /css: la directory contiene bootstrap e stili di icone. Il file che modificheremo è main.css.
• /img: cartella per le immagini del sito.
• /fonts: caratteri dell'icona.
• /js: avvia il bootstrap dei file JavaScript.

Passaggio 1: utilizzo di un'intestazione

Il titolo e i sottotitoli sono luoghi chiave che aiutano a trasmettere il valore dell'offerta in modo chiaro.

Cambiamo il titolo e il nome del sito. Qui non è necessario avere competenze di composizione: scrivi il tuo testo nei punti evidenziati in giallo sullo schermo.

Passo 2. La brevità è sorella della conversione. Aggiunta di vantaggi e tariffe

Avrai bisogno di 4 sezioni:

• vantaggi;
• aliquote;
• recensioni;
• chiamare all'azione.

Creiamo una sezione del contenuto principale “main”, nella quale inseriremo le sezioni necessarie:

…..
…..
…..
…..

Riempi con il riempimento anziché con i punti.

Per la sezione vantaggi avrai bisogno di questo codice:

Vantaggi
Veloce

Affidabile

Sed diam nonumo

Redditizio

Elit, sed diam nonummy

Tecnicamente

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Affidabile

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Redditizio

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Tecnicamente

Lorem ipsum dolor sit amet, consectetuer adipiscing

Affidabile

Lorem ipsum dolor sit amet, consectetuer adipiscing

Redditizio

Lorem ipsum dolor sit amet, consectetuer adipiscing

Contenuto per chiarezza:

Sembra ancora sciatto, ma non c’è motivo di farsi prendere dal panico, continuiamo.

Annotiamo i prezzi. Il contenuto cambia allo stesso modo del primo passaggio. Descrizione generale con la classe “tariffe” e tre tariffe.

Piani tariffari

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tariffa n. 1
$10

al mese/per persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10Lorem ipsum

Ordine
Tariffa n. 2
$20

al mese/per persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10Lorem ipsum

Ordine
Tariffa n. 3
$30

al mese/per persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10Lorem ipsum

Ordine

Sembra così.

Per ora non siamo interessati all'aspetto della futura landing page: di seguito esamineremo esempi di modifica degli stili.

Passaggio 3: segnali di fiducia e invito all'azione

L'utilizzo di segnali mirati indica ai visitatori che il marchio è affidabile. I segnali possono assumere molte forme, ma quella classica è il feedback dei clienti.

recensioni dei clienti

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

«Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud esercizio ullamco laboris nisi ut aliquip ex ea commodo."
«Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud esercizio ullamco laboris nisi ut aliquip ex ea commodo."

Impostiamo un invito all'azione.

Approfitta quando ordini oggi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Ordina adesso!

Le recensioni aiuteranno i potenziali clienti a decidere di acquistare il prodotto. Per chiarezza, abbiamo bisogno degli avatar, quindi li inseriremo immediatamente sotto ogni citazione.

Nome del cliente.

Passaggio 4: integrazione ottimizzata per la rete e i dispositivi mobili

Per implementare la griglia, abbiamo bisogno dei contenitori Bootstrap. È importante ricordare il numero totale di segmenti di colonna validi: 12. La classe determina la larghezza della visualizzazione del contenuto. L’aspetto positivo di questa griglia preimpostata è che i contenitori sono progettati pensando alla reattività e sono immediatamente utilizzabili sui dispositivi mobili. Descrizione dettagliata sul sito ufficiale. La griglia appare così.

Il contenuto di "main" sarà avvolto in un contenitore. Per fare ciò, in alto è scritto quanto segue:

… .

Se è necessario che il blocco si adatti all'intera larghezza dello schermo, il contenitore viene inserito all'interno. Qui sarà un jumbotron e un invito all'azione.

Avvolgeremo tutti gli elementi che richiedono il posizionamento uno sopra l'altro con separatori di linea.

Ora possiamo regolare la larghezza delle colonne, concentrandoci sulla griglia di bootstrap. Dopo l'avvolgimento, il ripieno ha smesso di attaccarsi ai bordi dello schermo e sono comparsi dei rientri netti.

Impostiamo i prezzi in una riga utilizzando la classe di colonna col-lg-4. All'interno delle righe di riga non è più necessario scrivere div separati per il ritorno a capo; possono essere combinati con quelli esistenti separati da uno spazio.

Per analogia, impostiamo colonne per la sezione recensioni e vantaggi. Se è necessario spostare un elemento di lato, utilizzare la classe di colonna offset col-lg-offset-2. Il numero alla fine determina di quante colonne di base avverrà lo spostamento.

Passaggio 5. Caratteri e icone

Implementiamo i caratteri di intestazione di Google Font. Una volta selezionato, apri la scheda di importazione e copia i dati da essa nel file main.css. Aggiungiamo anche selettori di titolo al file per il quale viene utilizzato il nuovo carattere.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* importa carattere per le intestazioni */
.marchio-navbar,
h1,
h2,
h3,
h4,
h5,
h6 (
famiglia di caratteri: "Roboto Condensed", sans-serif; /* Risultato del carattere Google */
}

Per chiarezza, i vantaggi sono descritti da una classe con il nome autoesplicativo text-center e le icone FontAwesome dal set bootstrap.

A questo punto la preparazione è completamente completata.

Pagina di destinazione: esempi di codici con offerta, parallasse e contatore

Usiamo i tre tipi più popolari: con una frase, un modulo e con un contatore per il conto alla rovescia. Man mano che il layout avanza, il modello verrà integrato con effetti.

Esempio 1: con una frase

Impostiamo lo sfondo della parte principale e il riempimento in modo che il primo schermo sia coperto.

Jumbotron (
sfondo: #f5f5f5 url(../img/fon.jpg) in alto al centro nessuna ripetizione;
larghezza massima: 100%;
imbottitura superiore: 250px;
fondo imbottito: 200px;
allineamento testo: centro;
}

Cambiamo la dimensione dell'intestazione del jumbotron da h2 a h1. Successivamente, scriviamo gli stili per gli elementi che devono essere modificati.

Cominciamo con le icone.

Vantaggi i(
colore: #cac4c4;
}

Dopo il cancelletto viene specificato un colore. Puoi scegliere la tua opzione utilizzando le tabelle dei colori HTML o un editor di immagini.

Rientro per i titoli delle sezioni

sezione h2 (
imbottitura superiore: 30px;
margine inferiore: 25px;
}

Stiamo riordinando l’aspetto delle tariffe. Per comodità, creiamo le nostre classi per gli elementi che vogliamo evidenziare in modo specifico.

Tariffa n. 1
$10

al mese/per persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10Lorem ipsum

Ordine

E molti CSS. Di quali luoghi sono responsabili le sezioni sono indicati nei commenti - /* tra barre con asterisco */

/* =========Stili tariffari======== */
/* vista generale della tariffa */
.pricing_item(
sfondo: #f2f2f2;
posizione: relativa;
visualizzazione: -webkit-flex;
display: flessibile;

direzione flessibile: colonna;

allinea-elementi: stretch;
allineamento testo: centro;
-webkit-flex: 0 1 330px;
flessibile: 0 1 330px;
imbottitura: 2em 3em;
margine: 1em;
colore: #262b38;
cursore: predefinito;
overflow: nascosto;

}
/* cambia lo sfondo quando viene cliccato */
.pricing_item:passa il mouse (
colore: #444;
sfondo: #daebef;
}
/* sfondo del cartellino del prezzo individuale in ciascuna tariffa */
.pricing_item:primo-figlio .prezzo (
sfondo: #9ba9b5;
}
.pricing_item:nth-child(2).prezzo (
sfondo: #1f6098;
}
/* sugli schermi larghi la colonna della tariffa media è rientrata ed evidenziata */
@schermo multimediale e (larghezza minima: 66.250em) (
.pricing_item(
margine: 1,5 em 0;
}
.in primo piano(
indice z: 10;
margine: 0;
dimensione carattere: 1,15 em;
}
}
/* titolo */
.prezzo_articolo h3 (
dimensione carattere: 2em;
margine: 0,5 em 0 0;
colore: #1d211f;
}
/* sfondo del cartellino del prezzo */
.prezzo(
dimensione carattere: 2em;
peso carattere: grassetto;
colore: #fff;
posizione: relativa;
indice z: 100;
altezza della linea: 95px;
larghezza: 100px;
altezza: 100px;
margine: 1,15 em automatico 1 em;
raggio del bordo: 50%;
sfondo: #77a5cc;
-transizione webkit: colore 0,3s, sfondo 0,3s;
transizione: colore 0,3 s, sfondo 0,3 s;
}
/* valuta */
.valuta(
dimensione carattere: 0,5 em;
allineamento verticale: super;
}
/* chiarimento della proposta */
.frase (
peso carattere: grassetto;
margine: 0 0 1em 0;
imbottitura: 0 0 0,5em;
colore: #2a6496;
}
/* elenco */
.pricing_item ul (
dimensione carattere: 0,95 em;
margine: 0;
imbottitura: 1,5em 0,5em 2,5em;
allineamento testo: sinistra;
}
/* Elementi della lista */
.pricing_articolo li (
imbottitura: 0,15em 0;
}
/* pulsante ordine tariffa */
pulsante .pricing_item(
peso carattere: grassetto;
margine superiore: automatico;
imbottitura: 1em 2em;
colore: #fff;
raggio del bordo: 5px;
sfondo: #428bca;
-transizione webkit: colore di sfondo 0,3s;
transizione: colore di sfondo 0,3 s;
}
/* cambia colore quando viene premuto il pulsante */
Pulsante .pricing_item: passa il mouse,
Pulsante .pricing_item:focus (
colore di sfondo: #285e8e;
}
/* contesto tariffario*/
.bg-2 (
sfondo: #dddddd;
}

Risultato

Recensioni dei clienti. Diamo loro un aspetto ordinato e indichiamo la loro posizione.

/* =========Stili delle testimonianze======== */
testimonianze (
imbottitura: 4em 0;
allineamento testo: centro;
}
.testimonianze .avatar img (
raggio del bordo: 50%;
galleggiante: sinistra;
visualizzazione: in linea;
margine destro: 1em;
larghezza: 65px;
altezza: 65px;
margine inferiore: 30px;
}
.testimonianze .avatar p (
allineamento testo: sinistra;
imbottitura superiore: 1em;
colore: #5d5d5d;
peso carattere: 900;
}

Non resta che decorare l'ultima call to action e il footer.

/* Azione */
.azione(
sfondo: #476177;
altezza minima: 180px;
larghezza: 100%;
imbottitura: 4em 0;
allineamento testo: centro;
}
.azione h2 (
colore: #fff;
peso carattere: 300;

}
.azione p(
colore: #fff;
testo-ombra: 0 1px 2px rgba(0, 0, 0, .2);
dimensione carattere: 1,2 em;
}
.azione .contenitore (
margine superiore: 3em;
}
/* Piè di pagina */
piè di pagina(
sfondo: #333333;
imbottitura: 1em 0;
allineamento testo: destra;
}
piè di pagina p(
colore: #fff;
altezza della riga: 1;
trasformazione del testo: maiuscolo;
dimensione carattere: 0,7 em;
margine superiore: 0,5 em;
}

Al pulsante piè di pagina viene assegnata la classe bootstrap incorporata btn-default.

Dare vita al modello. Introdurremo lo scorrimento fluido e i pulsanti per le sezioni, nonché l'animazione del testo sulla prima schermata.

Per le transizioni al lavoro, sostituiremo alcune classi della sezione con id - per vantaggi e tariffe. E aggiungeremo collegamenti all'ID ai pulsanti. Screenshot: cosa è allegato a cosa, evidenziato con un pennarello giallo.

Impostiamo i rientri per i pulsanti: jbutton. Lo scorrimento quando viene premuto funziona, ma in modo molto brusco.

Le transizioni fluide vengono create utilizzando JavaScript o jquery. Quest'ultimo è collegato ai modelli Bootstrap per impostazione predefinita.

Lo scorrimento ora è fluido.

Aggiunta di animazione al testo utilizzando Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Questo è un codice open source già pronto, può essere utilizzato su qualsiasi sito web. Posiziona il file da Github nella cartella css e specifica il percorso.

Selezioniamo gli effetti qui: https://daneden.github.io/animate.css/. Abbiamo selezionato fadeInDown. Nel codice è scritto così:

Ora quando la pagina viene caricata o aggiornata, il testo verrà animato. Pronto.

Esempio 2: con forma ed effetto di parallasse

Più campi del modulo vengono presentati a un visitatore, meno è probabile che li compili. Richiedi solo le informazioni minime necessarie.

È assemblato per analogia. Cambieremo sfondi e colori. E, naturalmente, aggiungeremo una forma.

Cominciamo con la parallasse.

Cambiamo lo sfondo del jumbotron in trasparente:

sfondo: trasparente;

All'interno della head inseriremo lo script:

$(finestra).scroll(funzione(e)(
parallasse();
});
funzione parallasse())(
var scrollato = $(finestra).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

La prima riga nel corpo è un contenitore per la parallasse:

E nei CSS il suo comportamento è:

Bgparallasse (
sfondo: url(/../img/fon.jpg) ripeti;
posizione: fissa;
larghezza: 100%;
altezza: 300%;
in alto:0;
sinistra:0;
indice z: -1;
}

La parallasse è pronta. Ma apportare modifiche al codice e un nuovo sfondo richiede la riassegnazione della combinazione di colori.

Rendere il menu scuro:

Barra di navigazione predefinita (
colore di sfondo: #333;
colore del bordo: #444;
colore: grigio scuro;
raggio del bordo: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
colore: grigio scuro;
colore di sfondo: rgba(0, 0, 0, 0.5);
}

Sostituiamo la frase in jumbotron con una nuova - con il codice del modulo:

La Landing Page trasforma i visitatori in clienti
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

E prescriviamo l'apparenza

/* modulo */
.headform-list (
tipo stile elenco: nessuno;
altezza della linea: 26px;
peso carattere: 400;
imbottitura: 0px;
margine inferiore: 40px;
}
.testaforma(
overflow: nascosto;
posizione: relativa;
colore di sfondo: rgba(0,0,0,.4);
imbottitura: 35px 40px;
raggio del bordo: 8px;
}
input, pulsante, seleziona, area di testo (
larghezza: 100%;
margine inferiore: 10px;
}
.headform-list li .fa (
posizione: assoluta;
in alto: 0px;
a sinistra: 0px;
larghezza: 42px;
dimensione carattere: 24px;
allineamento testo: centro;
}
.headform-list li(
posizione: relativa;
altezza minima: 38px;
imbottitura sinistra: 62px;
margine inferiore: 20px;
}
.jumbotron p (
colore: #fff;
dimensione carattere: 16px;
stile carattere: corsivo;
}

Qui è finito anche il testo del jumbotron, che richiedeva modifiche.

Stiamo cambiando le tariffe.

/* vista generale della tariffa */
.pricing_item(
colore di sfondo: rgba(0,0,0,.4); /* riga modificata */
raggio del bordo: 4px; /* riga modificata */
posizione: relativa;
visualizzazione: -webkit-flex;
display: flessibile;
-direzione-webkit-flex: colonna;
direzione flessibile: colonna;
-articoli-webkit-align: stretch;
allinea-elementi: stretch;
allineamento testo: centro;
-webkit-flex: 0 1 330px;
flessibile: 0 1 330px;
imbottitura: 2em 3em;
margine: 1em;
colore: #f2f2f2; /* riga modificata */
cursore: predefinito;
overflow: nascosto;
box-ombra: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* cambia lo sfondo quando viene cliccato */
.pricing_item:passa il mouse (
colore: #444;
sfondo: #ddd; /* riga modificata */
}

Ora sembrano così: uno sfondo trasparente e angoli arrotondati.

Il modello è pronto.

Esempio 3: con contatore del conto alla rovescia

Cambiamo nuovamente il riempimento del jumbotron e ricoloriamo il modello per adattarlo al nuovo sfondo, in modo simile al modello precedente. Collega lo script del contatore:

HTML





Il tempo non aspetta
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = new Conto alla rovescia((
tempo: 86400 * 3, // 86400 secondi = 1 giorno
larghezza: 300
, altezza: 60
, rangeCiao: "giorno"
, stile: "capovolgi" //