--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/element-settings/custom-css' title: 'Naar secties linken en stijlen hergebruiken met klassen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:59:24+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Geef een sectie een HTML-ID zodat een knop ernaartoe kan springen. Voeg HTML-klassen toe om een element op telefoons te verbergen, om witruimte per schermgrootte in te stellen, of om een uiterlijk te hergebruiken dat je thema definieert. Beide velden vind je onderaan het paneel Algemeen van elk element. Een klasse houdt een uiterlijk consistent: als zijn CSS-regel wijzigt, volgt elk element met die klasse. De video volgt het eerste recept hieronder: hij laat een knop springen naar een sectie verderop op de pagina. tags: - 'Elementen stylen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Naar secties linken en stijlen hergebruiken met klassen' description: |- Geef een sectie een HTML-ID zodat een knop ernaartoe kan springen. Voeg HTML-klassen toe om een element op telefoons te verbergen, om witruimte per schermgrootte in te stellen, of om een uiterlijk te hergebruiken dat je thema definieert. Beide velden vind je onderaan het paneel Algemeen van elk element. Een klasse houdt een uiterlijk consistent: als zijn CSS-regel wijzigt, volgt elk element met die klasse. De video volgt het eerste recept hieronder: hij laat een knop springen naar een sectie verderop op de pagina. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:59:24+0000' dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/element-settings/custom-css' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/element-settings/custom-css' description: |- Geef een sectie een HTML-ID zodat een knop ernaartoe kan springen. Voeg HTML-klassen toe om een element op telefoons te verbergen, om witruimte per schermgrootte in te stellen, of om een uiterlijk te hergebruiken dat je thema definieert. Beide velden vind je onderaan het paneel Algemeen van elk element. Een klasse houdt een uiterlijk consistent: als zijn CSS-regel wijzigt, volgt elk element met die klasse. De video volgt het eerste recept hieronder: hij laat een knop springen naar een sectie verderop op de pagina. 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 --- [Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) # Naar secties linken en stijlen hergebruiken met klassen. Learn DXPR BuilderBuild pagesElementen stylen ## In this guide Related guides - [Laat je lay-out werken op telefoons](/nl/hc/documentation/learn-dxpr-builder/design/responsive-design) Geef een sectie een **HTML-ID** zodat een knop ernaartoe kan springen. Voeg **HTML-klassen** toe om een element op telefoons te verbergen, om witruimte per schermgrootte in te stellen, of om een uiterlijk te hergebruiken dat je thema definieert. Beide velden vind je onderaan het paneel **Algemeen** van elk element. Een klasse houdt een uiterlijk consistent: als zijn CSS-regel wijzigt, volgt elk element met die klasse. De video volgt het eerste recept hieronder: hij laat een knop springen naar een sectie verderop op de pagina. ## Voordat je begint - Open de pagina in DXPR Builder; als je op een element wijst toont hij zijn besturingsbalk met **More**. Nieuw in de builder? Zie [Je eerste pagina](/nl/hc/documentation/learn-dxpr-builder/getting-started/first-page). - **Opslaan** in het dialoogvenster bewaart een wijziging in de editor. **Opslaan** op de builder-werkbalk boven je inhoud slaat de pagina op en toont “Veld opgeslagen”. - **Gebruik een HTML-ID** voor een springdoel. Een knop “Boek een rondleiding” kan scrollen naar het boekingsformulier. Een lijst met links bovenaan een lange pagina kan naar elk deel leiden. - **Gebruik een klasse voor een uiterlijk dat zich herhaalt.** Je webmaster schrijft de CSS één keeren jij voegt de klasse toe waar je hem nodig hebt. Het paneel **Stijl** kopieert waarden juist in elk element, wat na verloop van tijd uit elkaar groeit. - **Gebruik een klasse voor wat het paneel Stijl niet kan**, zoals een element verbergen op telefoons of witruimte wijzigen per schermgrootte. ## Recept: een knop die naar een sectie springt 1. Beweeg over de doel-**Sectie**, klik op **More** en daarna **Instellingen**. 2. Typ in het paneel **Algemeen** een korte naam, zoals `programmes`, in **HTML-ID**. Klik op **Opslaan**. 3. Open de instellingen van de **Knop**. Typ in **Link** `#` gevolgd door precies dezelfde naam: `#programmes`. Klik op **Opslaan**. 4. Klik op **Opslaan** op de builder-werkbalk. 5. Kies **Voorbeeld** in het weergavemenu (het oogpictogram) en klik op de knop. Test met de sectie verderop op de pagina dan de knop, zodat je het scrollen ziet. Als het doel in een uitklappaneel, een tabblad of een carrouseldia zit, opent de link het eerst. ## Recept: een element verbergen op telefoons 1. Beweeg over het element, klik op **More** en daarna **Instellingen**. 2. Klik in het paneel **Algemeen** op het vak **HTML-klassen**. 3. Kies **Verborgen op extra kleine apparaten, telefoons (<576px)**. Hij staat in de groep **Responsieve zichtbaarheid**. 4. Klik in het dialoogvenster op **Opslaan** en daarna **Opslaan** op de werkbalk. Het element verdwijnt nu op schermen smaller dan 576 px, ook in de editor. Om het te controleren open je de pagina op een telefoon. ## Recept: typ je eigen klassen De **HTML-klassen** laat je alleen kiezen uit zijn lijst. Om een klassenaam te typen schakel je hem eerst om naar tekst. 1. Beweeg over het element, klik op **More** en daarna **Instellingen**. 2. Klik onder **HTML-klassen** op **Bewerken als tekst**. De wordt een gewoon tekstveld met de klassen die het element al heeft. 3. Voeg je klassenamen erachter toe, gescheiden door spaties, bijvoorbeeld `brand-card py-3 py-lg-5`. Laat de punt weg: `.brand-card` in de CSS van je team is hier `brand-card`. 4. Klik in het dialoogvenster op **Opslaan** en daarna **Opslaan** op de werkbalk. Het element krijgt het uiterlijk dat je webteam heeft gedefinieerd. ## Wat je ziet In **Voorbeeld** scrolt de knop soepel naar de sectie en houdt hij ruimte voor een vaste header; de adresbalk eindigt op `#programmes`. Onder 576 px breed is het verborgen element weg. Klassen die je hebt getypt verschijnen als chips als je het dialoogvenster opnieuw opent, tussen aanhalingstekens als ze niet in de lijst staan, zoals “brand-card”. ## Hoe de velden werken ### HTML-ID Een ID moet beginnen met een letter. Daarna mag hij letters, cijfers, koppeltekens en liggende streepjes bevatten, maar geen spaties. Een foute ID toont een fout onder het velden **Opslaan** doet niets tot je hem herstelt. Als je het veld leeg laat, behoudt het element een ID die DXPR Builder heeft gemaakt. Het lege veld toont hem grijs. Gebruik elke ID één keer per pagina: als twee elementen er een delen, springen links naar de eerste. ### HTML-klassen De lijst bevat schaduwklassen en Bootstrap 5-klassen, gegroepeerd per taak, zoals **Marges**, **Opvulling**, **Responsieve zichtbaarheid** en **Afgeronde hoeken**. Je thema kan achteraan een eigen groep toevoegen. Scrol door de open lijst, of typ een deel van een naam zoals padding, py-5 of circular om hem te vernauwen. Typen filtert alleen de lijst; voor een klasse die er niet in staat gebruik je **Bewerken als tekst**. De klassen van Bootstrap werken alleen als de pagina Bootstrap 5 laadt. Hij komt uit je thema, of uit **Algemene instellingen** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`), waar **Bestanden van Bootstrap bijladen** op **Bootstrap 5** staat. De hulpklassen van Bootstrap, zoals de kleur- en witruimteklassen, zijn gemarkeerd met `!important`. Ze winnen van het paneel **Stijl** op dezelfde eigenschap. **Primaire achtergrond** verslaat **Achtergrond**en **Bovenmarge grootte 3 (mt-3)** verslaat de bovenste **Marge**. Een klasse met een schermgrootte in zijn naam geldt vanaf die breedte: | In de klassenaam | Geldt vanaf | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | Dus `py-3 py-lg-5` geeft 16 px opvulling boven en onder op kleinere schermenen 48 px vanaf 992 px breed. ### Voor je thema-ontwikkelaar Een klasse heeft een CSS-regel nodig in het thema, bijvoorbeeld: ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` Om de klasse in de lijst **HTML-klassen** te tonen voor redacteurs, registreer je hem in de `.info.yml` van het thema; zie [Hulpklassen](/nl/hc/documentation/learn-dxpr-builder/customization/utility-classes). Voor stijlen op de hele site, zie [Aangepaste CSS](/nl/hc/documentation/learn-dxpr-builder/customization/custom-css). ## Als je het niet ziet - **Opslaan doet niets en HTML-ID zegt “ID must start with a letter”.** De ID overtreedt de regels hierboven. Begin hem met een letteren gebruik alleen letters, cijfers, koppeltekens en liggende streepjes. - **Je kunt geen nieuwe klasse typen.** De filtert alleen zijn lijst. Klik eerst op **Bewerken als tekst**. - **Een klasse die je verwacht ontbreekt in de lijst.** De lijst bevat alleen de klassen die DXPR Builder en je thema definiëren. Klik op **Bewerken als tekst** en typ hem. - **De knop scrolt helemaal niet.** **Link** moet `#` zijn gevolgd door precies de HTML-ID, met dezelfde hoofdletters. Controleer beide veldenen test in **Voorbeeld**. - **Een klasse heeft geen effect.** De naam is verkeerd gespeld, het thema heeft er geen regel voor, of Bootstrap 5 is niet geladen. Controleer de spellingen vraag je webmaster naar de regel of **Bestanden van Bootstrap bijladen**. - **De klasse van je team wijzigt maar sommige dingen.** Een waarde van het paneel **Stijl** op dezelfde eigenschap verslaat een themaklasse. Wis die waarde in het paneel **Stijl**. - **De knop springt naar de verkeerde plek.** Twee elementen delen de IDen de eerste wint. Geef elk element zijn eigen ID. - **De kop van de sectie verdwijnt onder de vaste header.** DXPR Builder herkent je header niet. Een webmaster stelt **Scrollverschuivingskiezer** in onder **Algemene instellingen** > **Geavanceerde instellingen** (`/admin/dxpr_studio/dxpr_builder/settings`) op de CSS-kiezer van de header. ## Wat nu? - [Responsief ontwerp](/nl/hc/documentation/learn-dxpr-builder/design/responsive-design): plan welke elementen je op elk schermformaat toont.