Navigační nabídka Elementor - vytvořte úžasnou nabídku pro svůj web WordPress

Hledáte způsob, jak vytvořit úžasnou nabídku, která pomůže zlepšit uživatelské rozhraní/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, jak vytvořit nabídku pro váš web WordPress. A až to pochopíte, provedeme vás návodem, jak pomocí widgetu Elementor Navigation Menu upravit a doplnit nabídku WordPress.

Obsah:

• Proč potřebujete vlastní navigační nabídku?
• Vytvořte základní nabídku WordPress pomocí Elementoru
• 1. Vytvořte jednoduchou nabídku pro svůj web WordPress
• 2. Vyberte a přizpůsobte položky navigační nabídky
• 3. Vytvořte podnabídky - položky nabídky rodič a dítě (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 Nav-Menu prvku Elementor
• Vytvořte nabídku s nav-menu pro widgetem
• Nabídka reagující na mobilní zařízení
• 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 zvýšení návštěvnosti vašich stránek, ale také pro lepší hodnocení SEO.

Nabídky navigace jsou primárně určeny k zapojení uživatelů, ale to není jediným účelem.

Druhým nejdůležitějším faktorem je mít na paměti roli „WebCrawler“ nebo Bots, které jsou navrženy tak, aby procházely weby a indexovaly obsah na příslušné úrovni a podávaly zprávy zpět do vyhledávače, aby obsah klasifikovaly na správném místě.

Pokud tedy vytváříte příliš komplikované nabídky, bylo by pro roboty 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 faktorem pro zlepšení lepšího uživatelského dojmu a také hraje zásadní roli při zlepšování hodnocení našich stránek a zvyšování návštěvnosti.

Je to vynikající důvod pro mnoho firemních webů, aby si místo složité lišty nabídek ponechaly jednu ikonu navigace, která po kliknutí načte celou nabídku na celou obrazovku.

Díky widgetu Elementor pro se 100% responzivní navigační nabídkou můžete vytvořit pixelový a neuvěřitelně flexibilní panel nabídek 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, podívejme se, jak můžeme vytvořit jednoduchou nabídku WordPress pomocí bezplatné verze Elementor.

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

K vytvoření nabídky WordPress nyní 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.

To znamená, že nebudete mít přístup k žádným možnostem přizpůsobení nabídky. Převezme design 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 jednoduchou nabídku pro svůj web WordPress

Nejprve se musíte přihlásit na hlavní panel backendu 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 nabídky, kterou právě vytváří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é.

Poté, co svou nabídku pojmenujete, zpřístupněte ji kliknutím na tlačítko „Vytvořit nabídku“. 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é novou nabídku naplníte položkami nabídky. V části „Přidat položky nabídky“ na levé straně najdete uspořádaný seznam věcí, které můžete do nabídky přidat.

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

Zaškrtnutím políčka vyberte položky nabídky, které chcete přidat, a poté klikněte 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 přidáte všechny položky 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 nabídky rodič a dítě (volitelně)

Věděli jste, že WordPress vám ve výchozím nastavení umožňuje vytvářet také 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ž se uživatel umístí na nadřazenou položku nabídky, zobrazí všechny položky podřízené nabídky skryté pod ní.

Skvělé, že?

Nyní, abyste vytvořili strukturu podnabídky, stačí vybrat položku nabídky, kterou chcete mít v nadřazené nabídce. Dále pod něj přetáhněte všechny položky nabídky, které chcete jako podřízené položky nabídky. Nyní ji jednoduše přetáhněte doprava a máte 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ídek byste si měli všimnout možnosti nazvané „Spravovat umístění“. 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ídek záviset na motivu, který jste nainstalovali. V této ex amp le máme téma, 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 standardně nabízí. Pokud však chcete více přizpůsobení a funkcí, přečtěte si informace 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é vlastnosti samotného widgetu Nav Menu? Zde je krátký úvod.

Klíčové vlastnosti widgetu Nav-Menu prvku Elementor

• Widget Nav-menu vám dává svobodu umístit své menu kamkoli chcete. Na 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ě.
• Osvěžte si své menu pomocí animace, efektů vznášejícího se nebo aktivního stavu
• Vytvořte nabídku svého webu reagující na mobilní zařízení a určete, jak bude váš web vypadat na mobilních obrazovkách
• Přizpůsobte barvu, typografii a výplň nebo jiné úpravy panelu nabídek
• Vytvořte nabídku perfektní pro pixely se správnou přesností zarovnání, mezer a výplně.

Vytvořte nabídku s nav-menu pro widgetem

Budete muset vytvořit základní nabídku WordPress, jak jsme se zmínili výše, a poté si přizpůsobíte výchozí nabídku WordPress pomocí widgetu pro-nav-menu. Po vytvoření primárního seznamu je dalším krokem přidání do požadovaného umístění, tj. Sekce záhlaví.

Nyní, když skončíte se základním nastavením, upravme nabídku pomocí widgetu nav-menu.

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 skrytou rozevírací harmoniku.

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

Sekce zarovnání : tato sekce vám pomůže zarovnat textové položky nabídky; uprostřed, vpravo nebo vlevo.

Sekce animace : tato část vám umožní přidat animační efekty pod, přes nebo přes dvojitou čáru. Můžete také přejít na rám, pozadí a jemné textové animace.

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

• Fade: Fade animace nabízí fade animaci pod položkami nabídky.
• Snímek: Animace snímku posune lištu pod položkami nabídky.
• Růst : Animace růstu roste od středu směrem ven a dává pocit růstu.
• Drop in : Drop in animation flow from bottom to top.
• Vyřazení: Vypadnutí animace proudí shora dolů.

Podobně existují animace s orámováním, přetažením, dvojitým řádkem, pozadím a textem. Každý z nich nabízí vlastní sadu animací a sami si je můžete prohlédnout a zjistit, co s nimi získáte.

Sekce ukazatele : vyberte typ ukazatele z rozevírací nabídky.

Sekce indikátoru podnabídky : Widget Elementor je vybaven mnoha možnostmi stylování podnabídek. Kde můžete nejen ovládat barvu, styl a také pozadí nabídky.

Polstrování a mezery mezi nabídkami: odsazení lze rychle upravit. Můžete změnit vodorovné odsazení pro nabídku a podnabídku, svislé vycpávky, meziprostor také zarovnání vpravo, vlevo a na střed.

Elementor velmi dobře přistupuje k rozteči a polstrování nabídky. Tvrdě pracovali za dveřmi, aby zajistili, že mohou přivést nástroje k vývojáři, aby mohli snadno vytvořit design, o kterém přemýšlejí.

Mezery v nabídce nabízejí mnoho možností, včetně:

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

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

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

Nabídka reagující na mobilní zařízení

Mobilní zařízení je důležitou součástí webu, a proto vývojáři společnosti Elementor poskytují také nástroje, pomocí kterých můžete také vytvořit navigační panel pro mobilní zařízení.

Widget Elementor vám umožňuje úplnou kontrolu nad možnostmi mobilních nabídek na WordPressu. Zobrazení mobilní obrazovky můžete ovládat samostatnou sadou nastavení pro obrazovky pouze pro mobilní zařízení. Ve spodní části sekce Nastavení Elementoru je možnost pro nastavení mobilní obrazovky, kde můžete zobrazit možnosti mobilní obrazovky.

Stručně řečeno, funkce mobilní nabídky Elementoru jsou uvedeny níže:

• Celá šířka v mobilu: Získáte možnost nastavit také plnou nebo omezenou šířku.
• Zarážky pro tablety nebo mobilní zařízení: Pomocí nastavení zarážky můžete nastavit mobilní nabídku pro mobilní zařízení nebo tablety.
• Vertikální a akordeonová menu: Elementor také nabízí možnost zobrazit skládací ikonu hamburgeru.
• Přepnout zarovnání: Ikona hamburgeru může být zarovnána 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í

Nabídka je jednou z nejdůležitějších funkcí libovolného webu. Protože pomáhá návštěvníkům procházet váš web a pokud jste vytvořili seznam elegantně, 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 rozložení, záhlaví a zápatí libovolného webu.

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 na funkce, které zákazníkům umožňují přizpůsobit si část 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.