Bellissimi modelli di pagine di destinazione. Modelli di pagine di destinazione

Ciao. I siti di una sola pagina sono ancora popolari e per una buona ragione. Presentano numerosi vantaggi rispetto ai siti multipagina completi. Su un sito web di una pagina (noto anche come landing page), una persona si concentra su un'idea, un prodotto, che gli permette di studiare la tua offerta senza distrazioni ed è più disposto a lasciare una richiesta.

"Va bene", dici, "ho deciso di crearmi una landing page, ma non capisco niente di programmazione". E questo non è un problema. Ora ci sono molti strumenti per creare un sito web professionale senza scavare nel codice. Uno di questi è il popolare CMS WordPress con il costruttore WPBackery o ELementor.

In questo articolo, ho fornito fantastici modelli di landing page WordPress adatti per aziende, vendita di beni, agenzie, liberi professionisti e qualsiasi altro argomento. Dopotutto, tali modelli possono e devono essere personalizzati per adattarsi a te e alla tua offerta.

Molti modelli utilizzano campanelli e fischietti alla moda, come effetti di parallasse, design piatto, foto e video a schermo intero. L'adattamento per i dispositivi mobili è incluso in ogni modello.

Basta discussioni, diamo un'occhiata alla selezione!

P.s. Se vuoi sapere più in dettaglio cos'è una landing page, allora ho discusso questa domanda in dettaglio e ho fornito 27 esempi di landing page.

Tutti i modelli sono presentati dal famoso negozio online ThemeForest. Puoi vedere altre collezioni.

Una selezione di 40 template premium per creare una landing page sul CMS WordPress1. Ponte

Per me, questo è un modello eccezionale perché contiene oltre 376 demo su diversi argomenti. Con questo modello puoi trasmettere emozioni completamente diverse. Potente e intuitivo.

Questo incredibile tema ha uno slider personalizzabile, intestazioni completamente personalizzabili, mega menu, sfondi video, intestazione fissa o fissa, diversi loghi di intestazione, elementi interattivi, 7 diversi layout di portfolio e molto altro, consentendo infinite possibilità.

Crea una presentazione unica del tuo prodotto o della tua offerta. Ci sono istruzioni visive nel testo e anche istruzioni video.

2. Il7

Un sistema di template avanzato e unico che ti consente non solo di creare una landing page, ma anche senza altre impostazioni integrarlo nel sito web principale del progetto. Nel modello puoi trovare molti stili già pronti per i blocchi richiesti nelle pagine di destinazione: presentazione del team, galleria, portfolio. Sono disponibili anche bellissimi effetti di precarico della pagina.

A proposito, The7 è ora sul mio blog.

3.BeTheme

Betheme è il modello più grande in termini di funzionalità e numero di opzioni di layout preimpostate. Oggi ci sono oltre 400 pagine di destinazione demo basate su questo tema, puoi sceglierne una qualsiasi e adattarla alle tue esigenze. Le pagine di destinazione già pronte su Betheme utilizzano attivamente:

• effetti di scorrimento: dalla parallasse alle trasformazioni animate di elementi di design
• video di sfondo a schermo intero
• pulsanti "social".
• contatori animati
• moduli di domanda on-line
• sezioni del portafoglio
• sezione "I nostri dipendenti"

Alcune altre demo:

Gli aggiornamenti dei temi vengono eseguiti automaticamente, gli aggiornamenti dei plugin vengono eseguiti con il semplice tocco di un pulsante. I siti demo utilizzano Revolution Slider. Il modello offre 5 opzioni di layout di pagina, 20 intestazioni personalizzate, un numero illimitato di stili per le mappe di Google e molte icone eleganti.

Lo strumento Muffin Builder ti aiuterà a creare qualsiasi progetto senza alcuna conoscenza di sviluppo web. Se lo desideri, puoi aggiungere regole CSS e script js senza influenzare il codice del modello principale.

Ronneby offre prestazioni elevate e un pannello delle opzioni ampliato. Al modello sono stati aggiunti i migliori plugin premium per la creazione di landing page WordPress. Gli sviluppatori del modello prestano particolare attenzione al supporto utente: a qualsiasi domanda viene data risposta con una risposta rapida che descrive come risolvere il problema. Il tema è già localizzato per due lingue, ma ad esso sono allegati anche i file di traduzione che consentono di organizzare il supporto multilingue per i siti.

Un altro esempio dimostrativo:

5. Giove

Modello flessibile e allo stesso tempo facile da personalizzare. Include 72 cosiddette skin, su tutti gli argomenti possibili. Amministrazione conveniente. pannello, anche un principiante troverà facile comprendere il generatore di pagine e le impostazioni.

Ci sono tutorial pratici con 240 pagine e 20 tutorial video su come rendere straordinario il tuo sito web!)

Il modello Jupiter è adattato anche per il SEO. I test di Google PageSpeed ​​​​mostrano buoni risultati, il che significa che i motori di ricerca adoreranno il tuo sito.

Il modello è pulito, ordinato e utilizza una tipografia di alta qualità. Grazie all'uso di effetti visivi, come la parallasse, il tema risulta vivace ed è molto piacevole guardare un sito del genere.

6.WoodMart

Una delle più grandi raccolte WordPress. I modelli sono scritti da programmatori web professionisti e i design sono disegnati da specialisti qualificati in soluzioni visive e UX. Grazie a questo, puoi installare in sicurezza qualsiasi modello, ognuno è pronto per l'uso sul tuo computer, cellulare, tavoletta. Plugin premium inclusi:

WPBackery

Rivoluzione dello slider

Ottimo adattamento con WooCommerce (negozio online)

7.Brooklyn

Brooklyn ha 16 skin demo su temi diversi. Lo stile moderno delle pagine, la combinazione di immagini e caratteri aggiunge eleganza a qualsiasi sito in cui è installato questo tema. Il blocco del portfolio è splendidamente progettato. Il modello è perfetto per agenzie e aziende. I modelli sono realizzati in colori scuri, che danno sicurezza e ispirano fiducia. Il modello è reattivo e ha un bell'aspetto su tutti i dispositivi.

Un modello semplice e fluido che non lascerà nessuno indifferente. La tipografia e gli elementi dell'interfaccia di alta qualità rendono questo modello stupendo. Candidato e vincitore di vari concorsi e valutazioni famosi, come awwwards. Ha più di 30 skin con temi diversi tra cui scegliere

Non solo il sito web, ma anche le immagini sono adattate ai dispositivi mobili per apparire più convenienti per i visitatori.

9. Codice H

Il modello è nuovo, ma ha già dato prova di sé. Dispone di 8 temi (multipagina, landing, aziendale, portfolio, blog, e-commerce, stub) con 3-12 skin ciascuno. Oltre alla sua bellezza e pulizia, questo modello ha semplicemente un arsenale di diversi widget ed elementi. Puoi rendere la tua landing page bella e funzionale. Hai bisogno di uno slider? Per favore. Mostra portfolio, recensioni, vantaggi? E questo è.

10. Nativo

Native è un potente strumento per promuovere una startup. I modelli di landing page di WordPress basati sul tema utilizzano vari effetti di parallasse per spostarsi tra i blocchi semantici del sito. La documentazione estesa e i tutorial video aiuteranno gli utenti inesperti del CMS a comprendere rapidamente le funzionalità del pannello di amministrazione. Sono inclusi i plugin Visual Composer, Layer Slider e Slider Revolution applicazione gratuita al modello.

11. Saliente

Salient è un tema versatile con un design reattivo che viene spesso scelto da . La tipografia premium e gli effetti di parallasse che appaiono mentre scorri la pagina aiutano a migliorare l'impressione della pagina di destinazione. L'ottimizzazione del frame rate garantisce transizioni animate fluide tra blocchi di contenuti. Il modello utilizza dimensioni delle immagini adattive, che aiutano le pagine a caricarsi rapidamente e a risparmiare traffico.

12. La Gemma

TheGem è un tema moderno per progetti creativi, ottimizzato per il SEO e completato da un layout “responsive”. La leggerezza delle pagine, la velocità di caricamento e una UX ponderata garantiscono elevate prestazioni del modello. Se hai bisogno di promuovere la tua attività utilizzando una landing page, vale la pena acquistare questo modello, se non altro per il suo codice SEO-friendly, che ti garantirà posizioni elevate nei risultati di Google. Le 11 versioni demo disponibili delle landing page tengono conto delle esigenze di diversi progetti.

Gli elementi di design per un sito Web su TheGem sono personalizzati utilizzando il plug-in Visual Composer. La visualizzazione di una grande quantità di contenuti in blocchi di destinazione (portfolio, recensioni, servizi) è organizzata tramite caricamento - automatico o "per pulsante", nonché tramite un dispositivo di scorrimento per il cambio di scheda. Il modello fornisce 6 opzioni di animazione per il caricamento dei componenti della sezione che appaiono quando si scorre il contenuto della pagina di destinazione. Lo sfondo dei blocchi di contenuto può essere video da Vimeo e YouTube o derivati ​​da file system sito utilizzando html5.

13. Professionista del marketing

Marketing Pro è un modello progettato pensando alla conversione, al marketing e al SEO. Ciascuno dei 9 siti demo presenti su di esso viene creato tenendo conto delle caratteristiche di una specifica nicchia di marketing. Come bonus al design adattivo della pagina di destinazione, sono disponibili modelli stilizzati per i blocchi di organizzazione degli eventi.

Oshine è tra i temi creativi più venduti. Con un design accattivante e funzionalità potenti, questo modello può essere utilizzato per creare pagine di destinazione per progetti creativi e aziende. Cinquanta moduli per personalizzare l'aspetto del sito, ognuno dei quali è stato attentamente progettato, aiutano ad ottenere risultati ideali. L'opzione "annulla/ripeti" e la possibilità di assegnare "tasti di scelta rapida" a determinate azioni semplificano il processo di configurazione.

15. Gioiello

Jevelin è un modello con un design reattivo premium che semplifica la creazione di pagine di destinazione e siti di una pagina su Wordpress. Il tema aiuterà a lanciare il progetto in breve tempo. Grazie a una varietà di strumenti di personalizzazione - 9 opzioni di intestazione in diversi layout, 40 elementi unici, ognuno dei quali può essere stilizzato individualmente, funzionalità integrata per organizzare i repost sui social network, 6 soluzioni di stile per progettare la sezione portfolio - personalizzare le skin è più veloce che mai.

16. Kalium

Kalium è un argomento a cui si rivolgono i rappresentanti di vari settori professionali per ottenere un sito Web per promuovere i loro servizi. Particolare enfasi nella progettazione del sito Web su Kalium è posta sulla tipografia: ne è responsabile una libreria specializzata per la gestione dei caratteri. Il modello può utilizzare 4000 caratteri: Google, Typekit, Font Squirrel, premium e personalizzati (caricati dall'utente).

17. In entrata

Inbound è un modello che può facilitare la creazione di siti Web di una pagina per applicazioni, e-book, videocorsi e prodotti simili. La personalizzazione del design viene eseguita utilizzando il generatore di pagine di destinazione visive Landing Page Builder. Il modello consente inoltre di assegnare una mini-sezione in formato pagina di destinazione a ciascun prodotto promosso all'interno di un sito e può essere utilizzato per sezioni di categorie di prodotto in WooCommerce.

18. Intatto

Intact è un tema multi-opzione progettato per aiutarti a risolvere i tuoi problemi di business online. Include componenti importanti di una landing page moderna come: blocchi “ Piani tariffari" e "Dipendenti aziendali", uno slider con recensioni, set di icone tematiche, moduli di iscrizione, un consulente online.

19. Cometa

Comet è un modello pixel-perfetto completamente reattivo per Visual Composer e . Agli utenti vengono offerte 5 skin per le pagine di destinazione, che implementano i seguenti effetti: slider di testo, parallasse, video di sfondo - importato da YouTube o integrato in html5, slider di zoom animato. I nuovi utenti capiranno facilmente le impostazioni del tema quando creazione di wordpress pagine di destinazione: istruzioni e lezioni video sono disponibili online.

20. Motore principale

Un tema WordPress universale che ha tutto il necessario per creare una landing page:

• 200 blocchi da “assemblare” in un modello in qualsiasi ordine;
• adattabilità in qualsiasi fase;
• 35 pagine completamente progettate: puoi semplicemente modificare testo e foto;
• elevata velocità di download: 94% più veloce della media.

I progetti di sviluppo possono essere valutati prima dell'acquisto. Le combinazioni di colori e le impostazioni vengono modificate nell'editor visivo. Gli autori promettono supporto in qualsiasi momento.

Lo sviluppatore offre un modello di sito Web in diversi argomenti, dall'edilizia ai servizi veterinari. Semplice e atterraggio efficace ti aiuterà a comunicare i tuoi vantaggi, le condizioni di lavoro e altri dettagli necessari ai potenziali clienti. Il design è reattivo e si presenta bene su tutti i dispositivi, dai monitor Retina ai gadget mobili. Sono disponibili plug-in per portafoglio, orari di apertura, calendario e icone personalizzate.

22. Incubatrice

"Un tema ideale per una startup", dicono gli autori riguardo al loro sviluppo. Il design leggero e minimalista del 2020 è adatto per negozi online, agenzie di eventi e molti altri tipi di attività per biglietti da visita o ulteriore sviluppo in un progetto su scala più ampia. Incluso:

• visual designer: i dettagli cambiano online;
• adattabilità mobile;
• WooCommerce è il miglior plugin per negozi online;
• supporto per qualsiasi lingua.

23. Phlox Pro

Un template multi-template con trenta demo in cui puoi sostituire solo il testo desiderato. Offrono inoltre più di 90 modelli per cursori ed effetti e più di 130 opzioni per singole pagine. Sono inclusi 9 plugin principali che saranno utili per promuovere un sito Web di biglietti da visita o una risorsa più ampia. Tutto questo è scontato, attualmente disponibile per $ 30. Uno dei modelli più popolari per le pagine di destinazione.

24. Oporto

Un altro designer multi-modello per pagine di destinazione e biglietti da visita. Codice pulito con un numero infinito di opzioni per selezionare intestazioni e piè di pagina senza la necessità di imparare a programmare. Tanti design, i cui elementi sono facilmente sostituibili grazie al plug-in della griglia. È facile passare da un sito di una pagina a un negozio a tutti gli effetti tramite la ricerca avanzata. Il supporto è sempre pronto a rispondere alle domande.

25. Ekko

Multi-modello economico e popolare per l'atterraggio, che differisce:

spazi vuoti di progettazione professionale;

risposta rapida grazie all'ottimizzazione;

metodo di impostazione trascinare e rilasciare gocciolare;

più di 200 blocchi per i contenuti.

Siti web professionali su qualsiasi argomento che puoi semplicemente installare con un clic e utilizzare. Disegni moderni, che non sono "noiosi" e sembrano freschi e belli.

26. Ave

"Un multi-template di nuova generazione" è un'affermazione audace, ma è esattamente ciò che dicono gli autori del loro prodotto. Per soli $ 35 puoi ottenere:

• 200 landing page dal bellissimo design “europeo”;
• WooCommerce e moduli d'ordine avanzati;
• installazione in un minuto;
• impostazioni per portafoglio, cursori.

Il plug-in dell'editor visivo di Elementor è stato effettivamente aggiornato a ultima versione e molto facile da usare.

27. L'Arca

"Il migliore tra 9500", notano gli sviluppatori. Il modello si concentra su persone che non hanno mai scritto codice. La personalizzazione del design viene eseguita utilizzando il plug-in di progettazione visiva Elementor, che ti consente di lavorare in modalità uno a uno, senza utilizzare installazioni di terze parti e utilizza immediatamente le funzionalità complete di uno dei 300 modelli. Comodo e veloce da configurare.

28.Amedeo

Bellissimo design in una combinazione di colori insolita. L'enfasi non è solo su design elegante, perché viene offerto per l'acquisto in set:

Plugin WooCommerce per negozio online;

plugin avanzato per moduli di contatto;

una selezione di effetti di scorrimento in diversi stili;

una selezione di animazioni.

Modello WordPress pulito e chiaro per biglietti da visita e acquisti online. Nella modalità negozio ci sono le impostazioni per le caratteristiche del prodotto e le cercano.

29. Bolge

Una selezione di simpatiche pagine di destinazione in uno stile piatto moderno ed elegante. Disegnare manualmente gli elementi ti permetterà di distinguerti e di essere ricordato dai potenziali clienti. Il prezzo include plugin e widget di base: da un editor visivo a un effetto di parallasse per posizionare uno sfondo o un portfolio. È possibile personalizzare diverse visualizzazioni su desktop e versione mobile, l'adattabilità è data per impostazione predefinita.

30.Makoto

Diverse soluzioni per designer, fotografi, artisti. Utili preimpostazioni per pubblicare un portfolio ti permetteranno di proteggerlo dalla copia e di caricarlo mentre l'utente lo visualizza, risparmiando tempo di caricamento. Scaricamento video semplice. C'è un'opzione per il blog. Sono stati preparati gli elementi per posizionare le infografiche. Il visual designer ti aiuterà a configurare facilmente tutti i dettagli.

32. Paesaggistica

Gli sviluppatori hanno realizzato un interessante progetto “verde” per servizi paesaggistici, assistenza al giardinaggio e temi ecologici. Tuttavia, il pezzo può essere utilizzato per altri scopi. Bellissime icone, caratteri Google puliti, eccellente reattività e aspetto, anche sui dispositivi Retina, implicano l'uso diffuso di temi WordPress.

33. Crowdmerc

Fatto sotto ultima versione WordPress. Il modello è costantemente aggiornato. La funzionalità per un negozio online è fornita tramite un comodo plug-in per la ricerca e l'ordinazione avanzate. Sono inoltre disponibili preimpostazioni per eventi, date del calendario e registrazione. Utilizzato Elementor per creare nuove pagine. Supporta eventuali plugin aggiuntivi.

34. Credenza

Un tema "musicale" creativo sarà ricordato dai visitatori per il suo design brillante e il proprietario del sito sarà interessato a:

• sviluppi della pagina di destinazione e pagine interne- opportunità illimitate per lo sviluppo delle risorse;
• installazione con un clic;
• Configurazione WYSIWYG;
• la possibilità di aggiungere musica, video, effetti di scorrimento.

36.Istruzione

Education è una versione migliorata del vecchio tema eLearning con una UX più avanzata ed è destinata alle risorse didattiche online: corsi online e siti web di istituti scolastici. Il modello ha un design accattivante e fornisce funzionalità complete necessarie per il processo educativo.

37. Uno

Uno è un tema creativo per la creazione di pagine di destinazione con un'enfasi sulla promozione del prodotto. Il frontend del modello è realizzato su html5 e bootstrap 3, con esso è possibile integrare MailChimp e Contact Form 7. Gli sviluppatori del tema UX hanno studiato molti progetti simili, a seguito dei quali gli utenti hanno ricevuto modelli già pronti Pagine di destinazione WordPress, che contengono tutti gli strumenti importanti per i progetti aziendali.

38. Totale

Total è un modello adatto a molti progetti. Durante la creazione delle pagine, utilizza: metodo drag-and-drop, combinazioni di colori illimitate, personalizzazione in tempo reale, cursori premium facili da usare. Tra i siti demo del tema ci sono modelli di pagine di destinazione per 11 progetti diversi.

39. Stoccolma

Stoccolma è uno dei 30 modelli WordPress più venduti sin dal suo inizio. Quando lavori con il tema, puoi impostare una combinazione di colori per l'intero sito o i suoi singoli elementi, utilizzare uno qualsiasi dei 600 caratteri Google e combinare opzioni e blocchi da diversi siti demo. Gli utenti che necessitano di una soluzione già pronta per un progetto aziendale possono scaricare i modelli di landing page e installarli immediatamente dalla sezione di creazione del sito web.

Un'altra opzione dimostrativa:

40. Dinamica massiccia

Più di 70+ widget con cui le tue landing page saranno uniche e moderne. Caratteri Google, infografiche, adattamento al SEO, codice pulito, creazione di portafogli convenienti: questi sono solo una parte dei vantaggi di questo modello. I pianerottoli, in senso letterale, possono essere assemblati letteralmente come un mosaico, semplicemente trascinandoli. Nella pagina di descrizione puoi vedere esempi visivi.

Quando visualizzi i siti demo, vuoi usarli tutti.

»Modelli WordPress gratuiti per pagine di destinazione - TOP 30

Modelli WordPress gratuiti per pagine di destinazione: TOP 30

Nello specifico, questo articolo prenderà in considerazione miglior atterraggio Modelli WordPress, che potrebbe essere adatto a te. Conterranno tutti uno screenshot e una versione demo del design in modo che tu possa valutare il tema e scaricarlo immediatamente se ti piace.

Molto spesso i modelli di landing page per WordPress vengono distribuiti a pagamento, ma per te li ho raccolti migliore e gratuito in questo articolo per facilitare la ricerca.

Potrebbe interessarti anche Per chi cerca hosting 1.

è un tema di una pagina che ti aiuterà a creare un sito Web senza troppi sforzi. D'altra parte, ha un design disegnato in modo professionale, parallax scrolling, che ci permette di definire questo tema “bellissimo”. Questo modello è adatto per startup e piccole imprese.

2.

è un tema WordPress multifunzionale. Include un'interfaccia vivace, un classico effetto di parallasse e altre animazioni che rendono la visualizzazione del tema ancora più piacevole. Zerif Lite è un tema cross-browser ben scritto anche in termini di codice.

3. Alhena Lite

Alhena Lite è un tema WordPress aziendale gratuito completamente integrato con il plug-in WooCommerce per consentirti di configurare facilmente il tuo negozio online.

4.

è un tema aziendale pulito e semplice, completamente reattivo e che include molte delle funzionalità più popolari per semplificare la creazione di siti Web.

5. Palma

Palmas è un tema moderno realizzato in colori chiari, adatto per gestire un blog personale o di moda. Questo modello supporta anche plugin come Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache e molti altri.

6. Birreria

Brasserie è un semplice modello WordPress perfetto per un ristorante, un bar o un sito culinario. Include effetti di animazione e una grande quantità di funzionalità.

7. XT Aziendale lite

XT Corporate lite è un tema semplice e minimalista adatto a un piccolo prodotto o servizio.

8.

è un tema piacevole realizzato con colori chiari. Include varie animazioni, transizioni visivamente sorprendenti ed effetti di parallasse. Inoltre, Freesia Empire supporta plugin come Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack di WordPress.com, Polylang, Newsletter, bbPress e WooCommerce.

9.

è un argomento adatto alla presentazione di piccole e medie imprese. Include grande quantità funzioni e add-on per la gestione completa della struttura di sbarco.

10.

è un tema versatile con molte funzionalità. È adattivo, tutti gli elementi sono animati con un effetto di parallasse. Una pagina è facile da personalizzare e consente di visualizzare le modifiche in tempo reale. L'attuale tema di destinazione supporta anche un gran numero di plugin WordPress di base.

11. Fotografia

FotoGraphy è una landing page adatta a fotografi o designer. La semplicità e la presenza di un gran numero di funzioni lo rendono ancora più scalabile e personalizzabile.

12. Tema integrale

Il tema integrale è un tema di parallasse di una pagina adatto a creativi, imprenditori o agenti. Ci vorranno solo un paio di minuti per configurarlo.

13. Quadrato

Square è un tema minimalista che può essere utilizzato per qualsiasi tipo di sito web. È più adatto per le piccole e medie imprese. Square è configurato per molti plugin WordPress popolari ed è anche ottimizzato per il SEO.

14.Ravvivare

Enliven è un tema di alta qualità. Lo definirei premium, poiché unisce qualità e bellezza in un'unica bottiglia. Supporta anche molti plugin popolari ed è facile da personalizzare.

15. Latte

Latte è un modello per i fotografi. Ha tutto per permetterti di mostrare adeguatamente il tuo portafoglio e di parlare di te stesso. La configurazione avviene in un paio di clic.

16. Il lunedì

Il lunedì è un tema elegante adatto ad un'azienda o ad un libero professionista. Viene fornito con un gran numero di funzionalità, extra e componenti aggiuntivi.

17. Mondo degli affari

Business World è un modello correlato ad argomenti aziendali. Unisce stile e qualità. Il mondo degli affari può anche essere personalizzato per il sito web personale, aziendale o di un fotografo. Le sue capacità ti consentono di ricavarne quasi tutto ciò che desideri.

18.

- Questo è un tema piacevole, realizzato con colori chiari. È perfetto per le piccole e medie imprese, nonché per un sito Web personale. Puoi personalizzare tutto ciò che desideri al suo interno. Ci sono molte funzionalità e aggiunte che rendono questo modello ancora migliore e più attraente.

19.Onetone

Onetone è un modello di una pagina per WordPress adatto per presentare "io" su Internet (mostra il tuo portfolio e/o parla di te).

20. Alzati

Arise è un modello WordPress minimalista di una pagina adatto a un piccolo prodotto o una piccola impresa. Non c'è nulla di superfluo in esso, solo tutto ciò che è più importante.

21. Woot

Woot è un modello minimalista realizzato in colori scuri per la gestione di un negozio online. Funziona con WooCommerce e molti altri plugin popolari.

22. Ovest

West è un tema semplice adatto per un'agenzia, una piccola impresa o un sito Web di portfolio. Comprende un gran numero di funzioni, impostazioni e disposizione degli elementi.

23. Anaglifo Lite

Anaglyph Lite è un modello semplice ed elegante adatto a blog e negozi online. È già configurato con WooCommerce e altri plugin popolari.

24.

è un bel tema realizzato in colori scuri combinati con elementi colorati, adatto per presentare la tua attività, portfolio o prodotto. Dopo aver seguito il collegamento, clicca su “Scarica ora” nel blocco BeOnePage Lite e scaricherai versione gratuita questo argomento.

25.

è un modello di una pagina incluso nella categoria: fitness, yoga, pilates, centro benessere e molti altri. ecc. Lo stile è realizzato in colori scuri, cross-browser, adattivo e funziona su tutti i dispositivi.

26. Aglee Lite

Aglee Lite è un semplice modello aziendale progettato nei toni del grigio chiaro e del blu. Questo tema è perfetto per una startup o una piccola impresa.

27.

è un tema aziendale potente e funzionale. Dispone di un comodo editor che ti consente di visualizzare le modifiche in tempo reale. Wimpie Lite è compatibile con tutti i browser, reattivo e facile da caricare.

28.

- è multiuso Tema WordPress, realizzato in colori chiari ed è adatto per un sito Web aziendale, un portfolio personale o un blog.

I modelli di landing page già pronti sono necessari per lanciare rapidamente un nuovo prodotto, promuoverlo utilizzando una pagina LP o un'applicazione mobile o motivare gli utenti a registrarsi / iscriversi a una newsletter. Per una landing page, la comodità e la facilità d'uso con un layout corretto sono estremamente importanti. I moderni modelli di landing page di vendita sono sviluppati tenendo conto della capacità di creare un sito Web reattivo con tassi di conversione elevati.

Dimostrazione | Crossway: modello di pagina di destinazione di avvio

Tema HTML5 ultramoderno basato su Bootstrap 3.1.1. Viene fornito con 4 layout: pagina singola/multipagina, opzioni della barra di navigazione. Nel tema della landing page è integrato un leggero effetto di parallasse scrolling, adattato al traffico mobile e organico (SEO).

Dimostrazione | Punto quadrato

Modello di pagina di destinazione HTML per web e applicazioni mobili, mirato alla facile generazione di lead. Possiede caricamento veloce e codice html e css valido. Nella parte superiore della pagina di una pagina è presente un modulo di contatto duplicato con .

Dimostrazione | Modello di pagina di destinazione responsivo Primo

Modello di destinazione HTML5 di una pagina con effetti CSS3. Ha un frame a tre colonne, creato su Bootstrap 3. Adatto per la vendita di applicazioni iOS/Android. Il modello include 2 layout (con e senza Parallax), Si forma l'Ajax contatti, lightbox PrettyPhoto e 5 combinazioni di colori. Facile da personalizzare: cambia i codici esadecimali e gli elementi correlati verranno colorati con un nuovo colore. PSD incluso.

Dimostrazione | Hype: pagina di destinazione dell'app

Il modello di app mobile moderno e pronto per Retina offre 8 opzioni di colore, opzioni di immagine/.

Dimostrazione | Pagina di destinazione multiuso Gotte

Il modello di pagina di destinazione multiuso in stile piatto include 3 opzioni di indice e 6 combinazioni di colori. Modello creato su Twitter bootstrap3, incluso Scritto PHP moduli di contatto e download.

Dimostrazione | Calunnia: pagina di destinazione HTML5 Bootstrap reattiva

Slander è un'opzione ideale per startup e aziende, adatta a professionisti o a un progetto individuale. Include design reattivo con Bootstrap e HTML5/CSS3 cursore adattivo, dispositivo di scorrimento delle schede, modulo di abbonamento alle notizie, ecc.

Dimostrazione | Appster: modello di pagina di destinazione per app pulita e definitiva

Cloud: una pagina di destinazione dell'app facile da usare

Modello di pagina di destinazione HTML5 / CSS3 elegante, pulito e minimalista con funzionalità eccellenti. Il modello è progettato per la pagina Coming Soon (in lancio a breve), ideale per creare una pagina di applicazione e un sito vetrina.

Dimostrazione | OnEvent – ​​Pagina di destinazione dell'evento speciale

Modello di destinazione adattivo per offerte speciali. eventi. Ha sezioni per video commerciali, programma di eventi, elenco degli invitati.

Il tema della pagina di destinazione è completamente logoro. Anche se il boom delle landing page si è un po’ attenuato, le landing page sono ancora molto richieste. Vengono lanciati da tutti, anche se per le loro nicchie di business questa è chiaramente una mossa perdente. Alcune persone lo fanno solo per giocare, altre lo fanno per fare soldi. Ma non è così importante quali obiettivi persegui, l'importante è che tutti avranno bisogno dello sviluppo della pagina. Alcuni ordineranno da professionisti, mentre altri, per un motivo o per l'altro, inizieranno a creare da soli la propria Landing Page. È proprio a quest'ultimo che è dedicata questa collezione.

Le persone che decidono di creare un sito web da sole possono iniziare lo sviluppo da zero, oppure possono utilizzare quelli già pronti, perché non richiedono conoscenze particolari nello sviluppo. Abbastanza conoscenza di base HTML e CSS, quelli che insegnano a scuola. Anche qui sorge la domanda. Dovrei usare il servizio a pagamento o quello gratuito? Naturalmente, quello a pagamento sarà di qualità molto più elevata e probabilmente mostrerà conversioni più elevate. Quello gratuito sarà meno bello, meno elaborato in termini di marketing, layout e design.

Questa selezione è composta da quelli gratuiti in puro HTML per Creazione dell'atterraggio Pagina. Inizialmente, la selezione consisteva in 40 posizioni, ma quando mi sono svegliato la mattina e ho guardato questi modelli con occhi nuovi, ho deciso di eliminarne la maggior parte, dato che, francamente, era spazzatura, e ce ne sono già molti spazzatura su Internet. Rimangono solo i modelli più degni sui quali puoi almeno costruire qualcosa. La selezione include modelli di pagine di destinazione per una varietà di argomenti, ma, per qualche motivo, prevalgono gli LP per applicazioni mobili. Si sono rivelati della massima qualità.

In precedenza, abbiamo già effettuato selezioni da modelli di pagine di destinazione gratuiti. Sono stati adattati a un tema specifico. Questa volta ho deciso di creare un argomento di raccolta che non appartiene a nessuna direzione.

Altre raccolte di modelli di pagine di destinazione HTML gratuiti:

A proposito. Se, per qualche motivo, vuoi inserire questi modelli nel motore Wordpress, su questo argomento una volta ho fatto una selezione di plugin per creare una landing page su Wordpress. Puoi provare a usarli. Ciò potrebbe far risparmiare molto tempo. Anche se, personalmente, non vedo molto senso nel farlo, dato che il puro HTML è sufficiente per un semplice LP.

COSÌ. Portiamo alla tua attenzione 20 modelli di pagine di destinazione HTML gratuiti.

Appi - Modello con video di sfondoUn altro modello di pagina di destinazione per un'applicazione mobile con un video di sfondo a schermo intero. A differenza del modello con sfondo video, che verrà presentato di seguito, questo è di qualità molto superiore, sebbene sia adattato a un tema specifico.

BukkuModello HTML gratuito per la creazione di una pagina di destinazione per la vendita di libri. Realizzato in stile Flat nei toni del verde. C'è qualche animazione divertente.
Lo sviluppatore fornisce anche sorgenti in formato PSD per il download gratuito.

Pagina di destinazione per la vendita di caffè Modello di pagina di destinazione HTML per la vendita di caffè. La progettazione e l'implementazione del layout sono molto interessanti. C'è un'animazione degli elementi durante lo scorrimento della pagina. Tutto è fatto con colori tenui. Perfetto per le organizzazioni che consegnano caffè. Tuttavia, questo modello può essere facilmente rifatto per adattarlo al tuo tema sostituendo le immagini.

Landing Zero - Landing con video di sfondo Modello HTML gratuito con un video di sfondo di un tema universale. Adatto per creare un portfolio per un libero professionista di qualsiasi specializzazione, sia esso un fotografo o un designer.
Affatto, modello gratuitoÈ difficile trovarne di con video di sfondo. Quindi scarichiamo.
Il video nella prima schermata può essere sostituito con il tuo e, se non ce n'è, puoi scaricarlo da uno stock video gratuito. In precedenza ho fornito un elenco di titoli video con video legali.

EngageUn altro one-pager reattivo universale su Bootstrap. La pagina è adatta per una semplice presentazione del prodotto. La struttura ricorda una pagina di presentazione dei prodotti Apple.

Pagina di destinazione per un bar o un ristorante Un modello di pagina di destinazione gratuito familiare all'utente medio di RuNet con un modulo di acquisizione nella prima schermata. Progettato per creare una landing page per un bar, un ristorante, una caffetteria o qualsiasi cosa a tema culinario. Utilizzando il modulo di richiesta è possibile prenotare un tavolo per un orario specificato.

OleoseAltissima qualità, adattivo, gratuito, ma ancora una volta per un'applicazione mobile. La pagina di destinazione è implementata sul framework Bootstrap. Ha tre opzioni di colore: azzurro, verde chiaro e viola. Tuttavia, non è strettamente adattato al suo tema, quindi può essere facilmente rifatto per adattarlo alle tue esigenze.

Prendi: sito web gratuito di una pagina E ancora un altro modello HTML gratuito di una pagina per un'applicazione mobile. Tuttavia, il suo design è molto interessante e insolito. Direi addirittura unico. La maggior parte dei visitatori del corpo di guardia non sono sviluppatori di applicazioni mobili, quindi dovrai rifare tutto per adattarlo al tuo tema.

Foodee Modello HTML5 gratuito di una pagina per creare una landing page per un bar, un ristorante o qualche tipo di punto di ristoro. Modello con immagine di sfondo a schermo intero ed effetti di parallasse.
Esistono blocchi come: menu, eventi imminenti, recensioni dei clienti e una serie standard di blocchi in cui puoi inserire vantaggi, ecc.

BIANCO Considererei questo modello come una sorta di framework html per la creazione di un sito Web di una pagina. Non è adattato a nessun argomento, quindi tutto è nelle tue mani. È disponibile il supporto per il video di sfondo a schermo intero. Inoltre, ha un set standard di blocchi, tipico di un sito web di una pagina.

Cyprass Template è adatto per creare una Landing Page per qualsiasi azienda digitale: studio web, team di liberi professionisti o simili. Dispone di tutte le risorse necessarie per farlo: un portfolio con filtro per lavoro, vari grafici a torta, schede, cursori... Inoltre, supporta il video di sfondo nella prima schermata.

Saluti, miei cari lettori. Oggi parleremo degli aspetti tecnici con cui possiamo aumentare la conversione delle vendite dei nostri beni o servizi. Uno di punti importantiè ben pensato pagina di destinazione con le merci. 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.

Pertanto, prima di creare pagina di destinazione, Chiedilo a te stesso:

• 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 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. Il vantaggio di questa griglia già pronta è che i contenitori sono progettati pensando all'adattabilità e sono immediatamente utilizzabili 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======== */
/* forma generale 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" //