A konverziós arányt számos tényező befolyásolja, beleértve a használhatóságot és a látványtervezést. A webhely lábléce (lábléc vagy „lábléc”) annak ellenére, hogy az oldal alján található, és szinte mindig nem látható az első képernyőn, szintén nagy jelentőséggel bír.

Az online áruház létrehozásakor nem kevesebb figyelmet kell fordítania rá, mint a többi elemre, és a lehető legértelmesebbé kell tennie.

Dekoráció

A láblécet ugyanolyan stílusban kell kialakítani, mint a teljes online áruház webhelyét. Sőt, még ha az egész webáruház minimalista stílusban van is kialakítva, a láblécbe gyönyörű képeket vagy animációt illeszthetsz, mert az nem vonja el a figyelmet. Eredetileg megtervezheti, hogy pozitív érzelmeket váltson ki a látogatókban.

Webhely navigáció

A láblécben alternatív webhelynavigációt is elhelyezhet. Ez különösen kényelmes a hosszú oldalakat tartalmazó webhelyeken. A látogató a végére görget, és anélkül, hogy visszamenne, a katalógus szükséges részeihez léphet. Részletesebbé teheted, mint egy webáruház fejlécében, ott van elég hely.

Linkek oldalakra

A lábléc kiválóan alkalmas hasznos, de nem túl jelentős információk közzétételére. Például, ha a felső menü egy online áruház katalógusára vagy kategóriáira mutató hivatkozásokat tartalmaz, akkor a láblécben blogra mutató hivatkozásokat vagy hasznos cikkeket adhat hozzá.

Elérhetőség

Leggyakrabban elérhetőségeket, közösségi oldalakra mutató hivatkozásokat, sőt néha az online áruház (vagy átvételi pont) helyét jelölő térképet is hozzáadják a lábléchez. Az ilyen információk növelik a látogatók bizalmát.

A webhely láblécébe a vásárlót segítő információkat is hozzáadhat. Ha az oldal aljára görget, és nem találja meg, amit keresett, nagy valószínűséggel bezárja az oldalt. Ebben az esetben a láblécben hozzáadhat egy „helyszíni keresés” vagy „Híváskérés” gombot.

Ne adjon meg felesleges információkat a webhely láblécében - például jobb, ha meghagyja a cég adatait (TIN, OGRN stb.) a „Cégről” vagy a „Kapcsolat” oldalon.

Sziasztok kedves barátaim és blogvendégeink! Ma egy webhely létrehozásáról fogunk beszélni, vagy inkább annak egyik összetevőjéről - Site Footer, tudományosan Footer HTML vagy egyszerűen lábléc. Annak ellenére, hogy ez a legkevésbé látható része az oldalnak, és kevesen figyelnek rá, első pillantásra így tűnik és sokan gondolják. Emiatt pedig sokan gyakran elhanyagolják az oldal láblécének kialakítását, ami alapvetően rossz és helytelen!

Mivel a webhely lábléce ugyanolyan fontos része, mint a fejléc és a törzs, vagy helyesebben a fejléc és a törzs. Tehát ma térjünk rá a webhely lábléceinek megtervezésére, ahogy az egy jó webhelykészítőhöz illik, és megpróbálok ebben segíteni!

Szóval kezdjük a legelejéről...

Mi az a webhely lábléce vagy lábléc HTML?

Az oldal lábléce a legalsó része, ahová a webmester általában elhelyezi a főoldalra mutató linkeket, itt is lehet egy menü a teljes oldalról, oldalnavigáció, a szerzőről, a projektről, az oldalról, elérhetőségről információk, átmenetek a gyakran ismételt kérdéseket tartalmazó oldalakra, linkek közösségi oldalakra és azok gombjaira, informátorok és számlálók, és mi minden, az oldal láblécében található. Minden információ, amit a webmester maga találhat ki!

És aki azt hiszi, hogy kevés látogató érkezik az oldal pincéjébe, az teljesen téved!

Ez alapján pedig nem kevesebb figyelmet kell fordítani az oldal láblécére, mint annak első ránézésre jobban látható részeire, mint például az oldal törzsére és fejlécére. Bár ismétlem magam, szerintem nem hiába. Így próbálom elmagyarázni Önnek a webhely láblécének megfelelő megtervezésének jelentőségét és fontosságát!

Hogyan készítsünk helyesen egy weboldal láblécet?

Nincs benne semmi bonyolult! Most bemutatok Önöknek többféle, egészen szép és látványos pincét a weboldalaikhoz. És ezek közül kiválaszthatod a legmegfelelőbbet, a cikk végén pedig lesz egy link, ahonnan az összes általam bemutatott weboldal láblécet letöltheted és természetesen felhasználhatod új weboldalaid elkészítésekor, vagy lecserélheted a meglévőket. olyanokat, amelyekben az én vonzóbbak lábléc html.

Ez az oldal első lábléce:

Ez a webhely második lábléce:

Ez a webhely harmadik lábléce:

Ez a webhely negyedik lábléce:

Ez az oldal ötödik lábléce:

Ez a webhely hatodik lábléce:

Nos, hogy tetszik ez a lábléc HTML? Tetszett legalább egy közülük? Remélem igen?!

Ha tetszettek, akkor azt javaslom, hogy most töltsd le teljesen ingyenesen és használd fel saját céljaidra!

A letöltött mappa hat lábléc HTML-fájlt tartalmaz. És csak annyit kell tennie, hogy kijavítja webhelye tartalmát egy szövegszerkesztőben, és kész!

Beszélj egy szövegszerkesztőről! Én például csak azt használom, és azt tanácsolom neked. Mert ez a legkényelmesebb és legbiztonságosabb!

Most ennyi. Köszönöm a figyelmet!

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 a webhely elrendezéséről szóló első cikkekben () a webmastering néhány alapvető fogalmát tárgyalták, amelyek 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. A helyes lábléc viselkedés kis mennyiségű információ esetén az oldalon és nagy felhasználói képernyő esetén a következő:

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 Style.css CSS-stílusfájlon fogunk változtatni, hanem az Index.html-en is, amely a HTML kódot tartalmazza és a Div blokkokat alkotja. 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

És a következő CSS-tulajdonságok kerültek a Style.css fájlba:

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%; )

A megjelenést ez egyelőre semmilyen módon nem fogja befolyásolni, de most már a főblog a képernyő teljes magasságába 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 ezáltal beilleszkedjen a böngésző képernyőjébe (most eltávolíthatjuk a CSS tulajdonság határát: tömör 3px fekete a maket szabályból, hogy a szegély vastagsága ne akadályozza meg az egész elrendezés, beleértve a láblécet is, a képernyő magasságába való illeszkedéstől):

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 megküzdünk az Internet Explorerrel

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 megegyezni beállítani, és a vízszintes igazítás ugyanúgy elvégezhető, mint ahogy azt a teljes elrendezésnél tettük blokk elrendezésnél.

Í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. A maket CSS-tulajdonságainak listája előtt be kell illesztenie a következő kombinációt:

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

Ez a szabály csak az Internet Explorer 6 böngészőre vonatkozik, mások nem veszik figyelembe és nem hajtják végre.

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 div tag” című videót is:

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 jelenleg a nyitóoldal új kialakításán vagy akár újratervezésén dolgozik, akkor a projekt egyik olyan területe, amelyet nem szabad figyelmen kívül hagyni, a lábléc.

A szinte tökéletes kifejlesztésének vágya gyakran az egész folyamatot bonyolítja. A tervezésen való munka olyan izgalmassá válhat, hogy gyorsan elfelejti az oldal néhány fontos, de kevéssé használt részét.

Már halljuk, ahogy mondod: „Kit érdekel néhány lábléc?! Amúgy is kevesen görgetnek a végére.” De ebben nem lennénk olyan biztosak.

Természetesen előnyben kell részesíteni a fejléc szekciót és a hajtási vonal feletti dizájnt (Above The Fold), mert itt töltik idejük nagy részét a látogatók. Azonban az oldal alja, különösen a céloldal lábléce is figyelmet érdemel.

Egy érdekes esettanulmányban a Chartbeat webhelytartalom-elemző cég azt találta, hogy az oldalelköteleződés 65%-a közvetlenül a hajtás alatt történik.

Tehát az emberek továbbra is görgetni fognak! Ha pedig nem optimalizálja a céloldal alsó felét, beleértve a láblécet, akkor előfordulhat, hogy olyan egyedi lehetőségeket veszít el, mint például:

• További fontos információk megadása a márkáról és a termékről.
• Továbbfejlesztett felhasználói élmény és navigáció.
• Megnövekedett konverziós arány.

Azon felhasználók számára, akik egy kicsit több időt szeretnének tölteni a céloldalon, és egészen az oldal aljáig görgetni szeretnének, hogy megtalálják a számukra szükséges információkat, a jól megtervezett lábléc minden változást jelent.

Ebben a bejegyzésben a láblécek létrehozásának és használatának minden részletét bemutatjuk, függetlenül a webhely típusától. Kezdjük a legelejéről.

Mi az a lábléc?

A lábléc a webhely vagy a céloldal legalsó része. Mindenféle formában és méretben kaphatók. Egyes webhelyek láblécterületei kicsik, míg mások nagyon nagyok, beleértve több oszlopot és láblécet is. Egyes webhelyeknek egyáltalán nincs lábléce, míg mások egy speciális funkciót (végtelen görgetés) integrálnak. Ez azt jelenti, hogy nincs lábléc az oldal alján, nincs vége az oldalnak, mint olyannak. Ezzel a témával ma nem foglalkozunk.

A láblécek általában elérhetőségi adatokat, keresőmezőt, valamint a fontos oldalakra mutató navigációs hivatkozásokat és a közösségi hálózat profilikonjait tartalmazzák. A lábléc más releváns információk megadására is használható a vállalkozásról, például a vállalat küldetéséről, az iroda helyére vonatkozó információkról (térkép), a webhely statisztikáiról, a Social Proofról, az e-mailes hírlevél feliratkozási űrlapról, a fiók regisztrációs vagy bejelentkezési adatairól, egyéb típusokról. (Cselekvésre ösztönzés, CTA) stb.

Miért van szüksége a lábléctervezésre?

A lábléc nem feltétlenül szükséges, de ennek hiánya frusztrációt és frusztrációt okozhat a látogatókban, akik konkrét információkat keresnek egy termékről vagy vállalkozásáról.

A lábléc rész ideális a szerzői jogi adatokhoz és a kapcsolattartási adatokhoz, feltételekhez, rendelésekhez, adatvédelmi szabályzathoz, sütikkel kapcsolatos megjegyzésekhez stb. Különösen népszerű a közösségi hálózatokon lévő csoportokra mutató linkek közzététele – a legtöbben már azt várják, hogy a láblécben találják meg.

Amellett, hogy javítja a webhely navigációs folyamatát és a felhasználói élményt, a stratégiai lábléc-kialakítás bizonyítottan hatással van a konverziókra.

Példák gyönyörű láblécekre

Nézzünk meg néhány példát a láblécekre, amelyek ösztönözhetik Önt saját ötletei kidolgozására.

A Bork márkájú A803 AirEngine légtisztítót árusító nyitóoldal tetszetős lábléc-kialakítással rendelkezik, amely navigációs linkeket tartalmaz (és ezek két különböző stílusban készültek: kattintható képek formájában és listákat tartalmazó oszlopok formájában), hírlevél feliratkozási űrlapot és a közösségi média ikonjai.

Az illuzionista Igor Zavyalov oldala is nagyon jól néz ki. A design elérhetőségi adatokból, közösségi profilokra mutató hivatkozásokból és egy egyszerű, vonzó kapcsolatfelvételi űrlapból áll.

A Bitrix24 nyitóoldalának lábléce előtt van egy „lábléc előtti” rész, amely a konverziót célozza (a potenciális ügyfelet felkérik, hogy hagyja meg kapcsolatait a menedzserekkel való kommunikációhoz). Ezután következik a fő lábléc terület térképpel, navigációs hivatkozásokkal, visszahívási konverziós linkkel és telefonszámmal.

A strip-lenta.com webhelyen van egy eredeti lábléc, amelyen egy boríték található, amely kapcsolatokat és egy kapcsolatfelvételi űrlapot tartalmaz:

A láblécet megelőzi a lábléc előtti zóna közösségi igazolással - híres ügyfelek logói:

De nem álltak meg itt! Van egy lábléc utáni zóna is, amely egy konverziós művelet végrehajtását foglalja magában:

Végezetül nézzük meg az Alfa-Bank személyzeti toborzásra készült nyitóoldalának szokatlan végét. Maga az oldal úgy van kialakítva, hogy görgetés közben a hős-pályázó módosulását figyeljük meg: mozog, átöltözik, magabiztosabbá és sikeresebbé válik. Az oldal végén egy táblával áll, amelyre kattintva az aktuális üresedéseket tartalmazó oldalra jut. A láblécben nincs más, de a nyitóoldal fő funkciója teljesül - a konverzió átmenet formájában, hogy megismerkedjen az információkkal, majd elküldje önéletrajzát.

Nos, úgy gondoljuk, ez elég táplálék az ihlethez. Most pedig vessünk egy pillantást 16 dologra, amelyeket nem szabad figyelmen kívül hagyni a lábléc megtervezésekor.

Alapvető lábléc elemek

1. Szerzői jogi információk. Tegye egyértelművé a céloldal gátlástalan látogatói számára, hogy a tartalom szerzői jogvédelem alatt áll, és ennek következményei lesznek a plágiumnak. A lábléc tökéletes hely az ilyen típusú információkhoz.

2. Elérhetőségek. Mint említettük, sokan görgetik az oldalt, és keresik a névjegyeit (telefon, cím, e-mail). Nagyon fontos, hogy hozzáadja őket a lábléchez, különösen akkor, ha úgy dönt, hogy nem veszi fel őket a fejlécbe.

Tanács. Amikor a telefonszámot elhelyezi a láblécben, tegye kattinthatóvá, így a felhasználó könnyebben kapcsolatba léphet közvetlenül a céggel a céloldal betöltésekor, ha okostelefont használ.

3. Adatvédelmi szabályzat. Az online adatvédelmi törvények egyre szigorúbbá válnak, ezért fontos, hogy legyen link egy ilyen oldalra.

4. Szolgáltatási feltételek. Amikor szolgáltatásokat nyújt vagy termékeket értékesít a céloldalon keresztül, valószínűleg nem szeretné, hogy ügyfelei összezavarodjanak az Önnel való üzletelés árnyalataival kapcsolatban. Győződjön meg arról, hogy a láblécben egyértelműen szerepel a szolgáltatási feltételek oldalára mutató hivatkozás.

5. Visszajelzés/visszajelzés. Ez egy opcionális rész, de ha külön oldala van ennek, akkor hasznos lenne, ha ide illeszti a linket.

6. Térkép. Ha a céloldal egy olyan vállalkozás névjegykártyája, amelynek fő tevékenysége offline (mondjuk vendégház, étterem vagy rendezvényhelyiség tulajdonosa), akkor ne felejtse el helyadatokat hozzáadni a lábléchez. Ez lehet egyszerű szöveg címmel vagy helyi integráció a Yandex Maps, Google Maps vagy 2GIS szolgáltatással.

A következőképpen adhat hozzá térképet a céloldalhoz a szakaszkészítő segítségével:

Opcionális láblécelemek

Most nézzük meg a lábléctervezés egyéb, kevésbé jelentős elemeit.

8. Társadalmi bizonyíték és ikonok a profilokhoz a közösségi hálózatokon. Ha meg akarja mutatni befolyását a közösségi médiában, vagy bátorítani szeretné az embereket, hogy kövessék kiemelt fiókjait, fontolja meg az ehhez hasonló ikonok hozzáadását. És ha minden profilnál megjeleníti követőinek számát, akkor közösségi bizonyítékot hoz létre.

9. A webhelytérkép (SiteMap) segít a keresőmotoroknak jobban megérteni az Ön webhelyének és tartalmának szerkezetét. Sok webhely a szerzői jogi információk mellett elhelyez egy hivatkozást a webhelytérképre a láblécben.

11. Egy egyszerű e-mail űrlap nagyszerű módja a részvételi konverziók növelésének. Alternatív megoldásként, ha a láblécben nincs hely a regisztrációs űrlap elhelyezésére, javasoljuk, hogy helyezzen el egy CTA gombot vagy egy linket arra a főoldalra, ahol potenciális ügyfeleket szeretne generálni.

12. Kapcsolatfelvételi űrlap üzenetek küldéséhez. Alkalmas, ha nem szeretné a névjegyeit a láblécben feltüntetni, különösen az e-mail címét. Egy ilyen űrlap hozzáadása csökkenti a spamek fogadásának kockázatát, és segít a felhasználóknak könnyedén kapcsolatba lépni Önnel a webhely szinte bármely oldaláról. Ne feledje azonban, hogy ez az elem jelentős mennyiségű alsó helyet foglalhat el.

13. Küldetésnyilatkozat. Ha meg szeretné mutatni látogatóinak, mit képvisel a márkája, mik a céljai és törekvései, akkor fontolja meg küldetésed tömörített változatának a láblécbe való felvételét. Ha problémás egy tömör üzenet elkészítése, akkor csatoljon egy linket egy speciális oldalra.

14. A legutóbbi blogbejegyzések listája. Érdemes lehet itt egy hírcsatornát hozzáadni a legújabb blogbejegyzéseidhez. Még hatékonyabb stratégia, ha csak a legjobb, legnépszerűbb blogbejegyzéseket jelenítjük meg. Négy vagy öt link bőven elég lesz.

15. „Rólam” / „Életrajz”. Ha személyes márkawebhelyről vagy blogról van szó, egy rövid életrajzot is hozzáadhat magáról, beleértve egy fényképet is – ez élénk, „emberi” elemet kölcsönöz az oldalnak. Ha hozzáad egy linket a Rólam (Rólam) oldalához, akkor a látogatók többet megtudhatnak Önről.

16. Konverziós linkek vagy cselekvésre ösztönzések. Vannak termékoldalai, bestseller rovatai vagy társult oldalai, amelyeket reklámoznia kell? Mit szólna hozzájuk mutató hivatkozások beágyazásához a lábléc horgonyszövegébe?

Mit ne adjunk hozzá a lábléchez

A következőket érdemes elkerülni:

• A forgalmi statisztikákat tükröző oldalmegtekintések és widgetek számlálói.
• Közvetlen kapcsolt linkek.
• Beépített közösségi média hírcsatornák.
• Hirdető.

Milyen eszközöket kell használnia a tervezés során?

Ez attól függ, hogy milyen platformon fut a webhely. Az LPgenerator felhasználók számára például számos kész elrendezés és ingyenes, jó minőségű céloldalsablon áll rendelkezésre, amelyeket személyre szabhat:

Ez minden!

Reméljük, hogy ez a bejegyzés hasznos volt számodra. Azt is szeretnénk, hogy ösztönözze Önt a lábléc használatának újragondolására. Bármi legyen is a konverziós célja, csak kísérletezzen sokat, és meglátja, mi működik és mi nem.

Kezdje néhány alapvető elemmel, és azzal, hogy Ön szerint mi javítja a navigációt és a felhasználói élményt.

Ha gyanítja, hogy az emberek nem görgetnek a láblécig, állítson be hőtérképeket és görgessen térképeket, hogy biztosan megtudja.

Nem számít, hogy mit tesz, ne hagyja, hogy a lábléc megereszkedjen. Ideje válaszolni a következő kérdésekre:

• Van lábléce a weboldalának vagy blogjának?
• Kihozod belőle a legtöbbet?
• Mi van most a láblécben? Hogyan lehet ezen javítani?

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 található, ahol szükséges, ha a webhely fő területe elegendő magasságú 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 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 egy új css elem bevezetésével a 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 js.js fájlt is létrehozni (egyelőre üres). 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