--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/secties' title: 'Een sectie toevoegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:35:18+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Een sectie is één strook van je pagina, zoals een hero bovenaan of een grijze strook met functies eronder. Je geeft elke sectie een eigen achtergrond, tekstkleur, witruimte en hoogte, en vult hem daarna met rijen of inhoud. Lees deze pagina om secties toe te voegen en in te stellen; om er een in kolommen te splitsen, zie Rijen en kolommen.' tags: - Layout 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 sectie toevoegen' description: 'Een sectie is één strook van je pagina, zoals een hero bovenaan of een grijze strook met functies eronder. Je geeft elke sectie een eigen achtergrond, tekstkleur, witruimte en hoogte, en vult hem daarna met rijen of inhoud. Lees deze pagina om secties toe te voegen en in te stellen; om er een in kolommen te splitsen, zie Rijen en kolommen.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:35:18+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/lay-out/secties' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/secties' description: 'Een sectie is één strook van je pagina, zoals een hero bovenaan of een grijze strook met functies eronder. Je geeft elke sectie een eigen achtergrond, tekstkleur, witruimte en hoogte, en vult hem daarna met rijen of inhoud. Lees deze pagina om secties toe te voegen en in te stellen; om er een in kolommen te splitsen, zie Rijen en kolommen.' 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) /[Lay-out](/nl/hc/documentation/learn-dxpr-builder/layout/overview) # Een sectie toevoegen. DXPR Builder lerenPagina’s bouwenContent toevoegenLay-out ## In deze gids Gerelateerde gidsen - [Een rij toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/rijen-en-kolommen) - [Geef een sectie een kleur-, foto- of verloopachtergrond](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/achtergronden) - [Laat een sectie doorlopen van rand tot rand](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/volledige-breedte-lay-outs) Een sectie is één strook van je pagina, zoals een hero bovenaan of een grijze strook met functies eronder. Je geeft elke sectie een eigen achtergrond, tekstkleur, witruimte en hoogte, en vult hem daarna met rijen of inhoud. Lees deze pagina om secties toe te voegen en in te stellen; om er een in kolommen te splitsen, zie [Rijen en kolommen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). ## Een sectie toevoegen Het voorbeeld bouwt een donkerblauwe hero-sectie voor een kliniek. Eronder volgt een lichtgrijze sectie met drie kolommen. 1. Klik op **Add Elements** op een lege pagina en kies **Sectie** op het tabblad **Lay-out**. Klik onder een bestaande sectie op **Sectie hieronder toevoegen**, de ronde plus eronder. 2. Beweeg over de sectie, open **More** en kies **Settings**. 3. Stel de hele sectie in: hier **Align text center** onder **HTML-klassen**, een donkerblauwe **Achtergrond** en een witte **Tekstkleur**. Klik op **Opslaan**. 4. Klik op **+** op de sectie om er direct inhoud in toe te voegen, of voeg een **Rij** toe om hem in kolommen te splitsen. 5. Klik op **Opslaan** op de werkbalk om de pagina te bewaren. **Achtergrond** en **Tekstkleur** staan in het paneel **Stijl** van de dialoog. Nieuwe elementen belanden bovenaan de sectie, dus voeg het onderste eerst toe: in de video gaat de knop vóór de kop. ## Wat je ziet De donkerblauwe strook vult het venster van rand tot rand. Kop en knop blijven in een gecentreerd vak, de binnenste container van de sectie. De grijze sectie begint er direct onder, met de drie functiekolommen in hetzelfde gecentreerde vak. Elke nieuwe sectie heeft in **HTML-klassen** al de klasse **Vertical padding size 5 (py-5)**. Die klasse geeft de ruimte boven en onder de inhoud. ## Je sectie instellen De instellingendialoog heeft vijf panelen: **Algemeen**, **Achtergrondeffecten**, **Animatie**, **Stijl** en **Hoverstijl**. Alleen secties hebben **Achtergrondeffecten**. | Instelling | Paneel | Wat het doet | Standaard | |---|---|---|---| | **Volledige breedte** | Algemeen | Rijen lopen van rand tot rand in plaats van in de gecentreerde container | Uit | | **100% hoogte** | Algemeen | De sectie is minstens zo hoog als het browservenster | Uit | | **Verticaal centreren** | Algemeen | Inhoud staat verticaal in het midden van een sectie die hoger is | Uit | | **HTML-id** | Algemeen | Een ankernaam, zodat een link naar `#name` naar deze sectie springt | Leeg | | **HTML-klassen** | Algemeen | Utility-klassen, zoals **Align text center** of een paddinggrootte | **Vertical padding size 5 (py-5)** | | **Achtergrondeffect** | Achtergrondeffecten | **Simple image**, **Fixed image**, **Parallax image**, **Gradient** of **YouTube video** | **Simple image** | | **Achtergrond**, **Tekstkleur** | Stijl | De kleur achter de sectie en de kleur van de tekst | Geen: het thema beslist | De achtergrond beslaat altijd de hele sectie, wat **Volledige breedte** ook zegt. De afbeeldingseffecten bewegen de **Achtergrondafbeelding** die je kiest in het paneel **Stijl**; [Achtergronden](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/achtergronden) toont elk effect. Voor meer of minder ruimte wissel je **Vertical padding size 5 (py-5)** in voor een kleinere grootte of **No vertical padding (py-0)**. Voor exacte pixels gebruik je het boxmodel in het paneel **Stijl**, zoals [Witruimte](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/witruimte)uitlegt. ## Sectierecepten | Sectie | Instellingen die hem maken | |---|---| | Hero | **100% hoogte** en **Verticaal centreren** aan, een **Parallax image**-effect, een kop en een knop | | Functies | Een lichte **Achtergrond**, een kop, daarna een rij van drie kolommen | | Oproep tot actie | Een sterke **Achtergrond**, **Align text center**, één korte regel en een knop | | Testimonials | Een lichte **Achtergrond** en een rij van drie kolommen, elk met een **Blokcitaat** | [Een hero-sectie ontwerpen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/hero-sectie) bouwt de eerste stap voor stap. ## Als je het niet ziet - **De lege pagina heeft geen knop Add Elements.** De assistent voor het maken van pagina’s staat uit, zodat de lege pagina alleen **Kies een sjabloon** biedt. Klik op het lege gebied om de elementenkiezer te openen, of zet **Assistent voor het maken van pagina’s inschakelen** aan op `/admin/dxpr_studio/dxpr_builder/ai_settings`. - **Er is geen knop Sectie hieronder toevoegen.** Alleen secties direct op de pagina hebben hem, niet een sectie in een kolom of tabblad. Klik in plaats daarvan op **+** op de kolom. - **Verticaal centreren verandert niets.** De sectie is slechts zo hoog als zijn inhoud, dus er is geen ruimte om in te centreren. Zet ook **100% hoogte** aan. - **Volledige breedte lijkt niets te doen.** De achtergrond beslaat de hele sectie al; **Volledige breedte** verplaatst alleen de rijen naar de randen. Bij korte tekst in één kolom is de verandering moeilijk te zien. - **Er is een sectie verschenen die je niet toevoegde.** Je koos een **Rij** of een inhoudselement op een lege pagina, en elk element heeft een sectie eromheen nodig. DXPR Builder voegde er een voor je toe; open de instellingen zoals bij elke andere. ## Wat nu? - [Rijen en kolommen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): splits een sectie in kolommen. - [Achtergronden](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/achtergronden): parallax-, verloop- en video-effecten voor secties. - [Lay-outs over de volle breedte](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/volledige-breedte-lay-outs): wanneer je rijen van rand tot rand laat lopen.