--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' title: 'Een scrollende one-page-website bouwen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:01:33+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Hier bouw je een hele website op één pagina: een hero over de volle hoogte waarvan de knoppen springen naar de secties Over ons, Diensten en Contact eronder. Elke sectie draagt een HTML-id, het doelwit van zijn knop. Gebruik hem voor een klein bedrijf, een campagne of een portfolio. Voor een pagina rond één aanbod volg je in plaats daarvan Een marketinglandingspagina bouwen. De video bouwt de site van een ontwerpstudio genaamd Studio Nord. tags: - 'Volg een tutorial' 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: 'Een scrollende one-page-website bouwen' description: |- Hier bouw je een hele website op één pagina: een hero over de volle hoogte waarvan de knoppen springen naar de secties Over ons, Diensten en Contact eronder. Elke sectie draagt een HTML-id, het doelwit van zijn knop. Gebruik hem voor een klein bedrijf, een campagne of een portfolio. Voor een pagina rond één aanbod volg je in plaats daarvan Een marketinglandingspagina bouwen. De video bouwt de site van een ontwerpstudio genaamd Studio Nord. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:01:33+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/tutorials/one-page-website' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' description: |- Hier bouw je een hele website op één pagina: een hero over de volle hoogte waarvan de knoppen springen naar de secties Over ons, Diensten en Contact eronder. Elke sectie draagt een HTML-id, het doelwit van zijn knop. Gebruik hem voor een klein bedrijf, een campagne of een portfolio. Voor een pagina rond één aanbod volg je in plaats daarvan Een marketinglandingspagina bouwen. De video bouwt de site van een ontwerpstudio genaamd Studio Nord. 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) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Een scrollende one-page-website bouwen. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [Een hero-sectie ontwerpen](/nl/hc/documentation/learn-dxpr-builder/tutorials/hero-section) - [Een marketinglandingspagina bouwen](/nl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) - [Naar secties linken en stijlen hergebruiken met klassen](/nl/hc/documentation/learn-dxpr-builder/element-settings/custom-css) Hier bouw je een hele website op één pagina: een hero over de volle hoogte waarvan de knoppen springen naar de secties Over ons, Diensten en Contact eronder. Elke sectie draagt een **HTML-id**, het doelwit van zijn knop. Gebruik hem voor een klein bedrijf, een campagne of een portfolio. Voor een pagina rond één aanbod volg je in plaats daarvan [Een marketinglandingspagina bouwen](/nl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing). De video bouwt de site van een ontwerpstudio genaamd Studio Nord. ## Voordat je begint - Je rol heeft de permissie **Bewerken met DXPR Builder**. - De mediabibliotheek bevat een brede foto voor de hero en een teamfoto. - De pagina is open in de builder. Ga voor een nieuwe naar **Inhoud** > **Inhoud toevoegen** > **Landingspagina** (`/node/add/landing_page`) en klik op **Opslaan**. - Nieuwe elementen belanden bovenaan hun sectie of kolom, dus de heroknoppen gaan erin van de laatste naar de eerste. ## Stap 1: de hero bouwen 1. Klik op **Add Elements** op de lege pagina en kies **Sectie** op het tabblad **Lay-out**. 2. Beweeg over de sectie en open **More** > **Settings**. Zet **HTML-id** op `hero` en kies onder **HTML-klassen** de optie **Align text center**. 3. Zet **100% hoogte** aan zodat de sectie het scherm vult, en **Verticaal centreren** zodat de inhoud in het midden staat. 4. Open het paneel **Stijl**. Klik onder **Achtergrondafbeelding** op **Afbeelding selecteren**, vink een foto aan en klik op **Geselecteerde invoegen**. Zet **Achtergrondstijl** op **Cover**, kies de donkerblauwe **Achtergrond** en witte **Tekstkleur**, en klik daarna op **Opslaan**. 5. Klik op **+** op de sectie en kies **Knop**. Zet **Titel** op “Contact”, **Link** op `#contact` en **Type** op **Light**, en klik daarna op **Opslaan**. Voeg op dezelfde manier nog twee knoppen toe: “Diensten” met `#services`, daarna “Over ons” met `#about`. Elke belandt boven de vorige. 6. Klik opnieuw op **+** en kies **Tekst**; deze belandt boven de knoppen. Typ “Studio Nord” als **Kop 2** en voeg de ondertitel toe. Zet **Tekstkleur** op wit in het paneel **Stijl** en klik op **Opslaan**. Het thema drukt de paginatitel af als kop 1 van de pagina. Om in plaats daarvan deze kop kop 1 te maken, zie [SEO-vriendelijke pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2). ## Stap 2: de sectie Over ons toevoegen 1. Beweeg over de hero en klik op **Sectie hieronder toevoegen**. Open **More** > **Settings**, zet **HTML-id** op `about` en klik op **Opslaan**. 2. Klik op **+** op de sectie en kies **Rij**; deze komt met twee gelijke kolommen. 3. Klik op **+** in de linkerkolom en kies **Afbeelding**. Klik op **Afbeelding selecteren**, vink een foto aan en klik op **Geselecteerde invoegen**. Typ het **alt-attribuut** in het paneel **SEO** en klik op **Opslaan**. 4. Klik op **+** in de rechterkolom en kies **Tekst**. Typ “Over ons” als **Kop 2**, voeg je verhaal toe en klik op **Opslaan**. ## Stap 3: de sectie Diensten toevoegen 1. Voeg een derde sectie toe met **Sectie hieronder toevoegen** en open **More** > **Settings**. Zet **HTML-id** op `services`, kies **Align text center** onder **HTML-klassen** en een lichtgrijze **Achtergrond** in het paneel **Stijl**. Klik op **Opslaan**. 2. Voeg een **Rij** toe, klik op het rasterpictogram (**Kolomindeling**), kies de preset **1/3 + 1/3 + 1/3** en klik op **Opslaan**. 3. Klik op **+** in de eerste kolom en kies **Tekst**. Typ “Branding” als **Kop 3**, voeg één regel toe en klik op **Opslaan**. 4. Klik op **+** in dezelfde kolom en kies **Pictogram**; dit belandt boven de tekst. Kies de set **Font Awesome Free Solid**, zoek naar `pen-nib` en klik op het pictogram. Zet **Size** op **Very Large (3x)**, open **Pictogramutilities**, zet **Style** op **Circle** en klik op **Opslaan**. 5. Herhaal voor “Websites” met `laptop-code` en “Analytics” met `chart-pie`. ## Stap 4: de sectie Contact toevoegen 1. Voeg een vierde sectie toe en open **More** > **Settings**. Zet **HTML-id** op `contact`, kies **Align text center** onder **HTML-klassen** en klik op **Opslaan**. 2. Klik op **+** op de sectie en kies **Sociale links**. Typ `linkedin` als het merk van de eerste rij en plak de profiel-URL, daarna `instagram` en zijn URL in de tweede. Zet **Style** op **Circle** en **Size** op **2x**, en klik daarna op **Opslaan**. 3. Klik opnieuw op **+** en kies **Knop**; deze belandt boven de links. Zet **Titel** op “Mail ons”, **Link** op `mailto:hello@studionord.example` en houd **Type** op **Primary**, en klik daarna op **Opslaan**. 4. Klik opnieuw op **+** en kies **Tekst**; deze belandt boven de knop. Typ “Neem contact op” als **Kop 2** en je e-mailadres en telefoonnummer eronder, en klik daarna op **Opslaan**. ## Stap 5: opslaan en vooraf bekijken 1. Klik op **Opslaan** op de werkbalk van de builder. 2. Open het weergavemenu (het **oogpictogram**), kies **Voorvertoning** en klik op een heroknop, zoals **Contact**. ## Verder gaan Niet getoond in de video: - **Vast menu**: maak een menu bij **Structuur** > **Menu’s** > **Menu toevoegen** met één link per sectie, zoals `/studio-nord#about`, of `#about` op de voorpagina. Zet het in de headerregio bij **Structuur** > **Blokindeling**. Zet in DXPR Theme **Sticky Header** aan bij **Uiterlijk** > **Instellingen** > **DXPR Theme**. - **Voorpagina**: maak de pagina je voorpagina bij **Configuratie** > **Systeem** > **Standaard site-instellingen**. - **Contactformulier**: voeg een formulier in op het tabblad **Drupal-blokken** in plaats van de introductietekst; zie [Formulieren toevoegen aan pagina’s](/nl/hc/documentation/learn-dxpr-builder/tutorials/add-forms). ## Wat je ziet De foto vult het scherm met “Studio Nord”, de ondertitel en drie lichte knoppen. Een klik op een knop scrolt de pagina soepel naar zijn sectie. Over ons toont de teamfoto naast het verhaal, Diensten drie omcirkelde pictogrammen op grijs, en Contact de kop “Neem contact op” en knop **Mail ons** boven twee ronde sociale pictogrammen. ## Als je de pagina niet ziet zoals getoond - **Een knop springt niet naar zijn sectie.** De **Link** komt niet overeen met de **HTML-id** van de sectie. De link is `#` plus exact dezelfde ID, zoals `#about` voor de ID `about`. - **Een sectie belandt onder je vaste header.** De builder kent de hoogte van de header niet. Zet onder **Geavanceerde instellingen** bij **DXPR Studio** > **DXPR Builder** > **Algemene instellingen** (`/admin/dxpr_studio/dxpr_builder/settings`) **Scroll offset selector** op de CSS-selector van je header. - **Een sociale link toont “No matching brand icon found”.** Het merk is geen bekende pictogramnaam. Typ hem in kleine letters, zoals `linkedin` of `instagram`. - **Je wijzigingen zijn weg na een herladen.** Je verliet de pagina voordat je op **Opslaan** op de werkbalk van de builder klikte. Als Opslaan een fout toont, zie [Wijzigingen worden niet opgeslagen](/nl/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails). ## Wat nu? - [Hero-sectie](/nl/hc/documentation/learn-dxpr-builder/tutorials/hero-section) voor overlay- en parallaxopties - [Landingspagina](/nl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) voor een campagnepagina - [Link naar secties en hergebruik stijlen met klassen](/nl/hc/documentation/learn-dxpr-builder/element-settings/custom-css) voor meer over HTML-id’s