Webstick.nl logo Webdesignburo en Wordpress-blog

Ankerlinks toevoegen in Wordpress [2024] 💥

Ankerlinks toevoegen in Wordpress


Ankerlinks zijn links die een bezoeker van de ene plaats naar een andere op dezelfde pagina sturen, of naar een exacte plaats op een andere pagina op dezelfde website. Ankerlinks kunnen u helpen uw bezoekers naar de juiste plek op uw website te leiden. Ankerlinks kunnen ook de gebruikerservaring verbeteren en u zelfs een SEO-voordeel geven.


Advertisement

Divi Ad 680px


De meeste ankerlinks verwijzen dus vanuit een menu naar een sectie op de pagina. Het anker wordt daarom meestal in een kop of rij of een ander soort blok geplaatst. Ankerlinks kunnen overal op de pagina worden gevonden, net als normale links. Denk aan menulinks, normale tekstlinks of knoppen.


1. Ankerlinks toevoegen in Wordpress met behulp van Gutenberg

In dit voorbeeld linken we van een stuk tekst in een alinea naar een kop. Laten we beginnen met het anker in de kop. Maak gewoon een nieuwe kop in een bericht met de Gutenberg-editor en geef het een naam. Aan de rechterkant is er een kolom met dingen die betrekking hebben op deze kop. Klik op "Geavanceerd" en er wordt een nieuw gedeelte geopend. Hier vindt u "HTML-anker" met al een ankertekst in het vak. U kunt de tekst vervangen of gewoon gebruiken als uw ankertekst om naar deze kop te linken. Kopieer die tekst, we plakken hem met een "#" ervoor in de link van het stuk tekst in de alinea.


Add anchor in Wordpress using Gutenberg


Oké, nu willen we een link naar het anker maken vanuit een link in een tekst op een willekeurige pagina. Maak gewoon een alinea in Gutenberg, schrijf wat tekst. Markeer vervolgens een van de woorden en klik op het koppelingspictogram. Waar de link naartoe gaat, plak je de tekst van het anker dat we eerder hebben gemaakt met een "#" vooraan zoals deze "#h-test-heading". Zie onderstaande schermafbeelding.


Add anchor in Wordpress using Gutenberg


In Gutenberg hebben alle blokken de optie om ze een anker te geven in de rechterkolom in het gedeelte "Geavanceerd", niet alleen de Koppen. Alle blokken hebben ook de optie "Bewerken als HTML" wanneer u op de 3 stippen klikt, zoals in de onderstaande schermafbeelding. Daar moet u uw anker toevoegen aan het ID-attribuut van die tag. Bijvoorbeeld onderstaande code:


<p id="h-test-heading2">


2. Anker toevoegen in Wordpress met DiviBuilder

De Divi Builder is de beste paginabuilder die er is, dus laten we ermee beginnen. Laten we eerst het anker maken. Met Divi kunt u dit doen door de ID van het anker voor een sectie, rij of module in te voeren. De ankernaam is de ID. In de onderstaande schermafbeelding gebruik ik een rij om het anker aan te bevestigen. Ga naar "Rij-instellingen" en vervolgens het tabblad "Geavanceerd".


Add anchor in Wordpress using DiviBuilder


Voer in het veld CSS-ID de anker-ID in.


Add anchor in Wordpress using DiviBuilder


Het anker-ID "#h-test-heading" kan nu overal op de website worden gebruikt, zoals in de menu's, knoppen of gewoon platte tekst in de paragrafen. Gebruik gewoon "#h-test-heading" in plaats van een interne of externe link. Natuurlijk kan "#h-test-heading" worden vervangen door woorden naar keuze.


3. Anker toevoegen in Wordpress met behulp van Elementor

Open een willekeurige pagina of post met Elementor Page Builder, klik op "Bewerken met Elementor". Zoek op de volgende pagina in de linkerzijbalk naar 'anker' in het zoekvak. U ziet nu de "Menu Anchor Widget". Sleep de widget gewoon naar een plek op de pagina waar u een anker wilt maken om naar te linken. Zie screenshot hieronder.


Add anchor in Wordpress using Elementor


Voer in "het ID van Menu Anchor" de ankertekst van uw keuze in en sla op.


Add anchor in Wordpress using Elementor


Het anker-ID "#h-test-heading" kan nu overal op de website worden gebruikt, zoals in de menu's, knoppen of gewoon platte tekst in de paragrafen. Gebruik gewoon "#h-test-heading" in plaats van een interne of externe link. Natuurlijk kan "#h-test-heading" worden vervangen door woorden naar keuze.


4. Anker toevoegen in Wordpress met behulp van WP-Bakery Pagebuilder

Met WPBakery Page Builder kunnen we een id-waarde invoeren voor elke rij/ gewenste kolom/widget/element (via de velden Rij-ID en Element-ID). Dit is buitengewoon handig omdat a) we onze id-doelen niet handmatig hoeven te maken en b) het markeren van koppelingen veel eenvoudiger en nauwkeuriger wordt. Om een doel-ID toe te voegen, bewerkt u de rij/kolom/het element van de paginabuilder die u wilt bewerken (door op het potloodpictogram te klikken). U kunt de gewenste id-waarde (bijv. h-test-heading) invoeren in de velden Rij-ID en Element-ID (in het tabblad "Algemeen"). Zie screenshots hieronder.


Add anchor in Wordpress using WP-Bakery Pagebuilder


Het anker-ID "#h-test-heading" kan nu overal op de website worden gebruikt, zoals in de menu's, knoppen of gewoon platte tekst in de paragrafen. Gebruik gewoon "#h-test-heading" in plaats van een interne of externe link. Natuurlijk kan "#h-test-heading" worden vervangen door woorden naar keuze.

Werken uw ankerlinks niet correct?

Er zijn verschillende veelvoorkomende fouten die mensen maken wanneer ankerlinks niet meer werken. Dit zijn de stappen om ervoor te zorgen dat uw ankerlinks correct werken.

  1. Gebruik een CSS-ID, geen CSS-klasse.
  2. Zorg ervoor dat er voor de tekst van de knop of de ankerlink een # staat
  3. Controleer of het CSS ID-anker geen # heeft
  4. U moet ervoor zorgen dat elke ankerlink een unieke CSS-ID heeft

Tip: voeg smooth scrollen toe aan uw ankerlinks

De plug-in "Page Scroll to ID" is een volledig uitgeruste plug-in die het "springen" van de browser vervangt door soepel scrollende animaties wanneer erop wordt geklikt links met href-waarden die # bevatten. Het biedt alle essentiële tools en geavanceerde functionaliteit die nodig zijn voor websites met één pagina.


Advertisement

Divi Ad 680px



Scroll naar boven