A ragadós fejléc és görgetési effektusok használata az Elementorral

A fejléc általában az első dolog, amit az ember lát, amikor meglátogatja webhelyét, és ez alapul szolgál a webhely felfedezéséhez.

Függetlenül attól, hogy van e -kereskedelmi webhelye, személyes webhelye, oktatási webhelye, közösségi fóruma vagy webhelye a médiának, a fejléc az egyszerű böngészés és élvezetes használat.

A ragadós fejlécek egyre népszerűbbek a webdesignerek körében, hogy megszervezhessék és felépítsék a webhelyet a jobb felhasználói navigáció érdekében.

Ebben az oktatóanyagban megmutatjuk, hogyan készítheti el ragadós fejlécét az Elementor használatával.

A ragadós fejlécek lehetővé teszik a felhasználók számára, hogy megtekinthessék az oldal fejlécét és menüszakaszát, függetlenül attól, hogy milyen lefelé görgetnek.

• 1. lépés: Menü készítése
• 2. lépés: Fejléc létrehozása az Elementorban
• 3. lépés: Az Elementor használata fejléces sablon készítéséhez
• 4. LÉPÉS: Hogyan lehet ragadósá tenni az Elementor fejlécet
• 5. lépés: testreszabhatja a CSS -t
• Következtetés

1. lépés: Menü készítése

Ha ragadós fejlécet szeretne hozzáadni webhelyéhez, lépjen a wp-admin > Megjelenés > Menük menüpontra, és hozzon létre egy főmenüt. A fejlécbe írja be a megjeleníteni kívánt részt.

2. lépés: Fejléc létrehozása az Elementorban

Nyissa meg az Elementor Templates > Theme Builder menüpontot , ha befejezte a főmenü létrehozását. Válassza ki a Fejléc területet a témakészítő oldalon, és kattintson az „ Új fejléc hozzáadása .

Adjon nevet a fejlécesablonnak, és kattintson a „ Sablon létrehozása ” gombra a felugró képernyőn.

Ezután az Elementor szerkesztőoldalára kerül. Használhatja az előre elkészített fejléc-sablonok egyikét, vagy saját maga tervezheti meg a semmiből.

Kezdjük a semmiből az Elementor ragadós fejlécével ebben az oktatóanyagban.

A sablon tervezésének megkezdése előtt különböző fejléc -modulokat láthat az Elementor szerkesztőben. Ezekkel a szakaszokkal gyorsan és egyszerűen megtervezhetjük a fejlécet.

3. lépés: Az Elementor használata fejléces sablon készítéséhez

Hozzon létre egy kétoszlopos elrendezést. Dobozos van állítva .

Az Elementor Szerkesztés szakasz Tartalomszélesség-beállításaiban állítsa az első oszlop szélességét 20%-ra a „ Szerkesztés ” oszlop alatt.

Helyezze webhelye webhelyének logóját az első oszlopba, és igazítsa balra.

Adjon hozzá egy navigációs menüt a második oszlophoz, és válassza ki az 1. lépésben létrehozott főmenüt. Igazítsa a navigációs menüt jobbra.

Ennek az oktatóanyagnak a fejléce egyszerű lesz. A fejlécet részletesebbé teheti háttérszín hozzáadásával, animációs effektusok, gombok és egyéb elemek lebegésével.

4. LÉPÉS: Hogyan lehet ragadósá tenni az Elementor fejlécet

Most, hogy elkészítettük az alapvető Elementor fejlécet, itt az ideje, hogy Sticky fejléccé alakítsuk.

Ehhez lépjen a Szerkesztés szakaszba (A teljes fejléc rész). Válassza Speciális > Mozgási effektusok lehetőséget a legördülő menüből.

A mozgási effektusok alatt válassza a „ eszközök ” lehetőséget, ahol meg szeretné jeleníteni a ragadós fejlécet.

A ragadós fejléc szinte mindig nem kívánatos a táblagép méretű eszközökön, és szinte mindig nemkívánatos a mobil képernyőkön sem. Ennek eredményeként kattintson a „x” gombra mindkét lehetőség mellett a Sticky On alatt, és csak az „Asztal” legyen kiválasztva.

Ha elégedett a munkájával, kattintson a „ Közzététel ” gombra; ez aktiválja a ragadós fejlécet, de jelenleg nem helyettesíti az aktuális témafejlécet.

Az Elementor felszólítja Önt, hogy adjon hozzá egy feltételt a fejlécéhez, miután közzétette. Feltételek hozzáadásával a fejlécet bárhol megjelenítheti a webhelyen.

Azt akartuk, hogy ez a fejléc a teljes webhelyen jelenjen meg, kihagyva a 404 -es oldalt. Ennek eredményeként a teljes webhelyet bevontuk a választásba, miközben kihagytuk a 404 -es oldalt.

Amint láthatja, az Elementor használata a személyre szabott Sticky fejléc létrehozásához egyszerű és fájdalommentes!

Sokkal jobb megjelenés az Elementor ragadós fejlécében Az egyéni CSS használatával Az Elementor lehetővé teszi a ragadós fejléc testreszabását egy CSS osztály hozzáadásával, hogy stílusosabb legyen.

Itt testreszabhatja a ragadós fejléc magasságát, háttérszínét, átmenetét és ragadós hatásait.

Térjen vissza a Szerkesztés területre, hogy stílusosabbá tegye a ragadós fejlécet (A teljes fejléc szakasz). Válassza Speciális > Mozgási effektusok lehetőséget a legördülő menüből.

állítsa az „ Effektuseltolás ” értéket 100-ra. Amikor egy látogató az Ön webhelyét használja, ez az a görgetési távolság, ahol a görgetési hatás megtörténik.

Állítsa a mozgáseltolást 100 -ra.

Ne feledje, hogy az eltolási effektusok opciók csak egyéni CSS használata esetén működnek. Következésképpen, ha nem ad hozzá saját egyéni CSS -t, kihagyhatja az utolsó lehetőséget.

A végső ragadós fejléc közzététele előtt opcionálisan feltételeket is hozzáadhat az utolsó ragadós fejléchez. Példa amp állapotára, ahol meg szeretné jeleníteni a ragadós fejlécet. Példaként amp a „ teljes webhely ” feltételt.

Most már szeretne egyéni CSS -t felvenni webhelyére. Az egyéni CSS meglehetősen rugalmas, és bármit belefoglalhat, ha ismeri a működését.

Befejeztük a tisztítást; most a webhely bonyolult elemeire térünk át, beleértve az egyéni CSS -kód hozzáadását. Bemutatjuk mind az alapokat, mind a fejlett technikákat az ingyenes ragadós fejléceffektusok megszerzéséhez az Elementor számára. Ha az Elementor 2.9 vagy újabb verzióját használja, akkor használhatja a globális stílusszabályokat, hogy beépítse ezt a CSS -t webhelyébe.

Kövesse az alábbiakban ismertetett eljárásokat az egyéni CSS hozzáadásához:

• A hamburger menü eléréséhez keresse meg azt az Elementor menü bal felső sarkában, és válassza ki.
• Válassza a Témastílusok kiválasztása lehetőséget a Globális stílus szakasz alatti legördülő menüből.
• Az adott szakasz legördülő menüjében válassza az Egyéni CSS lehetőséget (a szín kékre változik a korábbi genetikai vörös színről).

Ezt követően illessze be az alábbi CSS kódot.

header.sticky-header {-fej-magasság: 90 képpont; -térfogat: 0,90; -zsugorodj: 0,80; -ragadós-háttér-szín: #0e41e5; -átmenet: .3s könnyű ki-be; átmenet: háttér-színváltozó (-átmenet), háttérkép-változó (-átmenet), háttér-szűrő var (-átmenet), opacitásváltozó (-átmenet); } header.sticky-header.elementor-sticky-effektusok {background-color: var (-ragadós-háttér-szín)! fontos; háttérkép: nincs! fontos; opacitás: var (-opacity)! fontos; -webkit-backdrop-filter: elmosódás (10 képpont); háttér-szűrő: elmosódás (10 képpont); } header.sticky-header> .elementor-container {átmenet: min-height var (-átmenet); } header.sticky-header.elementor-sticky-effektek> .elementor-container {min-height: calc (var (-header-height) * var (-shrink-me))! fontos; magasság: calc (var (-header-height) * var (-shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {átmenet: padding var (-átmenet); } header.sticky-header.elementor-sticky-effektek .elementor-nav-menu .elementor-item {padding-bottom: 10px! fontos; padding-top: 10px! fontos; } header.sticky-header> .elementor-container .logo img {átmenet: max-width var (-átmenet); } header.sticky-header.elementor-sticky-effektek .logo img {max-width: calc (100% * var (-shrink-me)); } 

5. lépés: testreszabhatja a CSS -t

A fent felsorolt ​​utasítások végigvezetik Önt a csökkenő ragadós fejléc létrehozásának folyamatán az Elementorban. Ha további részleteket szeretne megtudni a fejléc további személyre szabásáról, akkor nézze meg az alábbi CSS -kódot, amely lehetővé teszi, hogy kreatívabb legyen a fejléc kialakításában. Az Ön igényeitől függően személyre szabhatja az Elementor ragadós fejlécét számos beállítás módosításával és többé -kevésbé ragadósá tételével. Javasoljuk, hogy használjon kódszerkesztőt, hogy ezt a CSS -módosítást közvetlenül az Elementorba építse be. Használhatja a Visual Studio kódot vagy az Atomot, amelyek segítenek a kód gyors összeállításában és az előnyök kihasználásában. Ezek a szerkesztők szabadon használhatók, és különböző rendszerekből érhetők el, beleértve a Windows, a Mac OS X és a Linux rendszereket.

Ez a rész bemutatja, hogyan állíthatja be az Elementor zsugorodó fejléc hatásait a CSS stíluslap használatával. Ha csak egyszer módosítja az egyéni tulajdont, akkor az azonnal módosul, hogy megfeleljen a többi CSS -kódnak.

A csökkenő fejléc testreszabási lehetőségei összesen öt különböző módon érhetők el. Nem minden változót kell személyre szabni, de lehetősége van erre, ha úgy dönt. Amint eldöntötte, hogy mely változókat szeretné módosítani, csak ezeket a változókat módosíthatja, a többi paramétert pedig változatlanul hagyhatja.

Íme az öt CSS -változó, az egyes változók alapértelmezett értékei pirossal.

A ragadós háttérszín #0e41e5, a fejléc magassága 90 képpont. További formázási lehetőségek: 0,90 opacitás, 0,80 zsugorodás, 0,90 opacity, és 300 ms könnyű be/könnyítés átmenet.

Az egyéni tulajdonságok azok az elemek, amelyek a kettős kötőjel „ -” után jelennek meg az ex amp le kódunkban, és megtalálhatóak az s amp le kódunk tetején. Csak a kettőspont és a pontosvessző előtt megjelenő értéket kell módosítani a mondatban.

Az ex amp le, ha azt szeretné, hogy növelje a magasság a fejléc 100px, itt van, hogyan nézne ki előtt és után változik a magasság:

Korábban a fejléc magassága 90 pixel volt; ezt követően a fejléc magassága 100 pixel volt.

Az Elementor használatával többféle módon készíthet ragadós fejlécmenüt. Nemcsak ingyenes Elementor ragasztófejlécet készíthet, hanem személyre is szabhatja a fejlécet egyéni CSS hozzáadásával. Részletes útmutatást kaphat arról, hogyan készíthet csökkenő, ragadós Elementor fejlécet az Elementor használatával, és módosíthatja a CSS-t ezzel a lépésről lépésre szóló útmutatóval.

Az Elementor számos fejlécesablont tartalmaz; mindegyik egyedi és elegáns, és segíti a nézőket a webhelyén való navigációban.

Az Elementor segítségével teljes mértékben irányíthatja webhelye fejléceinek stílusát. Az ex amp le, akkor tegye a site logo közepén az oldal és a főmenü alatta. A fejléc fölé fejlécet adhat a telefonszám, a közösségi média linkek és egyéb információk megjelenítéséhez.

Íme néhány exer amp az Elementor felhasználók számára elérhető számos fejléc -tervezési lehetőség közül.

Következtetés

Ha ragadós fejlécet helyez el webhelyén, a látogatók könnyen átjárhatják a webhelyet, és növelhetik a kattintásokat a webhely minden területére.

Az Elementor kiküszöböli annak szükségességét, hogy manuálisan generáljon ragadós fejléceket Javascript és CSS segítségével, ami korábban szükséges volt. A ragadós fejléc létrehozása webhelyéhez még soha nem volt ilyen egyszerű, mint most, köszönhetően az Elementor ragadós fejléceinek.