Kako pomoću CSS-a gurnuti podnožje na dno prozora preglednika. Sve što trebate znati o dizajnu podnožja odredišne ​​stranice Desno podnožje

Pozdrav, dragi čitatelji bloga. Nastavljamo temu o rasporedu blokova koja je započeta i nastavljena u prethodna tri članka. U principu, već smo uspjeli stvoriti izgled stranice s dva i tri stupca, a čak smo uspjeli razmotriti i nijanse stvaranja fluidnog izgleda.

Osim toga, u prvim člancima posvećenim izgledu web stranice (), neki Osnovni koncepti webmastering, bez razumijevanja kojeg bi bilo prilično teško razumjeti nijanse.

Kakvih smo problema imali s izgledom naše web stranice?

Danas ćemo pokušati riješiti jedan mali problem koji bi se mogao pojaviti s izgledom koji smo izradili ranije. Najčešće se ova situacija događa kada se gleda na velikim monitorima (s visokom rezolucijom) i kada se prikazuje stranica s malom količinom informacija.

U tom slučaju može se ispostaviti da podnožje neće biti pritisnuto na dno ekrana, već će se nalaziti gotovo u njegovoj srednjoj visini, što će u većini slučajeva izgledati ružno i ne estetski ugodno.

Ipak, po mom mišljenju, potrebno je pritisnuti podnožje na samo dno izgleda stranice, a to će biti posebno istinito u slučaju kada je visina stranice manja od visine korisničkog ekrana. Ovo se shematski može predstaviti ovako:

Oni. ispravno ponašanje podnožja za slučaj male količine informacija na stranici i veliki ekran korisnik će biti sljedeći:

Da bismo to implementirali, moramo izvršiti brojne manipulacije kodom našeg izgleda. Štoviše, mijenjat ćemo ne samo datoteku stila CSS stiliziranje Style.css, ali i u Index.html koji sadrži HTML kôd i formiranje Div blokova. Ali prvo o svemu.

Kao primjer, koristit ćemo izgled web stranice s tri stupca koji smo ranije izradili. U ovom će slučaju Index.html izgledati ovako:

Zaglavlje Zaglavlje Sadržaj stranice Sadržaj stranice Sadržaj stranice Sadržaj stranice Podnožje

A u datoteci Style.css napisano je sljedeće CSS svojstva A:

Body, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content(background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer (boja-pozadine:#FFC0FF; jasno:oboje; )

Pa, sam izgled izgledao je otprilike ovako:

Kao što vidite, podnožje nije pritisnuto na dno i stoga ne zadovoljava naše zahtjeve (uvijek se nalazi ispod najnižeg stupca), pa ćemo morati izvršiti prilagodbe koda. Ista stvar se može učiniti za raspored u dva stupca, kao i za raspored gume. Metoda je univerzalna.

Kako gurnuti podnožje na dno izgleda web stranice

Dakle, moramo premjestiti Div spremnik s podnožjem na dno ekrana. Da biste to učinili, najprije ćete morati postaviti visinu cijele stranice na sto posto (zauzet će cijeli ekran). To će biti potrebno kako bi se zatim promijenila veličina glavnog bloka s izgledom na 100%.

Cjelokupni sadržaj stranice web-mjesta smješten je u početne i završne oznake Body, pa stoga moramo dodati još jedno CSS svojstvo za oznaku Body u Style.css, postavljajući visinu na 100%:

Tijelo, html (margina:0px; padding:0px; visina: 100%; )

Na izgled Ovo još neće imati nikakvog učinka, ali sada se glavni blog može rastegnuti do pune visine zaslona. Oni. bila je neka vrsta pripremne faze.

Osnovna svojstva CSS-a po želji možete pogledati. Sada postavimo spremnik Div ​​koji sadrži cijeli naš izgled na minimalnu visinu od 100%:

Također ga želim istaknuti (div s id="maket"). Da bih to učinio, dat ću mu okvir pomoću odgovarajućeg svojstva Border():

Svojstvo The border: solid 3px black omogućuje vam da postavite čvrsti rub (pun) debljine 3 piksela u crnoj boji za ovaj spremnik. To će vam omogućiti da jasno vidite da se spremnik s izgledom protegao na cijelu visinu zaslona, ​​čak i uz malu količinu informacija na stranici:

Sada ćemo morati izvaditi blok podnožja iz općeg spremnika i postaviti ga ispod, odmah nakon općeg. Što će dati? I činjenica da će se konačno podnožje u layoutu udostojiti spustiti, a neće kao dosad biti pritisnuto uz svoj najduži stupac. U ovom će slučaju Index.html izgledati ovako:

Naslov Zaglavlje Lijevi stupac Izbornik Izbornik Izbornik Izbornik desni stupac Izbornik Izbornik Izbornik Izbornik Sadržaj stranice Sadržaj stranice Sadržaj Podnožje

Imajte na umu da se blok s podnožjem više ne nalazi unutar općeg spremnika (maket), pa stoga njegovu širinu više ne reguliraju CSS svojstva navedena za maket u datoteci Style.css. Širina podnožja protezat će se preko cijelog zaslona, ​​ali će se i dalje nalaziti na dnu zaslona, ​​odmah ispod glavnog bloka:

Ali opet se javlja problem, jer da biste vidjeli podnožje, sada morate skrolati po ekranu u pregledniku (pogledajte traku za klizanje na gornjoj slici).

To se događa zato što glavni spremnik (maket) zauzima cijelu visinu zaslona (to je određeno svojstvom min-height: 100%), a podnožje se nalazi odmah iza njega i da biste ga vidjeli morat ćete se pomicati, što nije baš zgodan i funkcionalan.

Ovaj problem možete riješiti postavljanjem negativnog ispuna za Div spremnik s podnožjem tako da se pomiče prema gore za udaljenost jednaku svojoj visini. U tom će slučaju spremnik podnožja preklapati glavni i stati u visinu zaslona preglednika (tj. nećete se morati pomicati da biste ga vidjeli).

Ali da biste postavili negativni pomak od vrha, morate znati upravo ovu visinu podnožja, ali mi to još ne znamo.

Stoga ćemo prvo postaviti visinu spremnika koji sadrži podnožje postavljanjem odgovarajućeg svojstva u Style.css:

#footer( background-color:#FFC0FF; clear:both; height: 50px; )

Zatim postavljamo negativnu marginu za njega na vrhu do visine jednake njegovoj visini:

To će omogućiti podnožju da se podigne točno na svoju visinu i tako stane u zaslon preglednika (sada možete ukloniti CSS granični posjed: puna 3 px crna prema pravilu za maket, tako da debljina okvira ne sprječava cijeli izgled, uključujući podnožje, da stane u visinu ekrana):

Kao što možete vidjeti, sada se traka za pomicanje ne pojavljuje u pregledniku, a naš cijeli raspored web-lokacije s tri stupca koji se temelji na blokovima stane na jedan zaslon (u slučaju da na stranici ima malo informacija) i ima podnožje smješteno na samom dnu . Što je upravo ono što smo trebali učiniti.

Umetnemo odstojnik i borimo se s njim Internet Explorer

Ali javlja se problem koji će se pojaviti samo kada na stranici izgleda bude više informacija i može doći do sljedeće situacije:

Ispada da može doći do situacije da se podaci u jednom od stupaca izgleda preklapaju s podnožjem, što neće izgledati lijepo. To se događa zbog notornog negativnog ispuna koji smo postavili za njega i koji je pomogao podići naš podrum u odnosu na glavni spremnik izgleda.

Oni. Ispostavilo se da se na dnu ekrana nalaze dva bloka koji se preklapaju u podrumskom dijelu.

Rješenje ovog problema je dodavanje novog praznog Div spremnika (tzv. spacer) u glavni spremnik našeg layout-a (maketa), na mjesto gdje se prethodno nalazio blok s podnožjem.

Postavljanjem ovog novog spremnika na visinu koja je jednaka visini podnožja, možemo izbjeći sudaranje informacija iz glavnog spremnika s blokom s podnožjem. Dodijelimo ID () ovom spremniku koji se zove Rasporka i kao rezultat će Index.html našeg izgleda u tri stupca izgledati ovako:

Zaglavlje Zaglavlje Lijevi stupac Izbornik Izbornik Izbornik Desni stupac Izbornik Izbornik Izbornik Izbornik Izbornik Sadržaj stranice Sadržaj stranice Sadržaj stranice Stranice Stranice Stranice Stranice Podnožje

A u Style.css za ovo ćemo napisati ( , koji postavlja visinu ovog spremnika razmaka jednaku visini podruma:

#rasporka ( visina: 50px; )

Kao rezultat toga, podnožje će biti pritisnuto odozdo ne na informacije sadržane u glavnom spremniku (na primjer, tekst u najvišem stupcu), već na područje jednako visini podnožja s spremnikom razmaka koji ne sadrži informacije .

Na taj način izbjegavamo sudare i iskrivljenja u našem rasporedu s tri stupca. Sve će biti jasno i lijepo (nježno i plemenito):

Kao što sam već spomenuo, širina podnožja sada se mora postaviti zasebno, jer... ovaj spremnik više nije dio glavnog. Da biste to učinili, morate CSS datoteci dodati dodatna svojstva za podnožje, omogućujući vam da postavite njegovu širinu i poravnate ga vodoravno na sredini zaslona.

Ima smisla postaviti širinu jednaku širini cijelog izgleda pomoću svojstva Width, a vodoravno poravnanje može se izvršiti na isti način kao što smo učinili za cijeli izgled na raspored blokova.

Stoga ćemo morati dodati dodatna svojstva za podnožje ID-a:

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

Korištenjem svojstva width:800px, širina je postavljena na 800 piksela, a korištenjem dva svojstva margin-left: auto i margin-right: auto, uvlačenje lijevo i desno od podnožja postavlja se automatski, kao rezultat pri čemu će ove uvlake biti jednake i naš će heroj biti poravnat prema sredini:

Pa, čini se da nema više ništa za poboljšati, ali to nije bio slučaj. Kao i uvijek, naš omiljeni preglednik Internet Explorer 6 ne razumije nešto od CSS svojstava koja koristimo. U ovom pregledniku (a možda iu nekim drugim starim), unatoč svim našim naporima, podnožje neće biti pritisnuto na dno, već će se i dalje držati najvišeg stupca izgleda stranice.

Sve se to događa jer ( ne razumije svojstvo min-height: 100%, koje smo koristili za postavljanje minimalne visine glavnog bloka jednake visini zaslona.

Stoga ćemo za rješavanje ovog problema morati upotrijebiti takozvani hack koji nam omogućuje da objasnimo (na prstima) starijim preglednicima što da rade. Prije popis CSS-a svojstva za maket morat ćete umetnuti sljedeću kombinaciju:

* html #maket ( visina: 100%; )

Ovo pravilo će se primjenjivati ​​samo na Internet preglednik Explorer 6, ostali to neće uzeti u obzir i implementirati.

Dakle, konačni izgled Style.css s podnožjem pritisnutim na dno ekrana bit će sljedeći:

Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # zaglavlje (boja-pozadine:#C0C000; ) #lijevo(boja-pozadine:#00C0C0; širina:200px; float:lijevo; ) #desno(širina:200px; boja-pozadine:#FFFF00; float:desno; ) #sadržaj ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; ) #rasporka ( visina: 50px; )

Pa, konačni oblik Index.html je dat upravo gore. To je to, ova serija članaka posvećenih blok rasporedu fiksnih i fluidnih izgleda web stranica s 2 i 3 stupca može se smatrati dovršenom.

Također možete pogledati video “Working with HTML oznaka div":

Sretno ti! Vidimo se uskoro na stranicama bloga

Moglo bi vas zanimati

Block layout - Izrađujemo dva stupca, tri stupca i fluidne izglede za web stranicu
DiV raspored - Stvorite blokove za raspored u dva stupca u HTML-u, odredite njihove veličine i postavite položaj u CSS-u

Ako su cipele konačna komponenta bilo koje odjeće, onda je podnožje za web-mjesto e-trgovine konačni element njegovog prodajnog dizajna. Usredotočujući se na donji element, podnožje, moderne web stranice spremne su pokazati svoju osobnost na svaki mogući način. U konkurentnom okruženju e-trgovine ima ih dovoljno originalne ideje, kreativnost i trendovi dizajna. Prije diverzifikacije podnožja stranice za e-trgovinu, vrijedi razmotriti važne točke. Što prvo postaviti i koji je najbolji način za to? Naš pregled inspirativnih dizajna podnožja ima neke zanimljive mogućnosti.

Pročitajte i: 13 marketinških trendova e-trgovine za 2019

Zanimljiva statistika iz Chartbeata. Istraživanje ponašanja 25 milijuna korisnika pokazalo je koliko duboko pregledavaju stranice. Ispada da pozornost korisnika privlači prostor ispod linije savijanja. Primajući više praktično korisnih informacija, posjetitelji se najduže zadržavaju u području 1200px od vrha stranice (s prosječno 700px vertikalnog zaslona u pregledniku), odnosno iza drugog ekrana.

Vrijeme gledanja (sek.) / Udaljenost od vrha stranice (pikseli)

Postoji veliki razmak u trajanju gledanja prvog i drugog ekrana. TOP je 4 sekunde, trajanje doseže maksimum (16 sekundi) na 1200 piksela od vrha i daljnjim skrolanjem se polako smanjuje.

Udio posjetitelja (%) / Udaljenost od vrha stranice (pikseli)

Značajan dio posjetitelja (više od 25%) niti ne čeka da se sadržaj učita i počne skrolati po stranici. To znači da će samo 75% prvo vidjeti sam vrh. Najgledanije područje stranice je 550px (odmah iznad linije presavijanja).

Studija razbija mit da korisnici ne skrolaju do dna stranice i ne gledaju sav sadržaj. Podnožje je također važno za modernu eCommerce stranicu, a ima čak i svojih prednosti.

Ideje kako dizajnirati "podrum" (podnožje), primjeri prodajnih dizajna

Ovih 10 savjeta reći će vam kako lijepo dizajnirati podnožje za web stranicu - prema pravilima kompozicije u web dizajnu i rješavanju prioritetnih zadataka. Primijenite najprikladniju taktiku za poboljšanje upotrebljivosti, UX (korisničkog iskustva), pa čak i povećanje prodaje.

1. Potrebni podaci

Tradicionalno, potrebna organizacijska i pravna pitanja pokrivena su u podnožju stranice. Obavijesti se prikazuju u manje uočljivom tekstu, oslobađajući druga područja stranice za fokusiraniju pozornost. značajni elementi. Ovdje popis uzoraka za razmatranje:

• Obavijesti o autorskim pravima
• Pravna odricanja od odgovornosti
• Podaci o naplati
• Obavijest o kolačićima

Web stranica koja prodaje proizvod mora ispunjavati zakonske uvjete i pružati informacije o postupku i rokovima povrata. Njegov položaj u podnožju prikladan je i za prodajni resurs i za posjetitelje.

Primjer podnožja: Yves Rocher

Internet trgovina zaštitni znak Yves Rocher: podnožje na cijelom zaslonu s lijepim dizajnom izmjeničnih slojeva. Informira o tvrtki, infrastrukturi prodajne web stranice - od praćenja narudžbi do politike osobnih podataka. Tu su i savjeti o korištenju proizvoda, bonusi, promocije

Primjer podnožja: Lumity

Prodavci dodataka prehrani podliježu pojačanim zakonskim zahtjevima. odgovornost. Ima dosta stvari koje bi trebali/ne bi trebali reći na svojim prodajnim web stranicama. Veze na pravne informacije istaknute su masnim slovima radi bolje vidljivosti.

Podnožje s prekrasnom pozadinskom slikom vrlo se organski uklapa u cjelokupni dizajn web mjesta. Ne postoji jasna granica, nego sam sadržaj služi kao separator

Primjer podnožja: Saddleback Leather Co

Prodajna web stranica s prekrasnim retro dizajnom zaglavlja i podnožja. 100-godišnje jamstvo protiv nedostataka u materijalu i završnoj obradi. Uvjeti povrata su popraćeni zanimljive priče... nije sve tako tužno s potrebnim informacijama o e-trgovini, pokazalo se

2. Negativni prostor – dovoljna vizualna udaljenost

Kada ograničavate broj veza podnožja, nemojte štedjeti na negativnom prostoru - to će imati zapanjujući učinak na vizualnu percepciju i poboljšati čitljivost. Opće pravilo: Održavanjem vizualne hijerarhije, središnji elementi se brže uočavaju (mogu se koristiti u vašu korist!).

Primjer podnožja: QUAY AUSTRALIA

Uz minimalistički stil i fiksni padajući izbornik, internetska trgovina može si priuštiti prostrano podnožje

Primjer podnožja: Incase

O velikoj količini mikronegativnog prostora (između malih elemenata) možemo reći ovo: dok sve potrebne informacije je prisutan, čitljiv je i brzo uočljiv - sve je u redu

Primjer podnožja: Stumptown Coffee Roasters

Prostrano podnožje stranice za kavu izvrstan je završetak čiste dizajnerske kompozicije, u kojoj ima puno makronegativnog prostora ("zrak" između odjeljaka/odjeljaka)

3. Konačni poziv na akciju

Pročitajte također: 30+ primjera i ideja za dizajniranje ciljnih akcijskih gumba

Moderan dizajn podnožja dovoljno govori o samom resursu. Važno je napomenuti: kupac se ovdje zadržava malo duže nego u drugim dijelovima stranice. Zgodna prilika za još jedan, posljednji poziv na akciju. Često je to pretplata/bilten, ali također možete povezati CTA poziv s registracijom računa.

Primjer podnožja: Greetabl

Greetabl ima skromno dizajniran dno svojih stranica koji uključuje poziv za pretplatu. S minimalnim brojem elemenata, poziv postaje uočljiv, au skladu s tirkiznom pozadinom pretvara se u ukras stranice

Primjer podnožja: Ecwid

Lijep dizajn s pozivima na akciju na dnu stranica. Struktura alata za izradu prodajnih web stranica je univerzalna. Preveden je na 35 jezika za milijune kupaca.

4. Plutajuća kolica – povećanje dostupnosti prodajne funkcionalnosti

Pristup košarici za kupnju s dna stranice odličan je način za poboljšanje upotrebljivosti i prodajnih kvaliteta stranice.

Primjer podnožja: Lemonadela

Prodajna web stranica ugostiteljskog poduzeća ugodna je za gledanje i praktična za kupca

5. Navigacija podnožjem

Donji dio stranice idealan je za informacije koje se rijetko gledaju: o tvrtki, uvjetima usluge i politici privatnosti. U ovom slučaju, funkcija podnožja je spasiti sve. Osjećajući se izgubljeno u okruženju e-trgovine, netko se zainteresira za infrastrukturu e-trgovine, instinktivno skrolajući dalje...

Negativni prostor neophodan je za čitljivost sadržaja. Općenito, "podnožje" nije u svrhu navigacije, za razliku od izbornika ili karte web mjesta. Samo u rijetkim slučajevima web-mjesta za e-trgovinu stavljaju pojedinačne kategorije proizvoda u podnožje (

Pozdrav, dragi čitatelji bloga. Danas želim s vama razgovarati o tome kakvo bi podnožje trebalo biti u modernom web dizajnu. Također ćemo s vama pogledati neke primjere i dobiti izvrsne savjete za korištenje. :-)

Ako ste već primijetili da se u posljednjih nekoliko godina sve više podnožja pojavljuju veća. Što zauzvrat omogućuje bolju navigaciju i korištenje stranice. Naravno, bilo bi ispravnije podnožje učiniti ne samo lijepim, već i praktičnijim, kao i funkcionalnim. Drugim riječima, sve ovisi o dizajneru.

Pa, pogledajmo sada neke praktične i lijepe primjere:

Vrlo praktična i potpuna navigacija web stranice.

Kao što znate, na gotovo svim web stranicama možete pronaći takvu stranicu "Site Map". Ovo je već zastarjela opcija navigacije. Zašto ne biste napravili sažetiju kartu u podnožju web mjesta, po mom mišljenju to je vrlo zgodno, a također ne morate tražiti sve vrste stranica s potpunom navigacijom.

Potpuno opremljena navigacija može uključivati ​​više od 50 poveznica na stranici, što zauzvrat ima vrlo dobar učinak na:

SEO. Takva će navigacija uvelike olakšati korištenje stranice robotima za pretraživanje i korisnicima.

Poboljšana navigacija. To ih prisiljava da bolje pregledaju stranice vašeg web-mjesta, jer bi te stranice mogli ignorirati ili ih jednostavno ne vidjeti. To zauzvrat smanjuje stopu odstupanja.

Vlasnici web stranica često ne obraćaju pozornost na podnožje, misleći da ono ne daje vrijednost: nalazi se na samom dnu, pa stoga nije zanimljivo korisnicima. Ali to nije istina. Pravilno dizajniran podrum s promišljenim dizajnom, kompetentnom strukturom i potrebnim sadržajem privući će pozornost korisnika, zadržati ga na mjestu i koordinirati daljnje akcije. Zato je učinkovitost kvalitetno izgrađenog podruma neosporna.

U ovom članku ćemo vam detaljno reći što je to - podnožje web stranice, koja je njegova važnost i kakvo bi trebalo biti da radi za vaše poslovanje.

Što je podnožje, koliko je važno i zašto?

Podnožje (footer, podnožje) web stranice je krajnji donji dio stranice, gdje se prikazuju korisne, ali ne i primarne informacije. To može biti apsolutno bilo koja informacija koja bi mogla biti zanimljiva ciljnoj publici, kao i informacija koja bi trebala biti na web mjestu, ali nije racionalno staviti je u glavni izbornik kako bi bila kompaktna i logična.

Dobro optimizirano podnožje olakšat će navigaciju stranicama i pomoći u postizanju poslovnih ciljeva, jer je dodatni izvor važnih informacija za korisnika ukoliko ih nije pronašao na stranici.

Glavne prednosti dna stranice

Podnožje može sadržavati apsolutno sve informacije koje bi mogle biti od interesa za korisnika: od podataka za kontakt do poveznica na stranice s dodatnim uslugama tvrtke. Ovi elementi donose niz poslovnih prednosti.

Usredotočite se na ono što je važno

Dovoljno je samo malo poraditi na dizajnu podruma i on će postati glavni fokus na korisne informacije. Koristeći podnožje, svom klijentu možete reći više o tvrtki i njezinim aktivnostima, ponuditi pretplatu na newsletter ili pružiti informacije partnerima koristeći aktivnu poveznicu na relevantne stranice. Podnožje korisniku pojednostavljuje navigaciju ako treba otići na bilo koji odjeljak na stranici. Da bi to učinio, samo treba odabrati potrebnu vezu na kraju stranice bez pomicanja cijele stranice prema gore. Stoga je uzalud misliti da je donji dio stranice beskoristan. Sigurno će pronaći svog korisnika, privući pažnju i zadržati ga na stranici.

Povećano stvaranje potencijalnih klijenata Maksimalno korisno i važna informacija

svi korisne informacije, koji se ne uklapa u jelovnik ili nije primjeren njegovim specifičnostima, može se staviti u podnožje. Otkrijte pravne informacije svom korisniku, privucite sponzore i partnere i pružite korisne poveznice zaposlenicima tvrtke. Vjerujte mi, takve informacije neće biti zanemarene.

Navigacija web stranice

Ako se korisnik udaljio od zaglavlja (zaglavlja stranice) i približava se podnožju, znači da još nije pronašao ono što mu je zanimljivo i važno. Dakle, sve je u vašim rukama. Postavljanje navigacijskih poveznica olakšat će vašem potencijalnom klijentu pronalaženje potrebnih informacija i produljiti vrijeme korištenja stranice.

Maksimalno privlačenje pažnje

Podnožje drži pažnju posjetitelja stranice do posljednjeg trenutka, zadržavajući je. Kao da posljednji akord daje korisniku još jednu priliku da dobije vrijedne informacije. A da bi ovo dobro funkcioniralo, samo trebate pravilno dizajnirati donji dio stranice. Kasnije ćemo vam reći kako to učiniti.

Što bi trebalo biti u podnožju stranice?

Sadržaj i dizajn podnožja web stranice usko su povezani. Dizajn cijelog bloka ovisi o tome što će biti postavljeno u ovom dijelu. Elementi sadržaja ovise o aktivnostima tvrtke i karakteristikama ciljane publike. Navest ćemo većinu stavki koje se mogu smjestiti na dno stranice. Sve što trebate učiniti je odabrati one koji su najprikladniji za vaš konkretan slučaj, na temelju vašeg poslovanja.

Autorska prava

Jednostavan način da zaštitite svoj sadržaj od krađe je polaganje autorskih prava. To podrazumijeva da za krađu bilo kojeg sadržaja ili ideje/dizajna stranice, osoba koja je to učinila može odgovarati. U stvarnosti, naravno, stvari su mnogo drugačije, jer još uvijek može doći do pokušaja krađe vašeg sadržaja.

Svake godine trebate ažurirati brojku pored podataka o autorskim pravima. To se može učiniti na dva načina: ručno ili automatski pomoću jednostavna skripta u kodu.

Nagrade i certifikati

Svaka informacija o certifikatima, nagradama i postignućima postaje snažan društveni dokaz koji povećava povjerenje korisnika u tvrtku. Stoga, ako vaša tvrtka ima ikakvih zasluga, svakako razgovarajte o njima u podrumu. Dodatna prednost je što se podnožje prikazuje na svakoj stranici, informacije o vašim nagradama će svakako biti zapažene. Ako vaša tvrtka nema nikakve certifikate ili nagrade, ali ste partner Googlea, Samsunga, Asusa ili neke druge velike i prestižne tvrtke, onda to svakako naznačite u podnožju.

Karta stranice

Sitemap u podnožju je popis stranica na vašem web-mjestu koji će pomoći algoritmu pretraživanja da indeksira stranice. Ili karta može biti u obliku URL-ova koje tražilica prethodno nije otkrila prilikom indeksiranja stranice.

Podnožje će vam pomoći indeksirati apsolutno sve stranice web stranice pomoću Sitemapa, što je vrlo dobro za njegovu promociju.

Politika privatnosti/Uvjeti korištenja

Često su informacije o politici privatnosti objavljene u podnožju stranice. Ovo opisuje kako se podaci prikupljaju, pohranjuju i kako se mogu koristiti. Za neke stranice, objavljivanje informacija o politici privatnosti zahtijeva važeći zakon.

Poveznica na stranicu s uvjetima korištenja je potrebna ako stranica sadrži sadržaje zabranjene za maloljetne osobe. Na primjer, ako stranica prodaje alkohol ili duhan. Odlaskom na stranicu uvjeta korištenja potrošač će ih morati pročitati i potvrditi da je punoljetan. Time se vlasnik stranice oslobađa odgovornosti ako je korisnik mlađi od 18 godina.

Oblik Povratne informacije

Ne propustite priliku zadržati klijenta tako da ga pozovete da ispuni obrazac za povratne informacije.

Obrazac za povratne informacije pomoći će pretvoriti korisnika u klijenta. Pomaže posjetiteljima da donesu konačnu odluku o suradnji ako korisnik prethodno nije bio siguran da je za nju spreman. Istodobno, obrazac za povratne informacije može sadržavati različite pozive na akciju. Na primjer, poziv „Ima li još pitanja? Pitajte ih za nas” radi jako dobro. Pogotovo kada korisnik nije mogao pronaći odgovor na svoje pitanje. Postavljanje obrasca za povratne informacije u podnožje veliki je i hrabar plus za konverziju web stranice.

Naravno, obrazac za poziv ne bi trebao biti samo u podnožju, već i na glavnoj stranici, kako ne bi propustili klijenta u trenutku kada želi obaviti radnju. Kako bi trebao izgledati početna stranica pročitajte stranicu.

Kontakti tvrtke

U pravilu je cijeli odjeljak posvećen kontaktima tvrtke, a poveznica na koju se nalazi u izborniku. No, kako bi se korisniku olakšalo snalaženje po stranici i kako ga se ne bi tjeralo da se pomiče prema gore po stranici kada je bliže kraju, kontakte treba staviti i u podnožje. U tom slučaju kontakti moraju biti postavljeni u mikro oznake tako da sustav pretraživanja bolje razumjeli kontakte tvrtke.

Osim kontakt brojeva telefona i E-mail, koji se često stavljaju u zaglavlje, možete navesti adresu fizičke lokacije ureda ili izvanmrežne trgovine, kao i naznačiti punu poštanska adresa, ako aktivnosti tvrtke zahtijevaju razmjenu pisama standardnom poštom.

Korisni linkovi na stranicu

Navigacijski linkovi na stranice stranice pomoći će posjetitelju da pronađe ono što ga zanima, ako to prethodno nije pronašao u glavnom izborniku. Također, slični linkovi mogu biti duplikati na stranice “Dostava”, “Plaćanje”, “O tvrtki” itd.

Sada je trend razviti opsežno podnožje, koje postaje dodatni izbornik, uključujući ne samo veze, već i kratki sadržaj. Obično se ovaj pristup koristi u slučajevima kada je postavljanje takvog sadržaja na stranice neprikladno zbog naglaska na glavnoj rečenici. Na primjer, informacije o tvrtki rijetko se objavljuju na stranicama internetske trgovine, jer su korisniku manje zanimljive od proizvoda koji prodaje. U takvim slučajevima možete nakratko smjestiti informacije o tvrtki u podrum. Ali u isto vrijeme, važno je pratiti njegov volumen tako da se veliki dio teksta ne ponavlja i ne stvara potpune duplicirane stranice na web mjestu zbog činjenice da je podnožje isto na svim stranicama.

Ikone društvene mreže

Dno stranice odlično je mjesto za postavljanje ikona društvenih medija. Tradicionalno se postavljaju u ovaj dio stranice kako bi zadržali pozornost korisnika na web mjestu, ne dopuštajući mu da ga brzo napusti. Stoga, ako je korisnik zainteresiran za zajednice na društvenim mrežama, obično se spušta do kraja stranice kako bi ušao u njih.

Link za prijavu Osobni prostor

Nisu svi posjetitelji web stranice klijenti. Stranicu mogu posjećivati ​​partneri i zaposlenici. Stoga je postavljanje poveznice za unos osobnog računa u podnožje odlično rješenje.

Obrazac za pretplatu na newsletter

Pretplata na newsletter nije uvijek glavni zahtjev korisnika stranice. Ali može djelovati kao dodatni način zadržavanja kupaca stalnim obavještavanjem s ažurnim informacijama. U takvim slučajevima možete postaviti obrazac za pretplatu u podnožje. Budite uvjereni, definitivno će uhvatiti sve korisnike koji ga zanimaju.

Obrazac za pretraživanje stranice

Za online trgovine i velike portale logično je formu za pretraživanje postaviti na vrh stranice na najvidljivije mjesto. Ali za neke stranice to nije relevantno.

Ali ovdje budite spremni na činjenicu da korisnici nisu navikli tražiti obrazac za pretraživanje u podnožju. Stoga se mora izolirati i istaknuti kako bi se privukla pozornost na nju. Međutim, takav element u podrumu rijetko se može naći na domaćim stranicama. Najčešće se nalazi na američkim resursima.

O tvrtki

Ključni upiti

Podnožje je odlično mjesto za postavljanje blokova za povezivanje s upitima promoviranih stranica kako bi se povećala relevantnost web mjesta za tražilicu.

Ali ovdje ne treba zlorabiti broj ključnih pojava - tražilica Google sustav ne povećava učinkovitost SEO promocije za njih. Dakle, dovoljna je jedna ili dvije ključne riječi kako bi ključne riječi izgledale skladno s ukupnim sadržajem.

Najnovija ažuriranja bloga

Ako pišete blog kako biste privukli dodatnu pozornost na svoju tvrtku, informacije o ažuriranom sadržaju mogu se prikazati na dnu stranice. Ali preporučuje se postavljanje takvog bloka u ovaj dio web stranice samo u slučajevima kada je blog samo dodatni alat i bit će od interesa samo za malu skupinu vaše ciljne publike.

Koristeći isti princip, možete smjestiti bilo koju informaciju u takav blok. Na primjer, poveznice na korisne članke.

Prilikom dizajniranja podnožja vrlo je važno dati korisniku mogućnost da se pomakne do njega. Vrlo često mnoge stranice sadrže ozbiljnu pogrešku u pogledu korištenja - koriste ajax koji stalno učitava sadržaj prilikom pomicanja prema dolje po stranici. Kao rezultat toga, korisnik jednostavno ne dođe do podnožja i ono postaje beskorisno. Ova tehnologija je učinkovita, budući da osoba ne treba ponovno učitavati stranice kako bi saznala više, već je potrebno dati osobi mogućnost da samostalno odluči želi li dalje gledati sadržaj. Stoga, prilikom dizajniranja podnožja i istovremenog Ajax učitavanja sadržaja, učitavanje po kliku kako bi potrošač mogao doći do kraja stranice i pronaći informacije koje ga zanimaju bez vraćanja stranice na vrh.

Poziv na akciju

Surađujmo! Pišite nam! Ostavite svoj broj telefona i mi ćemo vas nazvati u roku od 5 minuta! Jednostavan, ali privlačan poziv na akciju u kombinaciji s obrascem za kontakt ili obrascem za bilten smještenim u podnožju pomoći će povećati konverzije web stranice. Ne zaboravite da pozivi trebaju biti jasni i jasni, kako korisnik ne bi morao razmišljati kako poduzeti radnju koja mu se sugerira.

Karta

Uz pomoć karte postavljene u podnožje, moći ćete povećati povjerenje posjetitelja u svoju tvrtku. Osim toga, korisnicima ćete znatno olakšati život Google karte koji žele brzo pronaći gdje se nalazi vaš ured.

Postavite radnu kartu koja će korisnicima biti prikladna za korištenje. Nema smisla objavljivati ​​Yandex kartu ako je stranica namijenjena ukrajinskim korisnicima, jer je usluga blokirana za Ukrajinu i prilikom učitavanja takve karte bit će praznina. Što, vidite, nije solidno.

Koje elemente je najbolje odabrati za podnožje ovisi o vrsti vaše aktivnosti, vrsti stranice, njenom dizajnu, sadržaju i ciljanoj publici. Analiza interesa vaše ciljane publike i kompetentna struktura web stranice pomoći će vam odgovoriti na ovo pitanje.

Što ne bi trebalo biti u podnožju?

Unatoč činjenici da podnožje stranice nije glavni fokusni blok stranice, kojem je posvećena sva pažnja, to nije razlog za stvaranje kante za smeće od podnožja. Stoga se riješite nepotrebnih, nepotrebnih i bezvrijednih poveznica, ostavljajući one najkorisnije i najvažnije. Kako razumjeti da veze nisu potrebne? Jednostavno je: ako se logično ne uklapaju u vašu navigaciju ili kategorije, najvjerojatnije možete i bez njih.

Nemojte pretjerivati ​​sa SEO optimizacijom podnožja. Ne zaboravite da će tražilica odmah vidjeti black hat SEO i kazniti vas za to.

I ne bojte se slobodnog prostora. Prevelik broj poveznica pokvarit će dojam o stranici i otežati korisniku pronalazak informacija koje ga zanimaju, što dovodi do nezadovoljstva. A ako vaš korisnik nije zadovoljan, otići će kod vaše konkurencije bez razmišljanja.

Kako kompetentno dizajnirati podnožje web stranice? 5 vrijednih preporuka

Dizajn podnožja web stranice i njegova struktura moraju biti osmišljeni kako bi zainteresirali i privukli online korisnika. Kako to učiniti - pročitajte 5 vrijednih preporuka.

Koristite kreativna rješenja

Glavna pozadina podnožja trebala bi se razlikovati od opće pozadine stranice kako bi upadala u oči. Ali u isto vrijeme, mora odgovarati dizajnerskoj ideji projekta i skladno se kombinirati s njim.

Kako biste učinkovito istaknuli podnožje stranice, možete koristiti svjetlije boje ili čak koristiti tematske slike koje će naglasiti smjer stranice.

Odlučite li se za kreativnost, svakako spojite dizajn podnožja i dizajn web stranice uz pomoć elemenata koji će biti izvedeni u istoj boji. Napravite logičan prijelaz između pretposljednjeg i posljednjeg bloka, ali ne zaboravite na naglaske u podnožju. Glavna stvar je odabrati prave boje kako biste izgledali elegantno. U ovom članku možete naučiti kako odabrati prave boje za web stranicu.

Objavite svoju animaciju

Elemente animacije uvijek je zanimljivo gledati. Osim toga, igraju na emocije osobe, podsvjesno ga gurajući na akciju. Čak i uz malu i skromnu animaciju, dizajn podnožja će se transformirati.

Odaberite čitljive fontove

Izbjegavajte mala slova, čak i ako ima previše informacija. Bolje je isključiti neke veze koje više nisu potrebne. Nemojte prisiljavati svog korisnika da pažljivo gleda riječi kako bi ih pročitao. I svakako odaberite boje koje su u kontrastu s pozadinom kako bi se mala slova dobro istaknula, što ih čini lakšim za čitanje.

Koristite više prostora

Što je više slobodnog prostora u području podnožja, veća je koncentracija na informacije sadržane u njemu. Tematski naslovi i podnaslovi s logičkim blokovima pomoći će poboljšati jednostavnost korištenja podnožja i traženja informacija u njemu.

Ovaj zakon web dizajna je relevantan za cijelu stranicu. Slobodan prostor bit će veliki plus u smislu upotrebljivosti - korisniku je prikladnije percipirati informacije.

Uređen, pravilan i uredan položaj korisni linkovi pomoći će vam da ispravno prenesete informacije vašem klijentu. A klijent može brzo pronaći ono što ga zanima, bez kopanja po mnogim njemu beskorisnim linkovima. I ne zaboravi na svoje mobilnih korisnika. Obavezno optimizirajte podnožje tako da se ispravno prikazuje na bilo kojem mobilnom uređaju.

Objavite poziv na akciju

Podnožje je završni akord stranice, čija je svrha zadržati korisnika na stranici što je duže moguće. Poziv na akciju bit će još jedna prilika za povećanje konverzije web stranice. Ne samo da će zadržati posjetitelja na stranici neko vrijeme, već će ga i pretvoriti u klijenta. CTA u podnožju je klasik kojem pribjegava većina popularnih i uspješnih web stranica.

Kako se podnožje internetske trgovine razlikuje od podnožja drugih tipova stranica?

Sadržaj i količina informacija u podnožju stranice ovisi o djelatnosti tvrtke, opsegu usluga, strukturi izbornika i potrebama ciljane publike. Stoga podnožja odredišne ​​stranice ili stranice s posjetnicama mogu sadržavati malu količinu informacija i poveznica: kontakte, poziv na akciju i ništa više. Ali to nije dovoljno za online trgovinu.

Glavni izbornik internetske trgovine sadrži poveznice na kategorije i potkategorije u svrhu prodaje robe. Ostatak informacija o uslugama tvrtke nije logično smjestiti u glavni izbornik. Stoga se stavlja u podnožje. Preporučujemo da pogledate primjere dizajna internetske trgovine kako biste naučili kako pravilno dizajnirati podnožje web stranice.

Posebne informacije mogu se objaviti ovdje: informacije za partnere i stalne kupce, o dodatne usluge tvrtka (na primjer, informacije o uvjetima kredita, ratama, isporuci), poveznice na stranicu korporativnog odjela za rješenja individualna pitanja(osobito financijska pitanja, pitanja povrata robe, rješavanje sporova itd.). Ovdje možete dodati poveznice na stranice o:

• Slobodna radna mjesta za tvrtke;
• Kontakti menadžera-konzultanata u vezi s određenom opremom koju prodaje internetska trgovina;
• Informacije o popustima za stalne kupce, programu vjernosti;
• Informacije o mogućnostima plaćanja za pravne i fizičke osobe;
• Adrese servisnih centara;
• Informacije o suradnji za partnere i dobavljače;
• Link na FAQ;
• Informacije o kupnji poklon bonova;
• Informacije o tvrtki, radno vrijeme offline i online trgovine i još mnogo toga.

Ukratko, podnožje online trgovine razlikuje se samo po sadržaju i broju korisnih poveznica. Inače, zahtjevi za strukturu i dizajn identični su onima postavljenim za podnožja bilo koje vrste web mjesta. Glavna stvar je da je podrum vidljiv posjetitelju i pogodan za njegovu upotrebu.

Zapanjujući primjeri dizajna podnožja web stranice

Pogledajmo primjere podnožja web stranica različitih vrsta aktivnosti, dizajna i sadržaja. Dobijte ideje za razvoj atraktivnog i ispravnog podnožja za svoju web stranicu :-)

Primjer podnožja stranice br. 1

Primjer podnožja koji pokazuje kako minimalizam u ovom bloku pomaže usredotočiti pozornost na glavnu stvar: logotip tvrtke (brand) i ikone društvenih mreža. Nema ništa suvišno, izgleda stilski i lijepo. Kombinacija crne i bijele je klasična. A klasika nikada neće izaći iz trenda.

Primjer br. 2

Velik broj korisnih linkova + veliki negativni prostor rade svoj posao: pružaju opsežne informacije o uslugama tvrtke i pomažu korisniku da brzo pronađe ono što ga zanima. Podnožje je podijeljeno u dva bloka: važne informacije, gdje su naslovi za stupce s poveznicama označeni crvenom bojom i dodatne informacije. Jednostavno, ali učinkovito rješenje kada trebate postaviti veliki broj linkova na kraj stranice.

Primjer br. 3

Podnožje djeluje kao blok s obrascem za povratne informacije. Mali poziv na akciju, uredan oblik i originalan dizajn privlače pažnju i motiviraju na akciju.

Primjer br. 4

6 glavnih poveznica na Dodatne informacije, ikone za ulazak u društvene mreže - ništa novo. Ali u ovom slučaju, vrhunac podnožja su informacije o načinima plaćanja. Tvrtka čini vrlo snažan korak ulijevajući povjerenje klijentu i povećavajući njegovu lojalnost prema njoj. Logotipi bankovnih sustava u podnožju povećavaju jednostavnost korištenja stranice i plaćanja. Pogodni načini plaćanja za klijenta još su jedan plus za povećanje konverzije web stranice.

Primjer br. 5

U ovom primjeru, podnožje je završna faza za klijenta - njegovu akciju. U tu svrhu razvijeni su potrebni marketinški i tehnički elementi: postoji poziv na akciju, gumb za popunjavanje osobnih podataka, kao i prijelazna funkcija za pregled prezentacije tvrtke. Kao dodatne informacije navedene su aktivne poveznice na društvene mreže i kontakt podaci tvrtke, ako je klijentu prikladnije kontaktirati je samostalno ili osobno posjetiti ured.

Primjer br. 6

U ovom primjeru podnožja naglasak je na kontaktima s tvrtkom. Dodatni alat Za zadržavanje posjetitelja na web mjestu postoji aktivan gumb za preuzimanje briefa. Izvorni dizajn i puno besplatne pozadine zadržavaju i koncentriraju pozornost na glavnu stvar.

Primjer br. 7

Primjer tipičnog podnožja za internetsku trgovinu, gdje postoji veliki broj poveznica na različite stranice web mjesta. Ovdje korisnik može pronaći dodatne informacije o tvrtki, trgovinama i uslugama. Zahvaljujući ispravna struktura Podnožje ima velik broj poveznica koje izgledaju organski - ovdje je lako pronaći ono što vam treba. Takve ideje trebao bi unaprijed razraditi SEO i uključiti ih u projektni zadatak za izradu stranice. To se radi kako se ne bi propustile neke važne informacije pružajući ih krajnjim potrošačima.

Znate li već kakvo će biti podnožje vaše web stranice?

Uzimajući u obzir sve prednosti i vrijednosti podnožja web stranice, teško da se može nazvati beskorisnim. I iako ovaj blok završava stranicu i nalazi se na samom dnu, rijetko prođe nezapaženo. Stoga bi svaki vlasnik web stranice trebao posvetiti posebnu pozornost razvoju podnožja. Razmislite o tome koje veze trebate postaviti u ovaj blok, koju je strukturu i dizajn najbolje odabrati tako da cijelo podnožje izgleda ne samo ergonomski i elegantno, već donosi i prednosti - zadržava posjetitelja na njemu. Pokazali smo vam veliki broj primjera popularnih stranica i dali nekoliko važnih preporuka. Sve što trebate učiniti je, fokusirajući se na posao i ciljanu publiku, razviti vlastiti učinkoviti temelj za web mjesto. A ako je vaš projekt tek u razvoju, preporučujemo da pročitate članak o tome kakva bi trebala biti učinkovita poslovna web stranica.

Prvo ću vam pokazati rezultat današnjeg posta. Podnožje će biti malo i imat će samo jedan red teksta

Problemi s implementacijom podnožja

Ako je podnožje dno stranice, u čemu je onda problem s njegovom implementacijom? Uostalom, možete jednostavno napraviti nastavak naše glavne tablice i u nju umetnuti sve potrebne podatke! Da, istina je, ovaj pristup je primjenjiv u 99% implementacija web stranica, ali postoji jedan mali problem koji se javlja u 1% slučajeva.

Ovdje je shematski dijagram preglednika

U ovom dijagramu, podnožje je vezano za kraj glavne tablice i nalazit će se gdje je potrebno ako je glavno područje web-mjesta dovoljne visine za stvaranje okomitog pomicanja u pregledniku.

Ali što se događa ako visina stranice nije toliko visoka da bi stvorila okomito pomicanje?

Kao što vidite, ispada tužna slika. Podnožje u ovoj situaciji nije dno stranice, već središte. Kako to popraviti?

Postoje dvije mogućnosti:

• Nema veze što se podnožje pojavljuje u sredini, jer u 99% slučajeva stranica ima dovoljnu visinu da se podnožje pojavi tamo gdje je potrebno.
• Upotrijebite drugačiji način za implementaciju podnožja

Danas ćemo razmotriti drugu opciju.Postoji mnogo načina za implementaciju podnožja, ali postoji jedna stvar! Sve metode koje sam isprobao ne rade pod uvjetom da naše glavno područje web stranice ima stil. Ali nije sve tako strašno

Teorija implementacije podnožja

Što nudim? Predlažem da koristite jquery. Pomoću njega možemo saznati visinu preglednika ili bilo kojeg drugog objekta na našoj stranici. Čemu služi? Budući da će podnožje biti apsolutno pozicioniran objekt (ima položaj:absolute; stil), visina radnog područja ili visina glavnog stola omogućit će nam da znamo koliko pomaknuti područje podnožja duž vrha ( vrhunski stil)!

Mislim da je jasno kako ćemo implementirati naš podrum

Što se tiče rada funkcije Java skripte. Morat ćemo odrediti koju visinu (visina preglednika ili visina glavne tablice) koristiti za pomak podnožja. Ovdje je sve jednostavno, provjeravamo je li viša tablica ili prozor preglednika, ako je prozor preglednika, koristimo njegovu visinu. Ako je obrnuto, tada koristimo visinu glavnog stola.

Stvorite podnožje > Uredite stil tablice

Prvo, moramo prilagoditi stil našeg glavnog stola.

Kao što vidite, razmak između naše glavne tablice i kraja preglednika je zanemariv. Budući da će podnožje biti apsolutno pozicionirano, ono nikako neće proširiti prostor između glavne tablice i kraja stranice! Morat ćemo pomoći uvođenjem novih css element u stilu našeg glavnog područja.

Otvorite custom style.css, pronađite tablicu klasa (.table(...)) i uredite je ovako

Stol
{
pozicija: apsolutna;
vrh:0px;
lijevo:50%;
margin-left:-390px;
padding-bottom:50px;
z-indeks: 1;
}

Dodao sam stil padding-bottom:50px;, odnosno napravio sam prostor između kraja tablice i kraja prozora preglednika veličine 50 piksela. Za podnožje koje imam na umu (snimka zaslona rezultata na početku posta), ovaj prostor će biti sasvim dovoljno, ako imate na umu puno veće podnožje od mog, onda stavite onoliko piksela koliko vam treba!

>Uređivanje glavnog predloška

Otvorite prilagođeni index.html i prije

umetnuti naše podnožje

Pokreće RS-BLOG v2 | Kada kopirate materijal s ovog bloga, ne zaboravite objaviti vezu na izvor - rsblog.ru

Dopustite mi da objasnim neke od stilova koji se ovdje koriste.

• prikaz: ništa; - Naše podnožje će se pojaviti korisniku tek nakon što se cijela stranica učita, do tog trenutka podnožje neće biti vidljivo!
• lijevo:50%;margin-lijevo:-390px; - Ova dva stila omogućuju vam postavljanje podnožja točno u središte preglednika.
• poravnanje teksta: središte; - omogućuju postavljanje teksta sadržanog u bloku u središte.

>Povežite jquery i js.js

Prvo ga trebate preuzeti. Idite na ovaj link i kliknite ovdje

Otvorit će se kod, odaberite sve i kopirajte u notepad. U Notepadu kliknite Datoteka -> Spremi kao

Unesite naziv datoteke (jquery.js) s .js

i spremite ga u mapu prilagođenih predložaka. Sada imamo datoteku koja nam je potrebna u mapi s motorom. Također vrijedi izraditi datoteku js.js (za sada prazna datoteka). Uskoro ćemo napisati funkciju za prikaz podnožja u njemu. Ovako sada izgleda sadržaj mape predložaka:

Ako me sjećanje ne vara, snimio sam video lekciju gdje sam povezao jquery na malo drugačiji način, ako vas zanima, možete je pogledati

Sada preostaje samo povezati js datoteke s našim blogom. Da biste to učinili, otvorite prilagođeni index.html i nakon retka