A CSS használatával a lábléc a böngészőablak aljára tolható. Minden, amit a céloldal láblécének kialakításáról tudni kell A megfelelő lábléc

Sziasztok, a blogoldal kedves olvasói. Folytatjuk az előző három cikkben elkezdett és folytatott blokk-elrendezés témát. Elvileg már sikerült két- és háromoszlopos oldalelrendezést is elkészítenünk, és még a gördülékeny elrendezés elkészítésének árnyalatait is sikerült figyelembe vennünk.

Ezenkívül az első, a webhely elrendezésével foglalkozó cikkekben () néhány alapfogalmak webmester, amelynek megértése nélkül meglehetősen nehéz lenne megérteni az árnyalatokat.

Milyen problémáink voltak a weboldalunk elrendezésével?

Ma megpróbálunk megoldani egy apró problémát, amely a korábban elkészített elrendezéssel kapcsolatban felmerülhet. Leggyakrabban ez a helyzet akkor fordul elő, amikor nagy (nagy felbontású) monitorokon nézi, és amikor egy kis mennyiségű információt tartalmazó oldalt jelenít meg.

Ebben az esetben kiderülhet, hogy a lábléc nem a képernyő aljára nyomódik, hanem szinte a középső magasságában helyezkedik el, ami a legtöbb esetben csúnyán és nem esztétikusan fog kinézni.

Ennek ellenére véleményem szerint a láblécet a webhely elrendezésének legaljára kell nyomni, és ez különösen igaz abban az esetben, ha az oldal magassága kisebb, mint a felhasználó képernyőjének magassága. Ezt sematikusan így ábrázolhatjuk:

Azok. helyes lábléc-viselkedés kis mennyiségű információ esetén az oldalon és nagyképernyő a felhasználó a következő lesz:

Ennek megvalósításához számos manipulációt kell végrehajtanunk az elrendezésünk kódjával. Sőt, nem csak a stílusfájlon fogunk változtatni CSS stílus Style.css, hanem az Index.html-ben is HTML kódés Div blokkokat képezünk. De először a dolgok.

Példaként a korábban létrehozott háromoszlopos webhelyelrendezést fogjuk használni. Ebben az esetben az Index.html így fog kinézni:

Fejléc Fejléc Oldal tartalma Oldal tartalma Oldal tartalma Oldal tartalma Lábléc

A Style.css fájlba pedig a következőket írták CSS tulajdonságok V:

Törzs, html ( margó:0px; padding:0px; ) #maket (szélesség:800px; margó:0 auto; ) #fejléc(háttérszín:#C0C000; ) #left(háttérszín:#00C0C0; szélesség:200px ; lebegés:bal; ) #jobb(szélesség:200px; háttérszín:#FFFF00; float:jobb; ) #content( háttérszín:#8080FF; margó-bal:202px; margó-jobb:202px; ) #lábléc (háttérszín:#FFC0FF; tiszta:mindkettő; )

Nos, maga az elrendezés valahogy így nézett ki:

Mint látható, a lábléc nincs lenyomva, ezért nem felel meg a követelményeinknek (mindig a legalsó oszlop alatt található), ezért módosítanunk kell a kódon. Ugyanezt meg lehet tenni kétoszlopos elrendezésnél és gumis elrendezésnél is. A módszer univerzális.

Hogyan lehet a láblécet a webhely elrendezésének aljára tolni

Tehát át kell helyeznünk a Div tárolót a lábléccel a képernyő aljára. Ehhez először be kell állítania a teljes oldal magasságát száz százalékra (az egész képernyőt elfoglalja). Erre azért lesz szükség, hogy a fő blokk méretét az elrendezéssel 100%-ra módosítsa.

A webhely oldalának teljes tartalma a nyitó és záró Body címkékbe kerül, ezért a Style.css fájl Body címkéjéhez egy másik CSS-tulajdonságot kell hozzáadnunk, a magasságot 100%-ra állítva:

Törzs, html ( margó: 0 képpont; kitöltés: 0 képpont; magasság: 100%; )

Tovább kinézet Ennek még nem lesz hatása, de most a főblog a képernyő teljes magasságára nyújtható. Azok. egyfajta előkészítő szakasz volt.

Az alapvető CSS-tulajdonságokat, ha szükséges, megtekintheti. Most állítsuk be a teljes elrendezésünket tartalmazó Div tárolót 100%-os minimális magasságra:

Azt is szeretném kiemelni (div with id="maket"). Ehhez adok neki egy keretet a megfelelő Border() tulajdonság segítségével:

A keret: tömör, 3 képpontos fekete tulajdonság lehetővé teszi, hogy ehhez a tárolóhoz 3 képpont vastag, tömör keretet állítson be. Ez lehetővé teszi, hogy jól látható legyen, hogy az elrendezéssel ellátott tároló a képernyő teljes magasságára kiterjedt, még akkor is, ha az oldalon kevés információ található:

Most ki kell venni a láblécblokkot az általános tárolóból, és alá kell helyezni, közvetlenül az általános után. Mit fog adni? És az a tény, hogy végül az elrendezésben a lábléc méltó lesz lefelé, és nem lesz rányomva, mint korábban, a leghosszabb oszlopához. Ebben az esetben az Index.html így fog kinézni:

Címsor Fejléc bal oldali oszlop Menü Menü Menü Menü Jobb oldali Oszlop Menü Menü Menü Oldal tartalma Az oldal tartalma Tartalom Lábléc

Kérjük, vegye figyelembe, hogy a lábléccel ellátott blokk már nem az általános tárolón (maket) belül található, ezért a szélességét már nem szabályozzák a Style.css fájlban a maket számára megadott CSS-tulajdonságok. A lábléc szélessége a teljes képernyőn átnyúlik, de továbbra is a képernyő alján, közvetlenül a fő blokk alatt lesz:

De ismét egy probléma adódik, mert a lábléc megtekintéséhez most már görgetni kell a képernyőt a böngészőben (lásd a görgetősávot a fenti képen).

Ez azért van így, mert a fő konténer (maket) a képernyő teljes magasságát elfoglalja (ezt a min-height tulajdonság határozza meg: 100%), a lábléc pedig közvetlenül mögötte található, és a megtekintéséhez görgetni kell, amit nem túl kényelmes és funkcionális.

Ezt a problémát úgy oldhatja meg, hogy negatív paddingot állít be a Div tárolóhoz a lábléccel úgy, hogy az a magasságával megegyező távolságra mozogjon felfelé. Ebben az esetben a lábléc tárolója átfedi a főt, és illeszkedik a böngésző képernyőjének magasságába (azaz nem kell görgetnie a megtekintéséhez).

De ahhoz, hogy negatív eltolást állíthassunk be felülről, ismernünk kell a láblécnek ezt a magasságát, de ezt még nem tudjuk.

Ezért először a láblécet tartalmazó tároló magasságát állítjuk be a megfelelő tulajdonság beállításával a Style.css fájlban:

#footer( háttérszín:#FFC0FF; tiszta:mindkettő; magasság: 50 képpont; )

Ezután negatív margót állítunk be a tetején a magasságával megegyező magasságra:

Ez lehetővé teszi, hogy a lábléc pontosan a saját magasságába emelkedjen, és így illeszkedjen a böngésző képernyőjébe (most eltávolíthatja a CSS-t határterületi ingatlan: egyszínű 3px fekete a maket szabálytól, hogy a keret vastagsága ne akadályozza meg, hogy a teljes elrendezésünk, beleértve a láblécet is, elférjen a képernyő magasságában):

Mint látható, a görgetősáv most nem jelenik meg a böngészőben, és a teljes háromoszlopos blokkalapú webhelyelrendezésünk elfér egy képernyőn (ha kevés információ van az oldalon), és van egy lábléc a legalján . Pontosan ezt kellett tennünk.

Behelyezzük a távtartót és harcolunk vele internet böngésző

De felmerül egy probléma, amely csak akkor jelenik meg, ha több információ található az elrendezési oldalon, és a következő helyzet állhat elő:

Kiderül, hogy olyan helyzet adódhat, amikor az egyik elrendezési oszlopban lévő információ átfedi a láblécet, ami nem fog jól kinézni. Ez annak a hírhedt negatív párnázásnak köszönhető, amelyet beállítottunk hozzá, és amely segített a pincénket a fő elrendezési konténerhez emelni.

Azok. Kiderült, hogy a képernyő alján két blokk fedi egymást az alagsorban.

A probléma megoldása az, hogy egy új üres Div konténert (ún. spacer) adunk hozzá az elrendezésünk (maket) fő konténeréhez, arra a helyre, ahol korábban a lábléccel ellátott blokk volt.

Ha ezt az új tárolót a lábléc magasságával megegyező magasságra állítjuk, elkerülhetjük, hogy a fő tárolóból származó információk ütközzenek a lábléc blokkjával. Rendeljünk egy azonosítót () ehhez a Rasporka nevű tárolóhoz, és ennek eredményeként a háromoszlopos elrendezésünk Index.html-je így fog kinézni:

Fejléc Fejléc Bal oszlop Menü Menü Menü Menü Jobb oldali Oszlop Menü Menü Menü Menü Oldal Tartalom Oldal Tartalom Oldal Tartalom Oldalak Oldalak Oldalak Oldalak Lábléc

A Style.css-ben pedig erre írunk ( , ami ennek a távtartó konténernek a magasságát egyenlőre állítja az alagsor magasságával:

#rasporka ( magasság: 50px; )

Ennek eredményeként a lábléc alulról nem a fő tárolóban található információhoz (például a legmagasabb oszlopban lévő szöveghez), hanem a lábléc magasságával megegyező területre lesz nyomva egy információt nem tartalmazó távtartó tárolóval. .

Így elkerüljük az ütközéseket és a torzulásokat háromoszlopos elrendezésünkben. Minden tiszta és szép lesz (finom és nemes):

Ahogy fentebb is említettem, a lábléc szélességét most külön kell beállítani, mert... ez a tároló már nem része a főnek. Ehhez további tulajdonságokat kell hozzáadnia a lábléchez a CSS-fájlhoz, amely lehetővé teszi a szélességének beállítását és vízszintes igazítását a képernyő közepén.

A Width tulajdonság segítségével célszerű a szélességet a teljes elrendezés szélességével megegyezően beállítani, és a vízszintes igazítás ugyanúgy elvégezhető, mint a teljes elrendezésnél blokk elrendezés.

Így további tulajdonságokat kell hozzáadnunk az azonosító lábléchez:

#footer( háttérszín: #FFC0FF; világos: mindkettő; magasság: 20 képpont; margó felső: -20 képpont; szélesség: 800 képpont; bal margó: automatikus; jobb margó: automatikus; )

A width:800px tulajdonság használatával a szélesség 800 pixel, a két tulajdonság margó-bal: auto és margó-jobb: auto használatával pedig a lábléc bal és jobb oldali behúzása automatikusan beáll, ennek eredményeként amelyek ezek a behúzások egyenlőek lesznek, és hősünk középre igazodik:

Nos, úgy tűnik, nincs már mit javítani, de nem ez volt a helyzet. Mint mindig, kedvenc böngészőnk, az Internet Explorer 6 nem ért valamit az általunk használt CSS-tulajdonságokból. Ebben a böngészőben (és talán más régiekben is) minden igyekezetünk ellenére a lábléc nem lesz lenyomva, hanem az oldal elrendezésének legmagasabb oszlopához fog ragaszkodni.

Mindez azért történik, mert ( nem érti a min-height: 100% tulajdonságot, amellyel a főblokk minimális magasságát a képernyő magasságával megegyezően állítottuk be.

Ezért a probléma megoldásához egy úgynevezett hacket kell használnunk, amely lehetővé teszi, hogy elmagyarázzuk (ujjunkra) a régebbi böngészőknek, hogy mit kell tenni. Előtt a CSS listája A maket tulajdonságait a következő kombinációt kell beillesztenie:

* html #maket ( magasság: 100%; )

Ez a szabály csak azokra vonatkozik internet böngésző Explorer 6, a többi nem fogja figyelembe venni és megvalósítani.

Tehát a Style.css végső kinézete a képernyő aljára nyomott lábléccel a következő lesz:

Törzs, html ( margó: 0 képpont; kitöltés: 0 képpont; magasság: 100%; ) * html #maket ( magasság: 100%; ) #maket ( szélesség: 800 képpont; margó: 0 automatikus; minimális magasság: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content (háttérszín:#8080FF; margó-bal:202px; margó-jobb:202px; ) #footer( háttérszín:#FFC0FF; világos:mindkettő; magasság: 50px; margó felső:-50px; szélesség:800px; margó-bal: auto; margó-jobb: auto; ) #rasporka ( magasság: 50px; )

Nos, az Index.html végleges formája fent volt megadva. Ennyi, ez a cikksorozat, amely a 2 és 3 oszlopos fix és gördülékeny webhelyelrendezések blokkolási elrendezésének szentelt, teljesnek tekinthető.

Megnézheti a „Working with HTML tag div":

Sok szerencsét! Hamarosan találkozunk a blog oldalain

Lehet, hogy érdekel

Blokk elrendezés - Kétoszlopos, háromoszlopos és folyékony elrendezéseket hozunk létre a webhely számára
DiV elrendezés – Hozzon létre blokkokat kétoszlopos elrendezéshez HTML-ben, határozza meg a méretüket és állítsa be a pozicionálást a CSS-ben

Ha a cipő bármely ruha utolsó eleme, akkor az e-kereskedelmi webhely lábléce az értékesítési dizájn utolsó eleme. Az alsó elemre, a láblécre összpontosítva a modern weboldalak készen állnak arra, hogy minden lehetséges módon bemutassák személyiségüket. Versenyképes e-kereskedelmi környezetben van elég eredeti ötletek, kreativitás és design trendek. Mielőtt diverzifikálná egy e-kereskedelmi webhely láblécét, érdemes átgondolni a fontos szempontokat. Mit helyezzünk el először, és mi a legjobb módja ennek? Az inspiráló lábléctervek összeállítása érdekes lehetőségeket kínál.

Olvassa el még: 13 e-kereskedelmi marketingtrend 2019-ből

Érdekes statisztika a Chartbeattől. Egy 25 millió felhasználó viselkedését vizsgáló tanulmány kimutatta, milyen mélyen böngészik az oldalakat. Kiderül, hogy a felhasználó figyelmét a hajtási vonal alatti tér vonja fel. Gyakorlatilag hasznosabb információkhoz jutva a látogatók az oldal tetejétől számított 1200px-es területen (a böngészőben átlagosan 700px-es függőleges képernyővel), illetve a második képernyő mögött tartózkodnak a legtovább.

Megtekintési idő (mp) / Távolság az oldal tetejétől (pixel)

Az első és a második képernyő megtekintésének időtartama között nagy az eltérés. A TOP 4 másodperc, az időtartam felülről 1200 pixelnél éri el a maximumot (16 másodperc) és további görgetéssel lassan csökken.

Látogatók aránya (%) / Távolság az oldal tetejétől (képpont)

A látogatók jelentős része (több mint 25%) meg sem várja a tartalom betöltődését és elkezdi görgetni az oldalt. Ez azt jelenti, hogy csak 75%-uk látja először a legfelsőt. Az oldal legnézettebb területe 550 képpont (közvetlenül a hajtási vonal felett).

A tanulmány eloszlatja azt a mítoszt, hogy a felhasználók nem görgetnek le az oldal aljára, és nem nézik meg az összes tartalmat. A lábléc egy modern e-kereskedelmi webhely számára is fontos, sőt, megvannak a maga előnyei is.

Ötletek „alagsor” (lábléc) kialakításához, példák értékesítési tervekre

Ebből a 10 tippből megtudhatja, hogyan lehet gyönyörűen megtervezni a láblécet egy weboldalhoz - a webdesign kompozíciós szabályai szerint és a kiemelt feladatok megoldásában. Alkalmazza a legmegfelelőbb taktikát a használhatóság, az UX (felhasználói élmény) javítására, sőt az eladások növelésére is.

1. Szükséges információ

A szükséges szervezési és jogi kérdéseket hagyományosan az oldal láblécében ismertetjük. Az értesítések kevésbé észrevehető szöveggel jelennek meg, felszabadítva az oldal más területeit a fókuszáltabb figyelem érdekében. jelentős elemei. Itt minta lista megfontolásra:

• Szerzői jogi megjegyzések
• Jogi felelősség kizárása
• Számlázási információ
• Cookie-figyelmeztetés

A terméket értékesítő weboldalnak meg kell felelnie a jogszabályi előírásoknak, és tájékoztatást kell adnia az eljárásról és a visszaküldési időszakokról. Elhelyezkedése a láblécben egyaránt kényelmes az értékesítési forrás és a látogatók számára.

Példa láblécre: Yves Rocher

Online áruház védjegy Yves Rocher: teljes képernyős lábléc váltakozó rétegekből álló szép kialakítással. Tájékoztatást nyújt a cégről, az értékesítő weboldal infrastruktúrájáról - a rendeléskövetéstől a személyes adatokra vonatkozó szabályzatig. Vannak még tippek a termék használatához, bónuszok, promóciók

Példa lábléc: Lumity

A táplálék-kiegészítők kereskedőire fokozott jogi követelmények vonatkoznak. felelősség. Van jó pár dolog, amit érdemes/nem szabad elmondaniuk az értékesítési weboldalukon. A jogi információkra mutató hivatkozások a jobb láthatóság érdekében félkövérrel vannak kiemelve.

A gyönyörű háttérképet tartalmazó lábléc nagyon szervesen illeszkedik a webhely általános kialakításába. Nincs egyértelmű határ, inkább maga a tartalom szolgál elválasztóként

Példa lábléc: Saddleback Leather Co

Eladó weboldal gyönyörű retro fejléc- és láblécdizájnnal. 100 év garancia az anyag- és kiviteli hibákra. A visszaküldés feltételeit kísérik érdekes történetek... nem minden olyan szomorú a szükséges e-kereskedelmi információkkal, kiderül

2. Negatív tér – elegendő vizuális távolság

A lábléchivatkozások számának korlátozásakor ne fukarkodjon a negatív szóközzel – ez lenyűgöző hatással lesz a vizuális észlelésre és javítja az olvashatóságot. Általános szabály: A vizuális hierarchia fenntartásával a központi elemek gyorsabban észrevehetők (előnyére fordíthatók!).

Lábléc példa: QUAY AUSTRALIA

A minimalista stílus és a rögzített legördülő menü segítségével az online áruház tágas láblécet engedhet meg magának

Lábléc példa: Incase

A nagy mennyiségű mikronegatív térről (kis elemek között) ezt mondhatjuk: míg minden szükséges információ jelen van, jól olvasható és gyorsan észlelhető - minden rendben van

Példa lábléc: Stumptown Coffee Roasters

A kávézóhely tágas lábléce kiváló kiegészítése egy letisztult dizájnkompozíciónak, amelyben sok a makronegatív tér („levegő” a részek/szakaszok között)

3. Utolsó felhívás a cselekvésre

Olvassa el még: 30+ példa és ötlet célműveleti gombok tervezésére

A lábléc stílusos kialakítása sokat mond magáról az erőforrásról. Fontos megjegyezni: a vevő kicsit tovább marad itt, mint az oldal más részein. Kényelmes lehetőség még egy utolsó cselekvésre való felhívásra. Ez gyakran előfizetés/hírlevél, de CTA-hívást is összekapcsolhat fiókregisztrációval.

Lábléc példa: Greetabl

A Greetabl szerényen megtervezett oldalainak alja előfizetési felhívást tartalmaz. Minimális elemekkel a hívás észrevehetővé válik, és a türkiz háttérrel összhangban az oldal dekorációjává válik

Lábléc példa: Ecwid

Szép dizájn cselekvésre ösztönzőkkel az oldalak alján. Az értékesítési webhely-készítő szerkezete univerzális. 35 nyelvre fordították le millió vásárlója számára.

4. Lebegő kocsi – az értékesítési funkciók elérhetőségének növelése

A bevásárlókosárhoz való hozzáférés az oldal aljáról nagyszerű módja annak, hogy javítsa az oldal használhatóságát és értékesítési minőségét.

Lábléc példa: Lemonadela

A vendéglátó cég árusító honlapja kellemesen nézhető és kényelmes a vásárló számára

5. Lábléc navigáció

Az oldal alsó része ideális a ritkán megtekintett információkhoz: a cégről, a szolgáltatás feltételeiről és az adatvédelmi szabályzatról. Ebben az esetben a lábléc funkciója az, hogy mindenkit megmentsen. Az e-kereskedelmi környezetben elveszettnek érzi magát valaki, aki érdeklődni kezd az e-kereskedelmi infrastruktúra iránt, ösztönösen tovább görgetve...

A negatív szóköz elengedhetetlen a tartalom olvashatóságához. Általában a „lábléc” nem navigációs célokat szolgál, ellentétben a menüvel vagy a webhelytérképpel. Az e-kereskedelmi webhelyek csak ritka esetekben helyeznek el egyedi termékkategóriákat a láblécben (

Sziasztok kedves blog olvasók. Ma arról szeretnék beszélni, hogy milyen legyen a lábléc a modern webdizájnban. Néhány példát is megnézünk veled, és kapunk néhány kiváló használati tippet. :-)

Ha már észrevette, hogy az elmúlt néhány évben egyre több lábléc jelenik meg nagyobb méretben. Ami viszont jobb navigációt és az oldal használatát biztosítja. Természetesen helyesebb lenne, ha a láblécet nem csak gyönyörűvé, hanem kényelmesebbé és funkcionálisabbá is tennénk. Más szóval, minden a tervezőn múlik.

Nos, most nézzünk néhány praktikus és szép példát:

Nagyon kényelmes és teljes körű navigáció az oldalon.

Mint tudják, szinte minden webhelyen megtalálható ilyen „Webhelytérkép” oldal. Ez már elavult navigációs lehetőség. Miért ne készítenél egy tömörebb térképet az oldal láblécébe, szerintem nagyon kényelmes, ráadásul nem kell mindenféle oldalakat keresni teljes navigációval.

A teljes funkcionalitású navigáció több mint 50 linket tartalmazhat az oldalon, ami viszont nagyon jó hatással van:

SEO. Az ilyen navigáció nagyban megkönnyíti az oldal használatát a keresőrobotok és a felhasználók számára.

Továbbfejlesztett navigáció. Ez arra kényszeríti őket, hogy jobban megtekintsék webhelye oldalait, mivel figyelmen kívül hagyhatják ezeket az oldalakat, vagy egyszerűen nem látják őket. Ez viszont csökkenti a visszafordulási arányt.

A webhelytulajdonosok gyakran nem figyelnek a láblécre, mert azt gondolják, hogy az nem ad értéket: az alján található, ezért nem érdekes a felhasználók számára. De ez nem igaz. A megfelelően kialakított pince átgondolt kialakítással, hozzáértő felépítéssel és szükséges tartalommal felkelti a felhasználó figyelmét, a helyszínen tartja és koordinálja a további akciók. Éppen ezért a jól megépített pince hatékonysága tagadhatatlan.

Ebben a cikkben részletesen eláruljuk, mi ez - a webhely lábléce, mi a jelentősége, és milyennek kell lennie, ha az Ön vállalkozása érdekében dolgozik.

Mi az a lábléc, mennyire fontos és miért?

A weboldal lábléce (lábléc, lábléc) az oldal legalsó része, ahol hasznos, de nem elsődleges információk jelennek meg. Ez lehet minden olyan információ, amely érdekes lehet a célközönség számára, valamint olyan információ, amelynek szerepelnie kell az oldalon, de nem ésszerű a főmenübe tenni, hogy tömör és logikus legyen.

A jól optimalizált lábléc megkönnyíti a navigációt az oldalon, és segíti az üzleti célok elérését, hiszen további fontos információforrás a felhasználó számára, ha nem találta meg az oldalon.

A webhely aljának fő előnyei

A lábléc minden olyan információt tartalmazhat, amely érdekes lehet a felhasználó számára: a kapcsolattartási adatoktól a cég további szolgáltatásait tartalmazó oldalakra mutató hivatkozásokig. Ezek az elemek számos üzleti előnnyel járnak.

Koncentrálj arra, ami fontos

Csak varázsolni kell az alagsor kialakításán, és ez lesz a fő hangsúly a hasznos információkon. A lábléc használatával többet elmondhat ügyfelének a cégről és annak tevékenységéről, felajánlhatja a hírlevélre való feliratkozást, vagy a megfelelő oldalakra mutató aktív hivatkozás segítségével tájékoztatást adhat partnereinek. A lábléc leegyszerűsíti a navigációt a felhasználó számára, ha a webhely bármely szakaszára kell mennie. Ehhez csak ki kell választania a szükséges linket a webhely végén anélkül, hogy felfelé görgetné a teljes oldalt. Ezért hiába gondoljuk, hogy az oldal alsó része használhatatlan. Minden bizonnyal megtalálja a felhasználóját, felkelti a figyelmet és megtartja az oldalon.

Fokozott lead generálás Maximális hasznos és fontos információ

Minden hasznos információkat, amely nem illik a menübe, vagy nem felel meg a sajátosságainak, a láblécben helyezhető el. Adjon jogi információkat felhasználójának, vonzzon szponzorokat és partnereket, és biztosítson hasznos linkeket a vállalati alkalmazottak számára. Hidd el, az ilyen információkat nem hagyják figyelmen kívül.

Webhely navigáció

Ha a felhasználó távolabb került a fejléctől (webhely fejléc), és közeledik a lábléchez, az azt jelenti, hogy még nem találta meg azt, ami érdekes és fontos a számára. Szóval minden a te kezedben van. A navigációs hivatkozások elhelyezése megkönnyíti a potenciális ügyfelei számára a szükséges információk megtalálását, és meghosszabbítja az oldal használatának idejét.

Maximális figyelemfelkeltés

A lábléc az utolsó pillanatig leköti az oldal látogatójának figyelmét, megtartva azt. Mintha az utolsó akkord újabb esélyt adna a felhasználónak, hogy értékes információkhoz jusson. És ahhoz, hogy ez jól működjön, csak megfelelően kell megtervezni a webhely alsó részét. Később elmondjuk, hogyan kell ezt megtenni.

Mi legyen az oldal láblécében?

A weboldal láblécének tartalma és kialakítása szorosan összefügg. A teljes blokk kialakítása attól függ, hogy mi kerül ebbe a részbe. A tartalmi elemek a vállalat tevékenységétől és a célközönség jellemzőitől függenek. Az oldal alján felsoroljuk a legtöbb elhelyezhető elemet. Nincs más dolga, mint kiválasztani azokat, amelyek vállalkozása alapján a legmegfelelőbbek az adott esetnek.

szerzői jog

Egy egyszerű módja annak, hogy megvédje tartalmait a lopástól, ha szerzői jogot követel. Ez azt jelenti, hogy a webhely bármely tartalmának vagy ötletének/tervének ellopásáért az elkövető felelősségre vonható. A valóságban természetesen a dolgok egészen másként alakulnak, mivel továbbra is előfordulhatnak kísérletek a tartalom ellopására.

Minden évben frissítenie kell a szerzői jogi információk melletti ábrát. Ezt kétféleképpen lehet megtenni: manuálisan vagy automatikusan egyszerű forgatókönyv a kódban.

Díjak és oklevelek

A tanúsítványokkal, díjakkal és eredményekkel kapcsolatos minden információ erőteljes társadalmi bizonyítékot jelent, ami növeli a felhasználók cégbe vetett bizalmát. Ezért, ha a cégének vannak érdemei, mindenképpen beszéljen róluk az alagsorban. További előnye, hogy mivel a lábléc minden oldalon megjelenik, a díjakkal kapcsolatos információk biztosan észrevehetők lesznek. Ha cége nem rendelkezik tanúsítvánnyal vagy díjjal, de Ön partnere a Google-nak, a Samsungnak, az Asusnak vagy más nagy és tekintélyes cégnek, akkor ezt feltétlenül jelezze a láblécben.

Oldaltérkép

A lábléc-webhelytérkép a webhely azon oldalainak listája, amelyek segítenek a keresési algoritmusnak az oldalak indexelésében. Vagy a térkép URL-ek formájában is megjelenhet, amelyeket a keresőmotor korábban nem észlelt a webhely feltérképezésekor.

A lábléc segít indexelni a webhely abszolút összes oldalát a Webhelytérkép használatával, ami nagyon jó a népszerűsítéshez.

Adatvédelmi szabályzat/Használati feltételek

Az adatvédelmi szabályzattal kapcsolatos információkat gyakran a webhely láblécében teszik közzé. Ez leírja, hogyan gyűjtik, tárolják az információkat és hogyan használhatók fel. Egyes webhelyek esetében a vonatkozó törvények előírják az adatvédelmi irányelvek közzétételét.

Ha az oldal kiskorúak számára tiltott tartalmat tartalmaz, akkor a használati feltételek oldalára mutató hivatkozás szükséges. Például, ha a webhely alkoholt vagy dohányt árul. A használati feltételek oldalára lépve a fogyasztónak el kell olvasnia azokat, és meg kell erősítenie, hogy felnőtt. Ez mentesíti az oldal tulajdonosát a felelősség alól, ha a felhasználó 18 év alatti.

Forma Visszacsatolás

Ne hagyja ki a lehetőséget, hogy megtartsa ügyfelét azzal, hogy felkéri őt egy visszajelzési űrlap kitöltésére.

A visszajelzési űrlap segít a felhasználót ügyfélvé alakítani. Segít a látogatóknak abban, hogy végső döntést hozzanak az együttműködésről, ha a felhasználó korábban nem volt biztos abban, hogy készen áll rá. Ugyanakkor a visszajelzési űrlap különféle cselekvésre ösztönzőket tartalmazhat. Például a „Van még kérdés? Kérdezze meg őket” nagyon jól működik. Különösen akkor, ha a felhasználó nem találta meg a választ a kérdésére. Egy visszajelzési űrlap elhelyezése a láblécben nagy és merész plusz a webhelyek átalakításához.

Természetesen a hívási űrlapnak nem csak a láblécben kell lennie, hanem a főoldalon is, hogy ne hagyja ki az ügyfelet abban a pillanatban, amikor egy műveletet szeretne végrehajtani. Hogy kell kinéznie kezdőlap olvassa el az oldalt.

Céges elérhetőségek

Általános szabály, hogy egy teljes szakaszt a vállalati kapcsolatoknak szentelnek, amelyek hivatkozása a menüben található. De annak érdekében, hogy a felhasználó könnyebben navigálhasson az oldalon, és ne kényszerítse arra, hogy felfelé görgessen az oldalon, amikor közelebb van a végéhez, a névjegyeket is el kell helyezni a láblécben. Ebben az esetben az érintkezőket mikro jelölésekbe kell helyezni úgy, hogy kereső rendszer jobban megértette a cég kapcsolatait.

Az elérhetőségeken kívül a telefonszámok és Email, amelyeket gyakran a fejlécben helyeznek el, megadhatja az iroda vagy offline üzlet fizikai helyének címét, valamint feltüntetheti a teljes levelezési cím, ha a cég tevékenysége megköveteli a levélváltást szabványos postai úton.

Hasznos linkek az oldalra

A webhely oldalaira mutató navigációs hivatkozások segítenek a látogatónak megtalálni az őt érdeklő elemeket, ha korábban nem találta meg a főmenüben. Ezenkívül a hasonló hivatkozások másolatai lehetnek a „Szállítás”, „Fizetés”, „A cégről” stb. oldalaknak.

Most az a tendencia, hogy egy terjedelmes láblécet fejlesztenek ki, amely egy további menüvé válik, amely nemcsak linkeket, hanem rövid tartalmat is tartalmaz. Ezt a megközelítést általában olyan esetekben alkalmazzák, amikor az ilyen tartalom elhelyezése az oldalakon nem megfelelő a főmondat hangsúlyozása miatt. Például egy céggel kapcsolatos információ ritkán kerül fel egy webáruház oldalára, mivel az kevésbé érdekes a felhasználó számára, mint az általa értékesített termék. Ilyen esetekben a pincében röviden elhelyezheti a céggel kapcsolatos információkat. Ugyanakkor fontos figyelni a mennyiségét, hogy ne ismétlődjön meg egy nagy szövegrész, és ne hozzon létre teljes ismétlődő oldalakat a webhelyen, mivel a lábléc minden oldalon azonos.

Ikonok közösségi hálózatok

Az oldal alja remek hely a közösségi média ikonjainak elhelyezésére. Hagyományosan az oldal ezen részére helyezik el, hogy a felhasználó figyelmét a webhelyen tartsák, és ne hagyják gyorsan elhagyni azt. Ezért, ha egy felhasználó érdeklődik a közösségi hálózatok közösségei iránt, általában lemegy a webhely végére, hogy belépjen azokra.

Bejelentkezési link Személyes terület

Nem minden webhely látogatója ügyfél. Az oldalt partnerek és munkatársak látogathatják. Ezért kiváló megoldás, ha a láblécben elhelyez egy linket a személyes fiók megadásához.

Hírlevél feliratkozási űrlap

A hírlevélre való feliratkozás nem mindig a fő követelmény a webhely felhasználóitól. De az ügyfelek megtartásának további módja lehet azáltal, hogy folyamatosan tájékoztatja őket naprakész információkkal. Ilyen esetekben a láblécben elhelyezhet egy előfizetési űrlapot. Biztos lehet benne, hogy biztosan megragadja az összes iránta érdeklődő felhasználót.

Webhely keresési űrlap

Webáruházak és nagy portálok esetében logikus, hogy a keresőt az oldal tetején, a legláthatóbb helyen helyezzük el. Néhány webhely esetében azonban ez nem releváns.

De itt készülj fel arra, hogy a felhasználók nem szoktak keresési űrlapot keresni a láblécben. Ezért el kell különíteni és kiemelni, hogy felhívja rá a figyelmet. Ilyen elem a pincében azonban ritkán található hazai oldalakon. Leggyakrabban amerikai forrásokon található.

A cégről

Kulcskérdések

A lábléc nagyszerű hely a linkblokkok elhelyezésére kiemelt oldallekérdezések esetén, hogy növelje a webhely relevanciáját a keresőmotor számára.

De itt nem szabad visszaélni a kulcsfontosságú előfordulások számával - keresőmotor Google rendszer nem növeli számukra a SEO promóció hatékonyságát. Ezért egy vagy két kulcsszó elég ahhoz, hogy a kulcsszavak harmonikusan nézzenek ki a teljes tartalommal.

Friss blogfrissítések

Ha azért ír blogot, hogy felhívja a figyelmet a cégére, akkor a frissített tartalommal kapcsolatos információk az oldal alján jeleníthetők meg. De csak abban az esetben ajánlott ilyen blokkot elhelyezni a webhely ezen részében, ha a blog csak egy kiegészítő eszköz, és csak a célközönség egy kis csoportját fogja érdekelni.

Ugyanezen elv alapján bármilyen információt elhelyezhet egy ilyen blokkban. Például hasznos cikkekre mutató hivatkozások.

A lábléc megtervezésekor nagyon fontos, hogy lehetőséget adjunk a felhasználónak a görgetésre. Nagyon gyakran sok webhely súlyos használati hibát tartalmaz - ajaxot használnak, amely folyamatosan betölti a tartalmat, amikor lefelé görget az oldalon. Ennek eredményeként a felhasználó egyszerűen nem éri el a láblécet, és az használhatatlanná válik. Ez a technológia hatékony, mivel az embernek nem kell újratöltenie az oldalakat, hogy többet tudjon meg, hanem lehetőséget kell adni a személynek, hogy önállóan döntse el, szeretné-e tovább nézni a tartalmat. Ezért a lábléc megtervezésekor és egyben az Ajax tartalombetöltés használatakor kattintással töltsön be, hogy a fogyasztó az oldal végére érve megtalálja az őt érdeklő információkat anélkül, hogy az oldalt visszatenné a tetejére.

Felhívás cselekvésre

Működjünk együtt! Írj nekünk! Hagyja meg telefonszámát és 5 percen belül visszahívjuk! Egy egyszerű, de fülbemászó cselekvésre ösztönzés, amely a láblécben elhelyezett kapcsolatfelvételi űrlappal vagy hírlevélűrlappal párosul, segít növelni a webhelyek konverzióit. Ne felejtse el, hogy a hívásoknak világosnak és világosnak kell lenniük, hogy a felhasználónak ne kelljen azon gondolkodnia, hogyan tegye meg a neki javasolt műveletet.

Térkép

A láblécben elhelyezett térkép segítségével növelheti a látogatók bizalmát cége iránt. Ezenkívül sokkal könnyebbé teszi a felhasználók életét Google térkép akik gyorsan meg akarják találni, hol található az irodája.

Helyezzen el egy munkatérképet, amely kényelmes lesz a felhasználók számára. Nincs értelme Yandex térképet közzétenni, ha az oldal ukrán felhasználókat céloz meg, mivel a szolgáltatás Ukrajna számára le van tiltva, és egy ilyen térkép betöltésekor üresség lesz. Ami, látod, nem szilárd.

Az, hogy a lábléchez melyik elemeket érdemes legjobban kiválasztani, a tevékenységed típusától, a webhely típusától, annak kialakításától, tartalmától és célközönségétől függ. A célközönség érdeklődési körének elemzése és egy hozzáértő webhelyszerkezet segít megválaszolni ezt a kérdést.

Mi nem lehet a láblécben?

Annak ellenére, hogy a webhely lábléce nem a webhely fő fókuszpontja, amelyre minden figyelem irányul, ez nem ok arra, hogy a láblécből szemetet hozzon létre. Ezért szabaduljon meg a felesleges, felesleges és nem értékes linkektől, hagyja meg a leghasznosabbakat és a legfontosabbakat. Hogyan lehet megérteni, hogy nincs szükség linkekre? Egyszerű: ha nem illenek logikusan a navigációhoz vagy a kategóriákhoz, akkor valószínűleg meg tudod csinálni nélkülük.

Ne vigye túlzásba a lábléc SEO-ját. Ne felejtse el, hogy a kereső azonnal látni fogja a black hat SEO-t, és megbüntet érte.

És ne félj a szabad helytől. A túl sok link rontja a webhely benyomását, és megnehezíti a felhasználó számára, hogy megtalálja az őt érdeklő információt, ami elégedetlenséghez vezet. És ha a felhasználó nem elégedett, akkor a versenytársakhoz megy anélkül, hogy ezen gondolkodna.

Hogyan lehet hozzáértően megtervezni a weboldal láblécet? 5 értékes ajánlás

A weboldal láblécének kialakítását és felépítését úgy kell átgondolni, hogy az érdekelje és vonzza az online felhasználót. Hogyan kell ezt megtenni - olvassa el az 5 értékes ajánlást.

Használjon kreatív megoldásokat

A lábléc fő hátterének el kell térnie a webhely általános hátterétől, hogy felhívja magára a figyelmet. Ugyanakkor meg kell felelnie a projekt tervezési ötletének, és harmonikusan kell kombinálnia vele.

A webhely láblécének hatékony kiemeléséhez használhat élénkebb színeket, vagy akár tematikus képeket is, amelyek kiemelik a webhely irányát.

Ha úgy dönt, hogy kreatív lesz, ügyeljen arra, hogy a lábléc kialakítását és a weboldal tervezését olyan elemek segítségével kösse össze, amelyek azonos színűek lesznek. Tegyen logikus átmenetet az utolsó előtti és az utolsó blokk között, de ne felejtse el a lábléc ékezeteit. A legfontosabb dolog a megfelelő színek kiválasztása, hogy stílusosnak tűnjön. Ebből a cikkből megtudhatja, hogyan válassza ki a megfelelő színeket egy webhelyhez.

Tegye közzé animációját

Az animációs elemeket mindig érdekes nézni. Ezenkívül rájátszanak az ember érzelmeire, tudat alatt cselekvésre késztetve. Még egy kicsi és szerény animáció mellett is átalakul a lábléc kialakítása.

Válasszon olvasható betűtípusokat

Kerülje a kis betűtípusokat, még akkor is, ha túl sok az információ. Jobb, ha kizár néhány olyan hivatkozást, amelyekre már nincs szükség. Ne kényszerítse a felhasználót arra, hogy figyelmesen nézze meg a szavakat, hogy elolvassa azokat. És ügyeljen arra, hogy a háttérrel kontrasztos színeket válasszon, hogy a kis betűk jól kiemelkedjenek, így könnyebben olvashatóak.

Használjon több helyet

Minél több szabad hely a lábléc területén, annál nagyobb a koncentráció a benne található információkra. A tematikus címsorok és a logikai blokkokkal ellátott alcímek megkönnyítik a lábléc használatát és az abban található információkeresést.

A webdesign ezen törvénye az egész webhelyre vonatkozik. A szabad hely nagy plusz lesz a használhatóság szempontjából - kényelmesebb a felhasználó számára az információk észlelése.

Szervezett, korrekt és ügyes elhelyezés Hasznos Linkek segít abban, hogy az információkat helyesen továbbítsa ügyfele számára. Az ügyfél pedig gyorsan megtalálhatja azt, ami érdekli, anélkül, hogy sok, számára haszontalan linken keresztül ásna. És ne feledkezz meg a tiédről sem mobil felhasználók. Ügyeljen arra, hogy optimalizálja a láblécet, hogy minden mobileszközön megfelelően jelenjen meg.

Tegyen közzé cselekvésre ösztönzést

A lábléc az oldal utolsó akkordja, melynek célja, hogy a felhasználó minél tovább az oldalon maradjon. A cselekvésre való felhívás egy újabb lehetőség a webhely konverziójának növelésére. Ez nem csak egy ideig az oldalon tartja a látogatót, hanem klienssé is teszi. A láblécben található CTA egy klasszikus, amelyhez a legnépszerűbb és sikeres webhelyek folyamodnak.

Miben különbözik egy webáruház lábléce más típusú oldalak láblécétől?

Az oldal láblécében található információk tartalma és mennyisége függ a cég tevékenységétől, szolgáltatásainak körétől, a menü felépítésétől és a célközönség igényeitől. Ezért a céloldal vagy névjegykártya-oldal lábléce tartalmazhat kis mennyiségű információt és linket: névjegyeket, cselekvésre ösztönzést és semmi mást. De ez nem elég egy webáruháznak.

Az online áruház főmenüje áruk értékesítése céljából kategóriákra és alkategóriákra mutató hivatkozásokat tartalmaz. Nem logikus, hogy a cég szolgáltatásaival kapcsolatos többi információt a főmenübe helyezzük. Ezért a láblécbe kerül. Javasoljuk, hogy tekintsen meg példákat az online boltok kialakítására, hogy megtanulja, hogyan kell helyesen megtervezni a webhely láblécét.

Konkrét információk itt tehetők fel: információk partnereknek és törzsvásárlóknak, kb további szolgáltatások céggel (például a hitelfeltételekkel, részletfizetéssel, szállítással kapcsolatos információk), a megoldásokért a vállalati részleg oldalára mutató hivatkozások egyéni kérdéseket(különösen pénzügyi kérdések, áruk visszaküldésével kapcsolatos kérdések, viták megoldása stb.). Itt linkeket adhat hozzá az alábbi oldalakra:

• Céges állások;
• Menedzser-tanácsadók elérhetőségei az online áruház által értékesített konkrét berendezésekkel kapcsolatban;
• Tájékoztatás a törzsvásárlói kedvezményekről, hűségprogramról;
• Fizetési lehetőségekre vonatkozó információk jogi személyek és magánszemélyek számára;
• A szolgáltató központok címei;
• Tájékoztatás a partnerek és beszállítók együttműködéséről;
• Link a GYIK-hez;
• Tájékoztatás ajándékutalványok vásárlásával kapcsolatban;
• Információk a cégről, az offline és online áruház nyitvatartási ideje és még sok más.

Összefoglalva: egy webáruház lábléce csak a tartalmában és a hasznos linkek számában tér el. Ellenkező esetben a szerkezetre és a kialakításra vonatkozó követelmények megegyeznek a bármely típusú webhely láblécére vonatkozó követelményekkel. A lényeg az, hogy az alagsor látható legyen a látogató számára, és kényelmesen használható legyen.

Lenyűgöző példák a webhely láblécének kialakítására

Nézzünk példákat a különféle tevékenységek, kialakítások és tartalom webhely lábléceire. Keressen ötleteket webhelye vonzó és helyes láblécének kialakításához :-)

Példa az 1. számú webhely láblécére

Példa egy láblécre, amely bemutatja, hogy ebben a blokkban a minimalizmus hogyan segíti a figyelmet a fő dologra összpontosítani: a vállalati logóra (márkára) és a közösségi hálózat ikonjaira. Nincs semmi felesleges, stílusosnak és gyönyörűnek tűnik. A fekete-fehér kombináció klasszikus. A klasszikusok pedig soha nem fognak kimenni a divatból.

2. példa

A nagyszámú hasznos link + egy nagy negatív tér teszi a dolgát: átfogó tájékoztatást nyújtanak a cég szolgáltatásairól, és segítik a felhasználót, hogy gyorsan megtalálja, ami érdekli. A lábléc két blokkra van osztva: fontos információk, ahol a hivatkozásokat tartalmazó oszlopok fejlécei pirossal vannak kiemelve, valamint további információk. Egyszerű, de hatékony megoldás, ha nagyszámú linket kell elhelyezni az oldal végén.

3. példa

A lábléc blokkként működik visszajelzési űrlappal. Egy kis cselekvésre ösztönzés, a letisztult forma és az eredeti dizájn felkeltik a figyelmet és cselekvésre ösztönzik.

4. számú példa

6 fő link a További információ, ikonok a közösségi hálózati közösségekbe való belépéshez – semmi újdonság. De ebben az esetben a lábléc kiemelése a fizetési módokra vonatkozó információ. A vállalat nagyon erőteljes lépést tesz azáltal, hogy bizalmat kelt az ügyfélben, és növeli az iránta való lojalitását. A bankrendszerek logói a láblécben megkönnyítik az oldal használatát és a fizetést. Az ügyfél számára kényelmes fizetési módok további előnyt jelentenek a webhelykonverzió növelésében.

5. számú példa

Ebben a példában a lábléc a kliens utolsó szakasza - a művelete. Ennek érdekében kidolgozásra kerültek a szükséges marketing és technikai elemek: van felhívás, egy gomb a személyes adatok kitöltésére, valamint egy átmenet funkció a cég prezentációjának megtekintéséhez. Kiegészítő információként a közösségi hálózatokhoz való aktív linkeket és a cég elérhetőségeit közöljük, ha az ügyfél számára kényelmesebb önállóan felvenni a kapcsolatot, vagy személyesen felkeresni az irodát.

6. számú példa

Ebben a lábléc-példában a hangsúly a vállalattal fennálló kapcsolatokon van. Kiegészítő eszköz Ahhoz, hogy a látogató az oldalon maradjon, van egy aktív gomb a rövid leírás letöltéséhez. Az eredeti dizájn és a sok szabad háttér megtartja és a fő dologra összpontosítja a figyelmet.

7. számú példa

Példa egy online áruház tipikus láblécére, ahol nagyszámú hivatkozás található a webhely különböző oldalaira. Itt a felhasználó további információkat találhat a cégről, üzletekről és szolgáltatásokról. Köszönet helyes szerkezet A láblécben számos szervesnek tűnő link található – itt könnyen megtalálhatja, amire szüksége van. Az ilyen ötleteket a SEO-nak előre ki kell dolgoznia, és bele kell foglalnia az oldal létrehozásának feladatkörébe. Ez azért történik, hogy ne maradjon le néhány fontos információ azáltal, hogy eljuttatja azokat a végső fogyasztókhoz.

Tudod már, milyen lesz a weboldalad lábléce?

A webhely láblécének minden előnyét és értékét figyelembe véve aligha nevezhető haszontalannak. És bár ez a blokk befejezi az oldalt, és a legalsó részen található, ritkán marad észrevétlen. Ezért minden weboldal tulajdonosnak különös figyelmet kell fordítania a lábléc fejlesztésére. Gondolja át, milyen linkeket kell elhelyeznie ebbe a blokkba, milyen felépítést és dizájnt érdemes választani, hogy az egész lábléc ne csak ergonomikus és stílusos legyen, hanem előnyökkel is járjon – rajta tartsa az oldal látogatóját. Számos példát mutattunk a népszerű webhelyekre, és számos fontos javaslatot tettünk. Mindössze annyit kell tennie, hogy az üzletre és a célközönségre összpontosítva saját, hatékony alagsort alakít ki az oldal számára. Ha pedig projektje éppen fejlesztés alatt áll, javasoljuk, hogy olvassa el a cikket arról, milyennek kell lennie egy hatékony üzleti webhelynek.

Először is megmutatom a mai bejegyzés eredményét. A lábléc kicsi lesz, és csak egy sor szöveget tartalmaz

Problémák a lábléc megvalósításával

Ha a lábléc az oldal alja, akkor mi a probléma a megvalósítással? Végül is egyszerűen elkészítheti főtáblázatunk folytatását, és minden szükséges információt beilleszthet abba! Igen, ez igaz, ez a megközelítés a webhely-megvalósítások 99%-ában alkalmazható, de van egy apró probléma, amely az esetek 1%-ában fordul elő.

Itt van a böngésző sematikus diagramja

Ezen az ábrán a lábléc a fő táblázat végéhez van kötve, és ott lesz elhelyezve, ahol szükséges, ha a webhely fő területe elég magas ahhoz, hogy függőleges görgetést hozzon létre a böngészőben.

De mi történik, ha a webhely magassága nem olyan magas, hogy függőleges tekercset hozzon létre?

Amint látja, szomorú képnek bizonyul. A lábléc ebben a helyzetben nem az oldal alja, hanem a közepe. Hogyan lehet ezt kijavítani?

Két lehetőség van:

• Ne törődj azzal, hogy a lábléc középen jelenik meg, mert az esetek 99%-ában a webhelynek elegendő magassága van ahhoz, hogy a lábléc ott jelenjen meg, ahol szükséges.
• Használjon más módot a lábléc megvalósításához

Ma megvizsgáljuk a második lehetőséget.A lábléc megvalósításának számos módja van, de van egy dolog! Az általam kipróbált módszerek mindegyike nem működik, feltéve, hogy a webhely fő területe rendelkezik a stílussal. De ez nem olyan ijesztő

Lábléc megvalósítási elmélet

mit kínálok? Javaslom a jquery használatát. Használatával megtudhatjuk a böngésző, vagy bármely más objektum magasságát az oldalunkon. Mire való? Mivel a lábléc egy abszolút pozicionált objektum lesz (pozíció:abszolút; stílus), a munkaterület magassága vagy a főtábla magassága lehetővé teszi számunkra, hogy megtudjuk, mennyit mozgassuk a lábléc területét a tetején ( csúcsstílus)!

Azt hiszem, világos, hogyan fogjuk megvalósítani a pincét

Ami a Java script funkció működését illeti. Meg kell határoznunk, hogy milyen magasságot (böngésző magasságát vagy fő táblázat magasságát) használjuk a lábléc eltolásához. Itt minden egyszerű, ellenőrizzük, hogy a táblázat vagy a böngészőablak van-e magasabban, ha böngészőablak, akkor a magasságát használjuk. Ha fordítva, akkor a főtábla magasságát használjuk.

Lábléc létrehozása >A táblázat stílusának szerkesztése

Először is módosítanunk kell a főasztalunk stílusát.

Amint látja, a fő táblázatunk és a böngésző vége közötti tér elhanyagolható. Mivel a lábléc abszolút pozícionált lesz, semmiképpen nem fogja kitágítani a főtábla és az oldal vége közötti teret! Segítenünk kell újdonságok bevezetésével css elem fő területünk stílusában.

Nyissa meg az egyéni style.css fájlt, keresse meg az osztálytáblázatot (.table(...)), és szerkessze így

asztal
{
pozíció:abszolút;
felső:0px;
bal:50%;
margó-bal: -390px;
padding-bottom:50px;
z-index: 1;
}

Hozzáadtam a padding-bottom:50px; stílust, vagyis a táblázat vége és a böngészőablak vége közötti helyet 50 pixel méretűre alakítottam. A lábléchez, amire gondolok (képernyőkép az eredményről a bejegyzés elején), ez a hely bőven elég lesz, ha az enyémnél sokkal nagyobb lábléc van a fejedben, akkor rakj be annyi pixelt, amennyit csak akarsz!

>A fő sablon szerkesztése

Nyissa meg az egyéni index.html fájlt és előtte

helyezze be a láblécünket

Üzemeltető: RS-BLOG v2 | A blog anyagának másolásakor ne felejtsen el elhelyezni egy hivatkozást a forrásra - rsblog.ru

Hadd magyarázzam el néhány itt használt stílust.

• display:none; - Láblécünk csak a teljes oldal betöltése után jelenik meg a felhasználó számára, addig a pillanatig a lábléc nem lesz látható!
• bal:50%;margó-bal:-390px; - Ez a két stílus lehetővé teszi, hogy a láblécet pontosan a böngésző közepére helyezze.
• text-align:center; - lehetővé teszi, hogy a blokkban lévő szöveget középre helyezze.

>A jquery és a js.js összekapcsolása

Először le kell töltenie. Menjen erre a linkre, és kattintson ide

A kód megnyílik, jelölje ki az összeset, és másolja be a jegyzettömbbe. A Jegyzettömbben kattintson a Fájl -> Mentés másként elemre

Adja meg a fájl nevét (jquery.js) .js karakterlánccal

és mentse el az egyéni sablonok mappájába. Most megvan a szükséges fájl a motor mappájában. Érdemes egy js.js fájlt is létrehozni (egyelőre üres fájl). Hamarosan írunk egy függvényt a lábléc megjelenítéséhez. Így néz ki most a sablonok mappa tartalma:

Ha az emlékezetem nem csal, felvettem egy videó leckét, ahol a jquery-t kicsit másképp kapcsoltam be, ha érdekel megnézheted

Most már csak a js fájlokat kell csatlakoztatni a blogunkhoz. Ehhez nyissa meg az egyéni index.html-t és a sor után