--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/referentie/elementreferentie' title: 'Elementreferentie | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:02:56+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder levert 22 inhoudselementen en 6 lay-out-elementen. Deze pagina toont de machinenaam van elk element en de velden in zijn instellingenmodaal; het lay-outdeel toont ook de Kolom in elke rij. Drupal-blokken en views, die de builder ook als elementen aanbiedt, worden niet behandeld. tags: - 'Elements and CSS' 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: Elementreferentie description: |- DXPR Builder levert 22 inhoudselementen en 6 lay-out-elementen. Deze pagina toont de machinenaam van elk element en de velden in zijn instellingenmodaal; het lay-outdeel toont ook de Kolom in elke rij. Drupal-blokken en views, die de builder ook als elementen aanbiedt, worden niet behandeld. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:02:56+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/referentie/elementreferentie' articleSection: 'Elementen en CSS' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/referentie/elementreferentie' description: |- DXPR Builder levert 22 inhoudselementen en 6 lay-out-elementen. Deze pagina toont de machinenaam van elk element en de velden in zijn instellingenmodaal; het lay-outdeel toont ook de Kolom in elke rij. Drupal-blokken en views, die de builder ook als elementen aanbiedt, worden niet behandeld. 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) /[Referentie](/nl/hc/documentation/learn-dxpr-builder/reference) /[Elementen en CSS](/nl/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Elementreferentie. DXPR Builder lerenReferentieElementen en CSS ## In deze gids DXPR Builder levert 22 inhoudselementen en 6 lay-out-elementen. Deze pagina toont de machinenaam van elk element en de velden in zijn instellingenmodaal; het lay-outdeel toont ook de Kolom in elke rij. Drupal-blokken en views, die de builder ook als elementen aanbiedt, worden niet behandeld. ## Hoe deze pagina te lezen De eerste tabel van elk element toont de velden in zijn accordeon **Algemeen**. Een veld in een andere accordeon staat in een aparte tabel genoemd naar die accordeon. Label is het veldlabel zoals de modaal het toont, in de Amerikaanse spelling van de interface. Parameter is de `param_name` in de element-definitie. Opties lezen als `value` (Label). Twee velden van Algemeen verschijnen op elk element en worden niet herhaald in de tabellen: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | HTML-ID | `hash` | tekst | leeg; het veld toont de gegenereerde ID als placeholder | Eerst een letter, dan letters, cijfers, koppeltekens en underscores | Aangepaste ID voor het element. | | HTML-klassen | `el_class` | multiselect | leeg; nieuwe secties krijgen `py-5` | Bootstrap 5-utilityklassen en de klassen die ingeschakelde thema’s declareren; **Bewerken als tekst** accepteert elke klasse | Extra CSS-klassen voor het element. | Elk element heeft ook de accordeons **Stijl** en **Hoverstijl**, gedocumenteerd op de pagina [Tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab). Alle elementen behalve Kolom en de panelen in Tabs, Inklapbaar paneel en Carrousel hebben ook de accordeon **Animatie**, gedocumenteerd op de pagina [Tabblad Animatie](/nl/hc/documentation/learn-dxpr-builder/design/animation-tab). De kolom Besturingselement noemt wat de modaal toont. Elk besturingselement komt uit een parameter-`type` in de elementdefinitie: | Besturingselement | Code-`type` | |---|---| | tekst | `textfield` | | getal | `numericfield` | | link | `link` | | radio | `dropdown` met minder dan 7 opties | | select | `dropdown` met 7 of meer opties | | schakelaar | `checkbox` met één optie | | selectievakjes | `checkbox` met meerdere opties | | schuifregelaar | `dxb_slider` | | kleur | `colorpicker` | | pictogram, afbeelding, afbeeldingen, video, datumtijd | Het `type` met dezelfde naam | | ckeditor | `textarea` | | ace | `html` | | sociaal | `social_links` | Een schakelaar die aan staat bewaart de waarde in zijn cel Toegestane waarden; een schakelaar die uit staat bewaart `no` of een lege waarde. Selectievakjes bewaren de aangevinkte waarden als een door komma’s gescheiden lijst. Een optie vermeld als leeg wordt bewaard als een lege string; in de modaal heeft zijn radioknop de sleutel `dxpr-default`. Velden voor afbeelding en afbeeldingen bieden ook een select voor afbeeldingsstijl: eerst de `optimize`-stijl van de site wanneer die bestaat, dan **Originele afbeelding (Geen schaalaanpassing)** en de andere afbeeldingsstijlen. Sommige velden blijven verborgen tot een ander veld een matchende waarde heeft; de kolom Beschrijving noemt die afhankelijkheid. ## Inhoudselementen ### [Tekst](/nl/hc/documentation/learn-dxpr-builder/elements/text) Rijke tekst bewerkt in CKEditor. Machinenaam: `az_text`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Tekst | `content` | ckeditor | Placeholderkop en -alinea | HTML | De tekstinhoud. | ### [Afbeelding](/nl/hc/documentation/learn-dxpr-builder/elements/image) Eén afbeelding, optioneel gewikkeld in een link. Machinenaam: `az_image`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Afbeelding | `image` | afbeelding | leeg | Afbeelding uit de mediabrowser | De te tonen afbeelding. | | Afbeeldingsbreedte | `width` | tekst | `100%` | CSS-lengte, bijvoorbeeld `100px` of `50%` | Een kaal getal telt als pixels. | | Afbeeldingshoogte | `height` | tekst | leeg | CSS-lengte, bijvoorbeeld `100px` | Een kaal getal telt als pixels. | | Afbeeldingslink | `link` | link | leeg | URL of intern pad | Wikkelt de afbeelding in een link. | | Doel van afbeeldingslink | `link_target` | radio | `_self` (Zelfde venster) | `_self` (Zelfde venster), `_blank` (Nieuw venster) | Waar de link opent. Getoond wanneer `link` is ingesteld. | Velden in de accordeon **SEO**: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Alt-attribuut | `alt` | tekst | leeg | Willekeurige tekst | Alt-tekst van de afbeelding. | | Titelattribuut | `title` | tekst | leeg | Willekeurige tekst | Titelattribuut van de afbeelding. | ### [Afbeeldingcarrousel](/nl/hc/documentation/learn-dxpr-builder/elements/image-carousel) Een Bootstrap-slideshow van meerdere afbeeldingen. Machinenaam: `az_images_carousel`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Afbeeldingen | `images` | afbeeldingen | leeg | Afbeeldingen uit de mediabrowser | Eén slide per afbeelding. | | Interval | `interval` | schuifregelaar | 5000 | 0 tot 10000, stap 1 | Tijd tussen slides in milliseconden. Bij 0 gaan de slides niet uit zichzelf verder. | | Verbergen | `hide` | selectievakjes | geen aangevinkt | `pagination_control` (Pagineringbesturing verbergen), `prev_next_buttons` (Vorige/volgende-knoppen verbergen) | Verbergt de indicatoren, de pijlen of beide. | Velden in de accordeon **SEO**: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Alt-attribuut | `alt` | tekst | leeg | Willekeurige tekst | Alt-tekst van de afbeeldingen. | | Titelattribuut | `title` | tekst | leeg | Willekeurige tekst | Titelattribuut van de afbeeldingen. | ### [Video](/nl/hc/documentation/learn-dxpr-builder/elements/video) Sluit een YouTube- of Vimeo-video in. Machinenaam: `az_video`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Videolink | `link` | tekst | leeg | YouTube- of Vimeo-URL | De in te sluiten video. | | Videobreedte | `width` | tekst | `100%` | CSS-lengte, bijvoorbeeld `100px` of `50%` | Een kaal getal telt als pixels. | | Afbeelding | `image` | afbeelding | leeg | Afbeelding uit de mediabrowser | Omslagafbeelding; de speler laadt wanneer de bezoeker erop klikt. | | Afspeelknop in themastijl | `play` | schakelaar | uit | `yes` wanneer aan | Toont de afspeelknop in themastijl over de video. | ### [Lokale video](/nl/hc/documentatie/dxpr-builder-leren/elementen/lokale-video) Plays a self-hosted video file in an HTML5 player. Machinenaam: `az_video_local`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Video | `video` | video | leeg | MP4-, WEBM-, OGG- of OGV-bestand, tot de uploadgroottelimiet van de site | Het videobestand. | | Automatisch afspelen starten | `autoplay` | schakelaar | uit | `autoplay` wanneer aan | Start afspelen bij het laden van de pagina. Automatisch afspelen dempt de video altijd. | | Gedempt | `muted` | schakelaar | uit | `muted` wanneer aan | Dempt de video. Getoond terwijl `autoplay` uit staat. | | Besturing | `controls` | schakelaar | uit | `controls` wanneer aan | Toont de spelerbesturing. | | Herhalen | `loop` | schakelaar | uit | `loop` wanneer aan | Start de video opnieuw wanneer hij eindigt. | | Videobreedte | `width` | tekst | `100%` | CSS-lengte, bijvoorbeeld `100px` of `50%` | Spelerbreedte. | | Afbeelding | `image` | afbeelding | leeg | Afbeelding uit de mediabrowser | Posterafbeelding getoond vóór afspelen. | ### [HTML](/nl/hc/documentation/learn-dxpr-builder/elements/html) Ruwe HTML bewerkt in een code-editor. Machinenaam: `az_html`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Ruwe HTML | `content` | ace | Placeholder message "Click the edit button to change this HTML" | HTML | De HTML-inhoud. | ### [Jumbotron](/nl/hc/documentation/learn-dxpr-builder/elements/jumbotron) Grote banner met een titel en leadtekst; andere elementen kunnen erin worden gedropt. Machinenaam: `az_jumbotron`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Titel | `title` | tekst | leeg | Willekeurige tekst | Bannertitel. | | Lead | `lead` | tekst | leeg | Willekeurige tekst | Ondertiteltekst getoond onder de titel. | | Type | `type` | select | `bg-light` (Licht) | `bg-light` (Licht), `text-white bg-primary` (Primair), `text-white bg-secondary` (Secundair), `text-white bg-success` (Succes), `text-white bg-info` (Info), `text-white bg-warning` (Waarschuwing), `text-white bg-danger` (Gevaar), `text-white bg-dark` (Donker), `none` (Standaard) | Achtergrond- en tekstkleurklassen. | | Opvulling | `padding` | radio | `p-5` (Groot) | `p-5` (Groot), `p-4` (Middelgroot), `p-3` (Klein) | Opvulgrootte. | ### [Knop](/nl/hc/documentation/learn-dxpr-builder/elements/button) Een Bootstrap-knop die linkt naar een URL. Machinenaam: `az_button`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Titel | `title` | tekst | Klik om tekst toe te voegen | Willekeurige tekst | Tekst op de knop. | | Link | `link` | link | leeg | URL of intern pad | Knoplink. | | Linkdoel | `link_target` | radio | `_self` (Zelfde venster) | `_self` (Zelfde venster), `_blank` (Nieuw venster) | Waar de link opent. Getoond wanneer `link` is ingesteld. | | Type | `type` | select | `primary` (Primair) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`; elk label is de waarde met een hoofdletter | Bootstrap-knopstijl. | | Blokknop | `block` | schakelaar | uit | `btn-block` wanneer aan | Knop over volledige breedte. | | Omlijningsstijl | `outlined` | schakelaar | uit | `outline` wanneer aan | Rendert `btn-outline-*` in plaats van `btn-*`. | | Grootte | `size` | radio | leeg (Normaal) | leeg (Normaal), `btn-lg` (Groot), `btn-sm` (Klein) | Knopgrootte. | ### [Link-element](/nl/hc/documentation/learn-dxpr-builder/elements/link) Container die de elementen erin in één link wikkelt. Machinenaam: `az_link`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Link | `link` | link | leeg | URL of intern pad | Inhoudslink. | | Linkdoel | `link_target` | radio | `_self` (Zelfde venster) | `_self` (Zelfde venster), `_blank` (Nieuw venster) | Waar de link opent. Getoond wanneer `link` is ingesteld. | Velden in de accordeon **SEO**: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Titelattribuut | `title` | tekst | leeg | Willekeurige tekst | Titelattribuut van de link. | | Zoekmachines vertellen niet te volgen | `nofollow` | schakelaar | uit | `nofollow` wanneer aan | Voegt `rel="nofollow"` toe aan de link. | ### [Melding](/nl/hc/documentation/learn-dxpr-builder/elements/alert) Een Bootstrap-melding. Machinenaam: `az_alert`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Bericht | `content` | ckeditor | Placeholdertekst | HTML | Het bericht. | | Type | `type` | radio | `alert-success` (Succes) | `alert-success` (Succes), `alert-info` (Info), `alert-warning` (Waarschuwing), `alert-danger` (Gevaar) | Meldingskleur. | ### [Kaart](/nl/hc/documentatie/dxpr-builder-leren/elementen/kaart) Een Bootstrap-kaartcontainer met een optionele kop en titel. Machinenaam: `az_card`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Kop | `header` | tekst | leeg | Willekeurige tekst | Kaartkoptekst. | | Titel | `title` | tekst | leeg | Willekeurige tekst | Kaarttitel. | | Type | `type` | select | leeg (Standaard) | leeg (Standaard), `text-white bg-primary` (Primair), `text-white bg-secondary` (Secundair), `text-white bg-success` (Succes), `text-white bg-info` (Info), `text-white bg-warning` (Waarschuwing), `text-white bg-danger` (Gevaar), `text-white bg-dark` (Donker), `bg-light` (Licht) | Kaartkleurklassen. | ### [Paneel](/nl/hc/documentatie/dxpr-builder-leren/elementen/paneel) Een paneelcontainer met een titelbalk. Machinenaam: `az_panel`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Titel | `title` | tekst | leeg | Willekeurige tekst | Paneeltitel. | | Type | `type` | select | `panel-dxpr` (DXPR) | `panel-dxpr` (DXPR), `panel-default` (Standaard), `panel-primary` (Primair), `panel-success` (Succes), `panel-info` (Info), `panel-warning` (Waarschuwing), `panel-danger` (Gevaar) | Paneelstijl. | ### [Blokcitaat](/nl/hc/documentation/learn-dxpr-builder/elements/blockquote) Een citaat met een optionele bronvermelding. Machinenaam: `az_blockquote`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Tekst | `content` | ckeditor | Placeholdertekst | HTML | De geciteerde tekst. | | Bronvermelding | `cite` | tekst | leeg | Willekeurige tekst | Citaatbron getoond onder het citaat. | | Omkeren | `reverse` | schakelaar | uit | `blockquote-reverse` wanneer aan | Lijnt het citaat uit aan het einde van de regel (`text-end`). | ### [Social links](/nl/hc/documentation/learn-dxpr-builder/elements/social-links) Een rij of kolom socialenetwerkpictogrammen die linken naar profielpagina’s. Machinenaam: `st_social`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Social links | `st_social_links` | sociaal | Facebook- en YouTube-rijen | Eén rij per pictogram: een merk en de profiel-URL | De pictogrammen en hun links. | | Lay-out | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Gestapeld) | Pictogramlay-out. | | Stijl | `st_style` | radio | leeg (Geen) | leeg (Geen), `rounded` (Afgerond), `circle` (Cirkel), `square` (Vierkant) | Pictogramachtergrondvorm. | | Grootte | `st_size` | radio | `lg` (Groot) | `lg` (Groot), leeg (Klein), `2x`, `3x`, `4x`, `5x`; de laatste vier labels komen overeen met hun waarden | Pictogramgrootte. | | CSS3-hovereffecten | `st_css3_hover_effects` | radio | leeg (Geen) | leeg (Geen), `disc` (Schijf), `pulse` (Pulseren) | Hovereffect. Een effect maakt het pictogram cirkelvormig. | Velden in de accordeon **Pictogramkleuren**: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Kleur | `st_theme_color` | radio | `custom` (Aangepast) | `brand` (Merkgleur), `custom` (Aangepast), `inherit` (Overerven) | Bron van de pictogramkleur. | | Kleur | `st_color` | kleur | geen | Willekeurige kleur | Aangepaste pictogramkleur. Getoond wanneer `st_theme_color` `custom` is. | | Achtergrondkleur | `st_theme_bgcolor` | radio | `custom` (Aangepast) | `brand` (Merkgleur), `custom` (Aangepast), `inherit` (Overerven) | Bron van de pictogramachtergrondkleur. | | Achtergrondkleur | `st_bgcolor` | kleur | geen | Willekeurige kleur | Aangepaste achtergrondkleur. Getoond wanneer `st_theme_bgcolor` `custom` is. | ### [Nummerteller](/nl/hc/documentation/learn-dxpr-builder/elements/number-counter) Een getal dat telt van een beginwaarde naar een eindwaarde. Machinenaam: `az_counter`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Begin | `start` | getal | 0 | Getal | Getal om vanaf te tellen. | | Einde | `end` | getal | 100 | Getal | Getal om naartoe te tellen. | | Lettergrootte | `fontsize` | schuifregelaar | 30 | 0 tot 200, stap 1 | Lettergrootte van het getal in pixels. | | Snelheid | `speed` | schuifregelaar | 2000 | 0 tot 10000, stap 1 | Tijd in milliseconden waarin de telling eindigt. | | Duizendtalscheiding | `seperator` | radio | leeg (Geen) | leeg (Geen), `,` (Komma), `.` (Punt), een spatie (Spatie) | Scheidt duizendtallen in het eindgetal. De code spelt de parameter zo. | | Voorvoegsel | `prefix` | tekst | leeg | Willekeurige tekst | Tekens vóór het getal, bijvoorbeeld `$`. | | Achtervoegsel | `postfix` | tekst | leeg | Willekeurige tekst | Tekens na het getal, bijvoorbeeld `%`. | ### [Cirkelteller](/nl/hc/documentation/learn-dxpr-builder/elements/circle-counter) Cirkelvormige voortgangsindicator met optionele tekst, een infolijn en een pictogram in het midden. Machinenaam: `az_circle_counter`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Voorgrondkleur | `fgcolor` | kleur | `#333333` | Willekeurige kleur | Kleur van de voortgangsboog. | | Achtergrondkleur | `bgcolor` | kleur | `#999999` | Willekeurige kleur | Kleur van de baan achter de boog. | | Vulkleur | `fill` | kleur | geen | Willekeurige kleur | Vulkleur binnen de cirkel. | | Percentage | `percent` | schuifregelaar | 50 | 0 tot 100, stap 1 | Voortgangswaarde. | | Dimensie | `dimension` | schuifregelaar | 250 | 100 tot 500, stap 1 | Cirkeldiameter in pixels. | | Voorgrondbreedte | `width` | schuifregelaar | 10 | 1 tot 100, stap 1 | Lijnbreedte van de boog. | | Animatie | `animation` | schakelaar | aan | `yes` wanneer aan | Animeert de boog. | | Animatieduur | `duration` | schuifregelaar | 1500 | 0 tot 5000, stap 1 | In milliseconden. Getoond wanneer `animation` aan staat. | | Animatievertraging | `delay` | schuifregelaar | 0 | 0 tot 5000, stap 1 | In milliseconden. Getoond wanneer `animation` aan staat. | | Animatie in viewport | `in_viewport` | schakelaar | aan | `yes` wanneer aan | Start de animatie wanneer het element in beeld scrolt. Getoond wanneer `animation` aan staat. | Velden in de accordeon **Cirkelinhoud**. Elk veld na **Voortgang tonen** wordt alleen getoond terwijl het uit staat: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Voortgang tonen | `show_progress` | schakelaar | uit | `yes` wanneer aan | Toont het percentage in plaats van je eigen tekst en pictogram. | | Tekst | `text` | tekst | leeg | Willekeurige tekst | Middentekst. | | Lettergrootte | `fontsize` | schuifregelaar | 16 | 0 tot 100, stap 1 | Middentekstgrootte in pixels. | | Tekstkleur | `text_color` | kleur | geen | Willekeurige kleur | Middentekstkleur. | | Info | `info` | tekst | leeg | Willekeurige tekst | Secundaire infolijn. | | Infolettergrootte | `info_fontsize` | schuifregelaar | 14 | 0 tot 100, stap 1 | Infolijn-grootte in pixels. | | Infokleur | `info_color` | kleur | geen | Willekeurige kleur | Infolijnkleur. | | Pictogram | `icon` | pictogram | leeg | Pictogram uit de sets die je builderprofiel toestaat | Middenpictogram. | | Pictogramgrootte | `icon_size` | schuifregelaar | 16 | 0 tot 100, stap 1 | Pictogramlettergrootte in pixels. | | Pictogramkleur | `icon_color` | kleur | geen | Willekeurige kleur | Pictogramkleur. | ### [Voortgangsbalk](/nl/hc/documentation/learn-dxpr-builder/elements/progress-bar) Horizontale Bootstrap-voortgangsbalk met een label. Machinenaam: `az_progress_bar`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Label | `label` | tekst | Klik om tekst toe te voegen | Willekeurige tekst | Tekst in de balk. | | Voortgang | `width` | schuifregelaar | 50 | 0 tot 100, stap 1 | Voortgang als percentage. | | Balkhoogte | `height` | schuifregelaar | 45 | 0 tot 100, stap 1 | Balkhoogte in pixels. | | Achterkleur | `bgcolor` | kleur | `#e9ecef` | Willekeurige kleur | Baankleur achter de balk. | | Voorkleur | `fcolor` | kleur | `#284ed9` | Willekeurige kleur | Balkkleur. | | Groeianimatie | `grow_animation` | schakelaar | uit | `yes` wanneer aan | Animeert de balk van 0 naar zijn waarde. | | Strepen | `options` | selectievakjes | geen aangevinkt | `progress-bar-striped` (Streeppatroon aan balk toevoegen), `progress-bar-animated` (Strepen animeren (vereist streeppatroon)) | Streeppatroon en bewegende strepen. | ### [Afteltimer](/nl/hc/documentation/learn-dxpr-builder/elements/countdown-timer) Telt af naar een datum, een tijdstip of het einde van een herhalend interval. Machinenaam: `az_countdown`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Aftelstijl | `countdown_style` | radio | `plain` (Simpel) | `plain` (Simpel), `style1` (Raster), `style6` (3D-flip), `style9` (Schijf), `style10` (Luchthavenstijl), `style12` (Transparant) | Visuele stijl. | | Datum-/tijdbeperkingen | `counter_scope` | radio | `date` (Alleen datum opgeven) | `date` (Alleen datum opgeven), `date_time` (Datum en tijd opgeven), `repeating` (Alleen tijd opgeven (dagelijks herhalend)), `resetting` (Resettende teller (stel interval in tot 24 uur)) | Waarnaartoe de timer aftelt. | | Datum | `date` | datumtijd | leeg | Datum in `d.m.Y`-formaat | Doeldatum. Getoond wanneer `counter_scope` `date` is. | | Datum/tijd | `date_time` | datumtijd | leeg | Datum in `d.m.Y`-formaat plus uur (`H`) | Doeldatum en -uur. Getoond wanneer `counter_scope` `date_time` is. | | Tijd | `time` | datumtijd | leeg | Uur (`H`) | Doeluur van elke dag. Getoond wanneer `counter_scope` `repeating` is. | | Resetten in uren | `reset_hours` | schuifregelaar | 0 | 0 tot 24, stap 1 | Uren in het interval. Getoond wanneer `counter_scope` `resetting` is. | | Resetten in minuten | `reset_minutes` | schuifregelaar | 0 | 0 tot 60, stap 1 | Minuten in het interval. Getoond wanneer `counter_scope` `resetting` is. | | Resetten in seconden | `reset_seconds` | schuifregelaar | 0 | 0 tot 60, stap 1 | Seconden in het interval. Getoond wanneer `counter_scope` `resetting` is. | | Paginaverwijzer | `referrer` | link | leeg | URL of intern pad | Pagina geopend wanneer de aftelling verloopt. Getoond wanneer `counter_scope` `repeating` of `resetting` is. | | Automatisch herstarten | `restart` | schakelaar | uit | `yes` wanneer aan | Start het interval opnieuw wanneer het eindigt. Getoond wanneer `counter_scope` `resetting` is. | | Weergaveopties | `display` | selectievakjes | alle vijf aangevinkt | `years` (Resterende jaren tonen), `days` (Resterende dagen tonen), `hours` (Resterende uren tonen), `minutes` (Resterende minuten tonen), `seconds` (Resterende seconden tonen) | Te tonen eenheden. | ### [Marquee](/nl/hc/documentatie/dxpr-builder-leren/elementen/marquee) Horizontale strook afbeeldingen die zonder stoppen scrolt. Machinenaam: `az_marquee`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Afbeeldingen | `images` | afbeeldingen | Drie kopieën van het DXPR-logo | Afbeeldingen uit de mediabrowser | De afbeeldingen in de strook. | | Snelheid | `speed` | schuifregelaar | 3 | 1 tot 5, stap 1 | Scrollsnelheid; 1 is langzaamst, 5 is snelst. | | Hoogte | `height` | schuifregelaar | 50 | 10 tot 200, stap 1 | Afbeeldingshoogte in pixels. | | Afbeeldingslay-out | `image_layout` | radio | `fh` (Afbeeldingen met vaste hoogte) | `fh` (Afbeeldingen met vaste hoogte), `fw` (Afbeeldingen met vaste breedte) | Of afbeeldingen een hoogte of een breedte delen. | | Afbeeldingsbreedte | `width` | schuifregelaar | 400 | 50 tot 500, stap 1 | Afbeeldingsbreedte in pixels. Getoond wanneer `image_layout` `fw` is. | | Grijswaarden | `grayscale` | schakelaar | uit | `apply` wanneer aan | Toont de afbeeldingen in grijswaarden. | | Randen vervagen | `fade_edges` | schakelaar | uit | `apply` wanneer aan | Vervaagt de strook aan beide randen. | Velden in de accordeon **SEO**: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Alt-attribuut | `alt` | tekst | leeg | Willekeurige tekst | Alt-tekst van de afbeeldingen. | | Titelattribuut | `title` | tekst | leeg | Willekeurige tekst | Titelattribuut van de afbeeldingen. | ### [Plattegrond](/nl/hc/documentation/learn-dxpr-builder/elements/map) Ingesloten Google Map voor een adres. Machinenaam: `az_map`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Adres | `address` | tekst | leeg | Straatadres | Te tonen locatie. | | Kaartbreedte | `width` | tekst | `100%` | CSS-lengte, bijvoorbeeld `100px` of `50%` | Een kaal getal telt als pixels. | | Kaarthoogte | `height` | tekst | `400px` | CSS-lengte, bijvoorbeeld `100px` | Een kaal getal telt als pixels. | ### [Pictogram](/nl/hc/documentation/learn-dxpr-builder/elements/icon) Eén pictogram, optioneel gelinkt. Machinenaam: `az_icon`. De module levert 14 pictogrammensets. Thema’s en modules kunnen meer toevoegen, en een builderprofiel kan beperken welke sets zijn gebruikers zien. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Pictogram | `icon` | pictogram | `bi bi-heart` | Pictogram uit de sets die je builderprofiel toestaat | Het pictogram. | | Grootte | `size` | radio | `fa-lg` (Groot) | `normal` (Normaal), `fa-lg` (Groot), `fa-2x` (Extra groot (2x)), `fa-3x` (Zeer groot (3x)), `fa-4x` (Enorm (4x)), `fa-5x` (Gigantisch (5x)) | Pictogramgrootte. | | Link | `link` | link | leeg | URL of intern pad | Pictogramlink. | | Linkdoel | `link_target` | radio | `_self` (Zelfde venster) | `_self` (Zelfde venster), `_blank` (Nieuw venster) | Waar de link opent. Getoond wanneer `link` is ingesteld. | Velden in de accordeon **Pictogramhulpprogramma’s**: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Stijl | `st_style` | radio | leeg (Geen) | leeg (Geen), `stbe-util-icon-rounded` (Afgerond), `stbe-util-icon-circle` (Cirkel), `stbe-util-icon-square` (Vierkant) | Achtergrondvorm. | | Pictogramanimatie | `animation` | radio | leeg (Nee) | leeg (Nee), `fa-spin` (Draaien), `fa-pulse` (Pulseren) | Pictogramanimatie. | | Pictogramoriëntatie | `orientation` | radio | leeg (Normaal) | leeg (Normaal), `fa-rotate-90` (90 roteren), `fa-rotate-180` (180 roteren), `fa-rotate-270` (270 roteren), `fa-flip-horizontal` (Horizontaal spiegelen), `fa-flip-vertical` (Verticaal spiegelen) | Rotatie of spiegeling. | ### [Scheidingslijn](/nl/hc/documentation/learn-dxpr-builder/elements/divider) Horizontale lijn. Machinenaam: `az_separator`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Kleur | `bgcolor` | kleur | geen | Willekeurige kleur | Lijnkleur. | | Dikte | `thickness` | radio | `auto` (Themastandaard) | `auto` (Themastandaard), `custom` (Aangepaste dikte) | Of de themadikte te overrulen. | | Dikte | `custom_thickness` | schuifregelaar | 3 | 0 tot 20, stap 1 | Lijndikte in pixels. Getoond wanneer `thickness` `custom` is. | | Lengte | `width` | radio | `auto` (Themastandaard) | `auto` (Themastandaard), `custom` (Aangepaste breedte) | Of de themalengte te overrulen. | | Breedte | `custom_width` | schuifregelaar | 100 | 0 tot 500, stap 10 | Lijnlengte in pixels; 0 rendert volledige breedte. Getoond wanneer `width` `custom` is. | | Uitlijnen | `align` | radio | `left` (Links) | `left` (Links), `center` (Midden), `right` (Rechts) | Horizontale uitlijning. Getoond wanneer `width` `custom` is. | ## Lay-outelementen ### [Sectie](/nl/hc/documentation/learn-dxpr-builder/layout/sections) Container op het hoogste niveau voor rijen, met opties voor volledige breedte, volledige hoogte en achtergrondeffect. Machinenaam: `az_section`. Nieuwe secties krijgen de klasse `py-5` bij **HTML-klassen**. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Volledige breedte | `fluid` | schakelaar | uit | `yes` wanneer aan | Gebruikt een container over volledige breedte (`container-fluid`). | | 100% hoogte | `fullheight` | schakelaar | uit | `yes` wanneer aan | De sectie vult de viewporthoogte. | | Verticaal centreren | `vertical_centering` | schakelaar | uit | `yes` wanneer aan | Centreert de inhoud verticaal. | Velden in de accordeon **Achtergrondeffecten**. Alle behalve **Achtergrondeffect** hangen af van zijn waarde, zoals de kolom Beschrijving toont: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Achtergrondeffect | `effect` | radio | leeg (Simpele afbeelding) | leeg (Simpele afbeelding), `fixed` (Vaste afbeelding), `parallax` (Parallaxafbeelding), `gradient` (Verloop), `youtube` (YouTube-video) | Achtergrondeffect. | | Parallaxsnelheid | `parallax_speed` | schuifregelaar | 0 | 0 tot 100, stap 1 | Parallaxscrollsnelheid. Getoond wanneer `effect` `parallax` is. | | Parallaxmodus | `parallax_mode` | radio | `fixed` (Vast) | `fixed` (Vast), `scroll` (Lokaal) | Achtergrondbijlage van de afbeelding. Getoond wanneer `effect` `parallax` is. | | Uitschakelen op mobiel | `parallax_mobile_disable` | schakelaar | uit | `yes` wanneer aan | Zet parallax uit op schermen smaller dan 481 px. Getoond wanneer `effect` `parallax` is. | | Beginkleur | `gradient_start_color` | kleur | geen | Willekeurige kleur | Verloopbeginkleur. Getoond wanneer `effect` `gradient` is. | | Eindkleur | `gradient_end_color` | kleur | geen | Willekeurige kleur | Verloopeindkleur. Getoond wanneer `effect` `gradient` is. | | Verlooprichting | `gradient_direction` | schuifregelaar | 180 | 1 tot 360, stap 1 | Verloophoek in graden. Getoond wanneer `effect` `gradient` is. | | Beginpositie | `gradient_start` | schuifregelaar | 0 | 0 tot 100, stap 1 | Beginkleurpositie in procent. Getoond wanneer `effect` `gradient` is. | | Eindpositie | `gradient_end` | schuifregelaar | 100 | 0 tot 100, stap 1 | Eindkleurpositie in procent. Getoond wanneer `effect` `gradient` is. | | Video-opties | `video_options` | selectievakjes | geen aangevinkt | `disMobile` (Uitschakelen op mobiele apparaten), `loop` (Herhalen), `audio` (Dempen uit (Niet betrouwbaar bij automatisch afspelen door recente browserbeleidupdates)), `noCrop` (Speler bijsnijden uitschakelen), `resizeSection` (Sectie aan video aanpassen), `showControls` (Besturing tonen) | YouTube-achtergrondopties. Getoond wanneer `effect` `youtube` is. | | YouTube-video-URL | `video_youtube` | tekst | leeg | YouTube-URL | YouTube-achtergrondvideo. Getoond wanneer `effect` `youtube` is. | | Starttijd in seconden | `video_start` | tekst | 0 | Seconden | Starttijd van de video. Getoond wanneer `effect` `youtube` is. | | Stoptijd in seconden | `video_stop` | tekst | 0 | Seconden | Stoptijd van de video. Getoond wanneer `effect` `youtube` is. | ### [Rij](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) Bootstrap-rasterrij die kolommen bevat. Een nieuwe rij begint met twee halve kolommen. Machinenaam: `az_row`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Kolommen met gelijke hoogte | `equal` | schakelaar | uit | `yes` wanneer aan | Geeft alle kolommen dezelfde hoogte. | | Rij spiegelen | `reverse_horizontal` | schakelaar | uit | `yes` wanneer aan | Keert de kolomvolgorde om op schermen van 768 px en breder. | ### [Kolom](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) Een kolom in een rij. Rijen maken hun kolommen, dus Kolom staat niet in de elementenkiezer. Machinenaam: `az_column`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Verticaal centreren | `vertical_centering` | schakelaar | uit | `yes` wanneer aan | Centreert de kolominhoud verticaal. | ### [Tabs](/nl/hc/documentation/learn-dxpr-builder/layout/tabs-element) Container met wisselbare tabpanelen; elke tab wordt toegevoegd met het besturingselement **Tab toevoegen**. Machinenaam: `az_tabs`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Tabrichting | `az_dirrection` | radio | leeg (Standaard) | leeg (Standaard), `tabs-left` (Links), `tabs-right` (Rechts) | Positie van de tabbalk. De code spelt de parameter zo. | | Stijl | `tab_style` | radio | leeg (Standaard) | leeg (Standaard), `modern` (Modern), `accordion` (Accordeon) | Tabstijl. | | Mobielvriendelijk | `responsive` | schakelaar | aan | `yes` wanneer aan | Toont de tabs als inklapbaar item op kleine schermen. | Elke tab (`az_tab`) heeft zijn eigen instellingen: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Tabtitel | `title` | tekst | Titel | Willekeurige tekst | Label van de tab. | | Tabbeschrijving | `subtitle` | ckeditor | leeg | HTML | Optionele korte ondertitel getoond op de actieve tab. | ### [Inklapbaar paneel](/nl/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) Container van inklapbare panelen; elk paneel wordt toegevoegd met het besturingselement **Schakelaar toevoegen**. Machinenaam: `az_accordion`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Inklappen | `collapsed` | schakelaar | uit | `yes` wanneer aan | Start met elk paneel gesloten. Wanneer uit, start het eerste paneel open. | | Uitklappictogram | `expandicon` | radio | leeg (Geen) | leeg (Geen), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | Pictogram naast elke paneeltitel. | Elk paneel (`az_toggle`) heeft zijn eigen instellingen: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Schakeltitel | `title` | tekst | Titel | Willekeurige tekst | Paneeltitel. | ### [Carrousel](/nl/hc/documentation/learn-dxpr-builder/layout/carousel-layout) Container van slides; elke slide bevat andere elementen en wordt toegevoegd met het besturingselement **Slide toevoegen**. Slides (`az_slide`) hebben geen eigen velden. Machinenaam: `az_carousel`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Frames per slide | `items` | schuifregelaar | 1 | 1 tot 10, stap 1 | Slides naast elkaar getoond. Smallere schermen tonen er minder. | | Automatisch afspelen uitschakelen | `autoplay` | schakelaar | uit | `yes` wanneer aan | Stopt dat de slides uit zichzelf verdergaan. | | Interval voor automatisch afspelen | `interval` | schuifregelaar | 5000 | 1000 tot 20000, stap 100 | Tijd tussen slides in milliseconden. | | Stoppen bij hoveren | `stoponhover` | schakelaar | uit | `yes` wanneer aan | Pauzeert automatisch afspelen terwijl de aanwijzer over de carrousel is. | Velden in de accordeon **Punten**. Elk veld na **Puntnavigatie** wordt alleen getoond terwijl het aan staat: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Puntnavigatie | `pagination` | schakelaar | aan | `yes` wanneer aan | Toont een punt voor elke slide. | | Puntoriëntatie | `pagination_orientation` | radio | `outside` (Buiten slider) | `outside` (Buiten slider), `inside` (Binnen slider) | Puntpositie. | | Puntvorm | `pagination_shape` | radio | `bar` (Balk) | `bar` (Balk), `circle` (Cirkel), `square` (Vierkant), `triangle` (Driehoek) | Puntvorm. | | Actieve-punttransformatie | `pagination_transform` | radio | leeg (Geen) | leeg (Geen), `growTaller` (Hoger groeien), `growWider` (Breder groeien), `scaleUp` (Opschalen) | Effect op de actieve punt. | | Puntkleur | `pagination_color` | kleur | geen | Willekeurige kleur | Puntkleur. | | Actieve puntkleur | `pagination_active_color` | kleur | geen | Willekeurige kleur | Actieve puntkleur. | Velden in de accordeon **Volgende/Vorige**. Elk veld na **Volgende/Vorige** wordt alleen getoond terwijl het aan staat: | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Volgende/Vorige | `navigation` | schakelaar | uit | `yes` wanneer aan | Toont de volgende- en vorige-pijlen. | | Oriëntatie | `navigation_orientation` | radio | `outside` (Buiten slider) | `outside` (Buiten slider), `inside` (Binnen slider) | Pijlpositie. | | Puntvorm | `navigation_shape` | radio | leeg (Geen achtergrond) | leeg (Geen achtergrond), `circle` (Cirkel), `square` (Vierkant), `bar` (Balk) | Pijlachtergrondvorm. De modaal labelt hem ook **Puntvorm**. | | Pictogramkleur | `navigation_icon_color` | kleur | geen | Willekeurige kleur | Pijlpictogramkleur. | | Hoverkleur pictogram | `navigation_icon_hover_color` | kleur | geen | Willekeurige kleur | Hoverkleur pijlpictogram. | | Achtergrondkleur | `navigation_background_color` | kleur | geen | Willekeurige kleur | Achtergrondkleur pijl. | | Hoverachtergrondkleur | `navigation_background_hover_color` | kleur | geen | Willekeurige kleur | Hoverachtergrondkleur pijl. | | Buitenste navigatiepositie | `navigation_position` | select | `adjacent` (Aangrenzend) | `adjacent` (Aangrenzend), `topCenter` (Midden boven), `topLeft` (Links boven), `topRight` (Rechts boven), `bottomCenter` (Midden onder), `bottomLeft` (Links onder), `bottomRight` (Rechts onder) | Positie van de pijlen buiten de slider. | ### [Gepositioneerde lagen](/nl/hc/documentation/learn-dxpr-builder/layout/positioned-layers) Canvas waarop kindelementen vrij worden gesleept en vergroot/verkleind. Een element Gepositioneerde lagen kan niet in een ander worden genest. Machinenaam: `az_layers`. Elk kind bewaart zijn plek in verborgen parameters: `pos_left`, `pos_top`, `pos_width`, `pos_height` en `pos_zindex`. | Label | Parameter | Besturingselement | Standaard | Toegestane waarden | Beschrijving | |---|---|---|---|---|---| | Breedte | `width` | tekst | `100%` | CSS-lengte, bijvoorbeeld `100px` of `50%` | Canvasbreedte. Een kaal getal telt als pixels. | | Hoogte | `height` | schuifregelaar | 500 | 0 tot 10000, stap 1 | Canvashoogte in pixels. | | Responsief | `responsive` | schakelaar | uit | `yes` wanneer aan | Schaalt de canvashoogte en lettergroottes met de beschikbare breedte. | ## Wat nu? - [Elementenoverzicht](/hc/documentation/learn-dxpr-builder/elements) - [Lay-outoverzicht](/hc/documentation/learn-dxpr-builder/layout/overview) - [Elementinstellingen](/hc/documentation/learn-dxpr-builder/element-settings)