--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/tabbladenpaneel' title: 'Een tabbladenpaneel toevoegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:36:38+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Gebruik Tabbladen wanneer je meerdere blokken verwante inhoud op één plek wilt, met slechts één tegelijk zichtbaar. Je krijgt een rij tablabels; bezoekers klikken op een label om de inhoud te zien. Het voorbeeld bouwt een bureaupagina met één tabblad per dienst. Voor vragen en antwoorden leest een uitvouwbaar paneel meestal beter.' 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 tabbladenpaneel toevoegen' description: 'Gebruik Tabbladen wanneer je meerdere blokken verwante inhoud op één plek wilt, met slechts één tegelijk zichtbaar. Je krijgt een rij tablabels; bezoekers klikken op een label om de inhoud te zien. Het voorbeeld bouwt een bureaupagina met één tabblad per dienst. Voor vragen en antwoorden leest een uitvouwbaar paneel meestal beter.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:36:38+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/tabbladenpaneel' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/tabbladenpaneel' description: 'Gebruik Tabbladen wanneer je meerdere blokken verwante inhoud op één plek wilt, met slechts één tegelijk zichtbaar. Je krijgt een rij tablabels; bezoekers klikken op een label om de inhoud te zien. Het voorbeeld bouwt een bureaupagina met één tabblad per dienst. Voor vragen en antwoorden leest een uitvouwbaar paneel meestal beter.' 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 tabbladenpaneel toevoegen. DXPR Builder lerenPagina’s bouwenContent toevoegenLay-out ## In deze gids Gerelateerde gidsen - [Een uitvouwbaar paneel toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/uitvouwbaar-paneel) - [Een carrousel toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/carrousel) - [Een geneste lay-out toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/nesten) Gebruik Tabbladen wanneer je meerdere blokken verwante inhoud op één plek wilt, met slechts één tegelijk zichtbaar. Je krijgt een rij tablabels; bezoekers klikken op een label om de inhoud te zien. Het voorbeeld bouwt een bureaupagina met één tabblad per dienst. Voor vragen en antwoorden leest een [uitvouwbaar paneel](/nl/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) meestal beter. ## Een tabbladenpaneel toevoegen 1. Beweeg over de kolom en klik op **+** in de besturingsbalk, of op de **+** in het midden van een lege kolom, om de elementenkiezer te openen. 2. Klik op het tabblad **Lay-out** op **Tabbladen**. Het element verschijnt met één tabblad, met het label **Titel**. 3. Beweeg over het paneel van het tabblad en open **More > Settings**. Typ een naam bij **Tabbladtitel** en klik op **Opslaan**. 4. Klik op **+** in het paneel om inhoud toe te voegen, zoals een **Tekst**-element. 5. Om een tabblad toe te voegen beweeg je over de tablabels en klik je op **Tabblad toevoegen** in de besturingsbalk van **Tabbladen**. Het nieuwe tabblad belandt vooraan, vóór de andere. Geef het een naam en vul het op dezelfde manier. ## Wat je ziet Een rij tablabels staat boven de inhoud van het geopende tabblad. In Voorvertoning en op de gepubliceerde pagina toont een klik op een label de inhoud van dat tabblad en verbergt de rest. Elk tabblad heeft eigen elementen, zodat het ene tabblad tekst kan dragen en een ander een reeks kaarten. Op schermen smaller dan 768 pixels veranderen de tabbladen in gestapelde koppen die openen als een uitvouwbaar paneel. ## Je tabbladen instellen Het element **Tabbladen** heeft drie instellingen. Open ze via **More > Settings** in de besturingsbalk van **Tabbladen**, die verschijnt wanneer je over de tablabels beweegt. | Instelling | Wat het doet | Standaard | |---|---|---| | **Tabbladrichting** | Waar de labels staan: **Standaard** (boven de inhoud), **Links** of **Rechts** | Standaard | | **Stijl** | De vormgeving van de labels: **Standaard** (een lijn onder de labels), **Modern** (afgeronde kaarten) of **Accordeon** (koppen met scheidingslijnen) | Standaard | | **Mobielvriendelijk** | Toont de tabbladen als uitvouwbare koppen op schermen smaller dan 768 pixels | Aan | Elk tabblad heeft eigen instellingen onder **More > Settings** op het paneel. **Tabbladtitel** is de labeltekst. **Tabbladbeschrijving** is een optionele korte regel onder het label van het geopende tabblad. ## Tabbladen beheren - **Opnieuw rangschikken**: sleep een tablabel naar een nieuwe plek tussen de labels. De inhoud verhuist mee. - **Hernoemen**: beweeg over het paneel van het tabblad, open **More > Settings**, wijzig de **Tabbladtitel** en klik op **Opslaan**. - **Verwijderen**: beweeg over het paneel van het tabblad, open **More** en kies **Verwijderen**. Alles in het tabblad wordt mee verwijderd. Houd labels bij één tot drie woorden en blijf bij ongeveer vijf tabbladen, zodat de labels op één regel passen. ## Als je het niet ziet - **Het nieuwe tabblad staat eerst in plaats van laatst.** **Tabblad toevoegen** zet het nieuwe tabblad altijd vooraan. Sleep het label naar de plek die je wilt. - **De instellingen tonen alleen Tabbladtitel en Tabbladbeschrijving.** Je opende de instellingen van één tabblad. Beweeg over de tablabels zodat de besturingsbalk van **Tabbladen** verschijnt, en open daar **More > Settings**. - **Telefoons tonen gestapelde koppen in plaats van tabbladen.** **Mobielvriendelijk** staat aan, wat de standaard is. Zet het uit in de instellingen van **Tabbladen** om op elke schermbreedte tabbladen te houden. - **Tabbladen ontbreekt op het tabblad Lay-out van de kiezer.** Je DXPR Builder-gebruikersprofiel sluit het uit. Een beheerder vinkt **Tabbladen** aan onder **Elementen** in je profiel op `/admin/dxpr_studio/dxpr_builder/profile`. ## Wat nu? - [Een uitvouwbaar paneel toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/collapsibles-element): stapel vragen en antwoorden die één voor één openen. - [Een carrousel toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/carousel-layout): toon dezelfde soort inhoud slide na slide. - [Nesten](/nl/hc/documentatie/dxpr-builder-leren/lay-out/nesten): zet rijen en kolommen in een tabblad voor rijkere lay-outs.