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:
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.
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.
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.
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.
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!
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.
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.
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.
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:
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:
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 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:
Responsieve navigatie: biedt een responsieve positionering van het menu.
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.
De kop- en voetteksten van een website zijn essentiële elementen. In de meeste gevallen biedt de Header navigatie...
Twee van de meest populaire WordPress-thema's op de markt zijn Astra en OceanWP. Professioneel…
Voor het maken van een uitstekende nieuwswebsite hoef je geen webdesigner te worden. We…
Het thema Kranten is een van de belangrijkste WordPress-thema's ontworpen door tagDiv, een ...
Als het gaat om het opzetten van een online winkel, is WooCommerce de go-to- plugin . Het…
Een koptekst is over het algemeen het eerste wat een persoon ziet wanneer ze uw website bezoeken, ...
Bekijk de reacties
Gegarandeerd door het bericht, de naam van het navigatiemenu no me aparece mi menú se queda solo un recuadro gris en el editor de elementor y si voy a la page donde lo tengo no aparece nada. Como puedo solucionarlo? gracias
Hoi! Meestal treedt dit probleem op als uw menu leeg is of niet is opgeslagen. Controleer de menuzijde van WordPress nogmaals.
Hola, una consulta, cómo se puede dar la instrucción para cerrar automáticamente un submenu al abrir otro ítem del menu.
Gracia's.
Hoi, sorry dat ik je vraag niet helemaal begrijp? Kunt u aangeven?
ciao quando le voci del submenù sono troppo lunghe come si riesce a dividerle su più righe ?
Hallo, dit wordt niet aanbevolen omdat de navigatie erg ingewikkeld zou zijn om te lezen, in dit geval is het beter een mega-menustijl
Menu w wersji mobilnej nie otwiera sie. Jak moge je utworzyc zeby wyswietlalo sie na telefonach?
Hallo, de weergave van het mobiele menu is automatisch als u de Elementor-navigatiewidget gebruikt. Maar u moet een instellingsaanroep "breekpunt" in de menu-instellingen controleren. Dit is de schermgrootte wanneer uw menu zal wisselen.
Tôi dùng thằng này, mà trên destop tôi để chế độ Horizontale mà nó không nằm ngang, geen cứ nằm dọc, tôi dùng thema Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp oldható meg, hogy egy vertikális menüben az almenüre kattintás után ne zárja össze a menüt az oldal betöltésekor? EPro
Hallo, helaas is dat niet mogelijk, er is geen dergelijke optie in de Elementor nav-widget.
Doei. Vorrei sapere se è possibile fare in modo che il menu rimanga semper visibile anche quando si scende con la visualizzazione della page. Als je het menu draait, wordt het menu weergegeven en de achtergrondkleur van het menu wordt niet weergegeven. Grazie