Pagina de destinație folosind șabloane html gata făcute. Șabloane de pagină de destinație. Pagina de destinație: exemple de coduri cu ofertă, paralaxă și contor
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.
Ei ofera:
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 ale autorului. 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.
Site-ul 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ăți de turnee: 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 de feluri de mâncare din 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 merită 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; când treceți 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 de o 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.
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 vă 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 flatare. 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ă-ți copleșești și să alungi potențialul tău 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 î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
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 tastare - vă scrieți propriul text în locurile evidențiate cu galben de 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;
- apel 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
Ordin
Tariful nr. 2
$20
pe lună/per persoană
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Ordin
Tariful nr. 3
$30
pe lună/per persoană
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Ordin
Așa arată.
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 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 loc - 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 de coloană offset col-lg-offset-2. Numărul de la sfârșit determină 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
Ordin
Și o mulțime de CSS. Locurile pentru care sunt responsabile secțiunile sunt menționate în comentarii - /* între bare oblice cu 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;
}
/* 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 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;
}
.Recomandate(
indicele z: 10;
marja: 0;
dimensiunea fontului: 1.15em;
}
}
/* 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;
umplutură: 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%;
plutește la 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, bineînțeles, 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;
lățime: 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 - 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” //
Ar putea fi util să citiți:
- Cum să faci bani fără bani?;
- Catalog de produse - Aliexpress în rusă - prețuri în ruble Alia Express;
- ABC-, XYZ-analiza sortimentului;
- Pagina de destinație folosind șabloane html gata făcute;
- Cel mai bogat om din lume Câteva fapte despre miliardar;
- Ce este marginalitatea?;
- Formula pentru rentabilitatea produsului în bilanţ Rentabilitatea produsului;
- Rentabilitatea ca indicator al performanței companiei Ce înseamnă rentabilitatea capitalului propriu?;