Shablloni i faqes së uljes me formularët e feedback-ut. Shabllonet e faqeve të uljes. Faqja e uljes: shembuj të kodit me fjali, paralaksë dhe kundër
Një faqe me një faqe është e përshtatshme për biznesmenët sepse mund të bëhet fjalë për fjalë brenda një dite. Nese nje shkarkoni një faqe në internet modelin të gatshme, ju mund të bëni një faqe në internet për kompaninë tuaj për një shumë minimale, pasi që ju duhet të paguani vetëm për pritjen. Për klientin, një faqe me një faqe është e përshtatshme sepse të gjitha informacionet mbi të paraqiten sa më shkurt dhe të strukturuara, nuk ka asgjë të tepërt. Për shkak të mirëdashësisë së tyre ndaj klientit, faqet e internetit me një faqe shpesh tregojnë konvertime më të larta se llojet e tjera të faqeve.
Si të zgjidhni një model me një faqe?
- Pamja e jashtme. Desirableshtë e dëshirueshme që dizajni të projektohet në stilin e përgjithshëm të kompanisë. Ndërfaqja nuk duhet të ketë ngjyra shumë të papajtueshme. Sidoqoftë, disa ngjyra pastel i kanë mërzitur gjatë edhe përdoruesit, kështu që shkëlqimi dhe kreativiteti janë të mirëseardhura.
- "Pesha". Dizajni i animuar, banderola të dridhura, elemente "të rënda", rrëshqitës mund ta bëjnë sajtin të mbingarkohet aq sa do të duhet më shumë kohë për t'u hapur sesa konkurrentët.
- Numri i blloqeve dhe aftësia për t'i personalizuar ato. Para se të zgjidhni një shabllon, vendosni saktësisht se cilat blloqe duhen minimumi në mënyrë që të mos mbingarkoni faqen. Duke provuar një model, zbuloni nëse blloqet mund të hiqen dhe zëvendësohen.
- Përputhshmëria midis shfletuesve dhe dizajni i përgjegjshëm do të zgjerojnë shumë audiencën e klientëve të mundshëm. Prandaj, sigurohuni që të zgjidhni vetëm modele të përgjegjshme të një faqeje.
Ne ofrojme shabllone një faqe falas
Nëse vendosni të bëni për kompaninë tuaj Faqja e uljes, shablloni i shkarkimit në faqen tonë të internetit. Ne kontrollojmë me kujdes të gjitha modelet për viruse, kështu që nuk mund të keni frikë të shkarkoni një skedar të infektuar. Të gjitha modelet e faqes së uljes në katalogun tonë kemi një dizajn modern të bërë në një larmi stilesh. Aftësia për të rregulluar numrin e blloqeve, për të ndryshuar skemën e ngjyrave dhe funksionet e tjera do t'ju ndihmojë të krijoni një faqe unike origjinale të bazuar në një model të thjeshtë.
Ne ju ftojmë të shkarkoni shabllone të një faqe në internet
Problemi kryesor i atyre që vendosën të shkarkojnë shablloni i faqes së uljes falas, është një sasi e madhe virusesh dhe defektesh në shabllone falas. Prandaj, është shumë e rëndësishme të gjesh një faqe në internet të sigurt dhe të besueshme. Ne ju ftojmë të na vizitoni, pasi monitorojmë me kujdes sigurinë. Përveç kësaj, ne do t'ju kënaqim me gamën më të gjerë hTML templates një faqe, shkarkoni të cilat ju mund të tani!
Lexoni më shumë tekstin ...Përshëndetje, lexues të mi të dashur. Sot do të flasim për pikat teknike me të cilat mund të rritemi shndërrimi i shitjeve mallrat ose shërbimet e tyre. Një nga pikat e rëndësishme është një faqe uljeje e menduar mirë me produkte. E ashtuquajtura faqe e uljes, për krijimin e së cilës do të flasim më tej dhe do të marrim kode të faqeve të gatshme.
Çfarë është faqja e uljes? Kjo është faqja në të cilën njerëzit zakonisht zbresin pasi të klikojnë në një reklamë. Krijuar për një ofertë: produkt, shërbim ose pajtim. Një faqe efektive uljeje është themeli i marketingut të suksesshëm në internet. Produkti mund të jetë më i miri në treg, reklamat janë të përsosura, por pa një faqe të mirë uljeje, përpjekjet nuk japin 100% të rezultatit. Ajo u tregon vizitorëve se çfarë ofrohet dhe pse duhet ta dëshirojnë atë. Ndjenja e urgjencës kontribuon në vendimmarrjen e shpejtë dhe kalimin e përdoruesit në kategorinë e klientit.
Si të krijoni një faqe uljeje? Wrongshtë e gabuar të besosh se përgjigjja qëndron në aftësinë për të shkruar. Një faqe e mirë zbarkimi është rezultat i punës së koordinuar mirë për qëllimet, tekstin, modelin dhe kodin. Faqet e zbarkimit, shembujt e të cilave do të jenë më poshtë, do t'i ndihmojnë fillestarët të mësojnë bazat e punës me paraqitjen, por nuk do të zëvendësojnë tekstet e konvertimit dhe kuptimin e audiencës së synuar. Ju gjithashtu mund t'i krijoni ato duke përdorur të ndryshme ndërtuesit Faqja e uljes.
Pra, para se të krijoni një faqe ulje, pyesni veten:
- Çfarë do të bëjë një person pasi të ketë goditur faqen e uljes? A do të blejë ai diçka? Plotësoni formularin? Regjistrohuni në gazetën? Para se të gjurmoni normën tuaj të konvertimit, vendosni qëllime të qarta.
- Kush janë konkurrentët e mi? Në fakt, këto janë tre pyetje: kush, sa janë të suksesshëm dhe si mund të zbatohen arritjet e tyre? Imitimi është forma më e sinqertë e lajkave. Nëse konkurrentët janë duke bërë atë që funksionon, përsëriteni këtë në faqen tuaj.
- Kush është audienca ime? Sa më mirë të kuptoni nivelin tuaj dhe audiencën e synuar, aq më shumë shanse që përpjekjet tuaja do të paguajnë.
Ju duhet të ofroni të gjithë informacionin që ju nevojitet, por jo aq sa të mbingarkoni dhe largoni një klient të mundshëm.
Shembuj të krijimit të një faqe zbarkimi + kodimi për bedenat
Para se të fillojmë me biznesin, le të hedhim një vështrim të shpejtë në HTML dhe CSS. Kuptimi se si funksionojnë ata do t'ju ndihmojë të krijoni ulje.
Html - gjuha e shënjimit të shfletuesit për vizualizimin e faqes në internet. Shkruar duke përdorur etiketa të mbyllura në kllapa këndi që përcaktojnë përmbajtjen.
Etiketa hapet (<>) dhe mbyllet () rreth mbushjes:
<тег>përmbajtjaтег>
Për rregullim të saktë, atributet shtohen pas emrit:
<тег атрибут="значение">përmbajtjaтег>
CSS - përcakton mënyrën e rregullimit të elementeve HTML. Përbëhet nga selektorët, vetitë dhe vlerat:
# selektori (prona: vlera;)
Përzgjedhësi përputhet me emrin e një etiketimi specifik në HTML. Ndryshimi i vlerave dhe shtimi i vetive kontrollon pamjen e tij. Ju mund të krijoni faqe të ndryshme duke aplikuar stile të ndryshme CSS në të njëjtën HTML.
5 hapa fillestarë
Për një paraqitje të shpejtë, ne do të përdorim një model me një dizajn minimal të bazuar në bootstrap. Shtë një sistem me zgjedhësit e tij që përdoret në të gjithë botën për të përshpejtuar paraqitjen.
Duket modeste.
Një sit për çdo shije krijohet nga ky peshk në disa faza.
Struktura e drejtorisë në dosje:
- index.html: Kjo është skedari kryesor që ne do të editojmë.
- / asetet: skedarët ndihmës gjenden këtu:
- / css: drejtoria përmban stile bootstrap dhe ikona. Skedari që do të redaktohet është main.css.
- / img: dosje për imazhet e faqes.
- / fonts: Gërmat e ikonave.
- / js: skedarët javascript për bootstrap.
Hapi 1: Përdorimi i kokës
Titulli dhe nëntitujt janë pikat kryesore për të ndihmuar në komunikimin e qartë të vlerës së propozimit.
Le të ndryshojmë titullin dhe emrin e faqes. Këtu, aftësia për të shtypur nuk kërkohet - teksti juaj është shkruar në vendet e theksuara me të verdhë në ekran.
Hapi 2. Shkurtësia është motra e konvertimit. Shtimi i përfitimeve dhe normave
Do të duhen 4 seksione:
- përparësitë;
- normat;
- rishikime;
- thirrje për veprim.
Le të hartojmë pjesën kryesore të përmbajtjes "kryesore", në të cilën do të fusim pjesët e nevojshme:
…..
…..
…..
…..
Ne e mbushim atë me mbushje në vend të pikave.
Seksioni i përfitimeve do të kërkojë këtë kod:
Përfitimet
Shpejt
I besueshëm
Nonummy sed diam
Fitimprurës
Elit, jummy sed diam
Teknikisht
Lorem ipsum dolor ulet amet, elit konsipetues adipiscing, sed diam nonummy
I besueshëm
Lorem ipsum dolor ulet amet, elit konsipetues adipiscing, sed diam nonummy
Fitimprurës
Lorem ipsum dolor ulet amet, elit konsipetues adipiscing, sed diam nonummy
Teknikisht
Lorem ipsum dolor ulet amet, adipiscing me kujdes
I besueshëm
Lorem ipsum dolor ulet amet, adipiscing me kujdes
Fitimprurës
Lorem ipsum dolor ulet amet, adipiscing me kujdes
Përmbajtja për qartësi:
Ndërsa duket i ngathët, por nuk ka asnjë arsye për panik, ne vazhdojmë.
Ne përshkruajmë çmimet. Përmbajtja ndryshon në të njëjtën mënyrë si në hapin e parë. Përshkrimi i përgjithshëm me klasën "tarifat" dhe tre tarifat.
Lorem ipsum dolor ulet amet, elit konsektivues adipiscing, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud ushtrimi ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo resultat.
Planet tarifore
Tarifa numër 1
$10
në muaj / për person
- Lorem ipsum dolor ulet amet, elit konsipetues adipiscing
- Lorem ipsum dolor
- 10 Lorem ipsum
Tarifa numër 2
$20
në muaj / për person
- Lorem ipsum dolor ulet amet, elit konsipetues adipiscing
- Lorem ipsum dolor
- 10 Lorem ipsum
Tarifa numër 3
$30
në muaj / për person
- Lorem ipsum dolor ulet amet, elit konsipetues adipiscing
- Lorem ipsum dolor
- 10 Lorem ipsum
Duket ashtu.
Ndërsa ne nuk jemi të interesuar për pamjen e faqes së ardhshme të uljes, ne do të shqyrtojmë shembuj të ndryshimit të stileve më poshtë.
Hapi 3: Sinjalet e Besimit dhe Thirrja për Veprim
Përdorimi i sinjaleve të shënjestruara tregon për vizitorët se marka është e besueshme. Sinjalet mund të marrin shumë forma, por klasikët janë vlerësime të klientëve.
Lorem ipsum dolor ulet amet, elit konsekuatuar adipisising, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ushtrimi i duhur për ushtrime minimale, quis nostrud ullamco workis nisi ut aliquip ex ea commodo:
Vlerësimet e Klientëve
"Lorem ipsum dolor ulet amet, konsoliduar elit adipisising, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ushtrohuni në ushtrime minimale, quis nostrud stërvitje ullamco workis nisi ut aliquip ex ea commodo. "
"Lorem ipsum dolor ulet amet, konsoliduar elit adipisising, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ushtrohuni në ushtrime minimale, quis nostrud stërvitje ullamco workis nisi ut aliquip ex ea commodo. "
Le të krijojmë një thirrje për veprim.
Lorem ipsum dolor ulet amet, elit konsektivues adipiscing, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Përdorimi i tij për të minimizuar veniam, quis nostrud ushtrimi ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo resultat:
Përfitoni kur porositni sot
Shqyrtimet do të ndihmojnë klientët potencialë të marrin një vendim për të blerë një produkt. Për qartësi, na duhen avatarë, kështu që menjëherë do t'i shkruajmë në vend - nën secilën kuotë.
Emri i klientit.
Hapi 4: Integrimi në rrjet dhe miqësor për celularët
Na duhen kontejnerë Bootstrap për të injektuar rrjetin. Shtë e rëndësishme të mbani mend numrin e përgjithshëm të segmenteve të lejuara të kolonës - 12. Klasa përcakton gjerësinë e shfaqjes së përmbajtjes. Avantazhi i këtij rrjeti të gatshëm është se kontejnerët janë të dizajnuar me përgjegjshmëri në mendje dhe janë menjëherë të zbatueshme për pajisjet mobile. Përshkrimi i hollësishëm në faqen zyrtare të internetit. Rrjeti duket kështu.
Ne do ta mbështjellim përmbajtjen e "kryesore" në një enë. Për ta bërë këtë, në pjesën e sipërme të saj është shkruar:
Nëse dëshironi që blloku të përshtatet me gjerësinë e plotë të ekranit, atëherë ena futet brenda. Këtu do të jetë një jambotron dhe një thirrje për veprim.
Të gjithë elementët që kërkojnë pozicionim njëra mbi tjetrën, mbështillen me ndarës të linjës.
Tani mund të rregullojmë kolonat në gjerësi, duke u përqëndruar në rrjetin bootstrap. Pas mbështjelljes, mbushja ndaloi të ngjitej në skajet e ekranit dhe u shfaqën gërvishtjet e mira.
Ne vendosim çmimet me radhë duke përdorur klasën e kolonës col-lg-4. Brenda rreshtave të rreshtave, nuk është më e nevojshme të shkruani diva të ndara për mbështjellje, ju mund t'i kombinoni ato me ato ekzistuese të ndara nga një hapësirë.
Për analogji, ne kemi vendosur kolona për pjesën e vlerësimeve dhe përfitimeve. Nëse keni nevojë të zhvendosni një element anash, përdorni klasën e kolonës së kompensimit col-lg-offset-2. Numri në fund përcakton sa kolona bazë do të marrë ndërrimi.
Hapi 5. Shkronjat dhe ikonat
Ne do të implementojmë shkronja për titujt e Google Font. Kur zgjidhni, hapni skedën e importit dhe kopjoni të dhënat nga ajo në skedarin main.css. Ne gjithashtu shtojmë zgjedhës të kokave në skedar, për të cilin aplikohet font i ri.
@import "https://fonts.googleapis.com/css?family\u003dRoboto+Condensuar" / * importi i shkronjave për tituj * /
markë .navbar,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; / * Prodhimi i telefonit Google * /
}
Për qartësi, një klasë me një emër vetë-shpjegues të qendrës së tekstit dhe ikonave FontAwesome nga grupi i bootstrap janë regjistruar.
Kjo përfundon përgatitjen.
Faqja e uljes: shembuj të kodit me fjali, paralaksë dhe kundër
Ne përdorim tre llojet më të njohura: me një propozim, një formë dhe me një numërues të mbrapshtë. Ndërsa shtypni, shablloni do të plotësohet me efekte.
Shembulli 1: me një fjali
Le të vendosim sfondin e trupit kryesor dhe mbushjes për të mbuluar ekranin e parë.
Jumbotron (
sfond: # f5f5f5 url (../ img / fon.jpg) qendra e sipërme pa përsëritje;
gjerësia maksimale: 100%;
mbushja e sipërme: 250px;
mbushja-fund: 200px;
rreshtimi i tekstit: qendra;
}
Ndrysho madhësinë e kokës së jambotronit nga h2 në h1. Tjetra, ne shkruajmë stilet për elementet që duhet të ndryshohen.
Le të fillojmë me ikonat.
Përfitimet i (
ngjyra: # cac4c4;
}
Një ngjyrë specifikohet pas shenjës hash. Mund të zgjidhni opsionin tuaj duke përdorur tabela me ngjyra HTML ose një redaktues imazhesh.
Dhëmbëzimi për kryefjalët e seksioneve
seksioni h2 (
mbushja e sipërme: 30px;
margin-fund: 25px;
}
Ne po rregullojmë shfaqjen e tarifave. Për lehtësi, ne krijojmë klasat tona për elementet që duam të nxjerrim në pah në mënyrë të veçantë.
Tarifa numër 1
$10
në muaj / për person
- Lorem ipsum dolor ulet amet, elit konsipetues adipiscing
- Lorem ipsum dolor
- 10 Lorem ipsum
Dhe shumë CSS. Për cilat vende faqet janë përgjegjëse përcaktohet në komente - / * midis prerjeve me yll * /
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d Stilet tarifore \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
/ * pamje e përgjithshme e tarifës * /
.emri_cmimeve (
sfond: # f2f2f2;
pozicioni: relativ;
ekran: -webkit-flex;
ekran: përkul;
drejtimi i përkuljes: kolona;
rresht-sendet: shtrirje;
rreshtimi i tekstit: qendra;
-webkit-flex: 0 1 330px;
përkul: 0 1 330px;
mbushje: 2em 3em;
diferencë: 1em;
ngjyra: # 262b38;
kursori: i paracaktuar;
tejmbushje: e fshehur;
}
/ * ndrysho sfondin kur shtypet * /
.emri i çmimeve: rri pezull (
ngjyra: # 444;
sfondi: #daebef;
}
/ * shtresa individuale e çmimit në secilën tarifë * /
.emri i çmimeve: fëmija i parë. çmimi (
sfond: # 9ba9b5;
}
.emri i çmimeve: fëmija i nëntë (2) .çmimi (
sfond: # 1f6098;
}
/ * në ekrane të gjera, mbushje dhe theksim të kolonës së mesme të tarifës * /
Ekrani @ media dhe (me gjerësi min: 66.250em) (
.emri_cmimeve (
diferencë: 1.5em 0;
}
.i karakterizuar (
indeksi z: 10;
diferencë: 0;
madhësia e shkronjave: 1,15em;
}
}
/ * header * /
.emri_ çmimi h3 (
madhësia e shkronjave: 2em;
diferencë: 0,5em 0 0;
ngjyra: # 1d211f;
}
/ * shtresa e etiketës * /
.çmimi (
madhësia e shkronjave: 2em;
pesha e shkronjave: e theksuar;
ngjyra: #fff;
pozicioni: relativ;
indeksi z: 100;
lartësia e vijës: 95px;
gjerësia: 100px;
lartësia: 100px;
diferencë: 1.15em auto 1em;
rrezja kufitare: 50%;
sfondi: # 77a5cc;
-vebkit-tranzicion: ngjyra 0.3s, sfond 0.3s;
tranzicioni: ngjyra 0.3s, sfondi 0.3s;
}
/ * monedha * /
valuta (
madhësia e shkronjave: 0,5em;
vertikal-align: super;
}
/ * sqarimi i klauzolës * /
.fjali (
pesha e shkronjave: e theksuar;
marzhi: 0 0 1em 0;
mbushje: 0 0 0,5em;
ngjyra: # 2a6496;
}
/ * listë * /
. çmimi_item ul (
madhësia e shkronjave: 0,95em;
diferencë: 0;
mbushje: 1.5em 0.5em 2.5em;
rreshtimi i tekstit: majtas;
}
/ * lista e artikujve * /
. çmimi_item li (
mbushje: 0,15em 0;
}
/ * butoni i porosisë së tarifës * /
butoni i çmimit_item (
pesha e shkronjave: e theksuar;
margin-top: auto;
mbushje: 1em 2em;
ngjyra: #fff;
rrezja kufitare: 5px;
sfondi: # 428bca;
-vebkit-tranzicion: sfondi-ngjyra 0.3s;
tranzicioni: ngjyra-sfondi 0.3s;
}
/ * ndryshimi i ngjyrës kur shtypet butoni * /
butoni .cmimi_item: rri pezull,
Butoni i çmimit_item: fokusi (
ngjyra e sfondit: # 285e8e;
}
/ * sfondi tarifor * /
.bg-2 (
sfondi: #dddddd;
}
Rezultati
Rishikimet e blerësve. Le t'i japim atyre një vështrim të hijshëm, cakto vendndodhjen.
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d Stilet e dëshmive \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
deshmitare (
mbushje: 4em 0;
rreshtimi i tekstit: qendra;
}
. dëshmitë. avatar img (
rrezja kufitare: 50%;
noton: majtas;
shfaqje: inline;
diferencë-djathtas: 1em;
gjerësia: 65px;
lartësia: 65px;
margin-fund: 30px;
}
. dëshmitë. avatar p (
rreshtimi i tekstit: majtas;
mbushja e sipërme: 1em;
ngjyra: # 5d5d5d;
pesha e shkronjave: 900;
}
Thirrja e fundit për veprim dhe faqja kryesore janë lënë për t'u dekoruar.
/ * Veprimi * /
.veprim (
sfond: # 476177;
min-lartësia: 180px;
gjerësia: 100%;
mbushje: 4em 0;
rreshtimi i tekstit: qendra;
}
.veprimi h2 (
ngjyra: #fff;
pesha e shkronjave: 300;
}
.veprimi p (
ngjyra: #fff;
hije teksti: 0 1px 2px rgba (0, 0, 0, .2);
madhësia e shkronjave: 1.2em;
}
.veprim .kontejner (
margin-top: 3em;
}
/ * Fundfaqja * /
fundi i faqes (
sfond: # 333333;
mbushje: 1em 0;
rreshtimi i tekstit: djathtas;
}
fund i faqes (
ngjyra: #fff;
lartësia e vijës: 1;
transformimi i tekstit: i madh;
madhësia e shkronjave: 0,7em;
margin-top: 0.5em;
}
Butonit të faqes së poshtme i është caktuar klasa bootstrap e integruar në btn.
Ringjallja e shabllonit. Ne do të prezantojmë lëvizjen e butë dhe butonat për seksionet, si dhe animimin e tekstit në ekranin e parë.
Për të funksionuar tranzicionet, ne do të zëvendësojmë disa nga klasat e seksioneve me id - për përfitime dhe tarifa. Dhe ne do të caktojmë linqe tek butonat id. Ekran - çfarë është e bashkangjitur në atë që theksohet me një shënues të verdhë.
Vendosni mbushjen te butonat - butoni. Lëvizja kur shtypet funksionon, por shumë papritur.
Kalimet e lehta krijohen duke përdorur javascript ose jquery. Kjo e fundit është e lidhur në mënyrë të paracaktuar me modelet Bootstrap.
Rrotullimi tani është i qetë.
Shtimi i animacionit në tekst duke përdorur Animate.css ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) Ky është një burim i hapur i gatshëm, mund të përdoret në çdo sit. Vendosni skedarin nga github në dosjen css dhe shkruani shtegun.
Ne zgjedhim efektet këtu: https://daneden.github.io/animate.css/... Ne kemi zgjedhur fadeInDown. Elledshtë shkruar në kod si kjo:
Tani, kur faqja të ngarkohet ose rifreskohet, teksti do të animohet. Bërë
Shembulli 2: me efekt dhe formë paralaksi
Sa më shumë fusha të formës që u ofrohet një vizitori, aq më pak ka gjasa që t'i plotësojë ato. Kërkoni vetëm informacionin minimal që ju nevojitet.
Mbledhur me analogji. Ne do të ndryshojmë sfondet dhe ngjyrat. Dhe, sigurisht, le të shtojmë formën.
Le të fillojmë me paralaks .
Ndryshoni sfondin jumbotron në transparent:
sfondi: transparent;
Brenda kokës do të fusim skenarin:
Linja e parë në trup është ena për paralaksën:
Dhe në CSS, sjellja e saj:
Bgparallax (
sfondi: përsëris url (/../ img / fon.jpg);
pozicioni: fiks;
gjerësia: 100%;
lartësia: 300%;
maja: 0;
majtas: 0;
indeksi z: -1;
}
Paralaksi është gati. Por bërja e ndryshimeve në kod dhe një sfond të ri kërkon caktimin e skemës së ngjyrave.
Bërja e menusë së errët:
Navbar-i parazgjedhur (
ngjyra e sfondit: # 333;
ngjyra e kufirit: # 444;
ngjyra: darkgrey;
rrezja e kufirit: 0;
}
Navbar-default .navbar-nav\u003e .active\u003e a, .navbar-default .navbar-nav\u003e .active\u003e a: hover, .navbar-default .navbar-nav\u003e .active\u003e a: fokus (
ngjyra: darkgrey;
ngjyra e sfondit: rgba (0, 0, 0, 0.5);
}
Ne e zëvendësojmë fjalinë në jumbotron me një të re - me kodin e formës:
Landing Page i kthen vizitorët në klientë
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.
-
-
Lorem ipsum dolor ulet amet, elit konsipetuer adipiscing, sed diam nonummy.
Dhe ne përshkruajmë pamjen
/ * formular * /
lista e kokës (
lloji i stilit të listës: asnjë;
lartësia e vijës: 26px;
pesha e shkronjave: 400;
mbushje: 0px;
margin-fund: 40px;
}
.forma e kokës (
tejmbushje: e fshehur;
pozicioni: relativ;
ngjyra e sfondit: rgba (0,0,0, .4);
mbushje: 35px 40px;
rrezja kufitare: 8px;
}
hyrja, butoni, zgjedhja, zona me tekst (
gjerësia: 100%;
margin-fund: 10px;
}
lista .headform li .fa (
pozicioni: absolut;
maja: 0px;
majtas: 0px;
gjerësia: 42px;
madhësia e shkronjave: 24px;
rreshtimi i tekstit: qendra;
}
.list-formë-formë li (
pozicioni: relativ;
min-lartësia: 38px;
mbushje-majtas: 62px;
margin-fund: 20px;
}
.jumbotron p (
ngjyra: #fff;
madhësia e shkronjave: 16px;
stili i shkronjave: italic;
}
Teksti i Jambotron gjithashtu arriti këtu, pasi ai kërkonte ndryshime.
Tarifat e rilyerjes.
/ * pamje e përgjithshme e tarifës * /
.emri_cmimeve (
ngjyra e sfondit: rgba (0,0,0, .4); / * rreshti ndryshoi * /
kufiri-rrezja: 4px; / * rreshti ndryshoi * /
pozicioni: relativ;
ekran: -webkit-flex;
ekran: përkul;
-vebkit-drejtimi-përkulës: kolona;
drejtimi i përkuljes: kolona;
-webkit-align-items: shtrirje;
rresht-sendet: shtrirje;
rreshtimi i tekstit: qendra;
-webkit-flex: 0 1 330px;
përkul: 0 1 330px;
mbushje: 2em 3em;
diferencë: 1em;
ngjyra: # f2f2f2; / * rreshti ndryshoi * /
kursori: i paracaktuar;
tejmbushje: e fshehur;
kuti-hije: 0 0 15px rgba (0, 0, 0, 0.05);
}
/ * ndrysho sfondin kur shtypet * /
.emri i çmimeve: rri pezull (
ngjyra: # 444;
sfondi: #ddd; / * rreshti ndryshoi * /
}
Tani ato duken kështu - sfond transparent dhe qoshe të rrumbullakosura.
Shablloni është gati.
Shembulli 3: me një numërues të numërimit
Ndryshoni përsëri mbushjen e jambotron dhe ngjyrosni shabllonin që të përputhet me sfondin e ri me analogji me modelin e mëparshëm. Ne lidhim skenarin e kundër:
Html
Koha po mbaron
Lorem ipsum dolor ulet amet, elit konsektivues adipiscing, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud ushtrimi ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo resultat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie resultat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio madhështia qui blandit praesent luptatum zzril delenit teugue duis dolore
-
Lorem ipsum dolor ulet amet, elit konsipetuer adipiscing, sed diam nonummy.
-
Lorem ipsum dolor ulet amet, elit konsipetuer adipiscing, sed diam nonummy.
Në fletën e stileve, hiqni rrezen e poshtme të formës dhe shkulni butonin.
Për më tepër, menuja u rilyer për një sfond të ri dhe stili i teksteve në jambotron u ndryshua - për analogji me shembullin e mëparshëm. Rezultati
Pjesa e poshtme
Kjo plotëson shembujt e Landing Page, por kodi kërkon punë shtesë.
Faqja e uljes duhet të jetë e shpejtë dhe e mirë si një Ferrari - kohët e ngarkimit të faqes kanë një ndikim të madh në normat e kërcimit. Optimizoni imazhet, minimizoni madhësinë e skenareve dhe stileve të përfunduara për efikasitet maksimal.
Mësimi ofron shembuj të krijimit të faqeve të mira të uljes që do t'ju ndihmojnë të ju sillni klientë të vërtetë dhe do të mësoni diçka të re. Na pëlqen dhe ripostojmë. Shihemi se shpejti.
Për të shkarkuar të gjitha burimet e paraqitura në mësim në formën e faqeve të gatshme, klikoni në një nga butonat kalaja sociale për ta hapur dhe për të marrë një lidhje.
Me respekt, Galiulin Ruslan.
Tema Faqja e uljes fërkohet në vrima. Megjithëse bumi i faqeve të uljes është ulur pak, faqet e uljes janë ende të kërkuara. Ata janë nisur nga të gjithë dhe të gjithë, edhe nëse kjo është padyshim një veprim i humbur për vendet e tyre në biznes. Dikush e bën atë vetëm për të luajtur, dhe dikush për të fituar para. Por nuk është aq e rëndësishme se çfarë synimesh po ndiqni, ajo që është e rëndësishme është që të gjithë do të duhet të zhvillojnë një faqe. Dikush do të urdhërojë nga profesionistë, dhe dikush, për një arsye ose një tjetër, do të fillojë të krijojë Landing Page e tyre. Ky koleksion i kushtohet kësaj të fundit.
Njerëzit që vendosën krijoni një faqe në internet, ata mund të fillojnë zhvillimin nga e para, ose mund të përdorin ato të gatshme, sepse nuk kërkojnë njohuri të veçanta të zhvillimit. Një njohuri themelore e HTML dhe CSS është e mjaftueshme, siç mësohet në shkollë. Këtu përsëri lind pyetja. Duhet të përdor me pagesë apo falas? Sigurisht, ai i paguar do të jetë me cilësi shumë më të mirë dhe ndoshta do të tregojë shndërrime më të larta. Ai i lirë do të jetë më pak i bukur, më pak i përpunuar për sa i përket marketingut, faqosjes dhe dizajnit.
Ky koleksion përbëhet nga vetëm hTML i pastër falas për të krijuar faqen e uljes... Fillimisht, përzgjedhja përbëhej nga 40 pozicione, por duke u zgjuar në mëngjes dhe duke parë këto shabllone me një sy të freskët, vendosa ta fshij pjesën më të madhe të saj, pasi që, sinqerisht, ishte mbeturinë dhe ka kaq shumë mbeturina në internet. Kanë mbetur vetëm modelet më të denjë, mbi të cilat të paktën mund të ndërtoni diçka. Përzgjedhja përfshin modelet e faqes së uljes të temave të ndryshme, por, për ndonjë arsye, mbizotëron LP për aplikacionet mobile. Ata dolën të jenë të cilësisë më të lartë.
Më parë kemi bërë një përzgjedhje të shablloneve falas të Faqes së Uljes. Ata ishin përshtatur për një temë specifike. Këtë herë vendosa të bëj një temë të parafabrikuar që nuk i përket asnjë drejtimi.
Koleksione të tjera të templates falas për HTML Landing:
Meqe ra fjala. Nëse, për ndonjë arsye, doni të tërheqni këto modele në motorin Wordpress, atëherë në lidhje me këtë temë kam bërë një herë një përzgjedhje të shtojcave për krijimin e një Faqja e Uljes në Wordpress. Mund të provoni t'i përdorni ato. Ndoshta kjo do të kursejë shumë kohë. Megjithëse, personalisht, unë nuk shoh shumë kuptim për ta bërë këtë, pasi HTML i pastër është i mjaftueshëm për një LP të thjeshtë.
Kështu që. Këtu janë 20 Model falas të faqeve të uljes HTML.
Appi - Model Sfondi i videos
Një tjetër model i Landing Page për aplikacionin celular me video në ekran të plotë. Ndryshe nga shablloni me një sfond video, i cili do të jepet më poshtë, ky është shumë më i mirë, megjithëse është mprehur për një temë specifike.Bukku
Shabllon HTML falas për tu krijuar Faqja Landing duke shitur libra... Bërë në stil Flat në hije të gjelbërta. Ka disa animacione argëtuese.Gjithashtu, zhvilluesi siguron kodet burimore në formatin PSD për shkarkim falas.
Faqja e Uljes Shitja e Kafesë
Modeli i faqes për uljen e kafesë... Dizajni dhe zbatimi i faqosjes është shumë interesant. Ekziston animimi i elementeve kur lëviz faqja. Gjithçka bëhet me ngjyra të buta. E përsosur për organizatat që shpërndajnë kafe. Sidoqoftë, ky model mund të modifikohet lehtësisht për t'iu përshtatur temës suaj duke zëvendësuar fotografitë.Landing Zero - Faqja e uljes me video në sfond
Modeli HTML falas me sfond video lëndë universale. I përshtatshëm për krijimin e një portofoli të një profesionisti të pavarur të çdo specializimi, qoftë ai një fotograf apo një stilist.Në përgjithësi, modelet falas me video në sfond janë të vështira për t'u gjetur. Pra, shkarkoni atë.
Videoja në ekranin e parë mund të zëvendësohet me tuajin, dhe nëse nuk ka asnjë, mund ta shkarkoni në stokun e videos falas. Kam dhënë një listë të rezervave të videove me video ligjore më herët.
Angazhohen
Një tjetër i gjithanshëm i përgjegjshëm një faqe me Bootstrap... Faqja është e përshtatshme për një prezantim të thjeshtë të produktit. E ngjashme në strukturë me faqen e prezantimit të produkteve Apple.Faqja e Uljes për një kafene apo restorant
E zakonshme për një përdorues të zakonshëm të pistës model falas i faqes së uljes me formularin e kapjes në ekranin e parë. Mprehur për krijimin e një faqe zbritjeje për një bar, restorant, kafene apo ndonjë gjë tjetër e kuzhinës. Duke përdorur formularin e aplikimit, mund të rezervoni një tryezë për një kohë të caktuar.Oleose
Cilësi shumë e lartë, e përgjegjshme, falas, por përsëri për një aplikacion celular. Faqja e Uljes zbatohet duke përdorur kornizën Bootstrap. Ka tre mundësi ngjyrash: blu të lehta, jeshile të lehta dhe vjollcë. Sidoqoftë, nuk është aq i përshtatur në mënyrë rigoroze për temën e tij, prandaj, ai mund të ribëhet lehtë për t'ju përshtatur.Take është një faqe në internet falas me një faqe
Dhe përsëri një tjetër falas një faqe model HTML për një aplikacion celular. Sidoqoftë, dizajni i tij është shumë interesant dhe i pazakontë. Unë madje do të thoja unike. Shumica e vizitorëve të postimit nuk janë zhvillues të aplikacioneve mobile, kështu që do t'ju duhet të ribëni gjithçka për t'iu përshtatur temës suaj.Ushqyes
Një faqe falas HTML5 kafene, restorant apo ndonjë lloj ngrënieje. Model me sfondin e ekranit të plotë dhe efektet Parallax.Ekzistojnë blloqe të tilla si: menuja, ngjarjet e ardhshme, vlerësimet e klientëve dhe një grup standard i blloqeve në të cilat mund të vendosni përfitime, etj.