Knop blok
Met het Knop block voeg je een klikbare knop toe aan een pagina. Je stelt de link, stijl en optionele iconen in. De knop past zich aan op de kleurvarianten van het thema.
Het block toevoegen
Zoek in de blokken-editor op “Knop” en voeg het block toe aan de pagina.
Link
Vul via het veld Link de URL, linktekst en het doelopties in (bijv. openen in nieuw tabblad). Dit veld is verplicht.
Iconen
Je kunt een icoon toevoegen aan de linker- en/of rechterkant van de knoptekst. Schakel per kant Actief in om een icoon te tonen.
Per icoon stel je in:
| Instelling | Omschrijving |
|---|---|
| Icoon | Kies een icoon uit de Iconify-bibliotheek |
| Grootte | De grootte van het icoon: XS, SM, LG, 2X t/m 10X |
| Positie | Binnen — het icoon staat binnen de knoprand; Buiten — het icoon staat buiten de knoprand, los van de tekst |
| Kleur | Een aangepaste kleur voor dit icoon |
Opmaak
Stijl
| Stijl | Omschrijving |
|---|---|
| Normaal | Gevulde knop met achtergrondkleur (standaard) |
| Omtrek | Transparante knop met gekleurde rand |
| Transparant | Knop zonder achtergrond of rand |
| Geen opmaak | Knop zonder enige stijl, puur functioneel |
Kleurvariant
Kies de kleurvariant van de knop op basis van de themakleuren:
- Primary (standaard)
- Secondary
- Call to action
- Success
- Warning
- Alert
- Info
- Gray
Lichte variant
Schakel Lichte variant in voor een lichtere uitvoering van de gekozen kleurvariant.
Volledige breedte
Schakel Volledige breedte in om de knop de volledige beschikbare breedte te laten innemen.
Smooth scroll
Gebruik je de knop als ankerlink (een link naar een sectie op dezelfde pagina, bijv. #contact)? Schakel dan Smooth scroll in om soepel naar dat anker te scrollen in plaats van direct te springen.
| Instelling | Omschrijving | Standaard |
|---|---|---|
| Smooth scroll offset | Extra ruimte (in px) boven het anker, bijv. voor een vaste navigatiebalk | 0 px |
| Smooth scroll animatie | Het verlooptype van de scrollbeweging: Lineair of Swing | Swing |
Geavanceerd
- Taalcode — stel een
lang-attribuut in op de knopelement, bijv.envoor Engelstalige linktekst - Taalrichting — stel de leesrichting in: Links naar rechts of Rechts naar links