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 helpen verbeteren? Als dat zo is, dan bent u bij ons aan het juiste adres. Hier hebben we een gedetailleerde gids samengesteld om u te helpen.

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

Inhoudsopgave:

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

Waarom heeft u 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 halen, maar ook voor een betere SEO-ranking.

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

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

Als u dus te ingewikkelde menu's maakt, is het voor de bots moeilijk om uw inhoud te rangschikken, maar raakt u ook uw bezoekers kwijt.

Kortom, “navigatiegemak” levert een cruciale bijdrage aan het verbeteren van een betere gebruikerservaring en speelt ook een cruciale rol bij het verbeteren van de ranking van onze site en het stimuleren van het verkeer.

Het is voor veel zakelijke websites een uitstekende reden om één navigatiepictogram te behouden in plaats van een complexe menubalk, die wordt geladen in een menu op volledig scherm wanneer erop wordt geklikt.

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

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

Laten we, voordat we beginnen met de Elementor-navigatiewidget, onderzoeken hoe we een eenvoudig WordPress-menu kunnen maken met de gratis versie van Elementor.

Maak een eenvoudig WordPress-menu met Elementor

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

Dat gezegd hebbende, heb je geen toegang tot aanpassingsopties voor het menu. Het neemt het ontwerp over van het momenteel actieve WordPress-thema. Maar als dat alles is wat u wilt, dan is dit een uitstekende manier om een ​​navigatiemenu voor uw 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 Weergave > 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.

Let op : Maak je geen zorgen. Uw lezers kunnen de menunamen niet zien. Het is een functie waarmee u al uw verschillende menu's georganiseerd 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 deze aan

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

Standaard bevat dit al uw pagina's, berichten, landingspagina'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". Hierdoor wordt uw menu gevuld 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 deze opties te gebruiken als er veel items zijn.

Zodra u klaar bent met het toevoegen van alle menu-items, klikt u op de knop “Menu opslaan” en gaat u door naar de volgende stap.

3. Submenu's maken – Bovenliggende en onderliggende menu-items (optioneel)

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

Wanneer een gebruiker over het bovenliggende menu-item zweeft, worden alle onderliggende menu-items zichtbaar 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 plaatsen. Sleep vervolgens alle menu-items die u als onderliggende menu-items eronder wilt hebben. 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.

Bovenaan uw menu-editor zou u een optie moeten zien met de naam 'Locaties beheren'. Klik erop en iets dat lijkt op het volgende scherm zou moeten verschijnen:

De beschikbare menulocaties zijn nu 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 aan elk van de beschikbare menulocaties heeft toegewezen, 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 voor meer informatie over de Elementor Pro Nav Menu Widget.

Een navigatiemenu maken met de Elementor pro nav-widget

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 de Elementor-navigatiewidget en vele andere speciale functies, zoals meer dan 300 sjablonen, een themabouwer, een pop-upwidget, WooCommerce-widgets en vele andere interessante functies.

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

Elementor Nav-Menu-widget Belangrijkste kenmerken

• De Nav-menuwidget geeft u de vrijheid om uw menu te plaatsen waar u maar wilt. In uw koptekst, bovenaan of waar dan ook op uw pagina.
• U kunt meerdere menu's toevoegen aan uw site, maar ook aan uw pagina's afzonderlijk of globaal.
• Geef een oogverblindend uiterlijk aan uw menu door gebruik te maken van animatie, zweefeffecten of actieve status
• Maak een mobiel responsief menu van uw site en bepaal hoe uw site er op mobiele schermen uit zal zien
• Pas de kleur, typografie en opvulling of andere aanpassingen van uw menubalk aan
• Creëer een pixel-perfect menu met de juiste precisie wat betreft 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 kunt u het standaard WordPress-menu aanpassen met behulp van de pro-nav-menu-widget. Nadat u de primaire lijst heeft gemaakt, is de volgende stap het toevoegen van deze aan de gewenste locatie, bijvoorbeeld de kopsectie.

Als u nu klaar bent met de basisinstellingen, gaan we het menu aanpassen met behulp van de navigatiemenuwidget.

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

Het gedeelte Lay-out : je hebt 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 van links naar rechts over het scherm.
• Verticaal: Op veel sites vind je ook een verticale indeling, vooral op sites die creatieve diensten aanbieden. Bij een verticale indeling zal de spreiding van de navigatiebalk van boven naar beneden zijn.
• Dropdown: vervolgkeuzemenu's zijn ook vrij gebruikelijk. Dropdowns hebben een verticale lay-out en vereisen interactie met de gebruiker om deze 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 lijnanimatie-effecten. Je kunt ook kiezen voor het frame, de achtergrond en subtiele tekstanimaties.

De onderstreepte animaties zijn als volgt:

• Vervagen: De vervagingsanimatie biedt vervagingsanimatie onder de menu-items.
• Dia: De dia-animatie verschuift 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 loopt van onder naar boven.
• Uitvallen: Uitvalanimatie loopt van boven naar beneden.

Op dezelfde manier zijn er ingelijste, bovenlijn-, dubbele lijn-, achtergrond- en tekstanimaties. Elk van hen biedt zijn eigen reeks 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 boordevol vele submenu-stijlopties. Waar je niet alleen de kleur, stijl en ook de achtergrond van het menu kunt bepalen.

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

Elementor benadert de 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, linkse, rechtse en uitgevulde uitlijning.

Achtergrondkleur en typografie : u kunt uw merklook op maat creëren 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 naar eigen wens ontwerpt.

Mobiel responsief menu

Mobiel is een belangrijk onderdeel van internet en daarom bieden Elementor-ontwikkelaars ook tools waarmee je ook de navigatiebalk voor mobiel kunt maken.

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

Kort gezegd zijn de mobiele menufuncties van de Elementor als volgt:

• Volledige breedte op mobiel: u krijgt de mogelijkheid om ook de volledige breedte of een beperkte breedte in te stellen.
• Tablet- of mobiele breekpunten: u kunt de breekpuntinstellingen gebruiken om het mobiele menu voor mobiel of tablet in te stellen.
• Verticale en accordeonmenu's: Elementor biedt ook de mogelijkheid om een ​​opvouwbaar hamburgerpictogram weer te geven.
• Schakel uitlijnen: Het hamburgerpictogram kan in het midden, links of rechts worden uitgelijnd.
• Uitlijning opzij/gecentreerd: Kies de uitlijning van het mobiele menu.

Responsieve navigatie: Biedt responsieve positionering van het menu.

Inpakken

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 net zo belangrijk als dat van de volledige lay-out van elke website, de koptekst en het voettekstgedeelte.

Daarom moet de menuwidget in staat zijn om uw unieke merkuitstraling te leveren met alle essentiële functies. De Elementor-navigatiewidget wordt geleverd met functierijke 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 website, op uw landingspagina, header of op een andere sectie waar u het wilt weergeven.