Anchor links maken in Divi
Mocht je hier zijn belandt en niet weten wat Anchor links zijn, dan volgt er nu een kleine inleiding met een concreet stappenplan om dit zelf heel eenvoudig in te gaan zetten.
Wat zijn Anchor links
Je hebt er vast eens van gehoord, “Anchor links of Ankerlinks”. Dit is een hele makkelijke manier, om snel van de ene plek naar de andere plek binnen de pagina van je website te gaan.
Anchor links zijn links (linkjes) die direct naar een specifieke sectie op een webpagina gaan, zonder dat je daarvoor eerst door een hele pagina hoeft te scrollen.
Deze links worden vaak gebruikt in Onepagers, lange pagina’s of FAQ-pagina’s. Door gebruik te maken van Anchor links, kunnen bezoekers snel en efficiënt de informatie vinden waar ze naar op zoek zijn. En dat door één simpele klik.
Inleiding:
01. Een Anchor bestemming maken.
Een slimme zet om je website te boosten in de zoekmachines, is door het toevoegen van anchor links. Dit is één van de belangrijke stappen, voor het optimaliseren van je website.
Door het maken van een Anchor bestemming, geef je bezoekers de mogelijkheid om direct naar een specifiek gedeelte van een pagina te navigeren. Dit verbetert niet alleen de gebruikerservaring, maar kan ook bijdragen aan een betere positie in de zoekresultaten.
Zorg dat je Anchors links duidelijk en relevant zijn, zodat je bezoekers moeiteloos hun weg vinden. Met de juiste Anchor bestemmingen, wordt het navigeren op je website een stuk eenvoudiger en gebruiksvriendelijker.
Dus stap 1 is: Bedenk waar je de Anchor links voor gaat gebruiken en waar je deze handige snelle navigatie links gaat plaatsen.
02. Anchor link toevoegen aan een sectie, rij of module.
Weet je waar de Anchor link moet komen en waar deze naar toe moet gaan? Mooi!
Dan begint nu Stap 2: Het toevoegen van de link. Dit bestaat uit twee onderdelen, deel 1 is een unieke ID toevoegen aan een sectie, rij of module en deel 2 is de link naar de bestemming maken.
Open de pagina waar je de Anchor link wilt toevoegen en schakel de Divi Visual Builder in.
1. Klik op het tandwiel om het element (een sectie, rij of module) te bewerken, waarin je de Anker link wilt gaan plaatsen.
2. Ga naar het tabblad Geavanceerd en open het tabblad CSS-id & -klasses.
Maak een duidelijke naam voor je Anchor en voeg deze toe in het CSS ID-veld. (bijvoorbeeld blog of neem-contact-op), zodat je straks weet welke Anchor ID dit is en waar je die voor gaat gebruiken. Dit is onderdeel 1.
Let op! Gebruik geen spaties of speciale tekens, zoals hekje (#) in het CSS-id veld, anders werkt de link niet.
3. Ga vervolgens naar de bestemming waar de link naartoe moet verwijzen. De sectie, rij of module. Klik weer op het tandwieltje en ga naar Geavanceerd – CSS-id en -klasses. En vul daarin hekje (#) gevolgd door de ID die je net hebt aangemaakt, dit is deel 2.
4. Klik daarna op de groene knop om de instellingen op te slaan en sla daarna de pagina op.
Tadaa, nu heb jij een werkende Anchor link gemaakt voor een sectie, rij of module.
03. Anchor link aan een woord toevoegen.
Als je wilt doorlinken van een woord in een stuk tekst, naar een andere bepaalde stuk tekst op de pagina, dan ga je als volgt te werk:
1. Ga als eerst naar je bestemming en klik op het tandwieltje van de tekst-instellingen.
2. Ga naar Geavanceerd en klik op CSS-id en -klasses.
3. Vul daar je unieke ID in, dit kan zijn blog, contact enzo, wat bij jou past. In mijn geval zou het zijn, als ik bij mij het gedeelte
inleiding 03. (begin van mijn blog) wil doorlinken naar dit stukje tekst, dan wordt mijn ID: 03-anchor-link-toevoegen (zo heet de inleiding en is herkenbaar voor mij). Let op: gebruik geen spaties, want dan werkt de link niet. Gebruik in plaats daarvan -teken tussen de woorden.
4. Vervolgens ga je naar het woord of zin van waaruit je wilt linken. Dus het deel waar bezoekers op klikken om naar de bestemming te gaan. Je selecteerd het woord of zin en klikt op de icoon “insert link”, zoals je normaal ook een link zou toevoegen.
5. Daar vul je # in gevolgd door je ID, die je net hebt gebruikt. In mijn geval zou het dan zijn: #03-anchor-link-toevoegen.
6. Klik op de groene knop om op te slaan en sla daarna je pagina op.
En nu heb je succesvol je Anchor link gemaakt en gekoppeld aan je stuk tekst.
04. Voeg Anchor link toe aan een CTA-knop.
In een Call To Action button een Anchor link toevoegen. Dit is heel handig om je bezoekers gelijk naar een specifieke deel van je pagina te laten gaan, zonder dat ze eerst een stuk tekst hoeven te lezen. Dit is gebruikersvriendelijk en heel efficiënt.
Dit maak je als volgt:
1. Open de pagina waar je de CTA-knop voor je Anchor link wilt gaan gebruiken.
2. Schakel de Divi Visual Builder in.
3. Voeg een Knop-module toe en vul de tekst in, die je op de CTA-knop wilt hebben staan.
4. Vouw het tabblad “link” uit en voeg de CSS-ID voor je Anker element toe in het veld Knop URL. Let op: nu begin je wel met een hekje (#) vóór de ID, bijvoorbeeld #informatie of #contact-opnemen.
5. Ga vervolgens naar de module, rij of sectie wat de bestemming moet worden, wanneer er op de CTA-knop wordt gedrukt.
6. Klik op het tandwieltje en ga naar Geavanceerd – CSS-id en -klasse en vul daar je ID in, die je bij de knop hebt aangemaakt. Bijvoorbeeld informatie of contact-opnemen. Let op: dit vul je in zonder het hekje (#) ervoor, anders werkt de link niet.
Alles ingevuld op de juiste manier? Top! Dan heb je nu een werkende Anchor link gemaakt, voor een CTA-knop.
05. Voeg Anchor link toe die na een andere pagina leidt.
Een anchor link die naar een andere pagina leidt, is super handig omdat je bezoekers snel naar relevante informatie kunt sturen zonder dat ze hoeven te zoeken. Bijvoorbeeld, als iemand meer wil weten over je contactgegevens, kun je ze direct naar dat gedeelte op een andere pagina sturen. Dit maakt je website gebruiksvriendelijker en zorgt voor een betere navigatie, wat zowel je bezoekers als je SEO ten goede komt!
Dit maak je als volgt: Stap 1 open de doelpagina
1. Open de doelpagina (de pagina waar je naartoe wilt linken) in de Divi Builder.
2. Zoek het gedeelte (sectie, rij, kolom of module) waar je naartoe wilt linken.
3. Klik op de instellingen van de sectie, rij, kolom of module.
4. Ga naar het tabblad Geavanceerd en zoek het veld CSS ID.
5. Vul een unieke naam in voor het anker (bijvoorbeeld contact).
Tip: Houd de naam eenvoudig en zonder spaties. Gebruik alleen letters, cijfers of streepjes.
Bijvoorbeeld: CSS ID: contact
6. Sla de wijzigingen op.
Stap 2: Maak de Anchor Link op de Andere Pagina
1. Open de pagina van waaruit je wilt linken (De pagina waarop je de link plaatst om bezoekers naar de doelpagina te sturen.).
2. Klik op de tekst of knop die je wilt gebruiken voor de anchor link.
3. Als je een tekst gebruikt, selecteer de tekst die je wilt linken. Als het een knop is, klik dan op de instellingen van de knop.
4. In het veld voor de URL voeg je de link toe: de URL van de doelpagina, gevolgd door het hash-teken (#) en de naam van het anker.
Bijvoorbeeld: https://www.jouwwebsite.nl/doelpagina#contact
5. Sla de wijzigingen op en publiceer de pagina.
Stap 3: Test de Anchor Link
- Ga naar de pagina waar je de anchor link hebt toegevoegd.
- Klik op de link of knop.
- De bezoeker wordt automatisch naar het juiste ankerpunt op de doelpagina geleid.
Alles ingevuld op de juiste manier? Top! Dan heb je nu een werkende Anchor link gemaakt, die de bezoeker na een andere pagina leidt.
