Vytvorme pätu na našom blogu. Všetko, čo potrebujete vedieť o dizajne päty vstupnej stránky Čo robí päta?

Konverzné pomery ovplyvňuje množstvo faktorov – použiteľnosť aj vizuálny dizajn. Päta stránky (päta alebo „päta“), ktorá nie je dôležitá pre tie, ktoré sú umiestnené v spodnej časti stránky a takmer vždy neviditeľné na prvej obrazovke, je veľmi dôležitá.

Pri vytváraní internetového obchodu je potrebné venovať mu nemenej rešpekt k nižším prvkom a urobiť ho čo najrelevantnejším.

Dizajn

V päte sa nachádzajú nedopalky vzorov v rovnakom štýle na celom webe internetového obchodu. V tomto prípade, ak je celý internetový obchod navrhnutý v minimalistickom štýle, môžete do päty pridať zdobené obrázky a animácie, aj keď to nerešpektujete. Môžete ho navrhnúť originálnym spôsobom, aby ste u rodičov vyvolali pozitívne emócie.

Navigácia na stránke

Alternatívnu navigáciu na stránke môžete umiestniť do päty. To je užitočné najmä na stránkach s dlhodobými stránkami. Stačí prejsť na koniec a bez otáčania sa môžete prejsť na požadované časti katalógu. Môžete si ho zarobiť otvorením v spodnej časti internetového obchodu, miesta je tam dosť.

Zverejnené na stranu

Päta sa skvele hodí na umiestnenie krátkych, ale nie nevyhnutne významných informácií. Napríklad, ak v hornom menu budú príspevky do katalógu alebo kategórie internetového obchodu, potom dole môžete pridať príspevky do blogu alebo základných článkov.

Kontaktné informácie

Najčastejšie sa kontaktné informácie odosielajú do päty odoslaním na stránky na sociálnych sieťach alebo odoslaním mapy s ikonou do internetového obchodu (alebo samodoručovacieho miesta). Takéto informácie zvyšujú dôveru distribútorov.

Môžete tiež pridať informácie priamo na stránku, aby ste pomohli kupujúcemu. Ak stránku posuniete na koniec a nenájdete, čo hľadáte, potom stránku s veľkou dôverou zatvoríte. V tejto časti päty môžete pridať vyhľadávanie lokality alebo tlačidlo s názvom Skryť hovor.

Do päty stránky nie je vhodné pridávať vlastné informácie – napríklad údaje o spoločnosti (IPN, OGRN atď.) sú lepšie na stránkach „O spoločnosti“ alebo „Kontakty“.

Efektívnosť stránky alebo celej stránky spočíva v absencii akýchkoľvek iných dôvodov a všetka zložitosť vo vývoji mierneho zdroja spočíva v tom, že je potrebné kompetentne zvládnuť a preniesť tok väčšiny týchto faktorov. Použiteľnosť, vizuálny dizajn a branding – to všetko má priamy vplyv na zákazníka a konečné výsledky konverzie, generovania potenciálnych zákazníkov a predaja.

Dobrý deň, zaujíma vás, aká dôležitá je päta zdroja? Zdalo by sa, že je v nenápadnej časti stránky a možno neviditeľný... Ale nie.

Odborníci na internetový marketing upozorňujú, že pätu nemožno zakaždým zanedbať a má veľký potenciál. Prečítajte si nižšie o tom, ako pridať pätu na webovú stránku, ako odomknúť tento potenciál a urobiť pätu flexibilnejšou a vhodnejšou pre úspech marketingovej stratégie.

1. Kreatívny dizajn

Prvá vec, v ktorej môžete a môžete ukázať svoju vínnosť, je dizajn. Do päty nesmiete umiestniť absolútne žiadne informácie: žiadne ikony sociálnych médií, žiadne príspevky v doplnkových materiáloch, inak váš blog pridáme vizuálne.

Tieto orgány sa obávajú najmä snahy o čo najjednoduchšiu stránku a v pretekoch o použiteľnosť ju zničiť so všetkým, čo je nudné a neživé.

Pätu však možno právom nazvať testovacím priestorom pre najzaujímavejšie dizajnové riešenia a objavy. A je veľmi dobré, že niekoho takého poznáte. Povzbudzujte návštevníkov svojich stránok pomocou obrázkov a návrhov, ktoré lahodia oku.

Yesinsurance je poisťovňa so sídlom v Spojenom kráľovstve. Proteus nevyzerá vôbec typický pre tento galus. Namiesto zamerania sa na klasickú farebnú schému, ktorá symbolizuje dôveru a profesionalitu, spoločnosť zvolila svetlé a živé farby. V tomto prípade ako hlavička stránky nie je hlavná časť zaťažená zložitými detailmi a je zameraná na to dôležité, päta z nich vyčnieva - je vtipná, štipľavá, veselá a zdôrazňuje našu úctu k hlavnému posolstvu spoločnosť: „Žite šťastný život bez turba“ .

Neskutočne atraktívna je aj päta webovej stránky spoločnosti Urban Pie. Svojím štýlom a farbou je v súlade so zvyškom zdroja bez toho, aby ohrozil požadované informácie. Vіn vlieva do emócií pilotov. Možno si uvedomujete, že takáto voľba je úplne nevhodná a neprispieva k optimalizácii konverzie nijako pozitívne, ale skôr rešpektujete, že emocionálny aspekt bude vždy jedným z hlavných cieľov pri tvorbe efektívnych webových stránok. Ale treba to zavolať.

2. Jedna vizuálna línia

Všetko je tu jednoduché - musíte to dodržať, aby sa päta organicky prepojila s vizuálnou štruktúrou stránky, doplnila kompozíciu rozvinutú v hlavičke a vytvorila z nej jednu tému. Ako teda môžete vytvoriť dobrý základ pre svoje webové stránky? Funguje to takto: niekoľko dizajnových prvkov sa opakuje v hlavičke, v strednej časti stránky a v päte, čím sa vytvára jednotnosť a prepojenie medzi všetkými časťami.

Rozmanitosť okolitých dizajnových prvkov evokuje určitú logiku a vzory a tento krok nielenže vizuálne robí stránku harmonickejšou a ucelenejšou, ale tiež neumožňuje návštevníkom zabudnúť ani na sekundu, viete, že to páchne. Okrem toho, tie pôvodné sa skôr zapamätajú a vyvolajú pozitívne emócie, nie?

Jeden z najlepších príkladov koherentnej vizuálnej štruktúry možno vidieť na blogu The Pixel Creative Blog.

3. Alternatívna navigácia

Ako sprievodca sa pozrime, kde sme online. Prejdite na stránku a postupujte podľa jednej z navrhovaných trás, aby ste sa pokúsili nájsť informácie, ktoré potrebujete. Keď prejdete jednou zo stránok až na koniec, stále chcete zistiť, čo potrebujete pre materiál, ktorý potrebujete, a... v päte stránky narazíte na alternatívnu možnosť navigácie na stránke, ktorá vysvetľuje v štruktúre zdrojov s prístupnou formou.

Vlasna, pre ktorú sú odborníci na internetový marketing teraz pripravení povedať vám, ako navrhnúť pätu stránky: umiestnite tam alternatívne menu, analóg mapy, ktorý sa používa „v obzvlášť dôležitých situáciách“.

SEO agentúra HitReach nielenže umiestnila alternatívne menu na pätu svojej webovej stránky, ale štýlovými maličkosťami zobrazila všetky oblasti činnosti spoločnosti. Ide o strategicky vzdialený ťah, fragmenty vín prístupnou kreatívnou formou sprostredkovať učiteľovi, ktorý je sklamaný z neúspešného vyhľadávania, základné informácie o firme, čím ich vložíte na stránku a ďalej Ďalšie možnosti môžu vyriešiť váš problém .

Videohoster Wistia bol nájdený takto: do hlavičky bola umiestnená správa pre najdôležitejšie informácie a všetok obsah rozdelený do niekoľkých bodov bol už umiestnený v päte. Pre tých, ktorí chcú vedieť konkrétnejšie, bude menu v päte úžasným cestovateľom.

Päta je ideálne miesto, kde môžete uverejňovať správy na stránke, ale nie dôležité informácie. Ako sa zdá, pre svet a na všetky účely budú tieto informácie stále dostupné na akejkoľvek stránke.

Ekologické partnerstvo Spoločnosť Ecoki zverejnila správu v päte svojej webovej stránky v obľúbených blogových príspevkoch a nebudete tomu veriť! - Príspevky na iné stránky, odporúčané cieľovému publiku.

5. Dovira

Vaša päta sa môže stať zázračným nástrojom, ktorý podporuje dôveru distribútorov k zdrojom a spoločnostiam. Pamätáte si, čo sme povedali o tých, že informácie umiestnené v päte zostanú nezmenené na všetkých stranách stránky? To nám dáva možnosť umiestniť to, čo je po ruke, medzi profíkov a pomôcť im lepšie sa orientovať v online prostredí.

Ďalšia možnosť, ako správne vyplniť pätu stránky: do nového materiálu môžete umiestniť aj materiál, ktorý sa nezmestí do priestoru na rovnakých stránkach: môžu to zahŕňať tlačidlá sociálnych médií, príspevky odoslané do zdrojov tretích strán, kontaktné informácie .

Stone Laboratory úžasne navrhli svoju stránku a umiestnili veľa informácií do päty bez toho, aby spôsobili akýkoľvek zmätok. Okrem alternatívneho menu existujú informácie, ktoré podporujú dôveru v zdroj, napríklad adresy a kontaktné telefónne čísla všetkých kancelárií spoločnosti.

Výmena

Najdôležitejšie tajomstvá sú v podstate tie isté princípy, ktoré sa točia okolo toho, ako môžete urobiť pätu svojho webu čo najefektívnejšou. Pamätajte, že každý detail zdroja je dôležitý a môže byť kľúčom k úspechu konverzie, takže pracujte, experimentujte a obdivujte svoju jedinečnú originalitu a kreativitu.

A pre autonómne cieľové stránky platí odporúčanie generátora LP:

• Keďže vstupná stránka môže rolovať (rolovať), umiestnite položky ponuky blízko päty, ako sú služby, prípady, videá, s automatickým rolovaním na konkrétny blok vašej stránky;

Ukážem vám výsledok dnešného príspevku. Päta bude malá a bude tam menej ako jeden riadok textu

Problémy s implementáciou päty

Keďže cena päty je uvedená v spodnej časti stránky, aký je potom problém s jej implementáciou? Alebo si jednoducho vytvoríte rozšírenie našej hlavnej tabuľky a vložíte z nej všetky požadované informácie! Tento prístup teda pretrváva v 99% implementácií webových stránok, ale je tu jeden malý problém, ktorý sa vyskytuje v 1% implementácií.

Prehliadač schematických obrázkov osi

V tomto diagrame je päta prepojená na koniec hlavnej tabuľky a bude rozšírená podľa potreby, pretože oblasť hlavy stránky má dostatočnú výšku na vytvorenie vertikálneho posúvania v prehliadači.

Ak výška webu nie je taká vysoká, prečo by ste mali vytvárať zvislé posúvanie?

Ako vidíte, zdá sa, že obrázok je zhrnutý. Päta v tejto situácii nie je v dolnej časti stránky, ale v strede. Yak tse vipraviti?

Sú dve možnosti:

• Nevadí, že päta sa zobrazuje v strede, pretože v 99% prípadov má stránka dostatočnú výšku na to, aby sa tam päta zobrazila podľa potreby.
• Prejdite na iný spôsob implementácie päty

Dnes sa pozrieme na ďalšiu možnosť. Existuje mnoho spôsobov, ako implementovať pätu, a predsa jedna vec! Všetky spôsoby, ktoré som vyskúšal, neodrážajú skutočnosť, že našou hlavnou oblasťou stránky je štýl. Ale, nie je to také strašidelné

Teória implementácie päty

Čo kážem? Predstavujem vikoryst do jquery. Pomocou toho môžeme určiť výšku prehliadača alebo akéhokoľvek iného objektu na našej stránke. Na čo je to potrebné? Takže, keďže päta bude absolútne pozičný objekt (jeho štýl je position:absolute;), potom výška pracovnej plochy alebo výška stola hlavy nám umožňuje určiť, koľko ničíme pozdĺž vrchu ( top style), naša oblasť päty!

Myslím, že je jasné, ako zrealizujeme náš suterén

A čo funkcie Java skriptu? Budeme musieť určiť výšku (výška prehliadača alebo výška hlavičky) sekcie päty. Všetko je tu jednoduché, môžete skontrolovať, či je tabuľka alebo okno prehliadača vyššie, alebo je vyššie okno prehliadača, potom sa určí výška. V skutočnosti je výška stolíka iná.

Vytvoriť pätu > Upraviť štýl tabuľky

Teraz musíme upraviť štýl nášho hlavného stola.

Ako vidíte, prístup medzi našou hlavnou tabuľkou a koncom prehliadača je zanedbateľný. Keďže päta bude absolútne umiestnená, nie je možné zväčšiť priestor medzi hlavičkou a koncom stránky! Pomôžeme vám implementovať nový CSS prvok do štýlu našej oblasti hlavy.

Otvoríme pôvodný style.css, nájdeme tabuľku tried (.table(...)) a vytvoríme os takto

Tabuľka
{
poloha:absolútna;
top:0px;
vľavo: 50 %;
margin-left:-390px;
padding-bottom:50px;
z-index: 1;
}

Pridal som štýl padding-bottom:50px; na vytvorenie priestoru medzi koncom tabuľky a koncom okna prehliadača s veľkosťou 50 pixelov. Pre pätu, ktorú som vymyslel (snímka obrazovky s výsledkom na začiatku príspevku), bude toto miesto postačujúce, ak ste vymysleli pätu, ktorá je oveľa nižšia ako moja, vložte toľko pixelov, koľko potrebujete!

>Upraviteľná šablóna hlavy

Otvorte pôvodný index.html a predtým

vložíme našu pätu

Práca na RS-BLOG v2 Pri kopírovaní materiálu z tohto blogu nezabudnite vložiť správu na stránku - rsblog.ru

Vysvetlím rôzne štýly, ktoré sa tu používajú

• displej: žiadny; - Naša pivnica sa objaví až po zabratí celej strany, dovtedy už nebude vidieť pätu!
• vľavo: 50 %; ľavý okraj: -390px; - Tieto dva štýly vám umožňujú umiestniť pätu presne do stredu prehliadača.
• text-align:center; - Umožňuje umiestniť text, ktorý sa zmestí do bloku, do stredu.

>Zahŕňame jquery a js.js

Pre klas je potrebné prilákať. Zoberme si túto správu a opečiatkujeme ju sem

Kód je zobrazený, viditeľný a skopírovaný do poznámkového bloku. Poznámkový blok je vyrazený Súbor -> Uložiť

Zadajte názov (jquery.js) súboru v jazyku with.js

A uložíme šablóny do priečinka. Teraz má náš otec s motorom súbor, ktorý potrebujeme. Vytvorte tiež súbor js.js (stále prázdny súbor). Čoskoro napíšeme funkciu zobrazenia päty. Os teraz vyzerá namiesto priečinka šablón

Pokiaľ si pamätám, nahral som video lekciu o prepojení jquery iným spôsobom, ako vidíte

Teraz už nemôžem zahrnúť súbory js do nášho blogu. Pre koho je najzrejmejší index.html a po riadku

" />

A pre prehľadnosť, snímka obrazovky:

Je jasné, ako sú moduly zobrazené, a chcem zvýrazniť správu na logu. Kód na zobrazenie loga je:

" />

Na prvý pohľad najdôležitejší HTML tag pre obrázok je namiesto pôvodného spôsobu php kód zapísaný do súboru. Tento kód sa na prvý pohľad môže zdať komplikovaný a hlúpy, ale keď sa naň skutočne pozriete, je jasné, že v ňom nie je nič zložité:

• - koniec php kódu

V dôsledku tohto php kódu môžeme extrahovať odkaz na súbor s obrázkom. Nezáleží na tom, aký názov bude mať stránka a aká šablóna bude vybratá, obrázok sa prevezme z priečinka obrázky vybranej šablóny.

Súbor index.php uložíme, teraz ho môžete zavrieť, už nám nebude na nič.

Teraz môžeme vytvárať množstvo modulov, ktoré je možné vidieť na starostlivo vytvorených nových pozíciách. Prvý modul zobrazuje menu v päte a druhý 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 nich starostlivo vyberáme na základe pozícií modulov:

Ak chcete zobraziť našu ponuku päty uprostred inej ponuky na stránke, pri prispôsobovaní modulu ponuky pridáme novú príponu do triedy „_footer“:

Aby som nevysvetľoval, čo je modul s typom „HTML code“, ukážem princíp jeho činnosti na snímke obrazovky:

Tento modul som naplnil textom, ktorý sa objaví v päte, a vedľa pôvodného textu som napísal malý php kód, ktorý zobrazuje aktuálny text:

Uložme modul a prejdite na webovú stránku, aby ste skontrolovali výsledok a to, čo som dostal:

Výsledok je žiaduci, ale nie mimoriadne pôsobivý. Teraz musíme adekvátne naštylizovať prvky päty pomocou CSS.

Na začiatok si vytvorte nové bloky päty:

Foot-left, .foot-center(float: left;) /*validácia blokov päty*/ .foot-left (šírka: 20%;) /*šírka ľavého bloku*/ .foot-center (margin-left : -6px ;) /*prístup do centrálneho bloku*/ .foot-right ( /*pravý blok*/ float: none; height: 60px; )

Ďalším kandidátom na dizajn je toto menu, ku ktorému som vytvoril tieto štýly:

Ul.nav.menu_footer (margin: 0;) /*nula záznamov v 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*/ margin-left: 15px; /*položka ponuky O stránke*/ farba: #5aa426; border- hore: 3px plné #5aa426; dole: 3px plné #0f70ad; farba: #0f70ad;

І po dokončení pridáme pätu k hlavnej časti obsahu:

Footer.footer hr (horný okraj: 3px plné #fc8f30;) /*pridá pätu k hlavnému obsahu*/

Uložte súbor so štýlmi, prejdite na stránku a žasnite nad výsledkom:

Vytvorili sme pätu pre našu stránku, ktorá vyzerá oveľa zábavnejšie a menej štandardne. V tomto bode by som rád uzavrel túto lekciu a v nasledujúcej lekcii si zopakujeme možné výhody adaptívneho dizajnu a opravíme niektoré nedostatky. Tiež by som si rád prečítal článok o tom, ako vytvoriť šablónu Joomla 3 a vytvoriť pätu od začiatku pomocou Bootstrapu.

Dobrý deň, milí priatelia a hostia blogu! Dnes hovoríme o vytvorení stránky, alebo skôr povedzme o jednom sklade - Footer of the site, pre vedecký Footer HTML alebo jednoducho päta. Nečudujte sa tým, ktoré sú najmenej viditeľnou časťou stránky a málokto ich rešpektuje, no na prvý pohľad to tak vyzerá a mnohí si to myslia. Osem toho je veľa vecí, ktoré často nevyhovujú dizajnu suterénu stránky, čo je zásadne nesprávne a nesprávne!

Čiže ako päta stránky je časť rovnako dôležitá ako hlavička a telo, alebo správne - hlavička a telo. Poďme sa teda dnes pustiť do práce a zorganizovať, ako urobiť zo základov našich stránok dobrého správcu webu, a pokúsim sa vám s tým pomôcť!

A tak začnime od úplného začiatku...

Čo je päta webovej stránky a päta HTML?

Päta stránky je spodná časť, kde potrebujete správu zverejnenú správcom webu, aby ste sa dostali na hlavnú stránku, možno menu pre celú stránku, bočná navigácia, o autorovi, o projekte, o stránke, kontakt informácie, prechod na vedľajšie stránky s často kladenými otázkami. , uverejnené na sociálnych sieťach a ich tlačidlá, informátori a lekári atď. sa nenachádzajú v päte stránky. Všetky informácie, ktoré môže získať iba správca webu!

A ten, kto si myslí, že málo poradcov vstupuje do suterénu stránky, sa úplne mýli!

A z toho vyplýva, že je potrebné venovať nemenej úcte spodnej časti stránky, pod na prvý pohľad viditeľnejším častiam, ako je telo a hlavička stránky. Aj keď sa opakujem, stále si myslím, že to nie je nadarmo. Touto cestou by som Vám rád vysvetlil dôležitosť a dôležitosť správneho dizajnu webstránky!

Ako správne navrhnúť pätu webu?

Nie je na ňom nič vymyslené! Predstavím vám niekoľko typov krásnych a reprezentatívnych suterénov pre vaše webové stránky. І Môžete si z nich vybrať tú najvhodnejšiu a na konci tohto článku budete poslaný na čo Môžete navštíviť všetky stránky, ktoré som predstavil a hlavne ich vikorizovať pri vytváraní svojich nových stránok c, alebo nahradiť existujúce moje , pridajte ďalšie html päty.

Prvá päta stránky:

Toto je ďalšia päta webu:

Toto je tretia päta webu:

Toto je štvrtá päta webu:

Toto je piata päta stránky:

Šiesta päta stránky:

Ako sa vám páči päta HTML? Chceli by ste jeden z nich? Pýtam sa prečo je to tak?!

Keďže si zaslúžite smrad, navrhujem ich okamžite úplne neškodne prilákať a vikoristov pre vaše vlastné účely!

Otec, ako vás zaujíma, má šesť súborov s HTML v päte. A všetko, čo musíte urobiť, je opraviť zmeny na vašom webe v textovom editore a je to!

Poďme hovoriť o textovom editore! Napríklad, som pokorný a budem sa vám tešiť, to je všetko. Ako je teda najšikovnejší a najbezpečnejší!

Osou sú teraz fúzy. Ďakujeme za vašu úctu!