Un site web de o pagină este convenabil pentru oamenii de afaceri, deoarece poate fi creat literalmente într-o singură zi. Dacă descărcați un șablon de site web gata făcut de o pagină, puteți crea un site web pentru compania dvs. pentru o sumă minimă, deoarece trebuie să plătiți doar pentru găzduire. Pentru client, un site web de o pagină este convenabil deoarece toate informațiile de pe acesta sunt prezentate cât mai concis și structurat posibil, nu este nimic de prisos. Datorită confortului lor pentru clienți, site-urile web cu o pagină prezintă adesea rate de conversie mai mari decât alte tipuri de site-uri.
Cum să alegi un șablon de o pagină?Dacă decideți să faceți o pagină de destinație pentru compania dvs., puteți descărca șablonul de pe site-ul nostru. Verificăm cu atenție toate șabloanele pentru viruși, astfel încât să nu vă faceți griji cu privire la descărcarea unui fișier infectat. Toate șabloanele de pagini de destinație din catalogul nostru au un design modern, realizat într-o varietate de stiluri. Abilitatea de a ajusta numărul de blocuri, de a schimba schema de culori și alte funcții vă va ajuta să creați un site web unic, original, bazat pe un șablon simplu.
Vă invităm să descărcați șabloane de site-uri web de o paginăPrincipala problemă a celor care decid să descarce gratuit un șablon de pagină de destinație este numărul mare de viruși și erori din șabloanele gratuite. Prin urmare, este foarte important să găsiți un site sigur și de încredere. Vă invităm să ne vizitați, deoarece monitorizăm cu atenție siguranța. În plus, vă vom încânta cu cea mai largă gamă de șabloane HTML de o pagină, pe care le puteți descărca chiar acum!
Citiți textul în continuare...Pentru companii, utilizarea paginilor de destinație a devenit una dintre cele mai simple și mai profitabile soluții. Șabloanele de pagini de destinație WordPress au devenit un instrument popular pentru crearea unor astfel de site-uri. Ele se bazează pe un „sistem de implicare” atent și puternic pentru a transforma traficul în venituri.
Acestea oferă:
Un șablon cu tipografie de ultimă generație, una dintre temele creative de top. Pluginuri gratuite incluse în temă: Visual Composer, Layer Slider, Timetable, Visual Composer. Bridge include o colecție extinsă de coduri scurte, de la blocuri de bază până la infografice interactive și elemente demonstrative avansate, cum ar fi barele de progres verticale.
Site-ul web conține oferte atractive, modele de mașini și planuri tarifare pentru servicii. Glisorul de paralaxă și glisorul vertical atrag o atenție deosebită.
Pagina de destinație pentru un psiholog privat prin care poți vinde cărți protejate prin drepturi de autor. Un formular de abonament elegant vă ajută să vă extindeți baza de clienți.
O pagină de destinație în culori strălucitoare alb și albastru cu informații despre servicii și un sistem de rezervare încorporat.
Site demonstrativ pentru un adăpost de animale cu un catalog de secții și funcționalitate de colectare a donațiilor.
Pe paginile șablonului puteți vedea blocuri cu un program de evenimente bisericești și povești ale enoriașilor. Site-ul acceptă contribuții online.
Pagina de destinație în culori deschise. Utilizează un glisor de revizuire și contoare animate.
Site-ul portofoliu alb-negru. Conținutul principal al paginii principale este un glisor orizontal pe ecran complet și un meniu de navigare.
Un site demonstrativ pentru un proiect de afaceri folosește efecte de defilare, care sunt atât de populare în șabloanele moderne de pagini de destinație, precum și glisoare și elemente grafice familiare WordPress.
Un site simplu de o pagină pentru un studio de yoga. Componentele sale includ un bloc cu indicatori de realizare și un glisor mare în antet.
Pagina de destinație alb-negru cu blocuri tematice „Indicații de antrenament”, „Orarul cursului”, „Coaching personal”.
Demo pentru un portal de călătorie. În partea de sus există un banner larg cu text pop-up, meniul își schimbă culoarea pe măsură ce derulați.
Pagina de destinație pentru demonstrarea ceasurilor de lux folosește o mulțime de fotografii și fundaluri de paralaxă. Schema de culori a paginilor este albă cu accente gri închis.
Designul simplu al site-ului conține un minim de animație - un meniu de sus care schimbă culoarea care se extinde la ecran complet, blocuri cu un fundal paralax.
Un site web corporativ mic, cu un glisor mare în antet. La fel ca șabloanele similare de pagini de destinație realizate pe WordPress, această pagină de destinație folosește un aspect „lățime ecran complet”.
Un site pentru un muzician rock, cu accent principal pe activitățile de turneu: blocurile mari folosesc fotografii de concert ca fundal, cele mai recente articole de blog sunt afișate pe pagina principală.
Un șablon popular ale cărui principale proprietăți sunt designul receptiv, compatibilitatea cu Retina și versatilitatea. Utilizatorul poate alege dintre 2 designeri vizuali - MuffinBuilder și Visual Composer, precum și pluginuri pentru slidere Slider Revolution, Layer Slider.
Următoarele șabloane de pagini de destinație gata făcute au fost create pe BeTheme:
Demo pentru un sushi bar. Conținutul principal al site-ului este situat pe un fundal deschis încadrat de meniuri și subsoluri gri închis. Bannerul de sus și glisorul elementelor de meniu vă permit să demonstrați articole noi din sortiment.
Un fundal alb cu text contrastant pe blocul principal asigură o bună lizibilitate. Elementele auxiliare - antet, bara laterală stânga, subsol - sunt realizate în tonuri de albastru închis. Derularea paginii este însoțită de deplasarea paralaxă a fundalului.
Pagina de destinație WordPress pentru o fabrică de bere locală. Pagina este decorată în tonuri maro intercalate cu verde. Când derulați, puteți observa un efect de paralaxă impresionant.
Un șablon elegant al cărui design de culoare se bazează pe nuanțe de gri. Partea de sus a paginii este stilizată ca un loc de muncă cu un reflector care poate fi aprins și un computer.
Site-ul unui salon de frizerie profesionist în tonuri de alb și maro. Designul său este de remarcat: un glisor mare cu text pop-up, o listă de prețuri cu file comutabile, CV-uri ale angajaților și un formular de înregistrare online.
Șablon în culori strălucitoare de galben, alb și albastru pentru locul unui parc acvatic, plajă plătită, piscină. Paginile sale includ un derulant Întrebări frecvente, o galerie în stil zidărie, o hartă interactivă și panouri cu un apel pentru achiziție.
Un site web al agenției de recrutare conceput în stil business. Culoarea principală a paginilor, verde, este completată de blocuri de nuanțe de gri și alb. Demo-ul are butoane pentru accesarea paginilor cu informații detaliate, o secțiune pentru prezentarea serviciilor cu video.
Șablon cu un design „aerisit” în tonuri roz-liliac. Potrivit pentru site-ul unei companii MLM sau pagina personală a unui agent care promovează produse cosmetice online Faberlic, Avon și mărci similare.
O temă universală WordPress receptivă integrată cu generatorul de pagini Visual Composer și pluginul Ultimate Addons. Printre site-urile sale demonstrative puteți găsi și descărca un șablon de pagină de destinație, a cărui sarcină este de a atrage clienți și de a crește conversia unei resurse web. Șablonul are pluginuri premium încorporate Go Pricing Tables, Slider Revolution, ConvertPlug, Layer Slider.
Magazin online de gustari bio. Pagina de destinație conține un glisor de produs, un bloc care descrie beneficiile acestuia, carduri de ingrediente și recenzii ale clienților.
Acest șablon de pagină de destinație „Reparații și construcție” prezintă serviciile companiei, partenerii și angajații, prezentând informații prin glisoare și secțiuni cu carduri.
Demo pentru o clinică de consiliere psihologică. Un design calm al site-ului pune clientul în largul său și inspiră încredere specialiștilor în consultanță.
Un site de îmbrăcăminte care folosește o temă deschisă și elemente decorative albastru închis (meniu, butoane, subsol). Componentele principale ale paginii sunt un glisor cu bannere animate și carduri de produse.
Un șablon cu performanță sporită, pe lângă un set de plugin-uri și module, echipat cu un Panou de Opțiuni Nelimitate. Folosește pluginuri premium Revolution Slider, Visual Composer. Suportul activ al temei, prezența videoclipurilor și a manualelor text îl fac o opțiune bună pentru cei care urmează să cumpere un șablon de pagină de destinație pentru prima dată.
Designul include culorile alb, gri și maro. Un element memorabil este un glisor de probă de portofoliu cu mai multe file.
Cele mai impresionante componente ale demo-ului sunt un bloc de meniu restaurant cu prețuri și o secțiune cu un videoclip, căruia i se aplică o schimbare de paralaxă la derulare.
Site-ul este format aproape în întregime din fotografii, iar când treci cu mouse-ul peste ele, apare un link cu numele proiectului. Pictograma hamburger extinde meniul pe ecran complet.
Pagina de destinație va promova serviciile clubului de fitness prin prezentarea echipei sale potențialilor clienți și evidențierea programelor de antrenament. Un contor animat de indicatori de succes ajută la creșterea încrederii în companie.
Când derulați pagina cu mouse-ul, secțiunile se înlocuiesc între ele, ocupând complet ecranul. Ultima „foaie” afișează formularul de contact.
Blocurile grafice în nuanțe de gri închis și gri deschis descriu avantajele software-ului promovat. Glisorul arată capturi de ecran pe ecranul telefonului virtual.
Pagina este împărțită în 2 părți - text și fotografii. Pe măsură ce derulați, conținutul se schimbă: partea stângă urcă, partea dreaptă coboară, în timp ce conținutul text și foto se alternează.
Un șablon universal pentru proiecte concepute pentru înaltă performanță. Tema acceptă multilingvismul și modul RTL. Site-urile demonstrative de pe TheGem includ șabloane de pagini de destinație receptive. Șablonul vine cadou: constructor Visual Composer și pluginuri responsabile pentru glisoare adaptive - LayerSlider, NivoSlider, Revolution Slider.
Site-ul studioului de creație. Schema de culori gri închis a paginilor este diluată cu blocuri de culori deschise. Un meniu cu mai multe niveluri facilitează navigarea, iar un subsol extins conține formulare de feedback și de abonare.
Conceput pentru a crea o resursă web dedicată prezentării unui singur produs sau a unei serii de produse. Meniul își schimbă culoarea pe măsură ce derulați, pagina conține o afișare animată de elemente și secțiuni cu un fundal video.
Site web cu o singură pagină pentru promovarea software-ului. Elementele din meniul de sus mută vizitatorul prin secțiunile paginii. Un element interesant al site-ului este un slider de capturi de ecran, una după alta, adaptându-se la ecranul telefonului mobil.
Tema Pagina de destinație este complet uzată. Deși boom-ul paginilor de destinație a încetat puțin, paginile de destinație sunt încă solicitate. Sunt lansate de toată lumea, chiar dacă pentru nișele lor de afaceri aceasta este în mod clar o mișcare pierzătoare. Unii oameni o fac doar pentru a se juca, iar alții o fac pentru a câștiga bani. Dar nu este atât de important ce obiective urmăriți, important este că toată lumea va avea nevoie de dezvoltare a paginii. Unii vor comanda de la profesioniști, în timp ce alții, dintr-un motiv sau altul, vor începe să-și creeze ei înșiși propria lor Landing Page. Tocmai celor din urmă îi este dedicată această colecție.
Persoanele care decid să-și creeze ei înșiși un site web pot începe dezvoltarea de la zero, sau pot folosi cele gata făcute, deoarece nu necesită cunoștințe speciale în dezvoltare. Cunoștințele de bază despre HTML și CSS, genul pe care le predau la școală, sunt suficiente. Aici se pune din nou întrebarea. Ar trebui să folosesc plătit sau gratuit? Bineînțeles, cel plătit va fi de o calitate mult mai mare și probabil va afișa conversii mai mari. Cel gratuit va fi mai puțin frumos, mai puțin elaborat în ceea ce privește marketingul, aspectul și designul.
Această selecție constă din cele gratuite în HTML pur pentru crearea unei pagini de destinație. Inițial, selecția a constat din 40 de poziții, dar când m-am trezit dimineața și m-am uitat la aceste șabloane cu ochi proaspeți, am decis să șterg cele mai multe dintre ele, deoarece era, sincer vorbind, un gunoi și există deja o mulțime de gunoi pe internet. Rămân doar cele mai demne șabloane pe care poți măcar să construiești ceva. Selecția include șabloane de pagini de destinație pentru o varietate de subiecte, dar, din anumite motive, predomină LP-urile pentru aplicații mobile. S-au dovedit a fi de cea mai înaltă calitate.
Anterior, am făcut deja selecții din șabloanele gratuite pentru pagini de destinație. Au fost adaptate unei anumite teme. De data aceasta m-am hotarat sa fac un subiect de colectie care nu apartine nicio directie.
Alte colecții de șabloane gratuite pentru pagini de destinație HTML:
Apropo. Dacă, dintr-un motiv oarecare, doriți să trageți aceste șabloane în motorul Wordpress, atunci pe acest subiect am făcut odată o selecție de plugin-uri pentru crearea unei pagini de destinație pe Wordpress. Puteți încerca să le folosiți. Acest lucru ar putea economisi mult timp. Deși, personal, nu văd prea mult rost să fac asta, deoarece HTML pur este suficient pentru un simplu LP.
Aşa. Vă aducem la cunoștință 20 de șabloane gratuite pentru pagini de destinație HTML.
Appi - Șablon cu videoclip de fundal Un alt șablon de pagină de destinație pentru o aplicație mobilă cu un videoclip de fundal pe ecran complet. Spre deosebire de șablonul cu fundal video, care va fi dat mai jos, acesta este de o calitate mult mai mare, deși este adaptat unei anumite teme.
Dezvoltatorul oferă și surse în format PSD pentru descărcare gratuită.
În general, este dificil să găsești șabloane gratuite cu videoclipuri de fundal. Deci hai să descarcăm.
Videoclipul din primul ecran poate fi înlocuit cu al tău, iar dacă nu există, îl poți descărca dintr-un stoc video gratuit. Am furnizat mai devreme o listă de stocuri video cu videoclipuri legale.
Există astfel de blocuri precum: meniu, evenimente viitoare, recenzii ale clienților și un set standard de blocuri în care puteți plasa avantaje etc.
» Șabloane WordPress gratuite pentru pagini de destinație - TOP 30
Șabloane WordPress gratuite pentru pagini de destinație - TOP 30Mai exact, acest articol va discuta despre cele mai bune șabloane WordPress de aterizare care pot fi potrivite pentru tine. Toate vor include o captură de ecran și o versiune demonstrativă a designului, astfel încât să puteți evalua tema și să o descărcați imediat dacă vă place.
De foarte multe ori șabloanele de aterizare pentru WordPress sunt distribuite contra cost, dar pentru tine am colectat cel mai bun și gratuitîn acest articol pentru a vă ușura căutarea.
Ați putea fi, de asemenea, interesat de Pentru cei care caută găzduire 1.este o temă de o pagină care vă va ajuta să creați un site web fără prea mult efort. Pe de altă parte, are un design desenat profesional, paralax scrolling, care ne permite să numim această temă „frumoasă”. Acest șablon este potrivit pentru startup-uri și întreprinderi mici.
2.este o temă WordPress multifuncțională. Include o interfață luminoasă, efect clasic de paralaxă și alte animații care fac vizionarea temei și mai plăcută. Zerif Lite este o temă între browsere, care este, de asemenea, bine scrisă din punct de vedere al codului.
3. Alhena Lite
Alhena Lite este o temă WordPress gratuită pentru întreprinderi, care este complet integrată cu pluginul WooCommerce, astfel încât să vă puteți configura cu ușurință magazinul online.
4.
este o temă de afaceri curată, simplă, care este pe deplin receptivă și include multe dintre caracteristicile populare pentru a facilita crearea site-ului web.
5. Palmas
Palmas este o temă modernă realizată în culori deschise, care este potrivită pentru rularea unui blog personal sau de modă. Acest șablon acceptă și pluginuri precum Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache și multe altele.
6. Braseria
Braseria este un șablon WordPress simplu, perfect pentru un restaurant, cafenea sau site culinar. Include efecte de animație, precum și o cantitate mare de funcționalități.
7. XT Corporate lite
XT Corporate lite este o temă simplă și minimalistă, potrivită pentru un produs sau serviciu mic.
8.
este o temă plăcută realizată în culori deschise. Include diverse animații și tranziții uimitoare din punct de vedere vizual și efect de paralaxă. În plus, Freesia Empire acceptă pluginuri precum Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress și WooCommerce.
9.
este o temă potrivită pentru prezentarea întreprinderilor mici sau mijlocii. Include un număr mare de funcții și suplimente pentru gestionarea completă a structurii de aterizare.
10.
este o temă versatilă cu multă funcționalitate. Este adaptativ, toate elementele sunt animate cu efect de paralaxă. O singură pagină este ușor de personalizat și vă permite să vizualizați modificările în timp real. Tema actuală de aterizare acceptă, de asemenea, un număr mare de pluginuri WordPress de bază.
11. Fotografie
FotoGraphy este o pagină de destinație potrivită pentru fotografi sau designeri. Simplitatea și prezența unui număr mare de funcții îl fac și mai scalabil și personalizabil.
12. Tema integrală
Tema integrală este o temă de paralaxă de o pagină potrivită pentru reclame, proprietari de afaceri sau agenți. Îți va lua doar câteva minute pentru a-l configura.
13. PătratSquare este o temă minimalistă care poate fi folosită pentru orice tip de site web. Este cel mai potrivit pentru întreprinderile mici și mijlocii. Square este configurat pentru multe plugin-uri WordPress populare și este, de asemenea, optimizat pentru SEO.
14.ÎnvioreazăEnliven este o temă de înaltă calitate. Aș numi-o premium, deoarece combină calitatea și frumusețea într-o sticlă. De asemenea, acceptă multe plugin-uri populare și este ușor de personalizat.
15. LatteLatte este un șablon pentru fotografi. Are totul pentru ca tu să-ți arăți în mod adecvat portofoliul, precum și să spui despre tine. Configurarea are loc în câteva clicuri.
16. LuniLuni este o temă elegantă potrivită pentru o afacere sau un freelancer. Vine cu un număr mare de funcții și suplimente și suplimente.
17. Lumea afacerilorBusiness World este un șablon care are legătură cu subiecte de afaceri. Combină stilul și calitatea. Lumea afacerilor poate fi, de asemenea, personalizată pentru un site web personal, corporativ sau al unui fotograf. Capacitățile sale vă permit să faceți aproape orice doriți din el.
18.- Aceasta este o temă plăcută, care este realizată în culori deschise. Este perfect pentru întreprinderile mici și mijlocii, precum și pentru un site web personal. Puteți personaliza orice doriți în el. Există multe caracteristici și completări care fac acest șablon și mai bun și mai atractiv.
19.Onetone
Onetone este un șablon de o pagină pentru WordPress, care este potrivit pentru prezentarea „Eu” pe Internet (arată-ți portofoliul și/sau vorbește despre tine).
20. Ridică-teArise este un șablon WordPress minimalist de o pagină, potrivit pentru un produs mic sau o afacere mică. Nu este nimic de prisos în ea, doar tot ceea ce este cel mai important.
21. WootWoot este un șablon minimalist realizat în culori închise pentru rularea unui magazin online. Funcționează cu WooCommerce și multe alte plugin-uri populare.
22. VestWest este o temă simplă potrivită pentru o agenție, o afacere mică sau un site web de portofoliu. Include un număr mare de funcții, setări și aranjare a elementelor.
23. Anaglif LiteAnaglyph Lite este un șablon simplu și elegant, potrivit pentru blogging și magazine online. Este deja configurat cu WooCommerce și alte plugin-uri populare.
24.
Salutări, dragii mei cititori. Astăzi vom vorbi despre aspectele tehnice cu ajutorul cărora putem crește conversia în vânzări a bunurilor sau serviciilor noastre. Unul dintre punctele importante este o pagină de destinație bine concepută cu produse. Așa-numita pagină de destinație, despre crearea căreia vom vorbi mai târziu și vom obține coduri de pagină gata făcute.
Ce este o pagină de destinație? Aceasta este pagina pe care oamenii ajung de obicei după ce fac clic pe un anunț. Creat pentru o singură ofertă: produs, serviciu sau abonament. O pagină de destinație eficientă este piatra de temelie a marketingului online de succes. Produsul poate fi cel mai bun de pe piață, reclamele sunt perfecționate, dar fără o pagină de destinație bună, eforturile nu produc rezultate 100%. Le spune vizitatorilor ce este oferit și de ce ar trebui să o dorească. Un sentiment de urgență contribuie la luarea rapidă a deciziilor și la trecerea utilizatorului la categoria de client.
Cum se creează o pagină de destinație? Este greșit să credem că răspunsul constă în capacitatea de a tipografi. O pagină de destinație bună este rezultatul muncii coordonate privind obiectivele, textul, designul și codul. Paginile de destinație, dintre care exemple vor fi mai jos, îi vor ajuta pe începători să învețe elementele de bază ale lucrului cu aspectul, dar nu vor înlocui textele de conversie și înțelegerea publicului țintă. De asemenea, le puteți crea folosind diverși designeri de pagini de destinație.
Deci, înainte de a crea o pagină de destinație, întrebați-vă:
- Ce va face o persoană după ce ajunge pe pagina de destinație? Va cumpăra ceva? Vei completa formularul? Vă abonați la newsletter? Înainte de a urmări rata de conversie, setați obiective clare.
- Cine sunt concurenții mei? În realitate, acestea sunt trei întrebări: cine, cât de reușite au și cum pot fi aplicate realizările lor? Imitația este cea mai sinceră formă de lingușire. Dacă concurenții tăi fac ceva care funcționează, replica-l pe site-ul tău.
- Cine este publicul meu? Cu cât vă înțelegeți mai bine nișa și publicul țintă, cu atât sunt mai mari șansele ca eforturile dvs. să dau roade.
Trebuie să oferi toate informațiile necesare, dar nu atât de mult încât să copleșească și să alunge potențialul client.
Exemple de creare a unei pagini de destinație + codare pentru manechineÎnainte de a începe, să aruncăm o privire rapidă la HTML și CSS. Înțelegerea modului în care funcționează vă va ajuta să creați o aterizare.
HTML este un limbaj de markup al browserului pentru vizualizarea site-urilor web. Scris folosind etichete incluse între paranteze unghiulare care definesc conținutul.
Eticheta se deschide () și se închide () în jurul umpluturii:
conţinut
Pentru reglaj fin, atributele sunt adăugate după nume:
conţinut
CSS - definește modul de aranjare a elementelor HTML. Constă din selectori, proprietăți și valori:
#selector (proprietate: valoare;)
Selectorul se potrivește cu numele unei anumite etichete în html. Schimbarea valorilor și adăugarea de proprietăți îi ajustează aspectul. Puteți crea pagini care arată diferit unele de altele, aplicând diferite stiluri CSS la același HTML.
5 pași inițialiPentru un aspect rapid, vom folosi un șablon cu un design minimal bazat pe bootstrap. Acesta este un sistem cu selectoare proprii, care este folosit în întreaga lume pentru a accelera aspectul.
Pare modest.
Din acest pește se creează un site web pentru fiecare gust în mai multe etape.
Structura directorului din folder:
- index.html: Acesta este fișierul principal pe care îl vom edita.
- /assets: fișierele auxiliare se află aici:
- /css: directorul conține stiluri bootstrap și pictograme. Fișierul pe care îl vom edita este main.css.
- /img: folder pentru imaginile site-ului.
- /fonts: fonturi pentru pictograme.
- /js: fișiere javascript bootstrap.
Pasul 1: Utilizarea unui antet
Titlul și subtitlurile sunt locuri cheie care ajută la transmiterea într-o manieră clară a valorii ofertei.
Să schimbăm titlul și numele site-ului. Aici nu trebuie să aveți abilități de tipografie - vă scrieți propriul text în locurile evidențiate cu galben pe ecran.
Pasul 2. Concizia este sora convertirii. Adăugarea de beneficii și tarife
Veți avea nevoie de 4 secțiuni:
- avantaje;
- tarife;
- recenzii;
- chemare la acțiune.
Să creăm o secțiune a conținutului principal „principal”, în care vom insera secțiunile necesare:
…..
…..
…..
…..
Umpleți cu umplutură în loc de puncte.
Pentru secțiunea de beneficii veți avea nevoie de acest cod:
Avantaje
Rapid
De încredere
Sed diam nonummy
Profitabil
Elit, sed diam nonummy
Tehnic
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
De încredere
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Profitabil
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Tehnic
Lorem ipsum dolor sit amet, consectetuer adipiscing
De încredere
Lorem ipsum dolor sit amet, consectetuer adipiscing
Profitabil
Lorem ipsum dolor sit amet, consectetuer adipiscing
Conținut pentru claritate:
Încă pare neglijent, dar nu există niciun motiv de panică, să continuăm.
Notam preturile. Conținutul se modifică în același mod ca în primul pas. Descriere generală cu clasa „tarife” și trei tarife.
Planuri tarifare
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.
Tariful nr. 1
$10
pe lună/per persoană
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Comanda
Tariful nr. 2
$20
pe lună/per persoană
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Comanda
Tariful nr. 3
$30
pe lună/per persoană
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Comanda
Arata cam asa.
Deși nu ne interesează aspectul viitoarei pagini de destinație, vom lua în considerare mai jos exemple de schimbare a stilurilor.
Pasul 3: Semnale de încredere și apel la acțiune
Utilizarea semnalelor direcționate indică vizitatorilor că marca este de încredere. Semnalele pot lua multe forme, dar cea clasică este feedback-ul clienților.
Recenziile clienților
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 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 exercitation ullamco laboris nisi ut aliquip ex ea commodo."
Să stabilim un îndemn.
Beneficiați când comandați astăzi
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:
Comanda acum!
Recenziile îi vor ajuta pe potențialii clienți să decidă să cumpere produsul. Pentru claritate, avem nevoie de avatare, așa că le vom pune imediat la locul lor - sub fiecare citat.
Numele clientului.
Pasul 4: Integrare prietenoasă cu rețeaua și mobilul
Pentru a implementa grila, avem nevoie de containere Bootstrap. Este important să ne amintim numărul total de segmente de coloane valide - 12. Clasa determină lățimea afișajului conținutului. Lucrul bun despre această grilă prefabricată este că containerele sunt proiectate având în vedere capacitatea de răspuns și sunt imediat utilizabile pe dispozitivele mobile. Descriere detaliată pe site-ul oficial. Grila arată așa.
Conținutul „principal” va fi ambalat într-un recipient. Pentru a face acest lucru, în partea de sus este scris următoarele:
… .
Dacă aveți nevoie ca blocul să se potrivească pe toată lățimea ecranului, atunci containerul este introdus în interior. Aici va fi un jumbotron și un apel la acțiune.
Vom împacheta toate elementele care necesită plasare una peste alta cu separatoare de linii.
Acum putem ajusta lățimea coloanelor, concentrându-ne pe grila bootstrap. După împachetare, umplutura a încetat să se lipească de marginile ecranului și au apărut niște indentări îngrijite.
Setăm prețurile pe rând folosind clasa col-lg-4. În interiorul liniilor de rând, nu mai este necesar să scrieți div-uri separate pentru împachetare, acestea pot fi combinate cu cele existente separate printr-un spațiu.
Prin analogie, am creat coloane pentru secțiunea recenzii și beneficii. Dacă trebuie să mutați un element în lateral, utilizați clasa coloanei offset col-lg-offset-2. Numărul de la sfârșit determină după câte coloane de bază va avea loc schimbarea.
Pasul 5. Fonturi și pictograme
Implementăm fonturi de antet Google Font. Când este selectat, deschideți fila de import și copiați datele din aceasta în fișierul main.css. Adăugăm, de asemenea, selectoare de titlu la fișierul pentru care este folosit noul font.
@import „https://fonts.googleapis.com/css?family=Roboto+Condensed” /* import font pentru titluri */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
familia de fonturi: „Roboto Condensed”, sans-serif; /* Ieșire Googlefont */
}
Pentru claritate, avantajele sunt descrise de o clasă cu numele auto-explicativ text-center și pictograme FontAwesome din setul de bootstrap.
În acest moment, pregătirea este complet finalizată.
Pagina de destinație: exemple de coduri cu ofertă, paralaxă și contorFolosim cele mai populare trei tipuri: cu o propoziție, o formă și cu numărătoare inversă. Pe măsură ce aspectul progresează, șablonul va fi completat cu efecte.
Exemplul 1: cu o propozițieSă setăm fundalul părții principale și al căptușelii astfel încât primul ecran să fie acoperit.
Jumbotron (
fundal: #f5f5f5 url(../img/fon.jpg) centru sus, fără repetare;
latime maxima: 100%;
padding-top: 250px;
umplutură-partea inferioară: 200px;
text-align: centru;
}
Să schimbăm dimensiunea antetului jumbotron de la h2 la h1. Apoi, scriem stiluri pentru elementele care trebuie schimbate.
Să începem cu pictogramele.
Beneficii i(
culoare: #cac4c4;
}
După semnul hash, este specificată o culoare. Puteți alege propria opțiune folosind tabele de culori html sau un editor de imagini.
Indentație pentru titlurile de secțiuni
secțiunea h2 (
padding-top: 30px;
margine-jos: 25px;
}
Curățăm aspectul tarifelor. Pentru comoditate, creăm propriile noastre clase pentru elementele pe care dorim să le evidențiem în mod specific.
Tariful nr. 1
$10
pe lună/per persoană
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Comanda
Și o mulțime de CSS. Locurile pentru care sunt responsabile secțiunile sunt menționate în comentarii - /* între bare oblice cu un asterisc */
/* =========Stiluri tarifare======== */
/* vedere generală a tarifului */
.price_articol(
fundal: #f2f2f2;
poziție: relativă;
display: -webkit-flex;
display: flex;
flex-direcție: coloană;
align-items: stretch;
text-align: centru;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
umplutura: 2em 3em;
marja: 1em;
culoare: #262b38;
cursor: implicit;
preaplin: ascuns;
}
/* schimba fundalul la clic */
.pricing_item:hover (
culoare: #444;
fundal: #daebef;
}
/* fundalul etichetei de preț individuale în fiecare tarif */
.pricing_item:first-child .price (
fundal: #9ba9b5;
}
.pricing_item:nth-child(2).price (
fundal: #1f6098;
}
/* pe ecranele late, coloana de tarif din mijloc este indentată și evidențiată */
Ecran @media și (lățime minimă: 66.250 em) (
.price_articol(
marja: 1,5em 0;
}
.prezentat(
indicele z: 10;
marja: 0;
dimensiunea fontului: 1,15 em;
}
}
/* titlu */
.pricing_item h3 (
dimensiunea fontului: 2em;
marja: 0,5em 0 0;
culoare: #1d211f;
}
/* fundalul etichetei de preț */
.preţ(
dimensiunea fontului: 2em;
greutatea fontului: bold;
culoare: #fff;
poziție: relativă;
indicele z: 100;
înălțimea liniei: 95px;
lățime: 100px;
înălțime: 100px;
marja: 1.15em auto 1em;
raza-limită: 50%;
fundal: #77a5cc;
-webkit-tranziție: culoare 0.3s, fundal 0.3s;
tranziție: culoare 0,3s, fundal 0,3s;
}
/* valuta */
.valută(
dimensiunea fontului: 0.5em;
vertical-align: super;
}
/* clarificarea propunerii */
.propoziție(
greutatea fontului: bold;
marja: 0 0 1em 0;
umplutura: 0 0 0.5em;
culoare: #2a6496;
}
/* lista */
.pricing_item ul (
dimensiunea fontului: 0,95 em;
marja: 0;
umplutură: 1,5em 0,5em 2,5em;
text-align: stânga;
}
/* articole din lista */
.pricing_item li (
umplutura: 0,15em 0;
}
/* Butonul de comandă tarifară */
butonul .pricing_item(
greutatea fontului: bold;
margin-top: auto;
umplutura: 1em 2em;
culoare: #fff;
chenar-rază: 5px;
fundal: #428bca;
-webkit-tranziție: fundal-culoare 0.3s;
tranziție: culoare de fundal 0,3s;
}
/* schimba culoarea cand este apasat butonul */
.pricing_item button:hover,
buton .pricing_item:focus (
culoare de fundal: #285e8e;
}
/* fundal tarifar*/
.bg-2 (
fundal: #dddddd;
}
Rezultat
Recenziile clienților. Să le dăm o privire atentă și să le indicăm locația.
/* =========Stiluri de mărturii======== */
marturii (
umplutura: 4em 0;
text-align: centru;
}
.mărturii .avatar img (
raza-limită: 50%;
plutire: stânga;
display: inline;
margine-dreapta: 1em;
latime: 65px;
înălțime: 65px;
margine-jos: 30px;
}
.mărturii .avatar p (
text-align: stânga;
captuseala-top: 1em;
culoare: #5d5d5d;
greutate font: 900;
}
Tot ce rămâne este să decorezi ultimul apel la acțiune și subsolul.
/* Acțiune */
.acţiune(
fundal: #476177;
înălțime minimă: 180px;
latime: 100%;
umplutura: 4em 0;
text-align: centru;
}
.acțiune h2 (
culoare: #fff;
greutate font: 300;
}
.acțiune p(
culoare: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
dimensiunea fontului: 1.2em;
}
.acțiune .container (
margine-top: 3em;
}
/* Subsol */
subsol (
fundal: #333333;
umplutura: 1em 0;
text-align: dreapta;
}
subsol p(
culoare: #fff;
înălțimea liniei: 1;
text-transform: majuscule;
dimensiunea fontului: 0.7em;
margine-top: 0,5em;
}
Butonului de subsol i se atribuie clasa de bootstrap încorporată btn-default.
Aducerea șablonului la viață. Vom introduce derularea lină și butoanele pentru secțiuni, precum și animația textului pe primul ecran.
Pentru tranzițiile la serviciu, vom înlocui unele dintre clasele de secțiuni cu id - pentru beneficii și tarife. Și vom adăuga link-uri către id-ul la butoane. Captură de ecran - ce este atașat la ce, evidențiat cu un marcator galben.
Am stabilit indentări pentru butoane - jbutton. Derularea la apăsare funcționează, dar foarte brusc.
Tranzițiile netede sunt create folosind javascript sau jquery. Acesta din urmă este conectat implicit la șabloanele Bootstrap.
Derularea este acum lină.
Adăugarea de animație la text folosind Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Acesta este un cod open source gata făcut, poate fi folosit pe orice site web. Plasați fișierul din Github în folderul css și specificați calea.
Selectăm efectele aici: https://daneden.github.io/animate.css/. Am selectat fadeInDown. Este scris în cod așa:
Acum, când pagina este încărcată sau reîmprospătată, textul va fi animat. Gata.
Exemplul 2: cu efect de formă și paralaxăCu cât i se prezintă un vizitator mai multe câmpuri de formular, cu atât este mai puțin probabil să le completeze. Solicitați doar informațiile minime necesare.
Este asamblat prin analogie. Vom schimba fundalurile și culorile. Și, desigur, vom adăuga o formă.
Să începem cu paralaxa.
Să schimbăm fundalul jumbotronului în transparent:
fundal: transparent;
În interiorul capului vom introduce scriptul:
$(fereastră).scroll(funcție(e)(
paralaxă();
});
funcția paralaxă())(
var defilat = $(window).scrollTop();
$(".bgparallax").css("sus",-(defilat*0.2)+"px");
}
Prima linie din corp este un recipient pentru paralaxă:
Și în CSS comportamentul său este:
Bgparallax (
fundal: url(/../img/fon.jpg) repetare;
poziție: fixă;
latime: 100%;
inaltime: 300%;
sus:0;
stânga:0;
indicele z: -1;
}
Parallax este gata. Dar pentru a face modificări la cod și un nou fundal necesită reatribuirea schemei de culori.
Întunecarea meniului:
Navbar-implicit (
culoare de fundal: #333;
culoare-chenar: #444;
culoare: gri închis;
raza-limită: 0;
}
Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
culoare: gri închis;
culoare de fundal: rgba(0, 0, 0, 0,5);
}
Înlocuim propoziția din jumbotron cu una nouă - cu codul de formular:
Pagina de destinație transformă vizitatorii în clienți
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula torttor rhoncus vulputate massa.
-
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Și prescriem aspectul
/* formular */
.headform-list (
list-style-type: niciunul;
înălțimea liniei: 26px;
greutate font: 400;
umplutură: 0px;
margine-jos: 40px;
}
.headform(
preaplin: ascuns;
poziție: relativă;
culoare de fundal: rgba(0,0,0,.4);
umplutură: 35px 40px;
chenar-rază: 8px;
}
introducere, buton, selectare, zonă de text (
latime: 100%;
margine-jos: 10px;
}
.headform-list li .fa (
poziție: absolută;
sus: 0px;
stânga: 0px;
latime: 42px;
dimensiunea fontului: 24px;
text-align: centru;
}
.headform-list li (
poziție: relativă;
înălțime minimă: 38px;
umplutură-stânga: 62px;
margine-jos: 20px;
}
.jumbotron p (
culoare: #fff;
dimensiunea fontului: 16px;
font-style: italic;
}
Aici a ajuns și textul jumbotronului, deoarece a cerut modificări.
Schimbăm tarifele.
/* vedere generală a tarifului */
.price_articol(
culoare de fundal: rgba(0,0,0,.4); /* linia schimbată */
chenar-rază: 4px; /* linia schimbată */
poziție: relativă;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: coloana;
flex-direcție: coloană;
-webkit-align-items: stretch;
align-items: stretch;
text-align: centru;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
umplutura: 2em 3em;
marja: 1em;
culoare: #f2f2f2; /* linia schimbată */
cursor: implicit;
preaplin: ascuns;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* schimba fundalul la clic */
.pricing_item:hover (
culoare: #444;
fundal: #ddd; /* linia schimbată */
}
Acum arată așa - un fundal transparent și colțuri rotunjite.
Șablonul este gata.
Exemplul 3: cu numărătoare inversăSchimbăm din nou umplerea jumbotronului și recolorăm șablonul pentru a se potrivi cu noul fundal, similar șablonului anterior. Conectați scriptul de contor:
HTML
Timpul nu așteaptă
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 = noua Numaratoare inversa((
timp: 86400 * 3, // 86400 secunde = 1 zi
latime: 300
, inaltime: 60
, rangeHi: „zi”
, stil: „flip” //
