Hoe link ik naar een plek verderop op de pagina (anker)?
Robert Oosterloo
Bijgewerkt op · 3 min lezen
Een ankerlink springt naar een plek op een pagina, in plaats van naar een andere pagina. Handig voor een knop “Bekijk onze prijzen” bovenaan een lange pagina, of een menu dat naar onderdelen van je homepage springt. Je doet het in twee stappen: de sectie een naam geven, en ernaar linken.
In het kort
- Geef de sectie een ID in Sectie instellingen → Container aangepaste ID, bijvoorbeeld diensten.
- Link ernaar met een hekje: #diensten.
- Vanaf een andere pagina: /pagina/#diensten.
- Een ID gebruik je maar één keer per pagina.
Stap 1: Geef de sectie een ID
- Selecteer de sectie waar de link naartoe moet springen.
- Open rechts het paneel Sectie instellingen.
- Typ bij Container aangepaste ID een korte naam, bijvoorbeeld diensten of prijzen.
- Sla de pagina op.
Welke tekens mogen?
Alleen letters, cijfers, het streepje (-) en de liggende streep (_). Spaties en andere tekens worden er tijdens het typen vanzelf uit gehaald. Gebruik kleine letters en een streepje tussen woorden, zoals onze-diensten. Hoofdletters tellen mee: Diensten en diensten zijn voor de browser verschillend.
Stap 2: Link ernaar met #id
Een link naar een anker is het hekje (#) gevolgd door de ID.
Vanuit een knop
Voeg een blok Knoppen toe, klik bij Button op het linkveld en typ als URL #diensten. Vul een knoptekst in en sla op. Hoe je een knop maakt, lees je in een knop toevoegen. In een gewone tekst werkt het net zo: maak een link met #diensten als adres (zie een link toevoegen).
Vanuit het menu (Aangepaste link)
- Ga naar Menu’s in het menu links.
- Open aan de linkerkant Aangepaste links.
- Vul bij URL het adres van de pagina met de ID in, bijvoorbeeld /#diensten voor de homepage, en een linktekst.
- Klik op Toevoegen aan menu en daarna op Menu opslaan.
Gebruik in het menu het volledige pad (/#diensten in plaats van alleen #diensten). Dan werkt de link ook als de bezoeker op een andere pagina is. Meer in het hoofdmenu aanpassen.
Vanaf een andere pagina: /pagina/#id
Zet het adres van de pagina voor het hekje, bijvoorbeeld /over-ons/#team. De bezoeker gaat naar die pagina en springt meteen naar de sectie.
Tip: heeft je website een vaste header die meescrolt, controleer dan of de titel van de sectie niet achter het menu verdwijnt na het springen. Valt hij weg, zet dan een korte tussenruimte of een kopje bovenin de sectie.
Nog geen website op leflite?
Wij bouwen hem samen met jou. Daarna pas je alles zelf aan, precies zoals in dit artikel.
- Online binnen een week
- Hosting, SSL en back-ups inbegrepen
- Vanaf €49,95 per maand
Dezelfde ID gebruik je ook voor Sectie tabs
Het blok Sectie tabs toont tabbladen die elk een sectie op de pagina laten zien. Per tab vul je bij Gekoppelde sectie ID de ID van een sectie in, precies zoals je hem bij Container aangepaste ID hebt ingevuld. Zie tabbladen die verschillende secties tonen.
Lukt het niet?
- De link springt niet: controleer of de ID precies hetzelfde is, inclusief hoofdletters, en of je het hekje niet vergeten bent.
- De link springt naar de verkeerde plek: de ID komt twee keer voor op de pagina, bijvoorbeeld in een gekopieerde sectie. Geef elke sectie een eigen ID.
- Het werkt op de homepage, maar niet vanaf andere pagina’s: gebruik het volledige pad, zoals /#diensten.
- De ID staat in een patroon: een sectie uit een synced patroon krijgt zijn ID uit de Builder. Pas de ID daar aan.
Veelgestelde vragen
Controleer of de ID precies hetzelfde is, zonder spaties, en maar één keer op de pagina staat.
Deel dit artikel
Robert Oosterloo
Robert Oosterloo is eigenaar en UX/UI-designer van Lef Creative in Kollum. Hij ontwerpt websites, webshops en software voor ondernemers in Noord-Nederland.
Lees ook
Meer ruimte tussen blokken
Tabbladen met Sectie tabs
Subpagina's automatisch als tegels
Ook zo’n website?
Je leest hier hoe makkelijk je een leflite-site zelf bijhoudt. Wil je er ook een? We denken vrijblijvend met je mee.
Liever direct contact? Bel Robert op 06 35 66 47 73 of stuur een WhatsApp.