Navigační nabídka Elementor – Sestavte si úžasnou nabídku pro svůj web WordPress

Hledáte způsob, jak vytvořit úžasné menu, které pomůže zlepšit UI/UX vašeho webu? Pokud ano, pak jste na správném místě. Zde jsme sestavili podrobného průvodce, který vám pomůže.

Nejprve vám ukážeme krok za krokem návod, jak vytvořit nabídku pro váš web WordPress. A jakmile to pochopíte, provedeme vás, jak používat widget Elementor Navigation Menu k přizpůsobení a přeplnění vaší nabídky WordPress.

Obsah:

• Proč potřebujete vlastní navigační nabídku?
• Vytvořte základní nabídku WordPress pomocí Elementor
• 1. Vytvořte jednoduché menu pro váš web WordPress
• 2. Vyberte a přizpůsobte položky navigační nabídky
• 3. Vytvořte podnabídky – položky nadřazené a podřízené nabídky (volitelné)
• 4. Spravujte umístění nabídky a publikujte
• Jak vytvořit navigační nabídku pomocí widgetu Elementor pro nav'
• Klíčové vlastnosti widgetu Elementor Nav-Menu
• Vytvořte nabídku pomocí widgetu nav-menu pro
• Mobilní responzivní menu
• Zabalení

Proč potřebujete vlastní navigační nabídku?

Je důležité vědět, že navigační nabídky jsou důležité nejen pro přivedení návštěvnosti na vaše stránky, ale také pro lepší hodnocení SEO.

Navigační nabídky jsou skutečně primárně navrženy pro zapojení uživatelů, ale to není jediný účel.

Druhým nejdůležitějším faktorem je mít na zřeteli roli „WebCrawler“ nebo botů, kteří jsou navrženi tak, aby procházeli webové stránky a indexovali obsah na příslušnou úroveň a hlásili zpět do vyhledávače, aby seřadili obsah na správné místo.

Pokud tedy vytváříte příliš komplikovaná menu, pak by pro roboty bylo obtížné hodnotit váš obsah, ale také ztratíte své návštěvníky.

Stručně řečeno, „snadná navigace“ je klíčovým přispěvatelem ke zlepšení lepší uživatelské zkušenosti a hraje také nezbytnou roli při zvyšování hodnocení našich stránek a zvyšování návštěvnosti.

Pro mnoho firemních webů je to skvělý důvod, proč si ponechat jedinou navigační ikonu namísto složitého pruhu nabídek, který se po kliknutí načte až na celou obrazovku.

Díky widgetu Elementor pro se 100% responzivním navigačním menu můžete vytvořit pixelově dokonalý a neuvěřitelně flexibilní panel menu bez použití jakéhokoli kódu.

V tomto tutoriálu vám ukážeme, jak používat widget navigační nabídky Elementor k získání přizpůsobené pokročilé nabídky WordPress.

Než začneme s widgetem Elementor Navigation, pojďme prozkoumat, jak můžeme vytvořit jednoduchou nabídku WordPress pomocí bezplatné verze Elementor.

Vytvořte základní nabídku WordPress pomocí Elementor

Nyní, abyste vytvořili nabídku WordPress, nemusíte instalovat žádné speciální plugin . Ve výchozím nastavení je WordPress dodáván se snadno použitelným nástrojem pro tvorbu nabídek, který vám pomůže vytvořit jednoduché navigační nabídky pro váš web.

Jak již bylo řečeno, nebudete mít přístup k žádným možnostem přizpůsobení nabídky. Převezme návrh aktuálně aktivního tématu WordPress. Ale pokud je to vše, co chcete, pak je to skvělý způsob, jak nastavit navigační nabídku pro váš web WordPress.

1. Vytvořte jednoduché menu pro váš web WordPress

Nejprve se budete muset přihlásit k backendovému řídicímu panelu WordPress.

Nyní z levého postranního panelu přejděte na Vzhled > Nabídky . Zde najdete rozvržení ve dvou sloupcích s „Přidat položky nabídky“ vlevo a „Struktura nabídky“ vpravo.

V části Struktura nabídky najdete pole pro „Název nabídky“. Toto bude název pro menu, které právě teď vytvoříme. Říkejme tomu Menu 1.

Poznámka : Nebojte se. Vaši čtenáři neuvidí názvy nabídek. Je to funkce, která vám pomůže udržet všechny vaše různé nabídky organizované.

Po pojmenování nabídky klikněte na tlačítko „Vytvořit nabídku“, abyste ji zpřístupnili. Nyní musíte přidat různé položky nabídky.

2. Vyberte a přizpůsobte položky navigační nabídky

Nyní přichází část, ve které vyplníte novou nabídku položkami nabídky. V části „Přidat položky nabídky“ na levé straně najdete uspořádaný seznam věcí, které můžete přidat do nabídky.

Ve výchozím nastavení obsahuje všechny vaše stránky, příspěvky, vstupní stránky, vlastní odkazy a kategorie.

stačí vybrat položky nabídky, které chcete přidat, pomocí zaškrtávacího políčka a poté kliknout na tlačítko „Přidat do nabídky“. Tím se vaše nabídka naplní všemi vybranými položkami nabídky.

Poznámka : Všimněte si, že každá sekce v části „Přidat položky nabídky“ má možnost přepínat mezi – Nejnovější , Zobrazit vše a Hledat . Nezapomeňte použít tyto možnosti, pokud máte hodně položek.

Jakmile dokončíte přidávání všech položek nabídky, stiskněte tlačítko „Uložit nabídku“ a přejděte k dalšímu kroku.

3. Vytvořte podnabídky – položky nadřazené a podřízené nabídky (volitelné)

Věděli jste, že ve výchozím nastavení vám WordPress umožňuje vytvářet i podnabídky? Při vytváření struktury podnabídky máte nadřazenou položku nabídky a podřízenou položku nabídky.

Když uživatel najede na nadřazenou položku nabídky, zobrazí se všechny pod ní skryté položky podřízené nabídky.

V pohodě, že?

Nyní, abyste vytvořili strukturu podnabídky, vše, co musíte udělat, je vybrat položku nabídky, kterou chcete mít v nadřazené nabídce. Dále přetáhněte všechny položky nabídky, které chcete jako podřízené položky nabídky. Nyní jej stačí přetáhnout doprava a je hotovo!

4. Spravujte umístění nabídky a publikujte

Nyní, když jste vytvořili novou nabídku a přidali podnabídky, je čas spravovat její umístění.

V horní části editoru nabídky byste si měli všimnout možnosti s názvem „Spravovat místa“. Klikněte na něj a mělo by se zobrazit něco podobného jako na následující obrazovce:

Nyní budou dostupná umístění nabídky záviset na motivu, který jste nainstalovali. V tomto amp máme motiv, který podporuje 3 nabídky.

Po přiřazení nabídky ke každému z dostupných umístění nabídky klikněte na „Uložit změny“ a je to.

Nyní znáte všechny základní funkce nabídky, které WordPress ve výchozím nastavení nabízí. Pokud však chcete více přizpůsobení a funkcí, čtěte dále a dozvíte se o widgetu Elementor Pro Nav Menu.

Jak vytvořit navigační nabídku pomocí widgetu Elementor pro nav'

Pokud chcete na svůj web WordPress přidat přizpůsobenou navigační nabídku, budete potřebovat verzi Elementor Pro. Verze Elementor Pro je dodávána s widgetem Elementor nav spolu s mnoha dalšími speciálními funkcemi, jako jsou 300+ šablon, tvůrce témat, vyskakovací widget, widgety WooCommerce a mnoho dalších zajímavých funkcí.

Jaké jsou konkrétní klíčové funkce samotného widgetu Nav Menu? Zde je stručný úvod.

Klíčové vlastnosti widgetu Elementor Nav-Menu

• Widget navigační nabídky vám dává svobodu umístit nabídku kamkoli chcete. V záhlaví nebo nahoře nebo kdekoli na stránce.
• Na svůj web a také na své stránky můžete přidat více nabídek samostatně nebo globálně.
• Dejte své nabídce oslnivý vzhled pomocí animace, efektů vznášení nebo aktivního stavu
• Vytvořte na svém webu responzivní nabídku pro mobily a určete, jak bude váš web vypadat na mobilních obrazovkách
• Přizpůsobte si barvu, typografii a výplň nebo jiné úpravy lišty nabídek
• Vytvořte nabídku perfektní pro pixely se správnou přesností zarovnání, mezer a odsazení.

Vytvořte nabídku pomocí widgetu nav-menu pro

Budete muset vytvořit základní nabídku WordPress, jak jsme zmínili výše, a poté si výchozí nabídku WordPress přizpůsobíte pomocí widgetu pro-nav-menu. Jakmile vytvoříte primární seznam, dalším krokem je přidat jej na požadované místo, tj. do sekce Záhlaví.

Nyní, když jste hotovi se základním nastavením, pojďme upravit nabídku pomocí widgetu navigační nabídky.

V horním rohu sekce nastavení jsou k dispozici tři možnosti; Obsah, styl a pokročilé.

Sekce Rozvržení : máte tři možnosti Horizontální, Vertikální nebo Skrytá rozevírací harmonika.

• Horizontální: Horizontální rozložení je nejběžnějším rozložením používaným weby. Šíří se po obrazovce ve směru zleva doprava.
• Vertikální: Na mnoha webech také najdete vertikální rozložení, konkrétně na webech, které nabízejí kreativní služby. V případě vertikálního rozložení bude šířka navigační lišty shora dolů.
• Rozbalovací nabídka: Rozbalovací nabídky jsou také docela běžné. Rozbalovací seznamy jsou svislé a vyžadují interakci s uživatelem. Většinou se používají k vytvoření čistého designu.

Zarovnat sekci : tato sekce vám pomůže zarovnat textové položky nabídky; střed, vpravo nebo vlevo.

Sekce animace : tato sekce vám umožní přidat efekty animace pod, nad nebo na dvouřádkové animační efekty. Můžete také použít animace rámečku, pozadí a jemného textu.

Animace podtržení jsou následující:

• Fade: Animace fade nabízí animaci fade pod položkami nabídky.
• Snímek: Animace snímku posune pruh pod položky nabídky.
• Grow : Animace růstu roste od středu směrem ven a dává pocit růstu.
• Drop in : Animace Drop in proudí zdola nahoru.
• Vypustit: Animace vynechání teče shora dolů.

Podobně jsou na tom animace orámované, překryté, dvojité čáry, pozadí a text. Každá z nich nabízí vlastní sadu animací a můžete si je sami prohlédnout, abyste zjistili, co s nimi získáte.

Sekce ukazatele : vyberte typ ukazatele z rozbalovací nabídky.

Sekce indikátoru podnabídky : widget Elementor je nabitý mnoha možnostmi stylů podnabídky. Kde můžete ovládat nejen barvu, styl a také pozadí menu.

Výplň a mezery v nabídce: výplň lze rychle upravit. Můžete změnit vodorovné odsazení pro nabídku a podnabídku, svislé odsazení, mezeru také zarovnání vpravo, vlevo a na střed.

Elementor přistupuje k rozmístění menu a odsazení mimořádně dobře. Tvrdě pracovali za dveřmi, aby zajistili, že budou moci přinést nástroje vývojářům, aby mohli snadno vytvořit design, o kterém přemýšlí.

Prostor nabídky nabízí mnoho možností, včetně:

• Mezera mezi položkami nabídky
• Horizontální a vertikální odsazení pro prvky nabídky a podnabídky
• Zarovnání na střed, doleva, doprava a do bloku.

Barevné pozadí a typografie : pomocí požadovaného barevného schématu a barvy pozadí můžete získat svůj značkový vzhled na míru. Můžete si také vybrat průhledné nebo poloprůhledné možnosti nabídky.

Jako designér si můžete s těmito možnostmi pohrát, jak jen můžete, a zajistit, že si navrhnete pozadí podle svých představ.

Mobilní responzivní menu

Mobil je důležitou součástí webu, a proto vývojáři Elementor poskytují také nástroje, abyste mohli vytvořit navigační panel i pro mobil.

Widget Elementor vám umožňuje úplnou kontrolu nad možnostmi mobilní nabídky na WordPress. Zobrazení mobilní obrazovky můžete ovládat pomocí samostatné sady nastavení pro obrazovky pouze pro mobilní zařízení. Ve spodní části sekce nastavení Elementor je možnost pro nastavení mobilní obrazovky, kde si můžete prohlédnout možnosti mobilní obrazovky.

Stručně řečeno, funkce mobilní nabídky Elementor jsou následující:

• Plná šířka na mobilu: Máte možnost nastavit také plnou šířku nebo omezenou šířku.
• Body přerušení pro tablet nebo mobil: Pomocí nastavení bodů přerušení můžete nastavit mobilní nabídku pro mobil nebo tablet.
• Vertikální a akordeonové menu: Elementor také nabízí možnost zobrazení skládací ikony hamburgeru.
• Přepnout zarovnání: Ikonu hamburgeru lze zarovnat na střed, doleva nebo doprava.
• Zarovnání na stranu/na střed: Vyberte zarovnání mobilní nabídky.

Responzivní navigace: Nabízí citlivé umístění nabídky.

Zabalení

Menu je jednou z nejdůležitějších funkcí každého webu. Protože to pomáhá návštěvníkům procházet vaše webové stránky, a pokud byste vytvořili seznam chytře, pomohlo by to udržet návštěvníky na vašem webu po dlouhou dobu. Nabídka je stejně důležitá jako nabídka celého rozvržení webu, záhlaví a zápatí.

Widget nabídky proto musí být schopen poskytnout váš jedinečný vzhled značky se všemi základními funkcemi. Widget Elementor Navigation přichází s funkcemi bohatými na funkce, které umožňují zákazníkům přizpůsobit si sekci nabídky tak, aby odpovídala hlasu vaší značky. Nyní můžete na svém webu, na vstupní stránce, v záhlaví nebo v jakékoli jiné sekci, kde je chcete zobrazovat, používat stylové menu na míru.