Ismerje meg, hogyan hozhat létre ragadós menüt a WordPress webhely fő navigációjához! A ragadós menük javítják a felhasználói élményt azáltal, hogy a webhely menüjét könnyebben elérhetővé teszik a webhely látogatói számára. Ezenkívül javíthatja webhelye általános megjelenését. Vágjunk bele!

Tartalomjegyzék

1. Lépjen a Webhelyszerkesztőbe

Ennek a folyamatnak az első lépése, hogy a WordPress adminisztrációs területén belül lépjen a „Webhelyszerkesztő” oldalra. A Webhelyszerkesztő elérhető a WordPress „Témák blokkolásához”, feltéve, hogy a WordPress 5.9-es vagy újabb verzióját használja.

A Webhelyszerkesztő megnyitásához lépjen a következőre: Megjelenés> Szerkesztő (piros nyíl a fenti képen) a fő navigációból a WP Admin területen.

Kattintson a fő tartalomterületre a képernyő jobb oldalán (a fenti képen világoskék körvonallal és kék nyíllal jelölve). Ezzel a Webhelyszerkesztőben található Blokkszerkesztőbe jut.

A jobb oldalon, az „Oldal” lapon egy „Sablon” feliratú sort fog látni (a fenti képen kékkel körvonalazva). Kattintson a sablon nevére/hivatkozására (piros nyíl). Ezután kattintson a „Sablon szerkesztése” gombra (zöld nyíl – néha a „Sablon szerkesztése” egy kis kék szöveges hivatkozás a legördülő menü alatt, amely megjeleníti a sablon nevét).

2. Szerkessze a sablont

Mostantól a Sablonszerkesztőben lesz a webhely kezdőlapja. (Ha nincs beállítva kezdőlap a webhelyéhez, megtekintheti ezt az oktatóanyagot a WordPress-webhely statikus kezdőlapjának beállításáról).

A sablon tetején található az oldal fő navigációs sávja – más néven a weboldal „fejléce”. Ha az egeret az elem fölé viszi, egy lila keretet fog látni (a fenti képen piros nyíl). Ez azt jelzi, hogy ez az elem a "szinkronizált minta", ami azt jelenti, hogy a minta egy példányának módosítása az összes példányra vonatkozik a webhelyen. Kattintson erre a területre a fejléc szinkronizált minta kiválasztásához.

Ha ez a webhely fő fejléceleme, akkor most látnia kell, hogy a szinkronizált minta „Fejléc” felirattal van ellátva a blokk eszköztárában.

3. Adja hozzá a fejlécét egy csoporthoz

A kiválasztott fejlécminta blokk eszköztárában kattintson az „Opciók” ikonra (piros nyíl a fenti képen), és válassza a „Csoport” lehetőséget (zöld nyíl). Ez beágyazza a szinkronizált mintát egy csoportblokkba.

Észreveheti, hogy a blokk eszköztáron most már van a csoportblokk ikonja (kék nyíl a fenti képen), és a fő navigációs terület körvonala most kék, nem pedig lila (piros nyíl).

Vegye figyelembe, hogy ez megváltoztathatja a fő navigációs menü szélességét. A szélesség beállításához vigye az egeret a fejléc szinkronizált mintája fölé, és kattintson a kijelöléséhez (piros nyíl).

A fejléc szinkronizált mintájának blokk eszköztárában kattintson az „Igazítás” ikonra (zöld nyíl), és állítsa vissza a kívánt szélességre (kék nyíl – esetemben a „Széles szélesség” lehetőséget választottam).

A Csoport blokkhoz való visszatéréshez kattintson a „Csoport kiválasztása” ikonra a Fejlécblokk eszköztárában (rózsaszín nyíl).

WordPress egyszerűsített: Hogyan készítsünk hatékony webhelyeket Davies Media Design tanfolyam

4. Állítsa a csoportot „Ragadós” értékre

A kiválasztott csoport után lépjen a „Block” fülre a Beállítások oldalsáv alatt a képernyő jobb oldalán (piros nyíl a fenti képen).

Kattintson a „Pozíció” feliratú menüelemre (zöld nyíl). Itt most megjelenik egy „Alapértelmezett” legördülő menü (rózsaszín nyíl). Kattintson a legördülő menüre, és válassza a „Ragadó” lehetőséget (kék nyíl).

Navigáljon a szerkesztő tetejére, és kattintson a „Mentés” gombra (piros nyíl), majd ismét kattintson a „Mentés” gombra. Mostantól lesz egy pálcás menü főnavigációja a WordPress webhelyéhez!

5. Állítsa be a ragadós menü stílusát

Az új ragadós menü számos elemét testreszabhatja/stíluszhatja, de ehhez az oktatóanyaghoz egyszerűen hozzáadok egy hátteret a csoportblokk mögé, hogy a menü a weboldal teljes szélességében átnyúljon.

Ehhez a kiválasztott csoportblokk mellett a Beállítások oldalsáv „Stílusok” fülére navigálok (piros nyíl a fenti képen).

A „Szín” alatt a „Háttér” lehetőségre kattintok (kék nyíl), majd kiválasztom a fehér színmintát a háttérszín fehérre állításához (zöld nyíl).

Még egyszer rákattintok kétszer a „Mentés” gombra a módosítások mentéséhez.

Ne feledje, hogy a „Méretek” szakaszban bármikor módosíthatja webhelye fejlécének szélességét, magasságát vagy távolságát a „Padding” és a „Margin” csúszkák segítségével.

Megtekintheti webhelye előnézetét az eszköz ikonjára (piros nyíl), majd a „Webhely megtekintése” (zöld nyíl) gombra kattintva.

Görgetheti webhelyét, és figyelheti, hogy a ragadós navigációs menü a helyén marad a tetején (zöld nyíl)!

Miután befejezte a ragadós menü szerkesztését, kattintson a „Vissza” gombra a szerkesztő tetején (piros nyíl). Ezzel visszatér a weboldalára az Oldalszerkesztőben.

A WP Admin területre való visszatéréshez egyszerűen kattintson a bal felső sarokban lévő logóra.

Ennyi az oktatóanyag! Ha élvezted, megteheted tanulja meg a WordPress-t az Udemyről szóló mélyreható tanfolyamommal. Vagy megnézhet más ingyenes WordPress oktatóvideók és a WordPress súgócikkek a honlapomon.

Davies Media Design ingyenes kreatív alkalmazások e-mailes hírlevele

Iratkozzon fel a DMD Hírlevélre

Regisztráljon, hogy új oktatóanyagokat, kurzusfrissítéseket és kedvenc ingyenes kreatív alkalmazásaival kapcsolatos legfrissebb híreket kaphasson!

Sikeresen feliratkozott!

Kenni Pinterest