Elementor navigációs menü – Készítsen lenyűgöző menüt WordPress-webhelyéhez

Módot keres egy csodálatos menü létrehozására, amely javítja webhelye felhasználói felületét/UX-jét? Ha igen, akkor jó helyen jár. Itt összeállítottunk egy részletes útmutatót, amely segít Önnek.

Először egy lépésről lépésre bemutatjuk, hogyan hozhat létre menüt a WordPress webhelyéhez. És ha már rájöttél, elvezetjük, hogyan használhatod az Elementor Navigation Menu widgetet a WordPress menü testreszabásához és feltöltéséhez.

Tartalomjegyzék:

• Miért van szüksége egyéni navigációs menüre?
• Hozzon létre egy alapvető WordPress menüt az Elementor segítségével
• 1. Hozzon létre egy egyszerű menüt a WordPress webhelyéhez
• 2. Válassza ki és szabja testre a navigációs menüelemeket
• 3. Almenük létrehozása – Szülő és gyermek menüelemek (opcionális)
• 4. Kezelje a menü helyét és tegye közzé
• Navigációs menü létrehozása az Elementor pro nav widget segítségével
• Elementor Nav Menu widget Főbb jellemzők
• Hozzon létre egy menüt a nav-menu pro widgettel
• Mobil érzékeny menü
• Becsomagolás

Miért van szüksége egyéni navigációs menüre?

Nagyon fontos tudni, hogy a navigációs menük nem csak a forgalom növelése érdekében fontosak webhelyére, hanem a jobb SEO-rangsoroláshoz is.

Valójában a navigációs menük elsősorban a felhasználók elköteleződését szolgálják, de nem ez az egyetlen cél.

A második legfontosabb tényező a „WebCrawler” vagy a robotok szerepének szem előtt tartása, amelyek célja a webhelyek feltérképezése és a tartalom megfelelő szintre való indexelése, valamint a tartalom megfelelő helyre történő besorolásához.

Ezért, ha túl bonyolult menüket hoz létre, akkor a botoknak nehéz lesz rangsorolni a tartalmat, ugyanakkor Ön elveszíti látogatóit.

Röviden, a „könnyű navigáció” kulcsfontosságú szerepet játszik a jobb felhasználói élmény javításában, valamint elengedhetetlen szerepet játszik webhelyünk rangsorolásában és a forgalom növelésében.

Ez kiváló ok arra, hogy sok üzleti webhely egyetlen navigációs ikont tartson fenn az összetett menüsor helyett, amely kattintásra akár egy teljes képernyős menüt is betölt.

Elementor pro widgetnek köszönhetően kód használata nélkül pixel-tökéletes és hihetetlenül rugalmas menüsort hozhat létre.

Ebben az oktatóanyagban bemutatjuk, hogyan használhatja az Elementor navigációs menü widgetet a testreszabott, speciális WordPress menü eléréséhez.

Mielőtt elkezdené az Elementor Navigation widget használatát, nézzük meg, hogyan hozhatunk létre egy egyszerű WordPress menüt az Elementor ingyenes verziójával.

Hozzon létre egy alapvető WordPress menüt az Elementor segítségével

Most, hogy létrehozzon egy WordPress-menüt, nincs szükség speciális plugin telepítésére. A WordPress alapértelmezés szerint egy könnyen használható menükészítővel rendelkezik, amely segít egyszerű navigációs menüket létrehozni webhelyéhez.

Ennek ellenére nem fog hozzáférni a menü testreszabási lehetőségéhez. Átveszi a jelenleg aktív WordPress téma kialakítását. De ha ez minden, amit szeretne, akkor ez egy kiváló módja annak, hogy navigációs menüt állítson be WordPress webhelyén.

1. Hozzon létre egy egyszerű menüt a WordPress webhelyéhez

Először is be kell jelentkeznie a WordPress háttér-irányítópultjára.

Most a bal oldali oldalsávról lépjen a Megjelenés > Menük . Itt egy kétoszlopos elrendezést talál, balra a „Menüelemek hozzáadása”, jobbra pedig a „Menüszerkezet” felirattal.

A Menüszerkezet alatt talál egy mezőt a „Menü neve” számára. Ez lesz a neve annak a menünek, amelyet most készítünk. Nevezzük 1-es menünek.

Megjegyzés : Ne aggódjon. Olvasói nem láthatják a menük nevét. Ez egy olyan funkció, amely segít a különféle menük rendszerezésében.

Menüjének elnevezése után kattintson a „Menü létrehozása” gombra, hogy elérhető legyen. Most hozzá kell adnia a különböző menüelemeket.

2. Válassza ki és szabja testre a navigációs menüelemeket

Most jön az a rész, amikor feltölti az új menüt menüpontokkal. A bal oldali „Menüelemek hozzáadása” részben talál egy rendszerezett listát azokról a dolgokról, amelyeket felvehet a menüjébe.

Alapértelmezés szerint ez tartalmazza az Ön oldalait, bejegyzéseit, céloldalait, egyéni hivatkozásait és kategóriáit.

csak válassza ki a hozzáadni kívánt menüpontokat a jelölőnégyzet segítségével, majd kattintson a „Hozzáadás a menühöz” gombra. Ezzel feltölti a menüt az összes kiválasztott menüponttal.

Megjegyzés : Figyelje meg, hogy a „Menüelemek hozzáadása” alatt minden egyes szakaszban lehetőség van váltani a – Legfrissebb , Összes megtekintése és Keresés . Ne felejtse el használni ezeket a lehetőségeket, ha sok elem van.

Ha elkészült az összes menüelem hozzáadásával, nyomja meg a „Mentés menü” gombot, és folytassa a következő lépéssel.

3. Almenük létrehozása – Szülő és gyermek menüelemek (opcionális)

Tudtad, hogy a WordPress alapértelmezés szerint lehetővé teszi almenük létrehozását is? Az almenüszerkezet létrehozásakor van egy szülő menüpont és egy gyermek menüpont.

Amikor egy felhasználó a szülő menüelem fölé viszi az egérmutatót, megjelenik az alatta elrejtett összes alárendelt menüelem.

Menő ugye?

Az almenüszerkezet létrehozásához mindössze annyit kell tennie, hogy kiválaszt egy menüpontot, amelyet a szülőmenüben szeretne látni. Ezután húzza alá az összes olyan menüelemet, amelyet gyermekmenüként szeretne használni. Most csak húzza jobbra, és kész!

4. Kezelje a menü helyét és tegye közzé

Most, hogy létrehozta az új menüt és hozzáadott almenüket, ideje kezelni a helyét.

A menüszerkesztő tetején látnia kell a „Helyek kezelése” lehetőséget. Kattintson rá, és valami hasonlónak kell megjelennie a következő képernyőhöz:

Mostantól az elérhető menühelyek a telepített témától függenek. Ebben amp van egy témánk, amely 3 menüt támogat.

Miután minden elérhető menühelyhez hozzárendelt egy menüt, kattintson a „Változások mentése” gombra, és kész.

Most már ismeri a WordPress által alapértelmezés szerint kínált összes alapvető menüfunkciót. Ha azonban több testreszabást és funkcionalitást szeretne, olvassa el az Elementor Pro Nav Menu Widgetről szóló további információkat.

Navigációs menü létrehozása az Elementor pro nav widget segítségével

Ha testreszabott navigációs menüt szeretne hozzáadni WordPress webhelyéhez, akkor szüksége lesz az Elementor Pro verzióra. Az Elementor Pro verzió Elementor navigációs widgettel, valamint sok más speciális funkcióval érkezik, mint például több mint 300 sablon, témakészítő, előugró widget, WooCommerce widgetek és sok más érdekes funkció.

Melyek a Nav Menu widget fő jellemzői? Íme egy rövid bemutatkozás.

Elementor Nav Menu widget Főbb jellemzők

• A Nav-menu widget lehetőséget ad arra, hogy bárhol elhelyezze menüjét. A fejlécben vagy a tetején, vagy bárhol az oldalon.
• Több menüt is hozzáadhat webhelyéhez, illetve oldalaihoz külön-külön vagy globálisan.
• Adjon káprázatos megjelenést menüjének animáció, lebegő effektusok vagy aktív állapot használatával
• Hozzon létre egy mobilra adaptív menüt webhelyéhez, és szabályozza, hogyan fog kinézni webhelye a mobil képernyőkön
• Testreszabhatja a színeket, a tipográfiát és a kitöltést vagy a menüsor egyéb beállításait
• Hozzon létre egy pixel-tökéletes menüt az igazítás, a térköz és a kitöltés megfelelő pontosságával.

Hozzon létre egy menüt a nav-menu pro widgettel

Létre kell hoznia egy alapvető WordPress-menüt, amint azt fentebb említettük, majd testreszabhatja az alapértelmezett WordPress-menüt a pro-nav-menu widget segítségével. Miután létrehozta az elsődleges listát, a következő lépés az, hogy hozzáadja a kívánt helyre, azaz a fejléc részhez.

Ha végzett az alapbeállításokkal, szabjuk testre a menüt a navigációs menü widget segítségével.

A beállítási rész legfelső sarkában három lehetőség közül választhat; Tartalom, Stílus és Haladó.

Az Elrendezés szakasz : három lehetőség közül választhat: Vízszintes, függőleges vagy rejtett legördülő harmonika.

• Vízszintes: A vízszintes elrendezés a webhelyek által leggyakrabban használt elrendezés. A képernyőn balról jobbra terjed.
• Függőleges: Sok webhelyen található függőleges elrendezés is, különösen a kreatív szolgáltatásokat kínáló webhelyeken. Függőleges elrendezés esetén a navigációs sáv terjedése fentről lefelé halad.
• Legördülő menü: A legördülő menük is meglehetősen gyakoriak. A legördülő menük függőleges elrendezésűek, és a felfedésükhöz interakcióra van szükség a felhasználóval. Leginkább tiszta design létrehozására használják őket.

Szakasz igazítása : ez a rész segít a menü szövegelemeinek igazításában; középre, jobbra vagy balra.

Animációs szakasz : ez a szakasz lehetővé teszi animációs effektusok hozzáadását az alá, fölé vagy duplasoros animációs effektusokhoz. Használhatja a keretet, a hátteret és a finom szöveges animációkat is.

Az aláhúzott animációk a következők:

• Fade: Az elhalványulási animáció a menüelemek alatt kínál elhalványulási animációt.
• Dia: A diaanimáció a menüelemek alá csúsztatja a sávot.
• Növekedés : A növekedési animáció a közepétől kifelé növekszik, és a növekedés érzését kelti.
• Drop in : Az animáció alulról felfelé halad.
• Kihagyás: Az animáció felülről lefelé halad.

Hasonlóképpen létezik keretes, overline, duplasoros, háttér- és szöveganimáció. Mindegyikük saját animációkészletet kínál, és te is megnézheted őket, hogy megtudd, mit kapsz velük.

Mutató rész : válassza ki a mutató típusát a legördülő menüből.

Almenüjelző rész : az Elementor widget számos almenüstílusi lehetőséget kínál. Ahol nem csak a menü színét, stílusát és hátterét szabályozhatja.

Kitöltés és menütávolság: a párnázás gyorsan állítható. Módosíthatja a menü és az almenü vízszintes kitöltését, a függőleges kitöltést, a köztes térközt, valamint a jobbra, balra és középre igazítást.

Az Elementor rendkívül jól megközelíti a menük közötti távolságot és a kitöltést. Keményen dolgoztak az ajtók mögött, hogy el tudják juttatni az eszközöket a fejlesztőhöz, hogy könnyen elkészíthessék azt a dizájnt, amelyre gondolnak.

A menüosztás számos lehetőséget kínál, többek között:

• Hely a menüpontok között
• Vízszintes és függőleges párnázás a menü- és almenüelemekhez
• Középre, balra, jobbra és sorkizárt igazítás.

Színes háttér és tipográfia : a kívánt színséma és háttérszín segítségével személyre szabott márkás megjelenést kaphat. Ezenkívül választhat az átlátszó vagy félig átlátszó menü opciók közül is.

Tervezőként a lehető legtöbbet játszhat ezekkel a lehetőségekkel, és gondoskodhat arról, hogy a háttereket ízlése szerint tervezze meg.

Mobil érzékeny menü

A mobil a web fontos része, ezért az Elementor fejlesztői olyan eszközöket is biztosítanak, amelyek segítségével mobilra is elkészítheti a navigációs sávot.

Az Elementor widget lehetővé teszi a WordPress mobil menüopcióinak teljes körű szabályozását. A mobil képernyő nézetét külön beállításkészlettel vezérelheti a csak mobil képernyőkön. Az Elementor beállítási szakaszának alján van egy lehetőség a mobil képernyő beállítására, ahol megtekintheti a mobil képernyő beállításait.

Röviden, az Elementor mobil menü funkciói a következők:

• Teljes szélesség mobilon: Lehetőség van a teljes szélesség vagy a korlátozott szélesség beállítására is.
• Táblagép vagy mobil töréspontok: A töréspont beállításaival beállíthatja a mobil menüt mobilhoz vagy táblagéphez.
• Függőleges és harmonikamenük: Az Elementor lehetőséget kínál egy összecsukható hamburger ikon megjelenítésére is.
• Igazítás váltása: A hamburger ikon középre, balra vagy jobbra igazítható.
• Oldalra/középre igazítás: Válassza ki a mobil menü igazítását.

Reszponzív navigáció: A menü érzékeny elhelyezését kínálja.

Becsomagolás

A menü minden webhely egyik legfontosabb funkciója. Mert ez segít a látogatóknak abban, hogy végigsétálhassanak a webhelyen, és ha okosan hozna létre egy listát, az segít a látogatóknak hosszú ideig a webhelyen maradni. A menü ugyanolyan fontos, mint bármely webhely teljes elrendezése, a fejléc és a lábléc.

Ezért a menü widgetnek képesnek kell lennie arra, hogy az Ön egyedi márka megjelenését az összes lényeges funkcióval együtt jelenítse meg. Az Elementor Navigation widget olyan funkciókban gazdag képességekkel rendelkezik, amelyek lehetővé teszik az ügyfelek számára, hogy testreszabják a menüszakaszt, hogy az illeszkedjen a márka hangjához. Mostantól használhat egy személyre szabott stílusos menüt a webhelyén, a céloldalon, a fejlécben vagy bármely más olyan területen, ahol meg szeretné jeleníteni.