Bladwijzer maken in WordPress met de Divi Builder

Het maken van een soepele en gebruiksvriendelijke navigatie op je WordPress-website is essentieel voor een optimale gebruikerservaring. Of je nu een lange landingspagina hebt of meerdere secties op een enkele pagina wilt markeren, het maken van bladwijzers kan een enorme hulp zijn. In dit blogartikel leg ik je uit hoe je eenvoudig een bladwijzer kunt maken in WordPress met de Divi Builder. Leer hoe je links naar specifieke gedeeltes van je pagina’s kunt creëren, zodat bezoekers snel en gemakkelijk de informatie kunnen vinden die ze nodig hebben.

Wat is een bladwijzer?

Een bladwijzer maken, ook wel ankerlink genoemd, is een handige manier om je websitebezoekers direct naar een specifiek gedeelte van een pagina op je website te navigeren. In plaats van dat deze websitebezoeker door de hele pagina moet scrollen om de gewenste informatie te vinden, kan een bladwijzer hem of haar met één klik naar het juiste gedeelte brengen. 

Bladwijzers zijn vooral nuttig voor lange webpagina’s met veel inhoud, zoals blogs, FAQ-pagina’s of handleidingen. Je ziet het bijvoorbeeld wel eens gebruikt worden bij een inhoudsopgave. Als jij op het specifieke deel van die inhoudsopgave klikt, kom je direct op dát deel van het artikel uit. Dit wordt dus gedaan door een bladwijzer te maken.

How to: bladwijzer maken in WordPress met de Divi Builder

Allereerst bepaal je natuurlijk waar je bladwijzer moet komen. Vanaf welk kopje, welke pagina, welke afbeelding etc. wil je linken en naar welk stukje op je website moet je websitebezoeker dan gestuurd worden?

In het voorbeeld hieronder ga ik een bladwijzer maken NAAR het kopje “Workshops en trainingen”. Bovenaan deze pagina (dit is een aanbodpagina) heb ik enkele icoontjes staan voor de bijbehorende diensten. Ik wil straks dat het icoontje wat voor “Workshops en trainingen” staat, ook naar dit deel van de pagina linkt.

Verderop in dit artikel ga ik je ook nog laten zien hoe je vanaf een ándere pagina naar dit stukje tekst op de aanbodpagina linkt.

Goed, eerst gaan we verder met deze. Selecteer het kopje waar je straks naartoe wilt linken en ga naar de instellingen. Klik op “Geavanceerd” – “CSS-id en -klasses” en vul bij “CSS ID” een passende naam in. Deze naam moet je kunnen onthouden, dus maak hem niet te ingewikkeld en schrijf hem desnoods even voor jezelf op. Ik heb de naam “Bladwijzer-Workshops” gekozen.
Sla op.

Stap 2: de bladwijzer maken

Ga vervolgens naar het deel van de pagina waarvandaan je de bladwijzer wilt maken. In mijn geval wil ik dat wanneer de websitebezoeker op het icoontje met de tekst “Workshops en trainingen” klikt, dat hij of zij direct naar de uitleg bij deze dienst op deze pagina gaat. Dit stukje hebben we net een stukje tekst gegeven (zie vorige afbeelding).

Wat we nu gaan doen is naar de instellingen van deze module. Klik op het tandwieltje.

Stap 3: de link maken

Ga naar het kopje “Content” (meestal ben je daar al), scroll iets naar beneden en klik op het kopje “Link”. Hier maak je vervolgens de verwijzing naar de bladwijzer die je gemaakt hebt. Je zet hier een # met gelijk daarachter de tekst die je als het goed is onthouden hebt. In mijn geval wordt het dus “#Bladwijzer-Workshops”.

Sla op.

Klaar!

Nu heb je een bladwijzer gemaakt! Als je nu op het deel in je website klikt waar je vandaan wilde linken kom je als het goed is uit op het juiste deel van die pagina. Mijn voorbeeld kun je hier bekijken en testen.

Bladwijzer maken vanaf een andere pagina

Als je op een andere pagina een link wilt maken naar een specifiek deel van een ándere pagina, dan komt je link er net even anders uit te zien.

Het begin is hetzelfde, dus volg vooral eerst de stappen die we in het eerste deel van dit artikel genomen hebben. Het enige wat we nu nog doen is de link aanpassen.

In dit voorbeeld wil ik vanaf de homepagina een link maken vanaf de Blurb (rood omrand hieronder) naar de aanbodpagina en dan specifiek naar het gedeelte waar “Workshops en trainingen” staat uitgelegd.

Selecteer het gedeelte waarvandaan je wilt linken (in mijn geval dus die Blurb op de homepagina). Ga naar “Content”, scroll naar “Link” en voor vervolgens de URL in van de pagina waar de link heen moet PLUS /#en dan de naam die je je bladwijzer gegeven had. In mijn geval is de link nu: https://domeinnaam.nl/aanbod/#Bladwijzer-Workshops

Sla op.

Ook klaar! Je hebt je bladwijzer gemaakt!

Test hem nog even uit en hij is klaar voor gebruik!

Voorbeelden waarbij het maken van bladwijzers erg handig is

Bladwijzers kunnen op verschillende manieren worden gebruikt om de navigatie en gebruikerservaring op je website te verbeteren. Hier zijn enkele praktische voorbeelden van hoe je bladwijzers effectief kunt inzetten:

1. In lange blogartikelen

Bij lange blogartikelen kan een inhoudsopgave aan het begin van het artikel met bladwijzers naar elke sectie ervoor zorgen dat lezers snel de informatie kunnen vinden die ze zoeken. Bijvoorbeeld, een artikel over digitale marketingstrategieën kan beginnen met een inhoudsopgave die linkt naar secties over SEO, social media marketing, en content marketing.

2. Op FAQ-pagina’s

Op een FAQ-pagina kun je bladwijzers gebruiken om bezoekers direct naar de antwoorden op hun vragen te leiden. Elke vraag kan een link zijn die naar het bijbehorende antwoord verderop de pagina verwijst.

3. Op productpagina’s

Voor webshops met uitgebreide productbeschrijvingen en specificaties kunnen bladwijzers helpen om verschillende secties van een productpagina overzichtelijk te maken. Bijvoorbeeld, je kunt secties hebben voor productbeschrijving, specificaties, reviews, en gerelateerde producten, en bladwijzers gebruiken om gebruikers snel naar deze secties te laten navigeren.

4. Op lange landingspagina’s

Op lange landingspagina’s kunnen bladwijzers bezoekers helpen om snel naar specifieke onderdelen te gaan, zoals een aanmeldingsformulier, klantrecensies, of een prijstabel. 

5. In handleidingen

In technische documentatie of handleidingen kun je bladwijzers gebruiken om gebruikers snel naar specifieke stappen of onderdelen te brengen. 

Met de stap-voor-stap handleiding in dit artikel kun je zelf aan de slag gaan met het maken van bladwijzers.

Vergeet niet om je bladwijzers te testen en eventuele problemen op te lossen voor een optimale werking. Door bladwijzers strategisch te gebruiken, verbeter je de gebruikerservaring en maak je het je bezoekers gemakkelijker om de informatie te vinden die ze nodig hebben. Vragen? Neem gerust contact met me op.

Meer websitetips en inspiratie? Lees dan mijn andere blogartikelen.