Prin analogie, am stabilit coloane pentru secțiunea recenzii și beneficii. Dacă doriți să mutați elementul în lateral, utilizați clasa coloanei offset col-lg-offset-2. Numărul de la sfârșit determină câte coloane de bază vor fi deplasate.

Pasul 5. Fonturi și pictograme

Implementăm fonturi pentru titlurile 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 în fișier, pentru care se aplică 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 o clasă cu numele grăitor text-center și pictograme FontAwesome din setul de bootstrap.

Aceasta completează pregătirea.

Pagina de destinație: exemple de cod cu ofertă, paralaxă și contor

Folosim cele mai populare trei tipuri: cu o ofertă, cu un formular și cu numărătoare inversă. Pe măsură ce aspectul este finalizat, șablonul va fi completat cu efecte.

Exemplul 1: cu o ofertă

Setați fundalul corpului principal și umplutura astfel încât primul ecran să fie acoperit.

Jumbotron (
fundal: #f5f5f5 url(../img/fon.jpg) centru sus, fără repetare;
lățime maximă: 100%
padding-top: 250px;
umplutură-partea inferioară: 200px
text-align: centru;
}

Schimbați dimensiunea titlului jumbotron de la h2 la h1. În continuare, prescriem stilurile pentru elementele care trebuie schimbate.

Să începem cu pictogramele.

Beneficii i(
culoare: #cac4c4;
}

O culoare este specificată după semnul lire sterline. 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;
}

Punem in ordine aparitia tarifelor. Pentru comoditate, creăm propriile noastre clase pentru elementele pe care dorim să le selectăm punctual.

Și o mulțime de CSS. Pentru ce locuri sunt responsabile secțiunile, este scris î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;
umplutură: 2em 3em;
marja: 1 em
culoare: #262b38;
cursor: implicit;
preaplin: ascuns;

}
/* schimba fundalul la clic */
.pricing_item:hover (
culoare: #444;
fundal: #daebef;
}
/* etichetă individuală de preț în fiecare tarif */
.pricing_item:primul copil .price (
fundal: #9ba9b5;
}
.pricing_item:nth-child(2) .price (
fundal: #1f6098;
}
/* pe ecrane late umplutură și evidențiere coloana din mijloc tarif */
Ecran @media și (lățime minimă: 66.250 em) (
.price_articol(
marja: 1,5em0;
}
.Recomandate(
indicele z: 10;
marja: 0;
dimensiunea fontului: 1.15em
}
}
/* antet */
.pricing_item h3(
dimensiunea fontului: 2em
marja: 0,5em 0 0;
culoare: #1d211f;
}
/* suport eticheta 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 de frontieră: 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,5 em
vertical-align: super;
}
/* rafinarea propoziției */
.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,15em0;
}
/* buton de comandă tarifară */
butonul .pricing_item(
greutate font: bold;
margine de sus: auto;
umplutură: 1em 2em;
culoare: #fff;
raza-chenar: 5px
fundal: #428bca;
-webkit-tranziție: fundal-culoare 0.3s;
tranziție: culoare de fundal 0,3s;
}
/* schimba culoarea la clic pe buton */
.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 un aspect îngrijit, să desemnăm locația.

/* =========Stiluri de mărturii======== */
marturii (
umplutura: 4em0;
text-align: centru;
}
.mărturii .avatar img (
raza de frontieră: 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
}

Rămâne să decorezi ultimul apel la acțiune și subsolul.

/* Acțiune */
.acțiune(
fundal: #476177;
înălțime minimă: 180px;
latime: 100%
umplutura: 4em0;
text-align: centru;
}
.acțiune h2(
culoare: #fff;
Greutatea fontului: 300

}
.actionp(
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: 1em0;
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.

Reînviam șablonul. Vom implementa derularea lină și butoanele pentru secțiuni, precum și animația textului pe primul ecran.

Pentru ca tranzițiile să funcționeze, vom înlocui o parte din clasele de secțiune cu id - pentru beneficii și tarife. Și vom scrie link-uri către id la butoane. Ecran - ceea ce este atașat la ceea ce este evidențiat cu un marcator galben.

Setați indenturi pentru butoane - jbutton. Derularea pe clic 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 textului cu Animate.css ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Acesta este o sursă deschisă gata făcută, poate fi folosită pe orice site. Punem fișierul din github în folderul css și scriem calea.

Selectați efectele aici: https://daneden.github.io/animate.css/. Am selectat fadeInDown. Scris în cod astfel:

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 un vizitator i se oferă mai multe câmpuri de formular, cu atât este mai puțin probabil ca acesta să le completeze. Solicitați doar informațiile minime necesare.

asamblate prin analogie. Vom schimba fundalurile și culorile. Și, bineînțeles, vom adăuga un formular.

Sa incepem cu paralaxă .

Schimbați fundalul jumbotron în transparent:

fundal: transparent;

Introduceți scriptul în interiorul capului:

Prima linie din corp este recipientul de 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-default(
culoare de fundal: #333;
culoare-chenar: #444;
culoare: gri închis;
raza de frontieră: 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:

Și prescrie 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
}
.jumbotronp(
culoare: #fff;
dimensiunea fontului: 16px;
font-style: italic;
}

Aici a venit și textul jumbotronului, deoarece necesita 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;
umplutură: 2em 3em;
marja: 1 em
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 - fundal transparentși colțuri rotunjite.

Șablonul este gata.

Exemplul 3: cu un numărător invers

Din nou, schimbăm umplutura jumbotronului și revopsim șablonul pentru un fundal nou, prin analogie cu șablonul anterior. Conectăm scriptul contor:

HTML

În fișierul de stil, eliminați raza inferioară a formularului, aduceți-vă în minte butonul.

În plus, meniul a fost recolorat sub un fundal nou și stilul textelor din jumbotron a fost schimbat - prin analogie cu exemplul anterior. Rezultat.

Partea de jos

Aceasta completează exemplele de pagini de destinație, dar codul necesită mai multă muncă.

O pagină de destinație ar trebui să fie rapidă și bună ca un Ferrari - timpul de încărcare a paginii are un impact enorm asupra ratelor de respingere. Optimizați imaginile, minimizați dimensiunea scripturilor și stilurilor gata făcute pentru o eficiență maximă.

Lecția oferă exemple de creare a unor pagini de destinație bune care vă vor ajuta să vă aduceți clienți reali și veți învăța ceva nou. Să dăm like și să repostăm. Ne vedem în curând.

Pentru a descărca toate sursele prezentate în lecție ca pagini gata făcute, faceți clic pe unul dintre butoane castel social pentru a-l deschide și a obține linkul.

Cu stimă, Galiulin Ruslan.

Salutari! Cu tine Denis Gerasimov, site-ul site-ului și vom vorbi despre cum să creezi singur o pagină de destinație, în același timp adaptivă și modernă. Vizionați versiunea text a videoclipului.

Să stabilim câteva cerințe pentru viitoarea noastră aterizare:

1. Rapid, adică s-a încărcat rapid. Prin urmare, o vom face noi, în HTML și CSS.
2. Adaptiv, adică ajustat la ecranele diferitelor dispozitive. Pentru ca pagina noastră de destinație să poată fi accesată de pe un PC, tabletă, smartphone etc. și pe toate dispozitivele arăta frumos și confortabil.
3. Modern, adică am putea încorpora un glisor pe el, să adăugăm diverse ferestre modale sau un fel de sfaturi pop-up.
4. Frumoasa. Adică, am putea adăuga pictograme și butoane care ar arăta organic pe pagina noastră de destinație.

Cum să creezi singur o pagină de destinație modernă și frumoasă?

1. Sunt necesare cel puțin cunoștințe de bază de html și css, adică trebuie să vă puteți imagina cum să adăugați cel puțin o clasă css la structura html pentru a-i schimba aspectul. dacă întâmpinați ceva dificultăți în acest sens, atunci vă pot recomanda cursuri gratuite de la Evgeny Popov (link-uri de descărcare din prezentare, pe care le găsiți la sfârșitul textului ⇓), care conțin mai multe lecții, după vizionare pe care le veți începe deja pentru a înțelege ce este (link).
2. Citiți documentația cadrului bootstrap. Puteți alege singur cadrul. Acesta este un cadru special care conține seturi de stiluri și scripturi java care pot fi ușor încorporate în site-ul nostru și vor arăta foarte organic. De asemenea, conține o structură de tip fagure care ne va permite să creăm un design receptiv.
3. Selectați structura site-ului. Adică, imaginați-vă cum va arăta cadrul viitorului nostru site. De exemplu, vrem să aibă un antet deasupra, așa-numitul antet, apoi sunt plasate un fel de imagine și un formular de abonare. Trebuie să creăm această structură, cadrul.
4. Utilizați constructorul pentru a crea structura site-ului. Constructorul este situat la www. layoutit. com, cu el puteți crea structura site-ului, chiar și fără abilități și cunoștințe speciale.
5. Descărcați structura rezultată pe un computer și modificați-i designul. După aceea, pagina de destinație finalizată poate fi încărcată în siguranță pe server.

Să trecem la practică

Pe exemplul unui aterizare creat de mine lp..Direct. Bootstrap conține diverse elemente de design, cum ar fi pictograme, pe care le puteți utiliza. De asemenea, conține diverse scripturi java cu ajutorul cărora puteți face ferestre pop-up modale care pot fi închise fie de sus, fie de jos. Acesta este un exemplu de cea mai simplă aterizare, care, în principiu, nu funcționează rău, are o conversie bună.

Să aruncăm o privire la documentațieBootstrap

Cadrul bootstrap poate fi descărcat de la www. getbootstrap. com. Acest produs este de la creatorii Twitter. Acest cadru evoluează constant, iar în acest moment cea mai recentă versiune este 3.3.4. Pentru a conecta un site la acesta, trebuie să descărcați această arhivă și să scrieți anumite rânduri în codul html. Ca rezultat, veți avea acces la css, componente, javascript. De asemenea, puteți conecta bootstrap fără a-l descărca, folosind tehnologia CDN, pur și simplu scriind anumite linii în cod. Această tehnologie selectează cel mai apropiat server situat fizic de vizitatorul dvs. și încarcă fișiere de stil sau scripturi java de pe acesta. Acest lucru accelerează încărcarea paginii dvs. de destinație. În acest caz, acest cod este minimizat.

Odată ce bootstrap este inclus, veți avea acces la un set de stiluri CSS. Are o structură de tip fagure Grid System constând din 12 coloane. Trebuie să înțelegeți cum sunt create aceste coloane. Să presupunem că doriți ca site-ul dvs. să aibă 2 coloane. Dintre care unul ocupă 2/3 din pagină, iar celălalt 1/3. Într-o coloană mare doriți, de exemplu, să introduceți o imagine, iar într-o formă mai mică pentru umplere. Pentru a face acest lucru, trebuie să scrieți o linie, să scrieți o coloană cu stilul 8 și o coloană cu 4, indicată pe site-ul bootstrap. După ce îți notezi stilurile de care ai nevoie, atunci când îți vizitezi site-ul de pe un dispozitiv mobil, coloana care urmează a doua coboară. În cele din urmă, dvs designul devine receptiv. Dacă doriți o structură cu trei coloane egale, atunci trebuie să împărțiți 12 la 3 și să scrieți deja codul cu numărul 4 în codul paginii. Si asa mai departe.

Pentru a nu fi confundat în lucrul cu o structură de fagure, ți-am oferit lucru în constructor www.layoutit.com. Voi publica lucrări mai detaliate cu designerul în următorul articol.

Bootstrap conține, de asemenea, fișiere pentru Typography, cu un set de stiluri de titlu diferite pe care le puteți alege pentru pagina dvs. de destinație și le puteți scrie în cod. În această secțiune, există și clase de aliniere, de exemplu, dacă doriți ca textul să fie centrat, doar copiați codul specific și inserați-l în codul de aterizare. Există, de asemenea, fișiere Liste și multe altele. Puteți crea tabele cu stiluri diferite în secțiunea Tabele, Formulare formulare (puteți realiza formulare într-o coloană, pe o linie, un formular cu caractere suplimentare, un formular pe toată linia etc.). În secțiunea Butoane, puteți alege stilurile butoanelor de pe pagina dvs. de destinație. Puteți seta culoarea butoanelor, dimensiunile, butoanele active sau inactive. În secțiunea Imagini, puteți seta stiluri de imagine. De exemplu, pentru a face imaginea rotundă, trebuie să introduceți un anumit cod. În secțiunea Clasuri de ajutor, puteți schimba culoarea textului, fundalul textului și așa mai departe.

Avem, de asemenea, acces la diverse componente, cum ar fi pictogramele glife. Pentru a adăuga orice pictogramă pe site, trebuie să specificați o anumită clasă span (clasa span). Sub imaginea fiecărei pictograme este scrisă ce clasă trebuie scrisă în cod pentru a obține imaginea dorită pe pagina ta de destinație. De asemenea, puteți accesa meniuri derulante, grupuri de butoane, navigare Navs și multe altele. Puteți vizualiza toate aceste caracteristici pe secțiuni din lista din partea dreaptă a paginii site-ului bootstrap.

Accesul la JavaScript ne permite să realizăm modali în care pot fi inserate formulare. Aceste ferestre au și o structură de tip fagure, ceea ce îi permite să fie adaptat la orice dispozitiv mobil. De asemenea, puteți adăuga diverse butoane, liste derulante și alte funcții care funcționează pe scripturi Java.

Aceasta a fost o mică introducere în bootstrap și structura sa. În articolul următor, vom crea deja structura de aterizare într-un constructor special, structura adaptivă a viitoarei noastre aterizări.