Șabloane de pagini de destinație cu design responsive. Șabloane de pagină de destinație
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 pentru compania dvs Pagina de destinație, 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 în cele mai multe stiluri diferite. 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 cantitate uriașă viruși și erori în șabloane 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...Bună ziua, dragi cititori ai blogului! În acest articol am făcut o selecție de 10 șabloane HTML Landing Page (o singură pagină în limbajul obișnuit), care, după părerea mea, au mai mult succes și cu conversie ridicată
. Cândva, când am început să fac landing pages (acum 4 ani), nu prea eram un artist și de aceea căutam șabloane. Desigur, existau doar bunuri de larg consum, truse de construcție și șabloane plătite. Acum, desigur, această chestiune este mai simplă, există multe șabloane sensibile pe diverse subiecte, dar totuși, trebuie să te uiți.
Vă aduc în atenție 10 șabloane HTML de o pagină. Nu pot spune din ce motiv browserul G Chrome crede că fișierele conțin viruși sau conțin software nedorit (nu am avut și nu am astfel de fișiere), nu există niciun semn în baza de date Google că site-ul este supus sancțiunilor , fișierele au fost verificate de serviciul virustotal de încredere și răspândit com/ru/ . Încă trebuie să-mi dau seama. Dacă nu v-am convins, verificați singur fișierele. Voi atașa o captură de ecran a primului fișier, verificați singuri restul.
Editez acest articol pe 29 iulie 2016. 
Nu am șters cele de mai sus, deși acum G Chrome nu consideră site-ul și fișierele mele o amenințare pentru securitate. Voi scrie despre cum am făcut asta și ce serviciu am folosit într-unul din articolele următoare. 
2. O altă pagină de destinație „Supraveghere video”. Design frumos, animație de formulare pop-up, galerie excelentă cu o descriere pop-up, recenzii; 
3. Șablon „Instalarea ușilor”. Design simplu și tematic, formular de feedback, recenzii; 
4. Șablon „Transport internațional de mărfuri”. Design frumos, formulare de feedback, numărătoare inversă a timpului cu glisor, descrierea activității în ferestre pop-up; 
5. Șablon „Transport de marfă”. Excelent proiectare tematică, feedback și formulare de comandă, animații; 
6. Șablon „Bucătării personalizate”. Design tematic, formulare de feedback, numărătoare inversă cu glisor, descrieri în ferestre pop-up; 
7. Un alt șablon „Custom Kitchens”. Designul are minimalism, formulare de feedback, o galerie; 
8. Șablon „Reparații și decorare apartamente și birouri.” Design frumos și ușor, formulare de feedback, recenzii; 
9. Șablon „Gene”. Design bun, formulare de feedback, lista de preturi, galerie;
10. Șablon „Restaurarea unui dealer auto”. Design frumos, navigare sub formă de slider, galerie, formular de feedback;
» Sper că ați găsit ceva interesant pentru dvs. și ați folosit șabloanele. Dacă aveți întrebări sau aveți nevoie de ajutor, scrieți în comentariile articolului, voi răspunde tuturor, voi ajuta pe toată lumea. Aterizare liberă
Șabloane WordPress gratuite pentru pagini de destinație - TOP 30Mai exact, acest articol va lua în considerare cea mai bună aterizareȘabloane WordPress care pot fi potrivite pentru dvs. 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.
Foarte des, șabloanele de pagini de destinație 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 Potrivit pentru startup-uri și afaceri 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 funcțiile populare pentru creație ușoară site-ul.
5. Palmas
Palmas este 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 Cache totală si multi altii.
6. Braseria
Braseria este un șablon WordPress simplu, care este perfect pentru un restaurant, cafenea sau site culinar. Include efecte de animație, precum și o cantitate mare de funcționalitate.
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 vizual și efect de paralaxă. În plus, Freesia Empire acceptă pluginuri precum Breadcrumb NavXT WP-PageNavi Formular de contact 7, Jetpack de 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. VestVestul este temă simplă, care este 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.
Sunt necesare șabloane pentru pagini de destinație gata făcute lansare rapidă un produs nou, promovarea acestuia folosind o pagină LP sau aplicație mobilă, sau motivarea utilizatorilor să se înregistreze/aboneze la newsletter. Pentru o pagină de destinație, comoditatea și ușurința de utilizare cu aspect adecvat sunt extrem de importante. Șabloanele moderne de pagini de destinație de vânzare sunt dezvoltate în vederea capacității de a crea un site web receptiv cu rate de conversie ridicate.
Crossway – Șablon de pagină de destinație de pornire
Demo | DotSquareȘablon de pagină de destinație HTML pentru web și aplicații mobile, care vizează generarea ușoară de lead-uri. Are încărcare rapidă și html valid,
. În partea de sus a paginii de o pagină există un formular de contact duplicat cu . Demo |Șablon Primo Responsive Landing Page Șablon de destinație HTML5 de o pagină cu efecte CSS3. Are un cadru cu trei coloane, creat pe Bootstrap 3. Potrivit pentru vânzarea aplicațiilor iOS/Android. Șablonul include 2 machete (cu și fără Parallax), Formele Ajax
culoare nouă
Demo | Hype – Pagina de destinație a aplicațieiȘablonul de aplicație mobilă modern, pregătit pentru Retina, oferă 8 opțiuni de culoare, opțiuni de imagine/. Demo | Pagină de destinație multifuncțională
stil plat Vine cu 3 opțiuni de index, 6 scheme de culori. Șablon creat pe twitter bootstrap3, inclus cu Bootstrap și HTML5/CSS3 include glisor adaptiv, glisor de filă, formular de abonare la știri etc.
Cloud – O pagină de destinație a aplicației ușor de utilizat Șablon de pagină de destinație HTML5/CSS3 elegant, curat și minimalist cu funcționalitate excelentă
Demo | OnEvent – Pagina de destinație pentru evenimente specialeȘablon de aterizare adaptiv pentru oferte speciale. evenimente. Are secțiuni sub,
, programul evenimentelor, lista invitaților. Demo |Șablon de pagină de destinație receptivă
aprativ
șablon receptiv
, destinat unei scurte informații. Potrivit pentru diferite tipuri de sarcini.
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 dau 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 stă în priceperea 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.
- Prin urmare, înainte de a crea
- 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ă oferim totul informatiile necesare, dar nu atât pentru a suprima și a alunga un potențial 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 poziționare elemente 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 reglează aspect. 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 minim 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 în 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
Titlu și subtitluri - locuri cheie, ajutând la comunicarea clară a propunerii de valoare.
Să schimbăm titlul și numele site-ului. Aici nu veți avea nevoie de 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.
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.
Deocamdată, nu ne interesează aspectul viitoarei pagini de destinație - vom analiza 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 fi primite diverse tipuri, dar clasicele sunt recenziile 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 vor ajuta potențiali clienți ia decizia de a cumpăra un produs. Pentru claritate, avem nevoie de avatare, așa că le vom scrie imediat la locul lor - sub fiecare citat.
Numele clientului.
Pasul 4: Integrare pentru rețea și mobil
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. Avantajul acestei grile gata făcute este că containerele sunt proiectate având în vedere adaptabilitate și sunt imediat utilizabile pentru dispozitive 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 un contor numărătoarea 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. În continuare, 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ă tarif */
.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;
}
/* schimbă fundalul când dai clic */
.pricing_item:hover (
culoare: #444;
fundal: #daebef;
}
/* fundalul etichetei de preț individuale în fiecare tarif */
.pricing_item:primul copil .price (
fundal: #9ba9b5;
}
.pricing_item:nth-child(2).price (
fundal: #1f6098;
}
/* pe ecrane late indentarea si evidentierea coloanei din mijloc a tarifului */
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;
greutate font: 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(
greutate font: 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(
greutate font: 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;
afișaj: 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 trecerea 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 când ajutor 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). Aceasta este gata sursă deschisă, 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);
}
/* schimbă fundalul când dai clic */
.pricing_item:hover (
culoare: #444;
fundal: #ddd; /* linia schimbată */
}
Acum arată așa - 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” //
