Elementor-navigatiemenu - Bouw een geweldig menu voor uw WordPress-website

Bent u op zoek naar een manier om een ​​geweldig menu te maken om de UI/UX van uw website te verbeteren? Dan bent u bij ons aan het juiste adres. Hier hebben we een gedetailleerde gids samengesteld om u te helpen.

Eerst laten we u stap voor stap zien hoe u een menu voor uw WordPress-website kunt maken. En als je dat eenmaal onder de knie hebt, zullen we je begeleiden bij het gebruik van de Elementor Navigatiemenu-widget om je WordPress-menu aan te passen en te verbeteren.

Inhoudsopgave:

• Waarom heb je een aangepast navigatiemenu nodig?
• Maak een basis WordPress-menu met Elementor
• 1. Maak een eenvoudig menu voor uw WordPress-website
• 2. Kies navigatiemenu-items en pas ze aan
• 3. Maak submenu's - Bovenliggende en onderliggende menu-items (optioneel)
• 4. Beheer uw menulocatie en publiceer
• Een navigatiemenu maken met de widget Elementor pro nav
• Elementor Nav-Menu widget Belangrijkste kenmerken
• Maak een menu met nav-menu pro widget
• Mobiel responsief menu
• Afsluiten

Waarom heb je een aangepast navigatiemenu nodig?

Het is van cruciaal belang om te weten dat de navigatiemenu's niet alleen belangrijk zijn om verkeer naar uw site te leiden, maar ook voor een betere SEO-ranking.

De navigatiemenu's zijn inderdaad in de eerste plaats bedoeld voor gebruikersbetrokkenheid, maar dit is niet het enige doel.

De tweede belangrijkste factor is om de rol van "WebCrawler" of Bots die ontworpen zijn om de websites te crawlen, de inhoud naar het relevante niveau te indexeren en terug te rapporteren aan de zoekmachine om de inhoud op de juiste plaats te rangschikken.

Daarom, als u te gecompliceerde menu's maakt, is het voor de bots moeilijk om uw inhoud te rangschikken, maar verliest u ook uw bezoekers.

Kortom, "navigatiegemak" levert een cruciale bijdrage aan het verbeteren van een betere gebruikerservaring en speelt een cruciale rol bij het verbeteren van onze site-ranglijst en het stimuleren van verkeer.

Het is een uitstekende reden voor veel zakelijke websites om een ​​enkel navigatiepictogram te behouden in plaats van een complexe menubalk, die bij klikken op een volledig scherm wordt geladen.

Dankzij de Elementor pro-widget met een 100% responsief navigatiemenu, kun je een pixel-perfecte en ongelooflijk flexibele menubalk maken zonder code te gebruiken.

In deze zelfstudie laten we u zien hoe u de Elementor-widget voor het navigatiemenu gebruikt om het aangepaste, geavanceerde WordPress-menu te krijgen.

Voordat we beginnen met de Elementor-navigatiewidget, gaan we kijken hoe we een eenvoudig WordPress-menu kunnen maken met de gratis versie van Elementor.

Maak een basis WordPress-menu met Elementor

Om nu een WordPress-menu te maken, hoeft u geen speciale plugin te installeren. WordPress wordt standaard geleverd met een gebruiksvriendelijke menubouwer, waarmee u eenvoudige navigatiemenu's voor uw website kunt maken.

Dat gezegd hebbende, hebt u geen toegang tot aanpassingsopties voor het menu. Het zal het ontwerp van het momenteel actieve WordPress-thema overnemen. Maar als dat alles is wat je wilt, dan is dit een uitstekende manier om een ​​navigatiemenu voor je WordPress-website in te stellen.

1. Maak een eenvoudig menu voor uw WordPress-website

Allereerst moet u inloggen op uw WordPress backend-dashboard.

Ga nu vanuit de linkerzijbalk naar Uiterlijk > Menu's . Hier vindt u een lay-out met twee kolommen met links "Menu-items toevoegen" en rechts "Menustructuur".

Onder Menustructuur vindt u een veld voor de "Menunaam". Dit wordt de naam voor het menu dat we nu gaan maken. Laten we het menu 1 noemen.

Opmerking : maak je geen zorgen. Uw lezers kunnen de menunamen niet zien. Het is een functie waarmee u al uw verschillende menu's overzichtelijk kunt houden.

Nadat u uw menu een naam heeft gegeven, klikt u op de knop "Menu maken" om het beschikbaar te maken. Nu moet u de verschillende menu-items toevoegen.

2. Kies navigatiemenu-items en pas ze aan

Nu komt het gedeelte waar u uw nieuwe menu vult met menu-items. Onder het gedeelte 'Menu-items toevoegen' aan uw linkerkant, vindt u een georganiseerde lijst met dingen die u aan uw menu kunt toevoegen.

Dit bevat standaard al uw pagina's, berichten, bestemmingspagina's, aangepaste links en categorieën.

selecteer gewoon de menu-items die u wilt toevoegen met behulp van het selectievakje en klik vervolgens op de knop "Toevoegen aan menu". Dit zal uw menu vullen met al uw geselecteerde menu-items.

Opmerking : merk op dat elke sectie onder "Menu-items toevoegen" de optie heeft om te schakelen tussen - Meest recent , Alles weergeven en Zoeken . Vergeet niet om deze opties te gebruiken als er veel items zijn.

Als u klaar bent met het toevoegen van alle menu-items, drukt u op de knop "Menu opslaan" en gaat u verder met de volgende stap.

3. Maak submenu's - Bovenliggende en onderliggende menu-items (optioneel)

Wist je dat je met WordPress standaard ook submenu's kunt maken? Bij het maken van de submenustructuur hebt u een bovenliggend menu-item en een kindmenu-item.

Wanneer een gebruiker de muisaanwijzer op het bovenliggende menu-item plaatst, worden alle onderliggende menu-items weergegeven die eronder verborgen zijn.

Cool toch?

Om nu een submenustructuur te maken, hoeft u alleen maar een menu-item te kiezen dat u in het bovenliggende menu wilt hebben. Sleep vervolgens alle menu-items die u wilt als onderliggende menu-items eronder. Sleep het nu gewoon naar rechts en je bent klaar!

4. Beheer uw menulocatie en publiceer

Nu je je nieuwe menu hebt gemaakt en submenu's hebt toegevoegd, is het tijd om de locatie ervan te beheren.

Boven aan je menu-editor zou je een optie moeten zien met de naam 'Locaties beheren'. Klik erop en er zou iets moeten verschijnen dat lijkt op het volgende scherm:

Nu zijn de beschikbare menulocaties afhankelijk van het thema dat u hebt geïnstalleerd. In dit amp hebben we een thema dat 3 menu's ondersteunt.

Nadat u een menu hebt toegewezen aan elk van de beschikbare menulocaties, klikt u op "Wijzigingen opslaan" en dat is alles.

U kent nu standaard alle basismenufuncties die WordPress biedt. Als u echter meer maatwerk en functionaliteit wilt, lees dan verder om meer te weten te komen over de Elementor Pro Nav Menu Widget.

Een navigatiemenu maken met de widget Elementor pro nav

Als je een aangepast navigatiemenu aan je WordPress-site wilt toevoegen, heb je de Elementor Pro-versie nodig. De Elementor Pro-versie wordt geleverd met Elementor nav-widget , samen met vele andere speciale functies, zoals 300+ sjablonen, een themabouwer, een pop-upwidget, WooCommerce-widgets en vele andere interessante functies.

Wat zijn de specifieke hoofdkenmerken van de Nav Menu-widget zelf? Hier is een korte introductie.

Elementor Nav-Menu widget Belangrijkste kenmerken

• De Nav-menu widget geeft je de vrijheid om je menu te plaatsen waar je maar wilt. Op uw koptekst of bovenaan of ergens op uw pagina.
• U kunt meerdere menu's toevoegen aan uw site en ook aan uw pagina's afzonderlijk of wereldwijd.
• Geef uw menu een oogverblindend uiterlijk met animatie, zweefeffecten of actieve status
• Maak een mobiel responsief menu van uw site en bepaal hoe uw site eruit zal zien op mobiele schermen
• Pas kleur, typografie en opvulling of andere aanpassingen van uw menubalk aan
• Creëer een pixel-perfect menu met de juiste precisie van uitlijning, spatiëring en opvulling.

Maak een menu met nav-menu pro widget

U moet een eenvoudig WordPress-menu maken zoals we hierboven hebben vermeld en vervolgens past u het standaard WordPress-menu aan met behulp van de pro-nav-menu-widget. Nadat u de primaire lijst heeft gemaakt, is de volgende stap deze toe te voegen aan de gewenste locatie, dwz het koptekstgedeelte.

Als je nu klaar bent met de basisinstellingen, laten we het menu dan aanpassen met de nav-menu widget.

In de bovenste hoek van het instellingsgedeelte zijn er drie opties beschikbaar; Inhoud, stijl en geavanceerd.

Het gedeelte Lay-out : u heeft drie opties: Horizontaal, verticaal of een verborgen vervolgkeuzelijst.

• Horizontaal: de horizontale lay-out is de meest voorkomende lay-out die door de sites wordt gebruikt. Het verspreidt zich over het scherm van links naar rechts.
• Verticaal: u vindt ook op veel sites een verticale lay-out, met name op sites die creatieve diensten aanbieden. In het geval van een verticale lay-out is de spreiding van de navigatiebalk van boven naar beneden.
• Vervolgkeuzelijst: vervolgkeuzemenu's komen ook vrij vaak voor. Dropdown-menu's hebben een verticale lay-out en vereisen interactie met de gebruiker om te onthullen. Ze worden meestal gebruikt om een ​​strak ontwerp te creëren.

Sectie uitlijnen : deze sectie helpt u bij het uitlijnen van de menutekstitems; midden, rechts of links.

Animatiesectie : in deze sectie kunt u animatie-effecten toevoegen onder, boven of dubbele lijn animatie-effecten. Je kunt ook gaan voor het frame, de achtergrond en subtiele tekstanimaties.

De onderstreepte animaties zijn als volgt:

• Fade: de fade-animatie biedt een fade-animatie onder de menu-items.
• Dia: de dia-animatie schuift de balk onder de menu-items.
• Groeien : de groei-animatie groeit van het midden naar buiten en geeft een gevoel van groei.
• Drop-in : drop-in-animatie stroomt van onder naar boven.
• Drop out: Drop-out animatiestromen van boven naar beneden.

Evenzo zijn er frame-, bovenlijn-, dubbele lijn-, achtergrond- en tekstanimatie. Elk van hen biedt zijn eigen set animaties en je kunt ze zelf bekijken om te zien wat je ermee krijgt.

Aanwijzersectie : selecteer het type aanwijzer in het vervolgkeuzemenu.

Submenu-indicatorsectie : de Elementor-widget zit vol met veel stijlopties voor submenu's. Waar je niet alleen de kleur, stijl en ook de achtergrond van het menu kunt regelen.

Opvulling en menu-afstand: opvulling kan snel worden aangepast. U kunt de horizontale opvulling wijzigen voor menu en submenu, verticale opvulling, tussenruimte ook de rechter, linker en gecentreerde uitlijning.

Elementor benadert menu-afstand en opvulling buitengewoon goed. Ze hebben achter de deuren hard gewerkt om ervoor te zorgen dat ze de tools naar de ontwikkelaar kunnen brengen, zodat ze gemakkelijk het ontwerp kunnen maken waar ze aan denken.

De menu-afstand biedt veel opties, waaronder:

• Ruimte tussen menu-items
• Horizontale en verticale opvulling voor menu- en submenu-elementen
• Gecentreerde, links, rechts en uitgevulde uitlijning.

Kleur achtergrond en typografie : u kunt uw op maat gemaakte merklook krijgen met behulp van het gewenste kleurenschema en de achtergrondkleur. U kunt ook de transparante of semi-transparante menu-opties kiezen.

Als ontwerper kun je zoveel mogelijk met deze opties spelen en ervoor zorgen dat je de achtergronden ontwerpt zoals je wilt.

Mobiel responsief menu

Mobiel is een belangrijk onderdeel van het web en daarom bieden Elementor-ontwikkelaars ook tools zodat u ook de navigatiebalk voor de mobiel kunt maken.

Met Elementor-widget hebt u volledige controle over mobiele menu-opties op WordPress. U kunt de mobiele schermweergave bedienen met een aparte set instellingen voor alleen mobiele schermen. Er is een optie voor mobiele scherminstellingen onderaan het Elementor-instellingengedeelte waar u uw mobiele schermopties kunt bekijken.

Kortom, de mobiele menufuncties van Elementor zijn als volgt:

• Volledige breedte op mobiel: u krijgt de optie om ook de volledige breedte of een beperkte breedte in te stellen.
• Breekpunten voor tablet of mobiel: u kunt de instellingen voor het breekpunt gebruiken om het mobiele menu in te stellen voor mobiel of tablet.
• Verticale en accordeonmenu's: Elementor biedt ook de mogelijkheid om een ​​opvouwbaar hamburgersymbool weer te geven.
• Uitlijnen in- / uitschakelen: het hamburgersymbool kan midden, links of rechts worden uitgelijnd.
• Uitlijning opzij / midden: Kies de uitlijning van het mobiele menu.

Responsieve navigatie: biedt een responsieve positionering van het menu.

Afsluiten

Het menu is een van de belangrijkste kenmerken van elke website. Omdat het de bezoekers helpt om door uw website te lopen en als u slim een ​​lijst maakt, helpt het om uw bezoekers lang op uw site te houden. Het menu is even belangrijk als dat van de volledige lay-out van een website, de koptekst en de voettekst.

Daarom moet de menuwidget in staat zijn om uw unieke merklook te leveren met alle essentiële functies. De Elementor -navigatiewidget wordt geleverd met veelzijdige mogelijkheden waarmee klanten het menugedeelte kunnen aanpassen aan de stem van uw merk. Nu kunt u een op maat gemaakt stijlvol menu gebruiken op uw hele website, op uw bestemmingspagina, koptekst of elk ander gedeelte waar u het wilt weergeven.