Podnožje je važan strukturni element svake web stranice, često se naziva “podnožje”. Nalazi se na dnu web stranice i suprotan je element zaglavlju (zaglavlju stranice), koje se nalazi na vrhu.

Podrum služi kao dodatni blok za postavljanje podataka o kompaniji i povezivanje. Pravilno popunjeno podnožje ima dobar učinak i poboljšava njegovu upotrebljivost. Ponekad se koristi kao dodatni alat - pomoćnik za prikupljanje tragova.

Šta staviti u podnožje

Obično podnožje sadrži podatke koji su potrebni na bilo kojoj stranici i koji bi uvijek trebali biti na dohvat ruke korisnika. Često se informacije iz zaglavlja dupliciraju u podrumu. U zavisnosti od tipa sajta, određuje se lista podataka za podnožje. Formira se u zavisnosti od izgled stranice, sadržaji drugih blokova itd. U podrum se često postavljaju sljedeće vrste sadržaja:

• Blok povezivanja

Takvo povezivanje može biti dupliranje glavnog menija, koji sadrži važne i popularne sekcije. Ako odjeljci imaju strukturu na više nivoa, dijele se na stupce s objašnjenjima.

izvor sima-land.ru

Oblak oznaka također može poslužiti kao međusobno povezivanje. To mogu biti popularni dijelovi informativne stranice, važne vijesti ili članci.

izvor vesti.ru

• Copyright

Podnožje stranice često sadrži informacije o autorstvu, opisuje pravila korištenja i umnožavanja materijala i informacije o programerima resursa.

izvor vesti-ural.ru

• O partnerima

Često se u podnožju objavljuju podaci o onima koji podržavaju projekat, rade sa kompanijom i sl. Takve informacije pozitivno utiču na povećanje nivoa poverenja. Štaviše, ovo dobra opcija za one koji imaju obavezu postavljanja affiliate linkova na sve internet stranice stranice. Obično uključuju i linkove do vlastitih projekata, mobilne verzije, poddomene.

izvor ekb.rbc.ru

• Kontakti

U podnožju možete navesti samo osnovne kontakt informacije: adresu, telefon, email, ponekad čak i samo telefon. Detaljnije informacije nalaze se na stranici sa kontaktima.

izvor uniland.ru

• Društveni mediji

izvor e1.ru

• Lead forms

Za korisnike je zgodno da imaju obrazac za povratne informacije u podnožju, uključujući omogućavanje da ostave svoje kontakte, naruče povratni poziv ili se pretplate. Pored toga, ova opcija vam omogućava da dobijete podatke o zainteresovanim posetiocima.

izvor afisha.yandex.ru

• Mapa

Često se interaktivna mapa postavlja u podnožje stranice, što korisnicima povećava jednostavnost korištenja stranice. Mnogi ljudi biraju proizvod ili uslugu blizu kuće, fokusirajući se na tačnu lokaciju kompanije. Osim toga, prisustvo ovih informacija povećava nivo povjerenja u kompaniju, što ukazuje da ona zaista funkcionira, a ne samo da se predstavlja na internetu.

(podnožje je izvedenica od stopala (engleskog) - noga) - ovo je najniži dio stranice, nasuprot zaglavlju - gornji dio. Naravno, glava stranice - zaglavlje - je najvažniji element, ali podnožje je kao tlo pod nogama: mora biti izdržljivo i funkcionalno. Iako svi korisnici ne skroluju kroz web stranice do kraja, ne biste trebali zanemariti dio stranice o dinji.

Šta je uobičajeno stavljati u podnožje?

Standardni elementi podnožja su:

1. Dugmad društvenih mreža i widgeti društvenih mreža
2. Linkovi na glavne dijelove stranice
3. Veze ka resursima trećih strana
4. Copyright
5. Kontakt informacije
6. Traži

Ne biste trebali koristiti sve gore navedene elemente istovremeno, inače će podrum izgledati kao prava deponija svih najnepotrebnijih stvari. Potrebno je osigurati da su elementi u podnožju postavljeni proporcionalno i da ne narušavaju cjelokupni koncept i shemu boja stranice.

Originalno podnožje je mjesto gdje možete iznenaditi svog posjetitelja

Podnožje je upravo mjesto gdje možete implementirati vrlo zanimljive dizajnerske ideje, čak i ako se radi o ozbiljnoj web stranici zvanična kompanija. Evo par zanimljivih primjera:

Glavna stvar koju treba zapamtiti je da se takva originalnost ne može svidjeti svim kupcima i da u svemu treba postojati razum. Ako se ipak odlučite za originalan dizajn podnožja, na primjer, ručno nacrtani, onda se to ipak ne bi trebalo izdvajati iz općeg koncepta stranice. Ako su svi elementi dizajnirani u istom stilu, tada stranica izgleda holistički i međusobno povezana, a prijelaz s jednog elementa na drugi događa se intuitivno i neprimjetno.

Marketinško istraživanje je pokazalo da se sajtovi i portali na kojima su elementi podnožja logično raspoređeni, dizajnirani u istom stilu i nisu razbacani po prostoru, mnogo brže pamte i ne izazivaju poteškoće u radu.

Podnožju se može dodijeliti prilično velika visina, ali ne bi trebala prelaziti polovicu radnog ekrana korisnika, tako da on i dalje ne zaboravi zašto je došao na vašu stranicu.

Dodatni meni u podnožju

Uobičajena praksa je dupliranje menija stranice u podnožju ili postavljanje malo izmijenjenog menija. Međutim, često se objavljuje u proširenom obliku ako meni ima strukturu na više nivoa. Ovo je veoma korisno kao alternativna navigacija: na dnu se glavni meni obično ne vidi, ali korisnik ne mora da ulaže dodatne napore i može odmah da ode do odeljka koji mu je potreban. Ovo se lako može pratiti pomoću mape klikova korisnika na dugmad na web stranici iz Yandex Metrics ili Google Analytics.

Na primjer, to može izgledati ovako:

Ovo su, možda, svi glavni elementi koji mogu biti u podnožju stranice i biti korisni posjetiteljima. Najvažnija stvar koju treba uzeti iz ovog članka: Nemojte zanemariti ovaj dio stranice, a to će pomoći u održavanju lojalnosti posjetitelja i povećanju vremena provedenog na stranici.

Svi WordPress predlošci se sastoje od nekoliko datoteka koje su odgovorne za obradu i prikaz jednog ili drugog dijela bloga - zaglavlja, glavnog sadržaja, bočne trake i podnožja. Danas ćemo govoriti o potonjem. Podnožje (footer stranice) je njegov donji dio sa svim sadržajem. Najčešće ga koristi webmaster za pružanje informacija kao što su datum kreiranja, zaštita autorskih prava, naslov itd. Ali ovo nije lako implementirati u sve WordPress teme, neke jednostavno nemaju jednostavne opcije za dodavanje informacija u podnožje.

Šta postaviti u podnožje stranice?

Prvo, odlučimo koji tip lokacije, šta se može postaviti u podrum kako bi se poboljšali faktori ponašanja.

Kontakt informacije Najprikladniji za web trgovine. Postavljanje adrese putne karte, broja telefona, mail adrese prodavnice ili organizacije itd. u podrumu omogućava osobi da brže naruči ili kupi.

Navigacija ili ponavljanje navigacijskog bloka pogodno je za bilo koju vrstu stranice. Ovo je veoma važno za dugačke stranice. U tom slučaju, korisnik se neće morati vraćati na vrh da bi otišao na željeni odjeljak. Ali ako ne želite da postavite navigacioni blok u podnožje, možete se brzo vratiti na vrh pomoću strelice nagore.

društvene oznake, ako sadržaj vaše stranice uključuje masovnu diskusiju ili objavljujete recenzije događaja vezanih za razvoj teme, tada u podnožju možete postaviti linkove na društvenim medijima u kojem promovirate resurs. Oblak tagova, kao i dodatni blok za navigaciju, pogodan je za sve vrste sajtova. Postavljanje 3D oblaka oznaka u podnožje neće biti samo zgodno za korisnike, već i lijepo iz perspektive dizajna.

Potrebno je napomenuti da je šansa da kliknete na linkove podnožja ako nisu lijepi i informativni bliska nuli zbog neupadljivosti takvog podnožja.

Primjeri lijepo dizajniranih podnožja web stranice

Kako bismo napravili lijepo i informativno podnožje, nudimo vam najpoznatije radove web dizajn studija:

1. Dizajnersko rješenje francuskog web studija KDIGIT:

2. Dizajn podnožja web dizajn studija SNOWDEN industries:

3. Dizajnersko rješenje za podnožje švedske kompanije Uforia CMS:

4. Elegantan dizajn podnožja od Tapbots:

5. Podnožje web dizajn studija Gotovi dizajni:

6. Mehanički dizajn podnožja:

7. Prekrasan dizajn podnožja:

Nadam se da ste već shvatili, sva ova podnožja su implementirana na osnovu prekrasnih pozadinskih slika i blokova informacija postavljenih na njih. Ako ne biste trebali imati posebnih poteškoća s kreiranjem pozadinske slike, srećom za to postoje razni uređivači slika poput Photoshopa, onda je uz brzo i praktično postavljanje informacija u blokove moguće.

Dodavanje blokova informacija u podnožje

Najviše na jednostavan način dodavanje blokova informacija u podnožje će dodati blok widgeta podnožja na admin panel WordPress-a. Da biste kreirali takav blok widgeta, potrebno je da otvorite admin meni—>editor i u koloni desno izaberite datoteku functions.php u koju dodajemo kod:

if (function_exists("register_sidebar")) register_sidebar(array("name" => "Bočna traka podnožja", "before_widget" => "", "after_widget" => "", "before_title" => "

",));

if (function_exists("register_sidebar") ) register_sidebar(niz( "name" => "Bočna traka podnožja" , "before_widget" => "" , "after_widget" => "" , "before_title" => " " , "after_title" => " " , ) ) ;

Ovo je kod za registraciju novog bloka widgeta u admin panelu, gdje je 'name' naziv widgeta, 'before_widget' je prikazani HTML kod prije widgeta, a 'after_widget' je prikazani HTML kod nakon widget, kao i kod prije i iza zaglavlja naslova. Obično se dodaje na sam početak datoteke functions.php.

Sačuvajte sadržaj funkcije functions.php i idite na odjeljak “Widgeti”. Ako je sve urađeno bez grešaka, tamo ćete pronaći novi blok:

Dakle, napravili smo prikaz novog bloka vidžeta u administratorskom meniju, sada treba da prikažemo widgete ovog bloka na sajtu. Da biste to uradili, otvorite meni administratora -> editor i izaberite datoteku footer.php na desnoj strani.

U datoteci footer.php dodajte sljedeći kod.

Počinjemo petu lekciju o uređivanju šablona u CMS Joomla 3, ovaj put ćemo govoriti o podnožju stranice. Pogledajmo moguće opcije dizajna podnožja i neke pristupe njegovom kreiranju.

Šta je podnožje

Podnožje ili podnožje stranice je njen najniži dio, koji obično sadrži informacije o stranici, autorskim pravima itd. Standardna verzija u šablonu Protostar, podnožje ne sadrži nikakve značajne informacije:

Standardni sadržaj podnožja je tekuća godina, naziv stranice i link „Nazad na vrh“ koji vodi do vrha stranice. Iskreno govoreći, ova opcija podnožja je potpuno beskorisna posjetiteljima naše stranice, osim toga, link “Nazad na vrh” je apsolutno nepotreban u našem slučaju, već smo napravili prekrasno dugme za ove svrhe.

Stoga, za početak, predlažem da se riješite standardnog sadržaja podnožja. Otvorite datoteku index.php standardni Protostar šablon i potražite kod koji je odgovoran za prikaz podnožja. Kôd između redova 205 i 219 odgovoran je za prikaz podnožja, koje izgleda ovako (ovisno o verziji Joomle i promjenama u indeksnoj datoteci, redovi koda se mogu razlikovati):

Sada ćemo ukloniti dodatni kod iz redova 210 do 217, kao rezultat toga, kod za podnožje će biti ovakav:

U suštini, uklonili smo sve što je bilo moguće, ostavljajući samo mogućnost prikaza modula u podnožju je zaslužna za ovo:

Spremamo indeksnu datoteku, idemo na stranicu i osvježavamo stranicu. Sadržaj podnožja je nestao, što smo i željeli. Sada možete dodati nove informacije u podnožje po svom nahođenju, ali prije nego što ih dodate, vrijedi odgovoriti na pitanje - šta može biti u podnožju stranice?

Koje informacije prikazati u podnožju stranice

Da bi podnožje bilo efektivno, ono mora sadržavati informacije koje mogu biti od interesa za posjetitelje stranice. Ovisno o fokusu stranice, ove informacije mogu varirati. Evo malog primjera istih informacija koje mogu biti sadržane u podnožju:

• Dodatni meni- ovaj meni može duplirati postojeći ili biti jedinstven. Umnožavanje menija u podnožju je korisno kada se vaša stranica često posjećuje s mobilnih uređaja, a posjetitelj, skrolujući do samog dna stranice, može iskoristiti dodatnu navigaciju po stranici;
• Kontakt informacije- za prodajne sajtove, odnosno za sajtove koji pružaju različite usluge, prisustvo kontakt informacija je jednostavno neophodno, a podnožje je mesto za to.
• Dugmad društvenih medija- u modernom svijetu društvene mreže su za mnoge sve, pa takve informacije nikada neće biti suvišne.
• Razni linkovi- na primjer, linkovi na mapu stranice, vijesti itd.
• Widgeti- možete prikazati u podnožju informacije koje odražavaju aktivnost na stranici, brojače prometa, nedavne komentare itd.
• Oglašavanje- dođe trenutak kada želite da od sajta dobijete ne samo njegovo prisustvo, već i profit, u ovom slučaju podnožje možda nije loš kontejner za oglašavanje.

Ne pokušavajte da ugurate sve gore navedeno u podnožje vaše stranice, previše informacija, poput njihovog odsustva, također neće dovesti do ničega dobrog.

S druge strane, nije bitno koje informacije će biti sadržane u podnožju vaše stranice, najvažnije je da se uklapaju u cjelokupni dizajn i da su lijepo dizajnirane.

Kreiranje podnožja stranice

Sada odbacimo teoriju i nastavimo direktno sa kreiranjem podnožja. Postoji nekoliko načina za formiranje podnožja:

• Auto- uključuje korištenje različitih modula za prikaz određenih informacija
• Manual- moduli se ne koriste, sve promjene se vrše ručno pomoću alata za uređivanje predloških datoteka
• Miješano- u ovom slučaju, obje gore navedene opcije se koriste zajedno

Svaka od metoda je dobra na svoj način, na primjer, u početnoj fazi korištenje modula će uvelike pojednostaviti zadatak, a metoda kada se moduli ne koriste ubrzat će učitavanje stranice. U svakom slučaju, izbor je na vama.

Kako bih razmotrio sve moguće opcije, odlučit ću se za treću opciju. Na ovaj način ćete imati opštu predstavu o tome šta se i kako uređuje.

Kao primjer, odlučio sam podijeliti podnožje na tri vertikalna dijela, linkovi ka određenim stranicama stranice će biti prikazani lijevo, neka vrsta logotipa će biti u sredini, a mali tekst će biti prikazan na desnoj strani. Moduli će biti zaduženi za prikaz lijevog i desnog dijela podnožja, a logo ćemo upisati ručno u index fajl.

Prvo, napravimo nove pozicije za module u podnožju (o tome smo pričali u lekciji o postavljanju i uređivanju šablona) u količini od dva komada. Budući da će se nalaziti na lijevoj i desnoj strani podnožja, imaju odgovarajući naziv - podnožje-lijevo I podnožje-desno. Mi ih deklariramo u fajlu templateDetails.xml.

Sada unosimo promjene u datoteku indeksa šablona, ​​moj kod je ispao ovako:

I radi jasnoće, snimak ekrana:

Jasno je kako su moduli prikazani, ali bih se želio detaljnije zadržati na logotipu. Kod odgovoran za prikazivanje logotipa je:

baseurl. "templates/". $this->template . "/images/joom4all.png"?>" />

Na prvi pogled izgleda kao obična HTML oznaka za sliku, ali umjesto uobičajene putanje lokacije datoteke, napisan je PHP kod. Ovaj kod se na prvi pogled može činiti kompliciranim i nerazumljivim, ali zapravo, ako ga pogledate, postaje jasno da u njemu nema ništa komplicirano:

• - početak php koda
• echo- odgovoran za izlaz niza
• $this->baseurl- ova linija vraća naziv stranice
• šabloni/- ovdje označavamo da je slika pohranjena u folderu šablona
• $this->template- vraća naziv trenutnog šablona
• /images/joom4all.png- putanja do slike unutar osnovnog foldera šablona i naziv datoteke sa slikom
• ?> - kraj php koda

Kao rezultat upotrebe ovog php koda, dobijamo relativnu putanju do datoteke slike. Drugim riječima, bez obzira na naziv stranice ili koji se šablon koristi, slika će biti preuzeta iz mape slika odabranog šablona.

Sačuvamo fajl index.php, sada ga možemo zatvoriti, više nam neće trebati.

Sada kreirajmo nekoliko modula koje ćemo prikazati na novostvorenim novim pozicijama. Prvi modul će prikazati meni u podnožju, a drugi će prikazati mali tekst.

U sljedećoj fazi kreiramo module - za meni tipa "Meni" i za tekst tipa "HTML kod" (kako kreirati modul). Novostvorene pozicije modula biramo kao pozicije za njih:

Da bismo razlikovali naš meni podnožja od ostatka menija na sajtu, u postavkama modula menija dodajemo mu sufiks klase “_footer”:

Da ne bih objašnjavao kakav je modul sa tipom "HTML koda", na snimku ekrana ću pokazati princip njegovog rada:

Ovaj modul sam popunio određenim tekstom koji će biti prikazan u podnožju, pored redovnog teksta napisao sam mali php kod koji prikazuje tekuću godinu:

Spremamo module i idemo na stranicu da provjerimo rezultat i evo šta sam dobio:

Iako je rezultat tu, nije baš impresivan. Sada moramo adekvatnije stilizirati elemente podnožja koristeći CSS.

Prvo, napravimo nove blokove podnožja:

Stopa-lijevo, .foot-center(float: lijevo;) /*poravnanje bloka podnožja*/ .foot-left (širina: 20%;) /*širina lijevog bloka*/ .foot-center (margina-left: -6px ;) /*uvlaka središnjeg bloka*/ .foot-right ( /*desni blok*/ float: nema; visina: 60px; )

Sledeći kandidat za stilizovanje je meni na koji sam primenio sledeće stilove:

Ul.nav.menu_footer (margina: 0;) /*nula margina za meni*/ ul.nav.menu_footer li ( /*dizajn teksta menija*/ font-family: "Jastog", cursive; font-size: 16px ; line -height: 18px ) ul.nav.menu_footer li.item-179 a ( /*Sitemap stavka*/ margin-left: 15px; color: #fc8f30; ) ul.nav.menu_footer li.item-180 a; ( /*Stavka menija O sajtu*/ boja: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Stavka menija Kontakti*/ margin-left: 45px; border- bottom: 3px puna #0f70ad boja: #0f70ad;

I na kraju, odvajamo podnožje od glavnog dijela sadržaja:

Footer.footer hr (border-top: 3px solid #fc8f30;) /*odvojite podnožje od glavnog sadržaja*/

Sačuvajte datoteku stila, idite na stranicu i pogledajte rezultat:

Tako smo kreirali podnožje za našu stranicu koje izgleda mnogo zabavnije od standardnog. Ovim je ova lekcija završena, au sljedećoj lekciji ćemo provjeriti moguće greške u adaptivnom dizajnu i ispraviti neke nedostatke. Osim toga, savjetujem vam da pročitate članak o tome kako brzo kreirati Joomla 3 predložak, a posebno podnožje od nule koristeći Bootstrap.

Ovo je neka noćna mora! Zašto se podnožje vaše stranice ponovo "iskače" i mijenja dizajn? Zar je zaista nemoguće nečim pravilno pritisnuti podnožje na dno stranice? Sadržaj ili bar cigle! Brick neće stati u monitor?

Vidim, onda sjedite i ne radite ništa dok ne pročitate naš članak do kraja.

Izrada pravog podnožja za Vašu web stranicu

Mnogi vlasnici web stranica nailaze na ovaj problem kada podnožje stranice jednostavno lebdi na vrh. I onda nije jasno šta da se radi. Najčešće, dizajni web stranica koji su sastavljeni na brzinu, sami, pate od ovog nedostatka ( zaokruži "lude ruke") ili webmasteri početnici.

U isto vrijeme, ništa strašno se ne događa u prvim fazama života stranice. I ova idila traje sve dok sadržaj stavlja „svoju težinu“ na podrum, sprečavajući ga da se podigne. Ali vrijedi staviti manje količine materijala na stranicu, a nedavno „smireno“ podnožje odmah se podiže na vrh, dovodeći cijeli dizajn stranice u neprikladan izgled.

Da biste otklonili ovaj „defekt“ dizajniranog predloška, ​​nije potrebno trošiti novac na usluge webmastera. Najčešće, podnožje stranice možete sami postaviti. Razmotrimo sve moguće opcije za otklanjanje ovog problema:

Prvi način

Prvi način da se "povezuje" podnožje "sa dnom" stranice je baziran na CSS-u. Prvo, dajmo primjer koda, a zatim pobliže pogledajmo njegovu implementaciju:

html (visina: 100%; ) zaglavlje, navigacija, odjeljak, članak, sa strane, podnožje (prikaz: blok; ) tijelo (visina: 100%; ) #wrapper (širina: 1000px; margina: 0 auto; min-visina: 100 % visina: auto !important height: 100% ) #header (visina: 150px; background-color: rgb(0,255,255); ) #content (padding: 100px; height: rgb(51,255,102); ) #podnožje (širina: 1000px; margina: -100px auto 0; visina: 100px; pozicija: relativna; boja pozadine: rgb(51,51,204); )

Da priložite oznaku podnožja na dno stranice