Samenvatting
Met het knop element voeg je een klikbare knop toe aan je pagina — bijvoorbeeld een "Neem contact op"-knop of een "Meer informatie"-knop. Je stelt in waar de knop naartoe linkt, hoe hij eruitziet, en hoe hij zich gedraagt op verschillende schermformaten. Klik op het element om het te selecteren, dubbelklik om de tekst te bewerken.
Hoe werkt het
De link instellen
In het tabblad Instellingen stel je in wat er gebeurt als een bezoeker op de knop klikt. Je kiest het linktype:
| Linktype | Wat gebeurt er? |
|---|---|
| Pagina | Gaat naar een pagina binnen je website |
| Collectie-item | Gaat naar een item uit een collectie |
| URL | Gaat naar een extern webadres |
| Afbeelding | Opent een afbeelding |
| Video | Speelt een video af |
| Video-URL | Gaat naar een externe video |
| Document | Opent een PDF of ander document |
| E-mailadres | Opent het e-mailprogramma van de bezoeker |
| Telefoonnummer | Start een telefoonoproep (handig op mobiel) |
| Geen | De knop doet niets — handig als je de knop puur als visueel element wilt gebruiken |
Waar opent de link?
Je kiest ook het linkdoel:
- Zelfde venster — de pagina opent in hetzelfde browservenster (de bezoeker verlaat je website)
- Nieuw venster — de pagina opent in een nieuw tabblad (je website blijft open)
Beschrijving voor toegankelijkheid (aria label)
Vul een aria label in als de knoptekst niet duidelijk genoeg is voor schermlezers. Bijvoorbeeld: als je knoptekst "Lees meer" is, kun je als aria label "Meer lezen over onze behandelingen" invullen. Zo weten bezoekers die een schermlezer gebruiken precies waar de knop naartoe gaat.
Knop in een navigatiemenu
Als de knop onderdeel is van een navigatiemenu, zie je een extra instelling:
- Hamburger t/m schermgrootte — hiermee stel je in vanaf welk schermformaat de knop in het hamburgermenu verdwijnt
Scroll-animatie
In het tabblad Instellingen kun je een animatie instellen die afspeelt wanneer de bezoeker naar de knop scrollt:
| Instelling | Opties |
|---|---|
| Effect | Geen, Infaden, Inschuiven, Inzoomen of Uitzoomen |
| Effect start | Bij welk percentage van de pagina het effect begint |
| Effect terugkeren | Of het effect opnieuw afspeelt bij omhoog scrollen |
Wanneer gebruik je dit?
- Je wilt een call-to-action knop toevoegen (zoals "Neem contact op" of "Offerte aanvragen")
- Je wilt een knop koppelen aan een pagina, URL, e-mailadres of telefoonnummer
- Je wilt een knop verbergen in het hamburgermenu op bepaalde schermformaten