Hoe voeg je custom anchor links toe aan een WordPress-menu?

Om menu anchors links toe te voegen in WordPress met Elementor, volg je de onderstaande stappen:

Stap 1: Maak een anchor aan in Elementor

1. Ga naar “Elementor” in het WordPress-dashboard en maak een nieuwe pagina of bewerk een bestaande pagina met Elementor.
2. Sleep een “Text Editor”-widget naar de gewenste sectie op de pagina waar je de anchor wilt plaatsen.
3. Voeg in de teksteditor de gewenste naam toe voor je anchor, bijvoorbeeld “section1” (zorg ervoor dat het één woord is zonder spaties, symbolen of speciale tekens).

Stap 2: Voeg het menu-item toe aan het menu

1. Ga naar “Weergave” > “Menu’s” in het WordPress-dashboard.
2. Selecteer het menu dat je wilt bewerken of maak een nieuw menu aan.
3. Klik op “Aangepaste links” aan de linkerkant van het scherm.
4. In de URL-veld vul je “#” in, dit zorgt ervoor dat de link nergens naartoe leidt, maar het zal later worden bijgewerkt om naar de anchor te verwijzen.
5. Voer de anchor-naam in die je eerder hebt gemaakt met de toevoeging van een hekje (#), bijvoorbeeld “#story”.
6. Voeg een linktekst toe, bijvoorbeeld “Our story” en klik op “Aan menu toevoegen”.

Stap 3: Bijwerken van de anchor link

1. Klik op “Niet-opgeslagen wijzigingen” of “Bijwerken” om de pagina met Elementor bij te werken.
2. Ga terug naar de “Text Editor”-widget waar je de anchor hebt gemaakt.
3. Selecteer de tekst die je hebt gebruikt als anchor-naam (bijvoorbeeld “story”).
4. Klik op het kettingpictogram in de Elementor-werkbalk en voeg hetzelfde label in (bijvoorbeeld “story”) in het “Link URL” veld.
5. Klik op “Bijwerken” om de wijzigingen op te slaan.

Nu zouden de menu-ankers correct moeten werken op je WordPress-website met Elementor. Wanneer je op het menu-item klikt, zou het naar de betreffende sectie op dezelfde pagina moeten scrollen waar de anchor zich bevindt.