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

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

Legyen szó e-kereskedelmi webhelyről, személyes webhelyről, oktatási webhelyről, közösségi fórumról vagy médiawebhelyről, a fejléc egyszerűvé teszi a böngészést és élvezetessé teszi a használatát.

A ragadós fejlécek egyre népszerűbbek a webtervezők körében a webhelyek rendszerezésére és felépítésére a jobb felhasználói navigáció érdekében.

Ebben az oktatóanyagban megmutatjuk, hogyan készítheti el a ragadós fejlécet az Elementor segítségével.

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

• 1. lépés: Menü létrehozása
• 2. lépés: Fejléc létrehozása az Elementorban
• 3. lépés: Az Elementor használata fejléc sablon létrehozásához
• 4. LÉPÉS: Az Elementor fejléc ragadóssá tétele
• 5. lépés: szabja testre CSS-ünket
• Következtetés

1. lépés: Menü létrehozása

Ha ragadós fejlécet szeretne hozzáadni webhelyéhez, lépjen a wp-admin > Megjelenés > Menük lehetőségre , é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ü felépíté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 ” gombra.

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écesablonok egyikét, vagy megtervezheti a sajátját a semmiből.

A nulláról kezdjük az Elementor ragadós fejlécünkkel ebben az oktatóanyagban.

Az Elementor szerkesztőben különféle fejléc-widgeteket láthat, mielőtt elkezdené a sablon tervezését. Ezeknek a szakaszoknak a segítségével gyorsan és egyszerűen megtervezhetünk fejlécet.

3. lépés: Az Elementor használata fejléc sablon létrehozásához

Hozzon létre egy kétoszlopos elrendezést. Győződjön meg arról, hogy a szakasz tartalomszélessége „ Dobozos ” értékre 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 el webhelyének logóját az első oszlopba, és igazítsa balra.

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

Ennek az oktatóanyagnak a fejlécét egyszerűnek fogjuk tartani. A fejlécet háttérszín hozzáadásával, lebegő animációs effektusokkal, gombokkal és egyéb elemekkel részletesebbé teheti.

4. LÉPÉS: Az Elementor fejléc ragadóssá tétele

Most, hogy elkészítettük az alapvető Elementor fejlécünket, itt az ideje, hogy ragadós fejlécvé alakítsuk.

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

Válassza a „ tapadó a tetejére ” lehetőséget a mozgási effektusok alatt, majd az „ 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 táblagép méretű készülékeken, és szinte mindig nem kívánatos mobil képernyőkön sem. Ennek eredményeként kattintson az „x”-re mindkét lehetőség mellett a Sticky On alatt, és csak az „Asztal” marad kijelölve.

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 felkéri, hogy adjon hozzá feltételt a fejléchez, miután közzétette. Feltételek hozzáadásával bárhol megjelenítheti a fejlécet a webhelyen.

Azt akartuk, hogy ez a fejléc az egész webhelyen megjelenjen, a 404-es oldal elhagyásával. Ennek eredményeként a teljes webhelyet belefoglaltuk a választásba, miközben elhagytuk a 404-es oldalt.

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

Tegye sokkal jobban kinézetét az Elementor ragadós fejlécének 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á tegye.

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

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

Ebben az esetben állítsa az „ Effektuseltolás 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 beállításai csak egyéni CSS használata esetén működnek. Következésképpen, ha nem ad hozzá egyéni CSS-t, akkor kihagyhatja az utolsó lehetőséget.

Az utolsó ragadós fejléc közzététele előtt opcionálisan feltételeket is hozzáadhat az utolsó ragadós fejléchez. amp például az, hogy hol szeretné megjeleníteni a ragadós fejlécet. Példaként amp teljes webhely feltételt .

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

Befejeztük a takarítást; most áttérünk a webhely bonyolultságára, beleértve az egyéni CSS-kód hozzáadását. Bemutatjuk az alapokat és a fejlett technikákat az Elementor ingyenes ragadós fejléceffektusainak eléréséhez. Ha az Elementor 2.9-es vagy újabb verzióját használja, a Globális stílusszabályok segítségével beépítheti ezt a CSS-t webhelyébe.

Az egyéni CSS felvételéhez kövesse az alábbi eljárásokat:

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

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

header.sticky-header { --header-height: 90px; --átlátszatlanság: 0,90; --zsugorítás: 0,80; --ragadós-háttérszín: #0e41e5; --átmenet: .3s könnyű be-ki; átmenet: background-color var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacitás var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) ; background-image: nincs ; opacitás: var(--átlátszatlanság) ; -webkit-háttérszűrő: blur(10px); háttérszűrő: blur(10px); } header.sticky-header > .elementor-container { átmenet: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me)); magasság: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { átmenet: padding var(--transition); } header.sticky-header.elementor-sticky -- effektek .elementor-nav-menu .elementor-item { padding-bottom: 10px; padding-top: 10px; } header.sticky-header > .elementor-container .logo img { átmenet: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

5. lépés: szabja testre CSS-ünket

A fent felsorolt ​​utasítások végigvezetik Önt a csökkenő méretű 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ával kapcsolatban, tekintse meg az alább található CSS-kódot, amely lehetővé teszi, hogy kreatívabb legyen a fejléc kialakításában. Igényeitől függően személyre szabhatja az Elementor ragadós fejlécet számos beállítás megváltoztatásával és többé-kevésbé ragadóssá tételével. Javasoljuk, hogy kódszerkesztőt használjon, hogy ezt a CSS-módosítást közvetlenül az Elementorba építse be. Használhatja a Visual Studio Code-ot 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 ingyenesen használhatók, és különféle rendszerekről érhetők el, beleértve a Windowst, a Mac OS X-et és a Linuxot.

Ez a rész bemutatja, hogyan állíthatja be az Elementor zsugorító fejléc hatásait a CSS stíluslap használatával. Ha csak egyszer módosítja az egyéni tulajdonságot, az azonnal megváltozik, hogy megfeleljen a CSS-kód többi részének.

A csökkenő fejléc testreszabási lehetőségei összesen öt különböző módon érhetők el. Nem kell minden változót testreszabni, 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.

Itt van az öt CSS-változó, mindegyik változó alapértelmezett értéke pirossal.

A ragadós háttérszín #0e41e5, a fejléc magassága pedig 90 képpont. További stíluslehetőségek: 0,90 átlátszatlanság, 0,80 zsugorodás, 0,90 átlátszóság és 300 ms-os könnyű be-/kiegyenlítés átmenet.

Az egyéni tulajdonságok azok az elemek, amelyek a amp a dupla kötőjel „–” után jelennek meg, és ezeket az amp le kódunk tetején találja. Csak be kell állítani a mondatban a kettőspont után és a pontosvessző előtt megjelenő értéket.

amp , ha a fejléc magasságát 100 képpontra szeretné növelni, a következőképpen nézne ki a magasság módosítása előtt és után:

Korábban a fejléc magassága 90 pixel volt; után a fejléc magassága 100 pixel volt.

Az Elementor használatával több különböző módon is megtervezhet egy ragadós fejléc menüt. Nemcsak létrehozhat ingyenes Elementor ragadós fejlécet, hanem személyre szabhatja a fejlécet is, ha egyéni CSS-t ad hozzá. Ezzel a lépésenkénti útmutatóval részletes útmutatást kaphat arról, hogyan hozhat létre csökkenő méretű ragadós Elementor fejlécet az Elementor segítségével, és hogyan módosíthatja a CSS-t.

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

Az Elementor segítségével teljes mértékben irányíthatja webhelye fejléceinek stílusát. amp elhelyezheti a webhely logóját az oldal közepén, és a főmenüt alatta. A fő fejléc fölé fejlécet adhat hozzá a telefonszám, a közösségi média hivatkozások és egyéb információk megjelenítéséhez.

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

Következtetés

Ragadós fejléc elhelyezése webhelyén megkönnyítheti a látogatók számára a webhely bejárását, és növelheti a kattintások számát a webhely minden területére.

Az Elementor kiküszöböli a ragadós fejlécek manuális létrehozását Javascript és CSS segítségével, amire korábban szükség volt. A ragadós fejléc létrehozása webhelyéhez még soha nem volt egyszerűbb, mint most, az Elementor ragadós fejléceinek köszönhetően.