--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/knop' title: 'Een knop toevoegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:26:33+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Je krijgt een duidelijke call-to-action-knop die bezoekers brengt waar jij ze wilt hebben. Gebruik hem om mensen naar een inschrijfformulier, een productpagina of een contactpagina te leiden.' tags: - Marketing image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Een knop toevoegen' description: 'Je krijgt een duidelijke call-to-action-knop die bezoekers brengt waar jij ze wilt hebben. Gebruik hem om mensen naar een inschrijfformulier, een productpagina of een contactpagina te leiden.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:26:33+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/knop' articleSection: Marketing - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/knop' description: 'Je krijgt een duidelijke call-to-action-knop die bezoekers brengt waar jij ze wilt hebben. Gebruik hem om mensen naar een inschrijfformulier, een productpagina of een contactpagina te leiden.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Content toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements) /[Marketing](/nl/hc/documentation/learn-dxpr-builder/elements/marketing) # Een knop toevoegen. DXPR Builder lerenPagina’s bouwenContent toevoegenMarketing ## In deze gids Gerelateerde gidsen - [Het uiterlijk van een element wijzigen in het paneel Stijl](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/stijl-tabblad) Je krijgt een duidelijke call-to-action-knop die bezoekers brengt waar jij ze wilt hebben. Gebruik hem om mensen naar een inschrijfformulier, een productpagina of een contactpagina te leiden. ## Een knop toevoegen Open je pagina terwijl je bent ingelogd: de builder-knoppen verschijnen als je met de muis over het inhoudsgebied beweegt. [Je eerste pagina](/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina) legt de basis uit. 1. Beweeg over de kolom en klik op **+** in de besturingsbalk, of klik op **Add Elements** op een lege pagina. Open het tabblad **Inhoud** en klik op **Knop**. De knop komt bovenaan de kolom te staan en het dialoogvenster opent. 2. Vervang de standaardtekst in **Titel** door je label. 3. Vul de bestemming in bij **Link**, zoals `/contact` of `https://example.com`. 4. Kies een kleur onder **Type**. Hier kiezen we **Succes**. 5. Kies de **Grootte**. Hier kiezen we **Groot**. 6. Klik in het dialoogvenster op **Opslaan**. Klik daarna op **Opslaan** in de werkbalk bovenaan het inhoudsgebied om de pagina op te slaan. ## Wat je ziet Een knop met het label dat je hebt getypt verschijnt bovenaan de kolom. In de video is hij groot en groen en staat er Register for Open Day op. Links openen niet terwijl je bewerkt. Om de jouwe te testen sla je de pagina op, kies je **Voorbeeld** in het weergavemenu van de werkbalk en klik je op de knop. Bezoekers zien hem zodra je de pagina opslaat en publiceert. ## Je knop instellen Beweeg over het element en open **More > Settings** in de besturingsbalk. Opties: - **Titel:** de tekst op de knop. - **Link:** waar de knop heen gaat: een pad op je site, zoals `/contact`, of een volledige URL. - **Linkdoel:** opent de link in het Zelfde venster of een Nieuw venster. Verschijnt zodra **Link** een waarde heeft. - **Type:** de kleurstijl: Primary, Secondary, Success, Info, Warning, Danger, Link, Light of Dark. - **Blokknop:** rekt de knop uit over de volle breedte van de kolom. - **Omlijnde stijl:** toont een gekleurde rand en tekst zonder vulling. Het type Link heeft geen omlijning en ziet er altijd uit als een tekstlink. - **Grootte:** Normaal, Groot of Klein. ## Als je het niet ziet - **Knop staat niet in het tabblad Inhoud.** Je gebruikersprofiel verbergt hem. Vraag een beheerder om hem in te schakelen in [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). - **Hij is weg na het herladen.** De pagina is niet opgeslagen. Voeg hem opnieuw toe en klik op **Opslaan** in de werkbalk bovenaan het inhoudsgebied. - **Een klik leidt naar “pagina niet gevonden”.** De **Link** is fout. Paden op je site beginnen met `/`, zoals `/contact`. Beweeg over het element en open **More > Settings** om het te herstellen. - **De knop ziet er anders uit dan in de video.** Zijn uiterlijk komt van **Type**, **Omlijnde stijl**, **Blokknop** en **Grootte**. Beweeg over het element en open **More > Settings** om ze te controleren. - **De link opent in hetzelfde tabblad.** **Linkdoel** staat op Zelfde venster. Vul eerst **Link** in en kies dan Nieuw venster. ## Wat nu? [Tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab) om de witruimte en achtergrond van je knop aan te passen.