Heb je ooit een website bezocht waar je eindeloos moest scrollen om bij de informatie te komen die je echt nodig had? Het kan voor bezoekers van jouw wordpress website ontzettend frustrerend zijn als zij niet direct kunnen navigeren naar het specifieke onderdeel waar zij naar op zoek zijn. Gelukkig is er een krachtige techniek binnen het divi thema die dit probleem in een handomdraai oplost en de gebruikerservaring van jouw website naar een hoger niveau tilt. In dit artikel duiken we diep in de wereld van navigatie-optimalisatie en leggen we je stap voor stap uit hoe je deze slimme verwijzingen zelf kunt implementeren zonder dat je een regel code hoeft te schrijven.

Wat zijn divi anker links en waarom zijn ze belangrijk?

Voordat we in de technische stappen duiken, is het essentieel om te begrijpen wat een anker link precies is. In de wereld van webdesign noemen we dit ook wel een anchor link of een jump link. Het is een speciale koppeling die een bezoeker niet naar een nieuwe pagina stuurt, maar direct naar een specifiek onderdeel op dezelfde pagina laat springen. Stel je voor dat je een lange landingspagina hebt met verschillende diensten, een over ons gedeelte en een contactformulier. Met een anker link kan een bezoeker bovenaan de pagina op ‘contact’ klikken en de browser scrolt dan automatisch naar beneden naar het juiste tekstblok.

Het gebruik van deze techniek is niet alleen handig voor de bezoeker, maar het helpt ook bij de conversie van je website. Wanneer mensen sneller vinden wat ze zoeken, is de kans groter dat ze actie ondernemen. Bovendien geeft het een professionele uitstraling aan je webdesign. Voor eigenaren van een kleine tot middelgrote onderneming die hun eigen site beheren, is dit een van de meest effectieve manieren om een one-page website of een uitgebreide dienstenpagina overzichtelijk te houden.

Stap 1: een unieke identificatie toekennen aan een sectie

De eerste stap bij het maken van een anker link in divi is het aanwijzen van het doel. Je moet de computer vertellen waar de bezoeker precies moet landen na het klikken op de link. Dit doen we door een css id toe te kennen aan een sectie, rij of module. Volg deze stappen om dit correct in te stellen:

• Open de pagina die je wilt bewerken met de divi visual builder.
• Scrol naar de sectie (het blauwe kader) waar je de bezoeker naartoe wilt sturen.
• Klik op het tandwiel-icoon om de sectie-instellingen te openen.
• Ga naar het tabblad geavanceerd bovenin het instellingenvenster.
• Klap het onderdeel css id & klassen uit.
• Typ in het veld bij css id een unieke naam, bijvoorbeeld contact-sectie.
• Sla de instellingen op door op het groene vinkje te klikken.

Het is cruciaal dat je bij het invoeren van de id geen spaties gebruikt en geen hoofdletters typt. Gebruik in plaats van spaties altijd een streepje. Mocht je tijdens het bewerken tegen problemen aanlopen zoals een haperende editor, dan kun je kijken of een divi visual builder wit scherm de oorzaak is van je technische uitdagingen.

Stap 2: de link maken naar de aangemaakte sectie

Nu je het doel hebt gemarkeerd met een id, is het tijd om de daadwerkelijke link te maken. Dit kan een knop zijn, een stukje tekst of zelfs een menu-item. Het belangrijkste onderdeel hier is het gebruik van het hekje-symbool (#). Dit symbool vertelt de browser dat de link verwijst naar een id op de huidige pagina.

Stel dat je een knop wilt maken die naar de eerder gemaakte contact-sectie verwijst. Je gaat dan als volgt te werk:

• Voeg een knop-module toe aan je pagina of bewerk een bestaande knop.
• Ga in de instellingen naar het tabblad inhoud en open het onderdeel link.
• In het veld url van de knop-link typ je exact de naam van je id met een hekje ervoor, dus: #contact-sectie.
• Sla de module op en publiceer je pagina om de werking te testen.

Wanneer een bezoeker nu op de knop klikt, zal de pagina soepel naar beneden glijden tot de bovenkant van de geselecteerde sectie in beeld is. Dit effect wordt ook wel smooth scrolling genoemd en is standaard ingebouwd in het divi thema.

Anker links toevoegen aan het hoofdmenu

Vaak wil je dat de navigatie bovenin je website direct linkt naar verschillende onderdelen op de homepagina. Dit is vooral populair bij moderne websites die alle kerninformatie op één pagina presenteren. Om dit te realiseren, moet je de menu-instellingen van wordpress aanpassen.

Ga in je wordpress dashboard naar weergave en vervolgens naar menu’s. In plaats van een bestaande pagina te selecteren, kies je aan de linkerkant voor de optie aangepaste links. Bij de url vul je weer de id in met het hekje (bijvoorbeeld #diensten) en bij de linktekst typ je de naam zoals die in het menu moet verschijnen. Als je werkt met een aangepaste koptekst, is het handig om te weten hoe je een divi theme builder header maken kunt voor een optimaal resultaat.

Linken naar een sectie op een andere pagina

Het is ook mogelijk om vanaf een andere pagina direct naar een specifieke sectie op bijvoorbeeld je homepagina te linken. Dit vereist een kleine aanpassing in de url. In plaats van alleen #contact-sectie te gebruiken, moet je de volledige url van de pagina vermelden gevolgd door het anker.

De link ziet er dan als volgt uit: https://jouwwebsite.nl/home/#contact-sectie. Op deze manier weet de browser dat hij eerst de nieuwe pagina moet laden en vervolgens direct naar de juiste plek moet scrollen. Dit is ideaal voor advertenties of social media posts waarbij je de bezoeker direct naar een specifiek aanbod wilt sturen.

Geavanceerde tips voor een perfecte ervaring

Hoewel het maken van de links zelf vrij eenvoudig is, zijn er een paar details die het verschil maken tussen een goede en een geweldige website. Een van die details is de offset. Soms heb je een vaste menubalk bovenin je scherm die over de content heen valt wanneer je naar een anker link springt. De bezoeker landt dan wel op de juiste plek, maar de titel van de sectie verdwijnt achter het menu.

In de instellingen van divi kun je dit vaak opvangen door extra witruimte (padding) toe te voegen aan de bovenkant van je sectie. Hierdoor stopt het scrollen precies op de plek waar de tekst goed leesbaar is onder je menu. Een andere tip is om je anker links te testen op mobiele apparaten. Omdat schermen kleiner zijn, kan de scroll-afstand anders aanvoelen. Zorg ervoor dat je knoppen groot genoeg zijn zodat mensen er makkelijk op kunnen tikken met hun duim.

Als je merkt dat je website traag reageert tijdens het scrollen, kan dit te maken hebben met de algehele prestaties van je wordpress installatie. Het is dan verstandig om te controleren of je de juiste optimalisaties hebt doorgevoerd, zoals het gebruik van moderne afbeeldingsformaten. Je kunt hier meer over lezen in onze gids over divi afbeeldingen optimaliseren voor webp formaat.

Conclusie: aan de slag met jouw navigatie

Het implementeren van anker links in divi is een relatief kleine moeite met een groot resultaat. Je verbetert de toegankelijkheid van je informatie en zorgt ervoor dat bezoekers langer op je pagina blijven omdat zij niet verdwalen in de content. Door consequent gebruik te maken van logische namen voor je css id’s en deze zorgvuldig te koppelen aan je knoppen en menu’s, bouw je een website die staat als een huis.

Onthoud dat een goede website nooit echt af is. Blijf testen hoe je bezoekers de navigatie ervaren en pas waar nodig de posities van je ankers aan. Met de flexibiliteit van de divi builder heb je alle tools in handen om een interactieve en gebruiksvriendelijke omgeving te creëren voor jouw klanten. Mocht je hulp nodig hebben bij het inrichten van je website of het optimaliseren van je wordpress omgeving, dan staan de experts van prospects4u altijd klaar om je te ondersteunen bij technische uitdagingen.