--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/design/full-width-layouts' title: 'Laat een sectie doorlopen van rand tot rand | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:30:21+00:00' updated: '2026-10-24T06:23:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Je kunt de inhoud van een sectie van rand tot rand laten lopen, of hem in het midden in een vak houden terwijl de achtergrond het venster vult. Eén schakelaar op de sectie beslist: Full width. Het voorbeeld bouwt een grijze sectie met drie kolommen en schakelt daarna Full width in zodat de kolommen uitrekken. Voor kleur- en fotovullingen, zie Achtergronden. De video bouwt een grijze sectie met drie kolommen en laat daarna zijn inhoud van rand tot rand lopen. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:23:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Laat een sectie doorlopen van rand tot rand' description: |- Je kunt de inhoud van een sectie van rand tot rand laten lopen, of hem in het midden in een vak houden terwijl de achtergrond het venster vult. Eén schakelaar op de sectie beslist: Full width. Het voorbeeld bouwt een grijze sectie met drie kolommen en schakelt daarna Full width in zodat de kolommen uitrekken. Voor kleur- en fotovullingen, zie Achtergronden. De video bouwt een grijze sectie met drie kolommen en laat daarna zijn inhoud van rand tot rand lopen. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:30:21+0000' dateModified: '2026-10-24T06:23:17+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/design/full-width-layouts' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/design/full-width-layouts' description: |- Je kunt de inhoud van een sectie van rand tot rand laten lopen, of hem in het midden in een vak houden terwijl de achtergrond het venster vult. Eén schakelaar op de sectie beslist: Full width. Het voorbeeld bouwt een grijze sectie met drie kolommen en schakelt daarna Full width in zodat de kolommen uitrekken. Voor kleur- en fotovullingen, zie Achtergronden. De video bouwt een grijze sectie met drie kolommen en laat daarna zijn inhoud van rand tot rand lopen. 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) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Laat een sectie doorlopen van rand tot rand. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Geef een sectie een kleur-, foto- of verloopachtergrond](/nl/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Laat je lay-out werken op telefoons](/nl/hc/documentation/learn-dxpr-builder/design/responsive-design) Je kunt de inhoud van een sectie van rand tot rand laten lopen, of hem in het midden in een vak houden terwijl de achtergrond het venster vult. Eén schakelaar op de sectie beslist: **Full width**. Het voorbeeld bouwt een grijze sectie met drie kolommen en schakelt daarna **Full width** in zodat de kolommen uitrekken. Voor kleur- en fotovullingen, zie [Achtergronden](/nl/hc/documentation/learn-dxpr-builder/design/backgrounds). De video bouwt een grijze sectie met drie kolommen en laat daarna zijn inhoud van rand tot rand lopen. ## Bouw een vaksectie 1. Klik op **Add Elements** in het lege inhoudsgebied en kies **Section** op het tabblad **Layout**. 2. Wijs de sectie aan, open **More** en kies **Settings**. 3. Open het paneel **Style** en kies een lichtgrijze **Background**. 4. Klik op **Save**. Het grijs beslaat het venster al. 5. Klik op **+** op de sectie en kies **Row**. 6. Klik op het gridpictogram op de rij, kies de tegel met drie gelijke kolommen en klik op **Save**. 7. Klik in elke kolom op **+**, kies **Text** op het tabblad **Content**, typ een **Heading 4** en één regel en klik op **Save**. De drie kolommen staan nu in een gecentreerd vak op de grijze band. ## Full width inschakelen 1. Open **More** op de sectie en kies **Settings**. 2. Schakel in het paneel **General** **Full width** in. 3. Klik op **Save**. 4. Klik op **Save** op de DXPR Builder-werkbalk. 5. Open het weergavemenu, het oogpictogram op de werkbalk, en kies **Preview**. ## Wat je ziet De grijze band ziet er hetzelfde uit als eerst. Alleen het inhoudsvak is gewijzigd: de eerste kolom begint nu aan de linkerrand van de sectie en de laatste eindigt aan de rechterrand. Elke sectie heeft twee delen: een buitenelement dat de achtergrond draagt en een binnenvak dat de rijen bevat. **Full width** wijzigt alleen het binnenvak. Uit staat het gecentreerd met een maximale breedte; aan rekt het uit tot de randen van de sectie. ## Instellingen Het **General**-paneel van de sectie bevat drie lay-outschakelaars, allemaal standaard uit: | Instelling | Wat het doet | |---|---| | **Full width** | Rijen vullen de sectie van rand tot rand in plaats van een gecentreerd vak | | **100% height** | De sectie is minstens zo hoog als het browservenster | | **Vertical centering** | Rijen staan in het verticale midden van de sectie | Rijen hebben geen eigen breedte-instelling; de sectie beslist. ## Twee patronen - **Edge-to-edge background, boxed text**: de gebruikelijke hero. Laat **Full width** uit en stel de achtergrond in in het paneel **Style** of **Background effects**. - **Edge-to-edge content**: een strook kaarten of foto's. Schakel **Full width** in en geef de kolommen wat **Padding** als tekst te dicht bij de vensterrand staat. ## Als je de wijziging niet ziet - **Er verandert niets wanneer je Full width inschakelt.** Op een smal scherm, zoals een telefoon, vult de vakversie de breedte al. Verbreed het browservenster en kijk opnieuw. - **De achtergrond stopt vóór de vensterranden.** Je thema plaatst de pagina-inhoud in een vakregio en de sectie kan alleen die regio vullen. Kies in je thema een paginalay-out of regio over de volledige breedte. - **Tekst raakt de vensterrand.** Dat is wat **Full width** doet. Voeg **Padding** toe in het **Style**-paneel van de kolommen, of laat **Full width** uit. ## Wat nu? - [Vul een sectie met kleur, een foto of een verloop](/nl/hc/documentation/learn-dxpr-builder/design/backgrounds): stijl de band achter je inhoud. - [Laat je lay-out werken op telefoons](/nl/hc/documentation/learn-dxpr-builder/design/responsive-design): bepaal hoe de kolommen zich op kleine schermen gedragen.