Tipy päty. Všetko, čo potrebujete vedieť o dizajne päty vstupnej stránky
Dobrý deň, milí čitatelia blogu. Pokračujeme v téme blokového usporiadania, ktorá bola začatá a pokračovala v troch predchádzajúcich článkoch. V zásade sa nám už podarilo vytvoriť dvoj- aj trojstĺpcové usporiadanie stránok a dokonca sa nám podarilo zvážiť nuansy vytvorenia plynulého usporiadania.
Okrem toho sa v prvých článkoch o rozložení webových stránok () diskutovalo o niektorých základných konceptoch webmasteringu, bez pochopenia ktorých by bolo dosť ťažké pochopiť nuansy.
Aké problémy sme mali s rozložením našej webovej stránky?
Dnes sa pokúsime vyriešiť jeden malý problém, ktorý môže nastať s rozložením, ktoré sme vytvorili predtým. Najčastejšie táto situácia nastáva pri jej prezeraní na veľkých monitoroch (s vysokým rozlíšením) a pri zobrazení stránky s malým množstvom informácií.
V tomto prípade sa môže ukázať, že päta nebude stlačená na spodok obrazovky, ale bude umiestnená takmer v jej strednej výške, čo vo väčšine prípadov bude vyzerať škaredo a nie esteticky.
Napriek tomu je podľa môjho názoru potrebné stlačiť pätu až na koniec rozloženia stránky, a to platí najmä v prípade, keď je výška stránky menšia ako výška obrazovky používateľa. Schematicky to možno znázorniť takto:
Tie. Správne správanie päty v prípade malého množstva informácií na stránke a veľkej používateľskej obrazovky bude nasledovné:
Aby sme to mohli implementovať, musíme vykonať množstvo manipulácií s kódom nášho rozloženia. Okrem toho urobíme zmeny nielen v súbore CSS štýlu Style.css, ale aj v Index.html, ktorý obsahuje Html kód a tvorí bloky Div. Ale prvé veci.
Ako príklad použijeme rozloženie webových stránok s tromi stĺpcami, ktoré sme vytvorili predtým. V tomto prípade bude Index.html vyzerať takto:
A v súbore Style.css boli napísané nasledujúce vlastnosti 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 (farba pozadia:#FFC0FF; jasná: obe; )
Samotné rozloženie vyzeralo asi takto:
Ako vidíte, päta nie je stlačená dole, a preto nespĺňa naše požiadavky (vždy sa nachádza pod najnižším stĺpcom), takže budeme musieť vykonať úpravy v kóde. To isté možno urobiť pre rozloženie s dvoma stĺpcami a tiež pre rozloženie gumy. Metóda je univerzálna.
Ako posunúť pätu do spodnej časti rozloženia webovej stránky
Musíme teda presunúť kontajner Div s pätou do spodnej časti obrazovky. Na to budete musieť najskôr nastaviť výšku celej stránky na sto percent (zaberie celú obrazovku). Bude to potrebné, aby sa potom zmenila veľkosť hlavného bloku s rozložením na 100%.
Celý obsah stránky je umiestnený v otváracej a zatváracej značke Body, a preto musíme pridať ďalšiu vlastnosť CSS pre značku Body v Style.css s nastavením výšky na 100%:
Text, html ( margin:0px; padding:0px; height: 100%; )
Vzhľad to zatiaľ nijako neovplyvní, no teraz je možné hlavný blog roztiahnuť na celú výšku obrazovky. Tie. bola to akási prípravná etapa.
Základné vlastnosti CSS, ak chcete, si môžete pozrieť. Teraz nastavme kontajner Div, ktorý obsahuje celé naše rozloženie, na minimálnu výšku 100 %:
Chcem to tiež zvýrazniť (div s id="maket"). Aby som to urobil, dám mu rámec pomocou zodpovedajúcej vlastnosti Border():
Vlastnosť Border: solid 3px black umožňuje pre tento kontajner nastaviť plný okraj (plný) s hrúbkou 3 pixely v čiernej farbe. To vám umožní jasne vidieť, že kontajner s rozložením sa roztiahol na celú výšku obrazovky, a to aj pri malom množstve informácií na stránke:
Teraz budeme musieť vybrať blok päty zo všeobecného kontajnera a umiestniť ho nižšie, hneď za všeobecný. Čo to dá? A skutočnosť, že nakoniec sa päta v rozložení rozhodne ísť dole a nebude, ako predtým, pritlačená k svojmu najdlhšiemu stĺpcu. V tomto prípade bude Index.html vyzerať takto:
Upozorňujeme, že blok s pätou sa už nenachádza vo vnútri všeobecného kontajnera (maket), a preto jeho šírka už nie je regulovaná CSS vlastnosťami špecifikovanými pre maket v súbore Style.css. Šírka päty sa roztiahne cez celú obrazovku, ale stále sa bude nachádzať v spodnej časti obrazovky, bezprostredne pod hlavným blokom:
Opäť však nastáva problém, pretože na to, aby ste videli pätu, musíte teraz posúvať obrazovku v prehliadači (pozri posúvač na obrázku vyššie).
Stáva sa to preto, že hlavný kontajner (maket) zaberá celú výšku obrazovky (určuje to vlastnosť min-height: 100 %) a päta sa nachádza hneď za ním a na jeho zobrazenie budete musieť rolovať, čo nie je veľmi pohodlné a funkčné.
Tento problém môžete vyriešiť nastavením zápornej výplne pre kontajner Div s pätou tak, aby sa posunul nahor o vzdialenosť rovnajúcu sa jeho výške. V tomto prípade bude kontajner päty prekrývať hlavný kontajner a zapadne do výšky obrazovky prehliadača (t. j. na zobrazenie ho nebudete musieť posúvať).
Aby ste však mohli nastaviť záporný posun zhora, musíte poznať práve túto výšku päty, ale zatiaľ ju nepoznáme.
Preto najprv nastavíme výšku kontajnera obsahujúceho pätu nastavením zodpovedajúcej vlastnosti v Style.css:
#footer( background-color:#FFC0FF; clear:both; height: 50px; )
A potom pre ňu nastavíme zápornú rezervu v hornej časti na výšku rovnajúcu sa jej výške:
To umožní, aby sa päta zdvihla presne do svojej výšky, a tak sa zmestila na obrazovku prehliadača (teraz môžeme odstrániť ohraničenie vlastnosti CSS: plné 3px čierne z pravidla maket, aby hrúbka okraja nebránila celému nášmu rozloženie vrátane päty od zapadnutia do výšky obrazovky):
Ako vidíte, posúvacia lišta sa teraz v prehliadači nezobrazuje a celé naše trojstĺpcové rozloženie stránky založené na blokoch sa zmestí na jednu obrazovku (v prípade, že je na stránke málo informácií) a má pätu umiestnenú úplne dole . Čo je presne to, čo sme potrebovali urobiť.
Vložíme medzerník a bojujeme s Internet Explorerom
ale vzniká problém, ktorý sa zobrazí len vtedy, keď je na stránke rozloženia viac informácií a môže nastať nasledujúca situácia:
Ukazuje sa, že môže nastať situácia, keď informácie v jednom zo stĺpcov rozloženia prekryjú pätu, čo nebude vyzerať pekne. Stáva sa to kvôli notoricky známej negatívnej výplni, ktorú sme na to nastavili a ktorá pomohla zdvihnúť náš suterén oproti hlavnému kontajneru usporiadania.
Tie. Ukazuje sa, že v spodnej časti obrazovky sú dva bloky, ktoré sa navzájom prekrývajú v suteréne.
Riešením tohto problému je pridanie nového prázdneho kontajnera Div (tzv rozpery) do hlavného kontajnera nášho rozloženia (maketu), na miesto, kde sa predtým nachádzal blok s pätou.
Nastavením tohto nového kontajnera na výšku rovnajúcu sa výške päty môžeme zabrániť tomu, aby informácie z hlavného kontajnera kolidovali s blokom s pätou. Priraďme ID () tomuto kontajneru s názvom Rašporka a výsledkom bude Index.html nášho trojstĺpcového rozloženia:
A v Style.css to napíšeme ( , čím sa výška tohto rozperného kontajnera nastaví na výšku suterénu:
#rasporka ( výška: 50px; )
Výsledkom je, že päta nebude stlačená zospodu k informáciám obsiahnutým v hlavnom kontajneri (napríklad text v najvyššom stĺpci), ale do oblasti rovnajúcej sa výške päty s oddeľovacím kontajnerom, ktorý neobsahuje žiadne informácie. .
Týmto spôsobom sa vyhneme kolíziám a deformáciám v našom rozložení v troch stĺpcoch. Všetko bude jasné a krásne (jemné a vznešené):
Ako som spomenul vyššie, šírka päty sa teraz musí nastavovať samostatne, pretože... tento kontajner už nie je súčasťou hlavného. Ak to chcete urobiť, musíte do súboru CSS pridať ďalšie vlastnosti pre pätu, čo vám umožní nastaviť jej šírku a zarovnať ju vodorovne v strede obrazovky.
Má zmysel nastaviť šírku rovnajúcu sa šírke celého rozloženia pomocou vlastnosti Width a horizontálne zarovnanie je možné vykonať rovnakým spôsobom, ako sme to urobili pre celé rozloženie na blokovom rozložení.
Preto budeme musieť pridať ďalšie vlastnosti pre pätu ID:
#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )
Pomocou vlastnosti width:800px sa šírka nastaví na 800 pixelov a pomocou dvoch vlastností margin-left: auto a margin-right: auto sa automaticky nastaví odsadenie vľavo a vpravo od päty v dôsledku ktoré budú tieto zarážky rovnaké a náš hrdina bude zarovnaný na stred:
No, zdá sa, že už nie je čo zlepšovať, ale nebolo to tak. Náš obľúbený prehliadač Internet Explorer 6 ako vždy nerozumie niečomu z vlastností CSS, ktoré používame. V tomto prehliadači (a možno aj v niektorých iných starých prehliadačoch) napriek všetkému úsiliu nebude päta stlačená nadol, ale bude sa stále držať v najvyššom stĺpci rozloženia stránky.
Toto všetko sa deje preto, že ( nerozumie vlastnosti min-height: 100%, ktorú sme použili na nastavenie minimálnej výšky hlavného bloku rovnajúcej sa výške obrazovky.
Preto na vyriešenie tohto problému budeme musieť použiť takzvaný hack, ktorý nám umožní vysvetliť (na prstoch) starším prehliadačom, čo robiť. Pred zoznam vlastností CSS pre maket budete musieť vložiť nasledujúcu kombináciu:
* html #maket (výška: 100 %; )
Toto pravidlo bude aplikované iba na prehliadač Internet Explorer 6, ostatné ho nebudú brať do úvahy a implementovať ho.
Takže konečný vzhľad Style.css s pätou stlačenou na spodok obrazovky bude takýto:
Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket (výška: 100%; ) #maket (šírka:800px; margin:0 auto; min-height: 100%; ) # 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( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; ) #rasporka ( height: 50px; )
Finálna podoba Index.html bola uvedená tesne vyššie. To je všetko, túto sériu článkov venovanú blokovému usporiadaniu 2 a 3 stĺpcových pevných a plynulých rozložení webových stránok možno považovať za kompletnú.
Môžete si tiež pozrieť video „Práca so značkou div HTML“:
Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu
Mohlo by vás zaujímať
Blokové rozloženie – Pre stránku vytvárame dvojstĺpcové, trojstĺpcové a plynulé rozloženie 
DiV layout – Vytvorte bloky pre dvojstĺpcový layout v HTML, určte ich veľkosti a nastavte umiestnenie v CSS
Dobrý deň, milí priatelia a hostia blogu! Dnes budeme hovoriť o vytvorení webovej stránky, alebo skôr o jednej z jej komponentov - Päta stránky, podľa vedeckého Footer HTML alebo jednoducho päta. Napriek tomu, že ide o najmenej viditeľnú časť stránky a málokto sa jej venuje, na prvý pohľad to tak vyzerá a veľa ľudí si to myslí. A z tohto dôvodu mnohí často zanedbávajú návrh päty stránky, ktorý je zásadne nesprávny a nesprávny!
Keďže päta stránky je rovnako dôležitou súčasťou ako hlavička a telo, alebo správnejšie hlavička a telo. Dnes sa teda pustíme do navrhovania päty našich stránok, ako sa na dobrého tvorcu stránok patrí, a pokúsim sa vám s tým pomôcť!
Začnime teda od úplného začiatku...
Čo je päta webovej stránky alebo HTML päty?
Päta stránky je jej najnižšia časť, kde správca webu zvyčajne umiestňuje odkazy na prechod na hlavnú stránku, môže tam byť aj menu celej stránky, navigácia na stránke, o autorovi, o projekte, o stránke, kontakt informácie, prechody na stránky s často kladenými otázkami otázky, odkazy na sociálne siete a ich tlačidlá, informátorov a počítadiel a podobne sú umiestnené v päte stránky. Všetky informácie, ktoré môže vymyslieť samotný webmaster!
A každý, kto si myslí, že do suterénu stránky prichádza málo návštevníkov, sa mýli, úplne sa mýli!
A na základe toho treba päte stránky venovať nemenej pozornosť ako jej na prvý pohľad viditeľnejším častiam, akými sú telo a hlavička stránky. Aj keď sa opakujem, myslím, že to nie je márne. Toto je môj spôsob, ako sa vám pokúsiť vysvetliť význam a dôležitosť správneho dizajnu päty stránky!
Ako správne navrhnúť pätu webu?
Nie je na tom nič zložité! Teraz vám predstavím niekoľko typov celkom krásnych a reprezentatívnych suterénov pre vaše webové stránky. A môžete si z nich vybrať ten najvhodnejší a na konci tohto článku bude odkaz, kde si stiahnete všetky mnou prezentované päty webstránok a samozrejme ich využijete pri vytváraní svojich nových webov, prípadne nahradíte existujúce tie s mojimi atraktívnejšími pätičkou html.
Toto je prvá päta stránky:
Toto je druhý suterén pre lokalitu:
Toto je tretí suterén pre lokalitu:
Toto je štvrtý suterén pre lokalitu:
Toto je piaty suterén areálu:
Toto je šiesty suterén areálu:
Ako sa vám páči tento kód HTML v päte? Páčil sa vám aspoň jeden z nich? Dúfam, že áno?!
Ak sa vám páčili, potom navrhujem stiahnuť si ich úplne zadarmo hneď teraz a použiť ich na svoje vlastné účely!
Stiahnutý priečinok obsahuje šesť súborov s pätou HTML. A všetko, čo musíte urobiť, je opraviť obsah vašej stránky v textovom editore a je to!
Hovorte o textovom editore! Ja napríklad používam, a to vám radím, len . Pretože je to najpohodlnejšie a najbezpečnejšie!
To je teraz všetko. Ďakujem za tvoju pozornosť!
Začíname piatu lekciu o úprave šablón v CMS Joomla 3, tentokrát si povieme niečo o päte stránky. Pozrime sa na možné možnosti dizajnu päty a niektoré prístupy k jej vytvoreniu.
Čo je päta
Päta alebo päta stránky je jej najnižšia časť, ktorá zvyčajne obsahuje informácie o stránke, autorských právach atď. Štandardná verzia v šablóne Protostar, päta neobsahuje žiadne zmysluplné informácie:
Štandardným obsahom päty je aktuálny rok, názov stránky a odkaz „Späť na začiatok“ vedúci na začiatok stránky. Úprimne povedané, táto možnosť päty je pre návštevníkov našej stránky úplne zbytočná, navyše odkaz „Späť na začiatok“ je v našom prípade absolútne zbytočný, na tieto účely sme už vytvorili krásne tlačidlo.
Preto na začiatok navrhujem zbaviť sa štandardného obsahu päty. Otvorte súbor index.phpštandardnú šablónu Protostar a vyhľadajte kód, ktorý je zodpovedný za zobrazenie päty. Kód medzi riadkami 205 a 219 je zodpovedný za zobrazenie päty, ktorá vyzerá takto (v závislosti od verzie Joomla a zmien vykonaných v indexovom súbore sa riadky kódu môžu líšiť):
Teraz odstránime dodatočný kód z riadkov 210 až 217; v dôsledku toho bude kód pre pätu takýto:
V podstate sme odstránili všetko, čo bolo možné, a ponechali sme iba možnosť zobraziť moduly v päte; tento riadok je zodpovedný za to:
Uložíme indexový súbor, prejdeme na stránku a obnovíme stránku. Obsah päty zmizol, čo sme chceli. Teraz môžete do päty pridať nové informácie podľa vlastného uváženia, ale pred ich pridaním stojí za to odpovedať na otázku - čo môže byť v päte stránky?
Aké informácie sa majú zobraziť v päte lokality
Aby bola päta účinná, musí obsahovať informácie, ktoré môžu návštevníkov stránky zaujímať. V závislosti od zamerania stránky sa tieto informácie môžu líšiť. Tu je malý príklad rovnakých informácií, ktoré môžu byť obsiahnuté v päte:
- Extra menu- táto ponuka môže duplikovať už existujúcu alebo môže byť jedinečná. Duplikovanie ponuky v päte je užitočné, keď je vaša stránka často navštevovaná z mobilných zariadení; návštevník môže po posunutí na úplný koniec stránky využiť ďalšiu navigáciu na stránke.
- Kontaktné informácie- na predaj stránok alebo na stránky, ktoré poskytujú rôzne služby, je prítomnosť kontaktných informácií jednoducho nevyhnutná a päta je na to miesto.
- Tlačidlá sociálnych médií- v modernom svete sú sociálne siete pre mnohých ľudí všetkým, takže takéto informácie nikdy nebudú zbytočné.
- Rôzne odkazy- napríklad odkazy na mapu stránok, informačné kanály atď.
- Miniaplikácie- v päte môžete zobraziť informácie odrážajúce aktivitu na stránke, počítadlá návštevnosti, posledné komentáre atď.
- Reklama- prichádza čas, keď chcete zo stránky získať nielen jej prítomnosť, ale aj zisk, v tomto prípade nemusí byť päta zlým kontajnerom na reklamu.
Nesnažte sa všetko vyššie vtesnať do päty svojho webu; prebytok informácií, ako napríklad ich absencia, tiež nevedie k ničomu dobrému.
Na druhej strane nezáleží na tom, aké informácie budú obsiahnuté v päte vášho webu, hlavná vec je, že zapadá do celkového dizajnu a je krásne navrhnutý.
Vytvorenie päty pre stránku
Teraz zahoďme teóriu a pristúpme priamo k vytvoreniu päty. Existuje niekoľko spôsobov, ako vytvoriť pätu:
- Auto- zahŕňa použitie rôznych modulov na zobrazenie určitých informácií
- Manuálny- moduly sa nepoužívajú, všetky zmeny sa vykonávajú manuálne pomocou nástrojov na úpravu súborov šablón
- Zmiešané- v tomto prípade sa použijú obe vyššie uvedené možnosti súčasne
Každá z metód je dobrá svojím vlastným spôsobom, napríklad v počiatočnej fáze použitie modulov výrazne zjednoduší úlohu a metóda, keď sa moduly nepoužívajú, urýchli načítanie stránky. V každom prípade je výber na vás.
Aby som zvážil všetky možné možnosti, rozhodnem sa pre tretiu možnosť. Týmto spôsobom budete mať všeobecnú predstavu o tom, čo a ako sa upravuje.
Ako príklad som sa rozhodol rozdeliť pätu na tri vertikálne časti, vľavo sa zobrazia odkazy na určité stránky webu, v strede bude nejaké logo a vpravo sa zobrazí malý text. Moduly budú zodpovedné za zobrazenie ľavej a pravej časti päty a logo napíšeme ručne do indexového súboru.
Najprv vytvorte nové pozície pre moduly v päte (o tom sme hovorili v lekcii o nastavení a úprave šablón) v množstve dvoch kusov. Keďže budú umiestnené na ľavej a pravej strane päty, majú zodpovedajúci názov - päta-vľavo A päta-vpravo. Deklarujeme ich v súbore templateDetails.xml.
Teraz vykonáme zmeny v indexovom súbore šablóny, môj kód dopadol takto:
baseurl. "šablóny/". $this->template . "/images/joom4all.png"?>" />A pre prehľadnosť, snímka obrazovky:
Je jasné, ako sú moduly zobrazené, ale rád by som sa podrobnejšie venoval logu. Kód zodpovedný za zobrazenie loga je:
Na prvý pohľad to vyzerá ako obyčajný HTML tag pre obrázok, no namiesto bežnej cesty k súboru je napísaný PHP kód. Tento kód sa na prvý pohľad môže zdať komplikovaný a nezrozumiteľný, ale v skutočnosti, ak sa naň pozriete, je jasné, že v ňom nie je nič zložité:
- - začiatok php kódu
- ozvena- zodpovedný za výstup reťazca
- $this->baseurl- tento riadok vráti názov stránky
- šablóny/- tu označujeme, že obrázok je uložený v priečinku šablón
- $this->template- vráti názov aktuálnej šablóny
- /images/joom4all.png- cesta k obrázku v koreňovom priečinku šablóny a názov súboru s obrázkom
- ?> - koniec php kódu
V dôsledku použitia tohto php kódu získame relatívnu cestu k súboru obrázka. Inými slovami, bez ohľadu na to, aký názov má stránka alebo aká šablóna sa používa, obrázok sa prevezme z priečinka obrázkov vybranej šablóny.
Súbor index.php uložíme, teraz ho môžeme zavrieť, už ho nebudeme potrebovať.
Teraz si vytvoríme niekoľko modulov, ktoré zobrazíme na novovytvorených nových pozíciách. Prvý modul zobrazí ponuku v päte a druhý zobrazí malý text.
V ďalšej fáze vytvárame moduly - pre menu s typom „Menu“ a pre text s typom „HTML code“ (ako vytvoriť modul). Ako pozície pre ne vyberieme novovytvorené pozície modulov:
Aby sme odlíšili našu ponuku päty od zvyšku ponuky na stránke, v nastaveniach modulu ponuky k nej pridáme príponu triedy „_footer“:
Aby som nevysvetľoval, o aký druh modulu s typom „HTML kód“ ide, ukážem princíp jeho fungovania na snímke obrazovky:
Tento modul som naplnil určitým textom, ktorý sa zobrazí v päte, okrem bežného textu som napísal malý php kód, ktorý zobrazuje aktuálny rok:
Uložíme moduly a prejdeme na stránku, aby sme skontrolovali výsledok a toto je to, čo som dostal:
Hoci výsledok existuje, nie je veľmi pôsobivý. Teraz musíme primeranejšie štýlovať prvky päty pomocou CSS.
Najprv vytvorte nové bloky päty:
Foot-left, .foot-center(float: left;) /*zarovnanie bloku päty*/ .foot-left (šírka: 20%;) /*šírka ľavého bloku*/ .foot-center (margin-left: -6px ;) /*odsadenie centrálneho bloku*/ .foot-right ( /*right block*/ float: none; height: 60px; )
Ďalším kandidátom na styling je menu, na ktoré som aplikoval nasledujúce štýly:
Ul.nav.menu_footer (margin: 0;) /*nulové okraje pre menu*/ ul.nav.menu_footer li ( /*dizajn textu menu*/ font-family: "Lobster", kurzíva; font-size: 16px ; line -height: 18px; ) ul.nav.menu_footer li.item-179 a ( /*Položka ponuky Sitemap*/ ľavý okraj: 15px; farba: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /*Položka ponuky O stránke*/ farba: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Položka ponuky Kontakty*/ margin-left: 45px; okraj- dole: 3px plné #0f70ad; farba: #0f70ad; )
A nakoniec oddeľujeme pätu od hlavnej časti obsahu:
Footer.footer hr (border-top: 3px solid #fc8f30;) /*oddeliť pätu od hlavného obsahu*/
Uložte súbor štýlu, prejdite na stránku a pozrite sa na výsledok:
Preto sme vytvorili pätu našej stránky, ktorá vyzerá oveľa zábavnejšie ako tá štandardná. Týmto končíme túto lekciu a v ďalšej lekcii skontrolujeme možné chyby v adaptívnom dizajne a opravíme niektoré nedostatky. Okrem toho vám odporúčam prečítať si článok o tom, ako rýchlo vytvoriť šablónu Joomla 3 a najmä pätu od začiatku pomocou Bootstrapu.
Miera konverzie je ovplyvnená mnohými faktormi, vrátane použiteľnosti a vizuálneho dizajnu. Päta stránky (päta alebo „päta“), napriek tomu, že sa nachádza v spodnej časti stránky a je takmer vždy neviditeľná na prvej obrazovke, je tiež veľmi dôležitá.
Pri vytváraní internetového obchodu mu musíte venovať menej pozornosti ako iným prvkom a urobiť ho čo najzmysluplnejším.
Dekor
Päta by mala byť navrhnutá v rovnakom štýle ako celý web internetového obchodu. Navyše, aj keď je celý internetový obchod navrhnutý v minimalistickom štýle, môžete do päty pridať krásne obrázky alebo animáciu, pretože to nebude odvádzať pozornosť. Môžete ho navrhnúť originálnym spôsobom, aby u návštevníkov vyvolal pozitívne emócie.
Navigácia na stránke
Alternatívnu navigáciu na stránke môžete umiestniť do päty. To je obzvlášť výhodné na stránkach s dlhými stránkami. Návštevník sa posunie na koniec a bez toho, aby sa vracal, bude môcť prejsť do potrebných sekcií katalógu. Môžete to urobiť podrobnejšie ako v hlavičke internetového obchodu, je tam dosť miesta.
Odkazy na stránky
Päta je skvelá na uverejňovanie užitočných, ale nie príliš dôležitých informácií. Ak napríklad horná ponuka obsahuje odkazy na katalóg alebo kategórie internetového obchodu, môžete do päty pridať odkazy na blog alebo užitočné články.
Kontaktné informácie
Najčastejšie sa do päty pridávajú kontaktné údaje, odkazy na stránky na sociálnych sieťach a niekedy aj mapa s vyznačením polohy internetového obchodu (alebo odberného miesta). Takéto informácie zvyšujú dôveru návštevníkov.
Do päty stránky môžete pridať aj informácie zamerané na pomoc kupujúcemu. Ak prejde na koniec stránky a nenájde to, čo hľadal, s najväčšou pravdepodobnosťou stránku zavrie. V tomto prípade môžete do päty pridať tlačidlo „vyhľadávanie na stránke“ alebo tlačidlo „Požiadať o hovor“.
Do päty stránky by ste nemali pridávať zbytočné informácie - napríklad je lepšie ponechať podrobnosti o spoločnosti (TIN, OGRN atď.) na stránkach „O spoločnosti“ alebo „Kontakty“.
Majitelia webových stránok často nevenujú pozornosť päte, pretože si myslia, že neposkytuje hodnotu: je umiestnená úplne dole, a preto nie je pre používateľov zaujímavá. Ale to nie je pravda. Správne navrhnutý suterén s premysleným dizajnom, kompetentnou štruktúrou a potrebným obsahom pritiahne pozornosť používateľa, udrží ho na stránke a bude ho koordinovať pri ďalších krokoch. Preto je účinnosť dobre postaveného suterénu nepopierateľná.
V tomto článku vám to podrobne vysvetlíme čo to je - päta webovej stránky, aký je jeho význam a aké by to malo byť pracovať pre vašu firmu.
Čo je to päta, aká je dôležitá a prečo?
Päta (päta, päta) webovej stránky je úplne spodná časť stránky, kde sa zobrazujú užitočné, ale nie primárne informácie. Môžu to byť úplne akékoľvek informácie, ktoré môžu byť zaujímavé pre cieľovú skupinu, ako aj informácie, ktoré by mali byť na stránke, ale nie je racionálne umiestniť ich do hlavného menu, aby to zostalo kompaktné a logické.
Dobre optimalizovaná päta uľahčí navigáciu na stránke a pomôže dosiahnuť obchodné ciele, pretože je pre používateľa dodatočným zdrojom dôležitých informácií, ak ich na stránke nenašiel.
Hlavné výhody spodnej časti stránky
Päta môže obsahovať absolútne akékoľvek informácie, ktoré môžu byť pre používateľa zaujímavé: od kontaktných informácií po odkazy na stránky s doplnkovými službami spoločnosti. Tieto prvky prinášajú množstvo obchodných výhod.
Sústreďte sa na to, čo je dôležité
Stačí urobiť nejaké kúzlo na dizajne suterénu a stane sa hlavným zameraním na užitočné informácie. Pomocou päty môžete svojmu klientovi povedať viac o spoločnosti a jej aktivitách, ponúknuť mu odoberanie newslettera alebo poskytnúť informácie partnerom pomocou aktívneho odkazu na príslušné stránky. Päta zjednodušuje používateľovi navigáciu, ak potrebuje prejsť do ktorejkoľvek sekcie na stránke. Na to stačí vybrať potrebný odkaz na konci stránky bez posúvania celej stránky nahor. Preto je márne si myslieť, že spodná časť stránky je zbytočná. Svojho užívateľa si určite nájde, zaujme a udrží si ho na stránke.
Zvýšená tvorba potenciálnych zákazníkov
Maximálne užitočné a dôležité informácie
Všetky užitočné informácie, ktoré sa nezmestia do menu alebo nevyhovujú jeho špecifikám, je možné umiestniť do päty. Poskytnite svojmu používateľovi právne informácie, prilákajte sponzorov a partnerov a poskytnite zamestnancom spoločnosti užitočné odkazy. Verte, že takéto informácie sa nedajú prehliadnuť.
Navigácia na stránke
Ak sa používateľ vzdialil od hlavičky (hlavičky stránky) a blíži sa k päte, znamená to, že ešte nenašiel to, čo je pre neho zaujímavé a dôležité. Všetko je teda vo vašich rukách. Umiestnenie navigačných odkazov uľahčí vášmu potenciálnemu klientovi nájsť potrebné informácie a predĺži čas používania stránky.
Maximálne upútanie pozornosti
Päta do poslednej chvíle drží pozornosť návštevníka stránky, drží ju. Je to ako keby posledný akord dáva používateľovi ďalšiu šancu získať cenné informácie. A aby to dobre fungovalo, stačí správne navrhnúť spodnú časť stránky. Ako to urobiť, vám povieme neskôr.
Čo by malo byť v päte stránky?
Obsah a dizajn päty webu spolu úzko súvisia. Dizajn celého bloku závisí od toho, čo bude v tejto časti umiestnené. Prvky obsahu závisia od aktivít spoločnosti a charakteristík cieľového publika. Väčšinu položiek, ktoré je možné umiestniť, uvedieme v spodnej časti stránky. Stačí si vybrať tie, ktoré sú najvhodnejšie pre váš konkrétny prípad na základe vášho podnikania.
Autorské práva
Jednoduchý spôsob, ako ochrániť svoj obsah pred krádežou, je nárokovať si autorské práva. To znamená, že za krádež akéhokoľvek obsahu alebo nápadu/dizajnu stránky môže byť osoba, ktorá to urobila, braná na zodpovednosť. V skutočnosti sú veci, samozrejme, veľmi odlišné, pretože stále môže dôjsť k pokusom ukradnúť váš obsah.
Každý rok musíte aktualizovať číslo vedľa informácií o autorských právach. Dá sa to urobiť dvoma spôsobmi: manuálne alebo automaticky pomocou jednoduchého skriptu v kóde.
Ocenenia a certifikáty
Akékoľvek informácie o certifikátoch, oceneniach a úspechoch sa stávajú silným sociálnym dôkazom, ktorý zvyšuje dôveru používateľov v spoločnosť. Preto, ak má vaša spoločnosť nejaké prednosti, určite sa o nich porozprávajte v suteréne. Ďalšou výhodou je, že keďže sa päta zobrazuje na každej stránke, informácie o vašich oceneniach si určite všimnete. Ak vaša spoločnosť nemá žiadne certifikáty alebo ocenenia, ale ste partnerom Google, Samsung, Asus alebo inej veľkej a prestížnej spoločnosti, určite to uveďte v päte.
Mapa stránok
Päta sitemap je zoznam stránok na vašej lokalite, ktorý pomôže vyhľadávaciemu algoritmu indexovať stránky. Alebo môže byť mapa vo forme adries URL, ktoré vyhľadávací nástroj predtým nezistil pri prehľadávaní stránky.
Päta pomôže indexovať úplne všetky stránky webu pomocou súboru Sitemap, čo je veľmi dobré pre jeho propagáciu.
Zásady ochrany osobných údajov/Podmienky používania
Informácie o zásadách ochrany osobných údajov sú často uvedené v päte stránky. Toto popisuje, ako sa informácie zbierajú, ukladajú a ako sa dajú použiť. Na niektorých stránkach je zverejnenie informácií o zásadách ochrany osobných údajov vyžadované príslušnými zákonmi.
Odkaz na stránku s podmienkami používania sa vyžaduje, ak stránka obsahuje obsah zakázaný maloletým. Napríklad, ak stránka predáva alkohol alebo tabak. Tým, že spotrebiteľ prejde na stránku s podmienkami používania, bude si ich musieť prečítať a potvrdiť, že je plnoletý. To zbavuje vlastníka stránky zodpovednosti, ak má používateľ menej ako 18 rokov.
Forma spätnej väzby
Nepremeškajte príležitosť udržať si klienta tým, že ho pozvete, aby vyplnil formulár spätnej väzby.
Formulár spätnej väzby pomôže zmeniť používateľa na klienta. Pomáha návštevníkom urobiť konečné rozhodnutie o spolupráci, ak si používateľ predtým nebol istý, že je na ňu pripravený. Formulár spätnej väzby môže zároveň obsahovať rôzne výzvy na akciu. Napríklad výzva „Ešte máte nejaké otázky? Opýtajte sa ich na nás“ funguje veľmi dobre. Najmä vtedy, keď používateľ nevedel nájsť odpoveď na svoju otázku. Umiestnenie formulára spätnej väzby do päty je veľkým a odvážnym plusom pre konverziu webových stránok.
Výzvový formulár by samozrejme nemal byť len v päte, ale aj na hlavnej stránke, aby neprehliadol klienta v momente, keď chce vykonať nejakú akciu. Prečítajte si, ako by mala vyzerať hlavná stránka webu.
Kontakty spoločnosti
Firemným kontaktom je spravidla venovaná celá sekcia, na ktorú je odkaz umiestnený v menu. Aby sa ale používateľovi uľahčila navigácia na stránke a nenútili ho posúvať stránku nahor, keď je bližšie ku koncu, mali by byť kontakty umiestnené aj v päte. V tomto prípade by mali byť kontakty umiestnené v mikroznačkách, aby vyhľadávač lepšie porozumel kontaktom spoločnosti.
Okrem kontaktných telefónnych čísel a e-mailu, ktoré sú často umiestnené v hlavičke, môžete uviesť adresu fyzického umiestnenia kancelárie alebo offline obchodu, ako aj uviesť úplnú poštovú adresu, ak si činnosti spoločnosti vyžadujú výmenu listy pomocou štandardnej pošty.
Užitočné odkazy na stránku
Navigačné odkazy na stránky webu pomôžu návštevníkovi nájsť to, čo ho zaujíma, ak to predtým nenašiel v hlavnom menu. Podobné odkazy môžu byť tiež duplikáty na stránky „Doručenie“, „Platba“, „O spoločnosti“ atď.
Teraz je trendom vyvinúť objemnú pätu, ktorá sa stane doplnkovou ponukou, ktorá zahŕňa nielen odkazy, ale aj krátky obsah. Zvyčajne sa tento prístup používa v prípadoch, keď je umiestnenie takéhoto obsahu na stránky nevhodné z dôvodu dôrazu na hlavnú vetu. Napríklad informácie o spoločnosti sa zriedka zverejňujú na stránkach internetového obchodu, pretože sú pre používateľa menej zaujímavé ako produkt, ktorý predáva. V takýchto prípadoch môžete stručne umiestniť informácie o spoločnosti do suterénu. No zároveň je dôležité sledovať jeho objem, aby sa veľký kus textu neopakoval a nevytváral na webe úplné duplicitné stránky vďaka tomu, že päta je na všetkých stránkach rovnaká.
Ikony sociálnych médií
Spodná časť stránky je skvelým miestom na umiestnenie ikon sociálnych médií. Tradične sú umiestnené v tejto časti stránky, aby udržali pozornosť používateľa na webe a neumožnili mu ho rýchlo opustiť. Preto, ak sa používateľ zaujíma o komunity na sociálnych sieťach, zvyčajne sa dostane na koniec stránky, aby do nich vstúpil.
Odkaz na zadanie vášho osobného účtu
Nie všetci návštevníci webu sú klientmi. Stránku môžu navštíviť partneri a zamestnanci. Preto je umiestnenie odkazu na zadanie osobného účtu do päty výborným riešením.
Formulár na odber newslettera
Prihlásenie na odber noviniek nie je vždy hlavnou požiadavkou používateľov stránok. Môže však pôsobiť ako ďalší spôsob, ako si udržať zákazníkov neustálym informovaním o aktuálnych informáciách. V takýchto prípadoch môžete do päty umiestniť predplatné. Buďte si istí, že určite zaujme všetkých používateľov, ktorí sa oň zaujímajú.
Vyhľadávací formulár na stránke
Pri internetových obchodoch a veľkých portáloch je logické umiestniť vyhľadávací formulár v hornej časti stránky na čo najviditeľnejšie miesto. Ale pre niektoré stránky to nie je relevantné.
Tu sa však pripravte na to, že používatelia nie sú zvyknutí hľadať vyhľadávací formulár v päte. Preto musí byť izolovaný a zvýraznený, aby naň upútal pozornosť. Takýto prvok v suteréne však možno na domácich stránkach nájsť len zriedka. Najčastejšie sa nachádza na amerických zdrojoch.
O spoločnosti
Kľúčové otázky
Päta je skvelým miestom na umiestnenie prepojovacích blokov s dopytmi na propagované stránky, aby sa zvýšila relevantnosť stránky pre vyhľadávací nástroj.
Tu by sa ale počet kľúčových výskytov nemal zneužívať – vyhľadávač Google im nezvyšuje efektivitu SEO propagácie. Preto stačí jedno alebo dve kľúčové slová, aby kľúčové slová vyzerali harmonicky s celkovým obsahom.
Najnovšie aktualizácie blogu
Ak blogujete s cieľom pritiahnuť ďalšiu pozornosť na vašu spoločnosť, informácie o aktualizovanom obsahu sa môžu zobraziť v spodnej časti stránky. Ale odporúča sa umiestniť takýto blok do tejto časti stránky iba v prípadoch, keď je blog iba doplnkovým nástrojom a bude zaujímať len malú skupinu vašej cieľovej skupiny.
Rovnakým princípom môžete do takéhoto bloku umiestniť akúkoľvek informáciu. Napríklad odkazy na užitočné články.
Pri navrhovaní päty je veľmi dôležité dať používateľovi možnosť posúvať sa na ňu. Veľmi často mnohé stránky obsahujú vážnu chybu z hľadiska používania – používajú ajax, ktorý neustále načítava obsah pri posúvaní stránky nadol. Výsledkom je, že používateľ jednoducho nedosiahne pätu a stane sa zbytočným. Táto technológia je efektívna, pretože človek nemusí znovu načítavať stránky, aby sa dozvedel viac, ale je potrebné dať mu možnosť samostatne sa rozhodnúť, či chce obsah sledovať ďalej. Preto pri navrhovaní päty a zároveň využívaní Ajaxového načítavania obsahu načítavajte kliknutím, aby sa spotrebiteľ dostal na koniec stránky a našiel informácie, ktoré ho zaujímajú, bez toho, aby sa stránka vracala na začiatok.
Výzva do akcie
Poďme spolupracovať! Napíšte nám! Zanechajte svoje telefónne číslo a my vám zavoláme späť do 5 minút! Jednoduchá, ale chytľavá výzva na akciu v spojení s kontaktným formulárom alebo formulárom bulletinu umiestneným v päte pomôže zvýšiť konverzie webových stránok. Nezabudnite, že hovory by mali byť jasné a jasné, aby používateľ nemusel premýšľať o tom, ako vykonať akciu, ktorá sa mu navrhuje.
Mapa
Pomocou mapy umiestnenej v päte budete môcť zvýšiť dôveru návštevníkov vo vašu spoločnosť. Okrem toho výrazne uľahčíte život používateľom Máp Google, ktorí chcú rýchlo nájsť, kde sa nachádza vaša kancelária.
Umiestnite pracovnú mapu, ktorá bude pre používateľov pohodlná. Nemá zmysel uverejňovať mapu Yandex, ak je stránka zameraná na ukrajinských používateľov, pretože služba je pre Ukrajinu zablokovaná a pri načítaní takejto mapy bude prázdnota. Čo, vidíte, nie je pevné.
Ktoré prvky je najlepšie zvoliť pre pätu závisí od typu vašej aktivity, typu stránky, jej dizajnu, obsahu a cieľového publika. Analýza záujmov vašej cieľovej skupiny a kompetentná štruktúra webovej stránky vám pomôžu odpovedať na túto otázku.
Čo by nemalo byť v päte?
Napriek tomu, že päta stránky nie je hlavným ťažiskovým blokom stránky, ktorému je venovaná všetka pozornosť, nestáva sa to dôvodom na vytvorenie odpadkového koša z päty. Preto sa zbavte nepotrebných, nepotrebných a nehodnotných odkazov, ponechajte tie najužitočnejšie a najdôležitejšie. Ako pochopiť, že odkazy nie sú potrebné? Je to jednoduché: ak sa logicky nehodia k vašej navigácii alebo kategóriám, s najväčšou pravdepodobnosťou sa bez nich zaobídete.
Nepreháňajte SEO päty. Nezabudnite, že vyhľadávač okamžite uvidí black hat SEO a potrestá vás za to.
A nebojte sa voľného priestoru. Nadmerný počet odkazov pokazí dojem zo stránky a sťaží užívateľovi nájsť informácie, ktoré ho zaujímajú, čo vedie k nespokojnosti. A ak váš používateľ nie je spokojný, prejde k vašim konkurentom bez toho, aby o tom premýšľal.
Ako kompetentne navrhnúť pätu webovej stránky? 5 cenných odporúčaní
Dizajn päty webovej stránky a jej štruktúra musia byť premyslené tak, aby zaujali a zaujali online užívateľa. Ako na to – prečítajte si 5 cenných odporúčaní.
Použite kreatívne riešenia
Hlavné pozadie päty by sa malo líšiť od všeobecného pozadia stránky, aby upútalo pozornosť. Zároveň však musí zodpovedať myšlienke dizajnu projektu a musí byť s ním harmonicky kombinované.
Ak chcete efektívne zvýrazniť pätu stránky, môžete použiť jasnejšie farby alebo dokonca použiť tematické obrázky, ktoré zdôraznia smer stránky.
Ak sa rozhodnete pre kreativitu, nezabudnite prepojiť dizajn päty a dizajn webovej stránky pomocou prvkov, ktoré budú vyhotovené v rovnakej farbe. Urobte logický prechod medzi predposledným a posledným blokom, ale nezabudnite na akcenty na päte. Hlavná vec je vybrať tie správne farby, aby ste vyzerali štýlovo. V tomto článku sa dozviete, ako vybrať správne farby pre web.
Uverejnite svoju animáciu
Animačné prvky je vždy zaujímavé sledovať. Okrem toho hrajú na emócie človeka a podvedome ho nútia konať. Aj pri malej a skromnej animácii sa dizajn päty zmení.
Vyberte si čitateľné písma
Vyhnite sa malým písmom, aj keď je informácií priveľa. Je lepšie vylúčiť niektoré odkazy, ktoré už nie sú potrebné. Nenúťte svojho používateľa, aby sa dôkladne pozrel na slová, aby ich prečítal. A nezabudnite zvoliť farby, ktoré kontrastujú s pozadím, aby malé písmená dobre vynikli a boli lepšie čitateľné.
Využite viac priestoru
Čím viac voľného miesta v oblasti päty, tým vyššia je koncentrácia na informácie ktorý je v ňom stanovený. Tematické nadpisy a podnadpisy s logickými blokmi pomôžu zjednodušiť používanie päty a vyhľadávanie informácií v nej.
Tento zákon o webdizajne je relevantný pre celú stránku. Voľný priestor bude veľkým plusom z hľadiska použiteľnosti – pre používateľa je pohodlnejšie vnímať informácie.
Usporiadané, správne a prehľadné umiestnenie užitočných odkazov vám pomôže správne sprostredkovať informácie vášmu klientovi. A klient môže rýchlo nájsť to, čo ho zaujíma, bez toho, aby sa prehrabával v mnohých odkazoch, ktoré sú mu na nič. A nezabudnite na používateľov mobilných zariadení. Nezabudnite optimalizovať pätu tak, aby sa správne zobrazovala na akomkoľvek mobilnom zariadení.
Uverejnite výzvu na akciu
Päta je záverečná struna stránky, ktorej účelom je udržať používateľa na stránke čo najdlhšie. Zadanie výzvy na akciu bude ďalšou šancou na zvýšenie konverzie webových stránok. Návštevníka to na stránke nielen udrží nejaký čas, ale spraví z neho aj klienta. CTA v päte je klasika, ku ktorej sa uchyľujú najpopulárnejšie a najúspešnejšie weby.
Ako sa líši päta internetového obchodu od päty iných typov stránok?
Obsah a objem informácií v päte stránky závisí od aktivít spoločnosti, rozsahu jej služieb, štruktúry menu a potrieb cieľového publika. Preto môžu päty vstupnej stránky alebo stránky s vizitkami obsahovať malé množstvo informácií a odkazov: kontakty, výzvu na akciu a nič viac. Pre internetový obchod to však nestačí.
Hlavné menu internetového obchodu obsahuje odkazy na kategórie a podkategórie za účelom predaja tovaru. Umiestňovať zvyšok informácií o službách spoločnosti do hlavného menu nie je logické. Preto sa umiestňuje do päty. Odporúčame vám pozrieť si príklady návrhov internetových obchodov, aby ste sa naučili, ako správne navrhnúť pätu webu.
Tu je možné zverejňovať konkrétne informácie: informácie pre partnerov a stálych zákazníkov, o doplnkových službách spoločnosti (napríklad informácie o podmienkach úveru, splátkových kalendároch, doručení), odkazy na stránku firemného oddelenia pre riešenie jednotlivých problémov (najmä , finančné problémy, otázky týkajúce sa vrátenia tovaru, riešenia sporov a pod.). Tu môžete pridať odkazy na stránky o:
- Voľné pracovné miesta v spoločnostiach;
- Kontakty na manažérov-konzultantov ohľadom konkrétneho vybavenia predávaného internetovým obchodom;
- Informácie o zľavách pre stálych zákazníkov, vernostný program;
- Informácie o možnostiach platby pre právnické a fyzické osoby;
- Adresy servisných stredísk;
- Informácie o spolupráci pre partnerov a dodávateľov;
- Odkaz na často kladené otázky;
- Informácie o nákupe darčekových certifikátov;
- Informácie o spoločnosti, prevádzková doba offline a online obchodu a mnoho ďalšieho.
Ak to zhrnieme, päta internetového obchodu sa líši iba obsahom a množstvom užitočných odkazov. V opačnom prípade sú požiadavky na štruktúru a dizajn totožné s požiadavkami stanovenými pre päty akéhokoľvek typu stránok. Hlavná vec je, že suterén je pre návštevníka viditeľný a vhodný na jeho použitie.
Ohromujúce príklady dizajnu päty webových stránok
Pozrime sa na príklady pätiek webových stránok rôznych typov aktivít, dizajnov a obsahu. Získajte nápady na vytvorenie atraktívnej a správnej päty pre váš web :-)
Príklad päty stránky č. 1
Príklad päty, ktorý ukazuje, ako minimalizmus v tomto bloku pomáha sústrediť pozornosť na hlavnú vec: logo (značku) spoločnosti a ikony sociálnych sietí. Nie je nič zbytočné, vyzerá to štýlovo a krásne. Kombinácia čiernej a bielej je klasika. A klasika nikdy nevyjde z trendu.
Príklad č.2
Veľké množstvo užitočných odkazov + veľký negatívny priestor robia svoju prácu: poskytujú rozsiahle informácie o službách spoločnosti a pomáhajú používateľovi rýchlo nájsť to, čo ho zaujíma. Päta je rozdelená na dva bloky: dôležité informácie, kde sú nadpisy stĺpcov s odkazmi zvýraznené červenou farbou, a doplnkové informácie. Jednoduché, ale efektívne riešenie, keď potrebujete umiestniť veľké množstvo odkazov na koniec stránky.
Príklad č.3
Päta funguje ako blok s formulárom spätnej väzby. Malá výzva k akcii, úhľadná forma a originálny dizajn priťahujú pozornosť a motivujú k akcii.
Príklad č.4
6 hlavných odkazov na ďalšie informácie, ikony pre vstup do komunít sociálnych sietí – nič nové. V tomto prípade sú však vrcholom päty informácie o spôsoboch platby. Spoločnosť robí veľmi silný krok tým, že vzbudzuje dôveru v klienta a zvyšuje jeho lojalitu k nemu. Logá bankových systémov v päte uľahčujú používanie stránky a uskutočňovanie platieb. Pohodlné spôsoby platby pre klienta sú ďalším plusom pre zvýšenie konverzie webu.
Príklad č.5
V tomto príklade je päta pre klienta konečnou fázou – jeho akciou. Na tento účel boli vyvinuté potrebné marketingové a technické prvky: existuje výzva na akciu, tlačidlo na vyplnenie osobných údajov, ako aj prechodová funkcia na zobrazenie prezentácie spoločnosti. Ako ďalšie informácie sú uvedené aktívne odkazy na sociálne siete a kontaktné údaje spoločnosti, ak je pre klienta výhodnejšie kontaktovať ju samostatne alebo osobne navštíviť kanceláriu.
Príklad č.6
V tomto príklade päty je dôraz kladený na kontakty so spoločnosťou. Ďalším nástrojom na udržanie návštevníkov na stránke je aktívne tlačidlo na stiahnutie briefu. Originálny dizajn a veľa voľného pozadia udržujú a sústreďujú pozornosť na to hlavné.
Príklad č. 7
Príklad typickej päty pre internetový obchod, kde je veľké množstvo odkazov na rôzne stránky webu. Tu môže používateľ nájsť ďalšie informácie o spoločnosti, predajniach a službách. Vďaka správnej štruktúre päty vyzerá veľké množstvo odkazov organicky - je ľahké tu nájsť to, čo potrebujete. Takéto nápady by mal SEO vopred rozpracovať a zahrnúť do zadávacích podmienok na vytvorenie stránky. Deje sa tak preto, aby sme nepremeškali niektoré dôležité informácie tým, že ich poskytneme koncovým spotrebiteľom.
Už viete, ako bude vyzerať päta vášho webu?
Po zvážení všetkých výhod a hodnôt päty webovej stránky ju možno len ťažko nazvať zbytočnou. A hoci tento blok končí stránku a nachádza sa úplne dole, málokedy zostane nepovšimnutý. Preto by mal vývoju päty venovať osobitnú pozornosť každý majiteľ webu. Zamyslite sa nad tým, aké odkazy musíte do tohto bloku umiestniť, akú štruktúru a dizajn je najlepšie zvoliť, aby celá päta vyzerala nielen ergonomicky a štýlovo, ale prinášala aj výhody – udržala na nej návštevníka stránky. Ukázali sme vám veľké množstvo príkladov obľúbených stránok a poskytli niekoľko dôležitých odporúčaní. Jediné, čo musíte urobiť, je zamerať sa na podnikanie a cieľové publikum, vytvoriť si vlastný efektívny základ pre stránku. A ak je váš projekt ešte len vo vývoji, odporúčame prečítať si článok o tom, aká by mala byť efektívna obchodná webová stránka.
