Oznake i atributi za podnožje u html-u. Kako pravilno pritisnuti plutajuće podnožje na dno stranice. Plutajuća kolica – povećanje dostupnosti prodajne funkcionalnosti

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 konkurentskom okruženju e-trgovine ima dovoljno originalnih ideja, kreativnosti i dizajnerskih trendova. 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 također: 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. Sve praktičnije korisna informacija, posjetitelji se najduže zadržavaju u području 1200 px od vrha stranice (s prosječno 700 px vertikalnog zaslona u pregledniku), ili iza drugog zaslona.

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 su dizajnirane s manje uočljivim tekstom, što oslobađa druga područja stranica za smislenije elemente. Evo primjera popisa koji treba razmotriti:

• 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. Linkovi na pravne informacije istaknuti 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, već sam sadržaj služi kao razdjelnik

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 popraćeni su zanimljivim pričama... 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 sljedeće: sve dok su sve potrebne informacije prisutne, čitljive i brzo percipirane - 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 nešto duže nego na ostalim 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 prodajne kvalitete 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 je bitan 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 stranice e-trgovine stavljaju pojedinačne kategorije proizvoda u 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 o izgledu web stranice (), raspravljalo se o nekim osnovnim konceptima webmasteringa, bez razumijevanja kojih 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 podnožje pritisnuti 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 velikog korisničkog zaslona bit će sljedeće:

Da bismo to implementirali, moramo izvršiti niz manipulacija s 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:

I sljedeća CSS svojstva zapisana su u datoteci Style.css:

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 raspored je izgledao otprilike ovako:

Kao što vidite, podnožje nije pritisnuto na dno i stoga ne ispunjava 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, ai za gumeni raspored također. Metoda je univerzalna.

Kako gurnuti podnožje na dno izgleda 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:

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 (ovo 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 razmaknicu i borimo se s Internet Explorerom

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 odstojnici) u glavni spremnik našeg izgleda (maket), 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 s tri stupca izgledati ovako:

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 (pristojno 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 horizontalno poravnanje se može napraviti na isti način kao što smo to učinili za cijeli izgled na blok rasporedu.

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 dvaju svojstava 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 iz 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 visine zaslon.

Stoga ćemo za rješavanje ovog problema morati upotrijebiti tzv. hack koji nam omogućuje da objasnimo (na prstima) starijim preglednicima što da rade. Prije lista CSS 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 zaslona 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;

Pa, konačni oblik Index.html je dan 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 “Rad s Html div oznakom”:

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

Ovo je neka vrsta noćne more! Zašto podnožje vaše stranice ponovno "iskače" i mijenja dizajn? Je li doista nemoguće nečim pravilno pritisnuti podnožje na dno stranice? Barem sadržaj ili cigle! Brick ne stane 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 susreću se s ovim problemom kada podnožje stranice jednostavno ispliva na vrh. I onda nije jasno što učiniti. Najčešće, dizajni web stranica koji su napravljeni na brzinu, sami, pate od ovog nedostatka ( krug "lude ruke") ili webmastere početnike.

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

Da biste uklonili ovaj "defekt" dizajniranog predloška, ​​nije potrebno trošiti novac na usluge webmastera. Najčešće, podnožje web stranice možete sami postaviti. Razmotrimo sve moguće opcije Da biste riješili ovaj problem:

Prvi način

Prvi način za “povezivanje” podnožja “na dno” stranice temelji se na CSS-u. Počnimo s primjerom koda, a zatim pobliže pogledajmo njegovu implementaciju:

html (visina: 100%;) zaglavlje, navigacija, odjeljak, članak, strana, podnožje (prikaz: blok;) tijelo (visina: 100%;) #omot (širina: 1000px; margina: 0 automatski; min. visina: 100 %; visina: auto !important; visina: 100%; ) #zaglavlje (visina: 150px; boja pozadine: rgb(0,255,255); ) #sadržaj (padding: 100px; visina:400px; boja pozadine: rgb(51,255,102) ; ) #footer (širina: 1000px; margina: -100px auto 0; visina: 100px; pozicija: relativna; boja pozadine: rgb(51,51,204); )

Za pričvršćivanje oznake podnožja na dno stranice