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.
