---
url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/integrations/multivariate-testing'
title: 'Elementreferenz | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:45:00+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'DXPR Builder bietet 22 Inhalts- und 6 Layout-Elemente. Diese Seite listet den Systemnamen jedes Elements und die Felder in seinem Einstellungs-Modal; der Layout-Teil listet zusätzlich die Column in jeder Row. Drupal-Blöcke und Ansichten, die der Builder ebenfalls als Elemente anbietet, sind nicht abgedeckt.'
tags:
  - 'Variaties testen'
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: Elementreferenz
      description: 'DXPR Builder bietet 22 Inhalts- und 6 Layout-Elemente. Diese Seite listet den Systemnamen jedes Elements und die Felder in seinem Einstellungs-Modal; der Layout-Teil listet zusätzlich die Column in jeder Row. Drupal-Blöcke und Ansichten, die der Builder ebenfalls als Elemente anbietet, sind nicht abgedeckt.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:45:00+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/de/hc/documentation/learn-dxpr-builder/integrations/multivariate-testing'
      articleSection: 'Variaties testen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/integrations/multivariate-testing'
      description: 'DXPR Builder bietet 22 Inhalts- und 6 Layout-Elemente. Diese Seite listet den Systemnamen jedes Elements und die Felder in seinem Einstellungs-Modal; der Layout-Teil listet zusätzlich die Column in jeder Row. Drupal-Blöcke und Ansichten, die der Builder ebenfalls als Elemente anbietet, sind nicht abgedeckt.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Variaties testen](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview) # Elementreferenz.

 Learn DXPR BuilderManage the siteVariaties testen

   ## In this guide

 Related guides

- [Best Practices für A/B-Tests](/de/hc/documentation/learn-dxpr-builder/integrations/ab-testing-best-practices)

DXPR Builder bietet 22 Inhalts- und 6 Layout-Elemente. Diese Seite listet den Systemnamen jedes Elements und die Felder in seinem Einstellungs-Modal; der Layout-Teil listet zusätzlich die Column in jeder Row. Drupal-Blöcke und Ansichten, die der Builder ebenfalls als Elemente anbietet, sind nicht abgedeckt.

## So lesen Sie diese Seite

Die erste Tabelle jedes Elements listet die Felder in seinem Akkordeon **General**. Ein Feld in einem anderen Akkordeon steht in einer separaten Tabelle, benannt nach diesem Akkordeon. Label ist die Feldbezeichnung, wie das Modal sie zeigt, in US-Schreibweise der Oberfläche. Parameter ist der `param_name` in der Elementdefinition. Optionen lesen sich als `value` (Label).

Zwei General-Felder erscheinen auf jedem Element und werden in den Tabellen nicht wiederholt:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| HTML ID | `hash` | text | empty; the field shows the generated ID as a placeholder | A letter first, then letters, numbers, hyphens and underscores | Eigene ID für das Element. |
| HTML classes | `el_class` | multi-select | empty; new sections get `py-5` | Bootstrap 5 utility classes and the classes that enabled themes declare; **Edit as text** accepts any class | Zusätzliche CSS-Klassen für das Element. |

Jedes Element hat außerdem die Akkordeons **Style** und **Hover style**, dokumentiert auf der Seite [Style-Tab](/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab)-Seite. Alle Elemente außer Column und den Panels in Tabs, Collapse panel und Carousel haben außerdem das Akkordeon **Animation**, dokumentiert auf der [Animations-Tab](/de/hc/documentation/learn-dxpr-builder/design/animation-tab)-Seite.

Die Spalte Control nennt, was das Modal zeigt. Jede Steuerung stammt aus einem Parameter-`type` in der Elementdefinition:

| Control | Code `type` |
|---|---|
| text | `textfield` |
| number | `numericfield` |
| link | `link` |
| radio | `dropdown` with fewer than 7 options |
| select | `dropdown` with 7 or more options |
| toggle | `checkbox` with one option |
| checkboxes | `checkbox` with several options |
| slider | `dxb_slider` |
| colour | `colorpicker` |
| icon, image, images, video, datetime | The `type` of the same name |
| ckeditor | `textarea` |
| ace | `html` |
| social | `social_links` |

Ein eingeschalteter Toggle speichert den Wert in seiner Zelle Allowed values; ein ausgeschalteter Toggle speichert `no` oder einen leeren Wert. Checkboxes speichern die gewählten Werte als kommagetrennte Liste. Eine als leer gelistete Option wird als leerer String gespeichert; im Modal hat ihr Radio-Button den Schlüssel `dxpr-default`.

Image- und Images-Felder bieten zusätzlich eine Bildstil-Auswahl: the site's `optimize` style first when it exists, then **Original image (No resizing)** and the other image styles. Manche Felder bleiben verborgen, bis ein anderes Feld einen passenden Wert hat; die Spalte Description nennt diese Abhängigkeit.

## Inhalts-Elemente

### [Text](/de/hc/documentation/learn-dxpr-builder/elements/text)

Rich-Text, bearbeitet in CKEditor. Systemname: `az_text`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder heading and paragraph | HTML | Der Textinhalt. |

### [Image](/de/hc/documentation/learn-dxpr-builder/elements/image)

Ein einzelnes Bild, optional mit Link. Systemname: `az_image`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Image | `image` | image | empty | Image from the media browser | Das anzuzeigende Bild. |
| Image width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Eine bloße Zahl zählt als Pixel. |
| Image height | `height` | text | empty | CSS length, for example `100px` | Eine bloße Zahl zählt als Pixel. |
| Image link | `link` | link | empty | URL or internal path | Legt einen Link um das Bild. |
| Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Wo der Link geöffnet wird. Angezeigt, wenn `link` gesetzt ist. |

Felder im Akkordeon **SEO**:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Alt-Text des Bildes. |
| Title attribute | `title` | text | empty | Any text | Title-Attribut des Bildes. |

### [Image carousel](/de/hc/documentation/learn-dxpr-builder/elements/image-carousel)

Eine Bootstrap-Slideshow aus mehreren Bildern. Systemname: `az_images_carousel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | `images` | images | empty | Images from the media browser | Ein Slide pro Bild. |
| Interval | `interval` | slider | 5000 | 0 to 10000, step 1 | Zeit zwischen den Slides in Millisekunden. Bei 0 schalten die Slides nicht automatisch weiter. |
| Hide | `hide` | checkboxes | none ticked | `pagination_control` (Hide pagination control), `prev_next_buttons` (Hide prev/next buttons) | Verbirgt die Indikatoren, die Pfeile oder beides. |

Fields in the **SEO** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Alt-Text der Bilder. |
| Title attribute | `title` | text | empty | Any text | Title-Attribut der Bilder. |

### [Video](/de/hc/documentation/learn-dxpr-builder/elements/video)

Bettet ein YouTube- oder Vimeo-Video ein. Systemname: `az_video`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video link | `link` | text | empty | YouTube or Vimeo URL | Das einzubettende Video. |
| Video width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Eine bloße Zahl zählt als Pixel. |
| Image | `image` | image | empty | Image from the media browser | Cover-Bild; der Player lädt, wenn Besucher darauf klicken. |
| Themed play button | `play` | toggle | off | `yes` when on | Zeigt den Theme-Play-Button über dem Video. |

### [Local video](/de/hc/documentation/learn-dxpr-builder/elements/video-local)

Spielt eine selbst gehostete Videodatei in einem HTML5-Player. Machine name: `az_video_local`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video | `video` | video | empty | MP4, WEBM, OGG or OGV file, up to the site's upload size limit | Die Videodatei. |
| Start playing automatically | `autoplay` | toggle | off | `autoplay` when on | Startet die Wiedergabe beim Laden der Seite. Autoplay schaltet das Video immer stumm. |
| Muted | `muted` | toggle | off | `muted` when on | Schaltet das Video stumm. Angezeigt, solange `autoplay` aus ist. |
| Controls | `controls` | toggle | off | `controls` when on | Zeigt die Player-Steuerung. |
| Loop | `loop` | toggle | off | `loop` when on | Startet das Video neu, wenn es endet. |
| Video width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Player-Breite. |
| Image | `image` | image | empty | Image from the media browser | Poster-Bild vor der Wiedergabe. |

### [HTML](/de/hc/documentation/learn-dxpr-builder/elements/html)

Rohes HTML, bearbeitet in einem Code-Editor. Systemname: `az_html`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Raw HTML | `content` | ace | Placeholder message "Click the edit button to change this HTML" | HTML | Der HTML-Inhalt. |

### [Jumbotron](/de/hc/documentation/learn-dxpr-builder/elements/jumbotron)

Großes Banner mit Titel und Lead-Text; andere Elemente können darin abgelegt werden. Systemname: `az_jumbotron`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Any text | Banner-Titel. |
| Lead | `lead` | text | empty | Any text | Untertitel unter dem Titel. |
| Type | `type` | select | `bg-light` (Light) | `bg-light` (Light), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `none` (Default) | Hintergrund- und Textfarbklassen. |
| Padding | `padding` | radio | `p-5` (Large) | `p-5` (Large), `p-4` (Medium), `p-3` (Small) | Padding-Größe. |

### [Button](/de/hc/documentation/learn-dxpr-builder/elements/button)

Ein Bootstrap-Button mit Link auf eine URL. Systemname: `az_button`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | Click to add text | Any text | Text auf dem Button. |
| Link | `link` | link | empty | URL or internal path | Button-Link. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Wo der Link geöffnet wird. Angezeigt, wenn `link` gesetzt ist. |
| Type | `type` | select | `primary` (Primary) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`; each label is the value with a capital letter | Bootstrap-Button-Stil. |
| Block button | `block` | toggle | off | `btn-block` when on | Button in voller Breite. |
| Outline style | `outlined` | toggle | off | `outline` when on | Rendert `btn-outline-*` statt `btn-*`. |
| Size | `size` | radio | empty (Normal) | empty (Normal), `btn-lg` (Large), `btn-sm` (Small) | Button-Größe. |

### [Link element](/de/hc/documentation/learn-dxpr-builder/elements/link)

Container, der die darin enthaltenen Elemente in einen Link hüllt. Systemname: `az_link`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Link | `link` | link | empty | URL or internal path | Inhaltslink. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Wo der Link geöffnet wird. Angezeigt, wenn `link` gesetzt ist. |

Fields in the **SEO** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title attribute | `title` | text | empty | Any text | Title-Attribut des Links. |
| Tell search engines not to follow | `nofollow` | toggle | off | `nofollow` when on | Fügt `rel="nofollow"` zum Link hinzu. |

### [Alert](/de/hc/documentation/learn-dxpr-builder/elements/alert)

Eine Bootstrap-Alert-Nachricht. Systemname: `az_alert`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Message | `content` | ckeditor | Placeholder text | HTML | Die Nachricht. |
| Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success), `alert-info` (Info), `alert-warning` (Warning), `alert-danger` (Danger) | Alert-Farbe. |

### [Card](/de/hc/documentation/learn-dxpr-builder/elements/card)

Ein Bootstrap-Card-Container mit optionalem Header und Titel. Systemname: `az_card`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Header | `header` | text | empty | Any text | Card-Header-Text. |
| Title | `title` | text | empty | Any text | Card-Titel. |
| Type | `type` | select | empty (Default) | empty (Default), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `bg-light` (Light) | Card-Farbklassen. |

### [Panel](/de/hc/documentation/learn-dxpr-builder/elements/panel)

Ein Panel-Container mit Titelleiste. Systemname: `az_panel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Any text | Panel-Titel. |
| Type | `type` | select | `panel-dxpr` (DXPR) | `panel-dxpr` (DXPR), `panel-default` (Default), `panel-primary` (Primary), `panel-success` (Success), `panel-info` (Info), `panel-warning` (Warning), `panel-danger` (Danger) | Panel-Stil. |

### [Block quote](/de/hc/documentation/learn-dxpr-builder/elements/blockquote)

Ein Zitat mit optionaler Quellenangabe. Systemname: `az_blockquote`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder text | HTML | Der zitierte Text. |
| Cite | `cite` | text | empty | Any text | Quellenangabe unter dem Zitat. |
| Reverse | `reverse` | toggle | off | `blockquote-reverse` when on | Richtet das Zitat am Zeilenende aus (`text-end`). |

### [Social links](/de/hc/documentation/learn-dxpr-builder/elements/social-links)

Eine Reihe oder Spalte von Social-Network-Icons mit Links auf Profilseiten. Systemname: `st_social`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Social links | `st_social_links` | social | Facebook and YouTube rows | One row per icon: a brand and the profile URL | Die Icons und ihre Links. |
| Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Stacked) | Icon-Layout. |
| Style | `st_style` | radio | empty (None) | empty (None), `rounded` (Rounded), `circle` (Circle), `square` (Square) | Icon-Hintergrundform. |
| Size | `st_size` | radio | `lg` (Large) | `lg` (Large), empty (Small), `2x`, `3x`, `4x`, `5x`; the last four labels match their values | Icon-Größe. |
| CSS3 hover effects | `st_css3_hover_effects` | radio | empty (None) | empty (None), `disc` (Disc), `pulse` (Pulse) | Hover-Effekt. Ein Effekt macht das Icon kreisförmig. |

Felder im Akkordeon **Icon colors**:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Quelle der Icon-Farbe. |
| Color | `st_color` | colour | none | Any colour | Eigene Icon-Farbe. Angezeigt, wenn `st_theme_color` `custom` ist. |
| Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Quelle der Icon-Hintergrundfarbe. |
| Background color | `st_bgcolor` | colour | none | Any colour | Eigene Hintergrundfarbe. Angezeigt, wenn `st_theme_bgcolor` `custom` ist. |

### [Number counter](/de/hc/documentation/learn-dxpr-builder/elements/number-counter)

Eine Zahl, die von einem Startwert zu einem Endwert zählt. Systemname: `az_counter`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Start | `start` | number | 0 | Number | Zahl, ab der gezählt wird. |
| End | `end` | number | 100 | Number | Zahl, bis zu der gezählt wird. |
| Font size | `fontsize` | slider | 30 | 0 to 200, step 1 | Schriftgröße der Zahl in Pixeln. |
| Speed | `speed` | slider | 2000 | 0 to 10000, step 1 | Zeit in Millisekunden bis zum Ende des Zählens. |
| Thousands separator | `seperator` | radio | empty (None) | empty (None), `,` (Comma), `.` (Dot), a space (Space) | Trennt Tausender in der Endzahl. Der Code schreibt den Parameter so. |
| Prefix | `prefix` | text | empty | Any text | Zeichen vor der Zahl, zum Beispiel `$`. |
| Suffix | `postfix` | text | empty | Any text | Zeichen nach der Zahl, zum Beispiel `%`. |

### [Circle counter](/de/hc/documentation/learn-dxpr-builder/elements/circle-counter)

Kreisförmige Fortschrittsanzeige mit optionalem Text, einer Infozeile und einem Icon in der Mitte. Systemname: `az_circle_counter`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Foreground color | `fgcolor` | colour | `#333333` | Any colour | Farbe des Fortschrittsbogens. |
| Background color | `bgcolor` | colour | `#999999` | Any colour | Farbe der Spur hinter dem Bogen. |
| Fill color | `fill` | colour | none | Any colour | Füllfarbe im Kreisinneren. |
| Percent | `percent` | slider | 50 | 0 to 100, step 1 | Fortschrittswert. |
| Dimension | `dimension` | slider | 250 | 100 to 500, step 1 | Kreisdurchmesser in Pixeln. |
| Foreground width | `width` | slider | 10 | 1 to 100, step 1 | Strichstärke des Bogens. |
| Animation | `animation` | toggle | on | `yes` when on | Animiert den Bogen. |
| Animation duration | `duration` | slider | 1500 | 0 to 5000, step 1 | In Millisekunden. Angezeigt, wenn `animation` an ist. |
| Animation delay | `delay` | slider | 0 | 0 to 5000, step 1 | In Millisekunden. Angezeigt, wenn `animation` an ist. |
| Animation in-viewport | `in_viewport` | toggle | on | `yes` when on | Startet die Animation, wenn das Element in den sichtbaren Bereich scrollt. Angezeigt, wenn `animation` an ist. |

Felder im Akkordeon **Circle content**. Jedes Feld nach **Show progress** wird nur angezeigt, solange es aus ist:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Show progress | `show_progress` | toggle | off | `yes` when on | Zeigt den Prozentsatz statt eigenem Text und Icon. |
| Text | `text` | text | empty | Any text | Text in der Mitte. |
| Font size | `fontsize` | slider | 16 | 0 to 100, step 1 | Textgröße in der Mitte in Pixeln. |
| Text color | `text_color` | colour | none | Any colour | Textfarbe in der Mitte. |
| Info | `info` | text | empty | Any text | Sekundäre Infozeile. |
| Info font size | `info_fontsize` | slider | 14 | 0 to 100, step 1 | Größe der Infozeile in Pixeln. |
| Info color | `info_color` | colour | none | Any colour | Farbe der Infozeile. |
| Icon | `icon` | icon | empty | Icon from the sets your builder profile allows | Zentriertes Icon. |
| Icon size | `icon_size` | slider | 16 | 0 to 100, step 1 | Icon-Schriftgröße in Pixeln. |
| Icon color | `icon_color` | colour | none | Any colour | Icon-Farbe. |

### [Progress bar](/de/hc/documentation/learn-dxpr-builder/elements/progress-bar)

Horizontale Bootstrap-Fortschrittsanzeige mit Label. Systemname: `az_progress_bar`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Label | `label` | text | Click to add text | Any text | Text im Balken. |
| Progress | `width` | slider | 50 | 0 to 100, step 1 | Fortschritt in Prozent. |
| Bar height | `height` | slider | 45 | 0 to 100, step 1 | Balkenhöhe in Pixeln. |
| Back color | `bgcolor` | colour | `#e9ecef` | Any colour | Spurfarbe hinter dem Balken. |
| Front color | `fcolor` | colour | `#284ed9` | Any colour | Balkenfarbe. |
| Grow animation | `grow_animation` | toggle | off | `yes` when on | Animiert den Balken von 0 zu seinem Wert. |
| Stripes | `options` | checkboxes | none ticked | `progress-bar-striped` (Add striped pattern to bar), `progress-bar-animated` (Animate stripes (requires striped pattern)) | Streifenmuster und laufende Streifen. |

### [Countdown timer](/de/hc/documentation/learn-dxpr-builder/elements/countdown-timer)

Zählt herunter zu einem Datum, einer Tageszeit oder dem Ende eines sich wiederholenden Intervalls. Systemname: `az_countdown`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Countdown style | `countdown_style` | radio | `plain` (Plain) | `plain` (Plain), `style1` (Grid), `style6` (3D flip), `style9` (Disc), `style10` (Airport style), `style12` (Transparent) | Visueller Stil. |
| Date / Time Limitations | `counter_scope` | radio | `date` (Specify date only) | `date` (Specify date only), `date_time` (Specify date and time), `repeating` (Specify time only (repeating every day)), `resetting` (Resetting counter (set interval up to 24 hours)) | Worauf der Timer herunterzählt. |
| Date | `date` | datetime | empty | Date in `d.m.Y` format | Zieldatum. Angezeigt, wenn `counter_scope` `date` ist. |
| Date / Time | `date_time` | datetime | empty | Date in `d.m.Y` format plus hour (`H`) | Zieldatum und -stunde. Angezeigt, wenn `counter_scope` `date_time` ist. |
| Time | `time` | datetime | empty | Hour (`H`) | Zielstunde jedes Tages. Angezeigt, wenn `counter_scope` `repeating` ist. |
| Reset in hours | `reset_hours` | slider | 0 | 0 to 24, step 1 | Stunden im Intervall. Angezeigt, wenn `counter_scope` `resetting` ist. |
| Reset in minutes | `reset_minutes` | slider | 0 | 0 to 60, step 1 | Minuten im Intervall. Angezeigt, wenn `counter_scope` `resetting` ist. |
| Reset in seconds | `reset_seconds` | slider | 0 | 0 to 60, step 1 | Sekunden im Intervall. Angezeigt, wenn `counter_scope` `resetting` ist. |
| Page referrer | `referrer` | link | empty | URL or internal path | Seite, die nach Ablauf des Countdowns geöffnet wird. Angezeigt, wenn `counter_scope` `repeating` oder `resetting` ist. |
| Automatic restart | `restart` | toggle | off | `yes` when on | Startet das Intervall neu, wenn es endet. Angezeigt, wenn `counter_scope` `resetting` ist. |
| Display options | `display` | checkboxes | all five ticked | `years` (Show remaining years), `days` (Show remaining days), `hours` (Show remaining hours), `minutes` (Show remaining minutes), `seconds` (Show remaining seconds) | Anzuzeigende Einheiten. |

### [Marquee](/de/hc/documentation/learn-dxpr-builder/elements/marquee)

Horizontaler Bildstreifen, der endlos scrollt. Systemname: `az_marquee`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | `images` | images | Three copies of the DXPR logo | Images from the media browser | Die Bilder im Streifen. |
| Speed | `speed` | slider | 3 | 1 to 5, step 1 | Scrollgeschwindigkeit; 1 ist am langsamsten, 5 am schnellsten. |
| Height | `height` | slider | 50 | 10 to 200, step 1 | Bildhöhe in Pixeln. |
| Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images), `fw` (Fixed width images) | Ob die Bilder eine Höhe oder eine Breite teilen. |
| Image width | `width` | slider | 400 | 50 to 500, step 1 | Bildbreite in Pixeln. Angezeigt, wenn `image_layout` `fw` ist. |
| Gray scale | `grayscale` | toggle | off | `apply` when on | Zeigt die Bilder in Graustufen. |
| Fade edges | `fade_edges` | toggle | off | `apply` when on | Blendet den Streifen an beiden Rändern aus. |

Fields in the **SEO** accordion:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Alt-Text der Bilder. |
| Title attribute | `title` | text | empty | Any text | Title-Attribut der Bilder. |

### [Map](/de/hc/documentation/learn-dxpr-builder/elements/map)

Eingebettete Google Map für eine Adresse. Systemname: `az_map`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Address | `address` | text | empty | Street address | Anzuzeigender Ort. |
| Map width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Eine bloße Zahl zählt als Pixel. |
| Map height | `height` | text | `400px` | CSS length, for example `100px` | Eine bloße Zahl zählt als Pixel. |

### [Icon](/de/hc/documentation/learn-dxpr-builder/elements/icon)

Einzelnes Icon, optional verlinkt. Systemname: `az_icon`. Das Modul bringt 14 Icon-Sets mit. Themes und Module können weitere hinzufügen, und ein Builder-Profil kann die Auswahl im Picker einschränken.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Icon | `icon` | icon | `bi bi-heart` | Icon from the sets your builder profile allows | Das Icon. |
| Size | `size` | radio | `fa-lg` (Large) | `normal` (Normal), `fa-lg` (Large), `fa-2x` (Extra Large (2x)), `fa-3x` (Very Large (3x)), `fa-4x` (Huge (4x)), `fa-5x` (Gigantic (5x)) | Icon-Größe. |
| Link | `link` | link | empty | URL or internal path | Icon-Link. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Wo der Link geöffnet wird. Angezeigt, wenn `link` gesetzt ist. |

Felder im Akkordeon **Icon utilities**:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Style | `st_style` | radio | empty (None) | empty (None), `stbe-util-icon-rounded` (Rounded), `stbe-util-icon-circle` (Circle), `stbe-util-icon-square` (Square) | Hintergrundform. |
| Icon animation | `animation` | radio | empty (No) | empty (No), `fa-spin` (Spin), `fa-pulse` (Pulse) | Icon-Animation. |
| Icon orientation | `orientation` | radio | empty (Normal) | empty (Normal), `fa-rotate-90` (Rotate 90), `fa-rotate-180` (Rotate 180), `fa-rotate-270` (Rotate 270), `fa-flip-horizontal` (Flip horizontal), `fa-flip-vertical` (Flip vertical) | Drehung oder Spiegelung. |

### [Divider](/de/hc/documentation/learn-dxpr-builder/elements/divider)

Horizontale Linie. Systemname: `az_separator`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | `bgcolor` | colour | none | Any colour | Linienfarbe. |
| Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom thickness) | Ob die Theme-Stärke überschrieben wird. |
| Thickness | `custom_thickness` | slider | 3 | 0 to 20, step 1 | Linienstärke in Pixeln. Angezeigt, wenn `thickness` `custom` ist. |
| Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom width) | Ob die Theme-Länge überschrieben wird. |
| Width | `custom_width` | slider | 100 | 0 to 500, step 10 | Linienlänge in Pixeln; 0 rendert volle Breite. Angezeigt, wenn `width` `custom` ist. |
| Align | `align` | radio | `left` (Left) | `left` (Left), `center` (Center), `right` (Right) | Horizontale Ausrichtung. Angezeigt, wenn `width` `custom` ist. |

## Layout-Elemente

### [Section](/de/hc/documentation/learn-dxpr-builder/layout/sections)

Top-Level-Container für Zeilen, mit Optionen für volle Breite, volle Höhe und Hintergrundeffekte. Systemname: `az_section`. Neue Sections erhalten die Klasse `py-5` unter **HTML classes**.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Full width | `fluid` | toggle | off | `yes` when on | Nutzt einen Container in voller Breite (`container-fluid`). |
| 100% height | `fullheight` | toggle | off | `yes` when on | Die Section füllt die Viewport-Höhe. |
| Vertical centering | `vertical_centering` | toggle | off | `yes` when on | Zentriert den Inhalt vertikal. |

Felder im Akkordeon **Background effects**. Alle außer **Background effect** hängen von seinem Wert ab, wie die Spalte Description zeigt:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Background effect | `effect` | radio | empty (Simple image) | empty (Simple image), `fixed` (Fixed image), `parallax` (Parallax image), `gradient` (Gradient), `youtube` (YouTube video) | Hintergrundeffekt. |
| Parallax speed | `parallax_speed` | slider | 0 | 0 to 100, step 1 | Parallax-Scrollgeschwindigkeit. Angezeigt, wenn `effect` `parallax` ist. |
| Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed), `scroll` (Local) | Hintergrundfixierung des Bildes. Angezeigt, wenn `effect` `parallax` ist. |
| Disable on mobile | `parallax_mobile_disable` | toggle | off | `yes` when on | Schaltet Parallax auf Bildschirmen unter 481 px ab. Angezeigt, wenn `effect` `parallax` ist. |
| Start color | `gradient_start_color` | colour | none | Any colour | Startfarbe des Verlaufs. Angezeigt, wenn `effect` `gradient` ist. |
| End color | `gradient_end_color` | colour | none | Any colour | Endfarbe des Verlaufs. Angezeigt, wenn `effect` `gradient` ist. |
| Gradient direction | `gradient_direction` | slider | 180 | 1 to 360, step 1 | Verlaufswinkel in Grad. Angezeigt, wenn `effect` `gradient` ist. |
| Start position | `gradient_start` | slider | 0 | 0 to 100, step 1 | Startposition der Farbe in Prozent. Angezeigt, wenn `effect` `gradient` ist. |
| End position | `gradient_end` | slider | 100 | 0 to 100, step 1 | Endposition der Farbe in Prozent. Angezeigt, wenn `effect` `gradient` ist. |
| Video options | `video_options` | checkboxes | none ticked | `disMobile` (Disable on mobile devices), `loop` (Loop), `audio` (Unmute (Not reliable when auto-playing due to recent browser policy updates)), `noCrop` (Disable cropping out player), `resizeSection` (Resize section to match video), `showControls` (Show controls) | YouTube-Hintergrundoptionen. Angezeigt, wenn `effect` `youtube` ist. |
| YouTube video URL | `video_youtube` | text | empty | YouTube URL | YouTube-Hintergrundvideo. Angezeigt, wenn `effect` `youtube` ist. |
| Start time in seconds | `video_start` | text | 0 | Seconds | Startzeit des Videos. Angezeigt, wenn `effect` `youtube` ist. |
| Stop time in seconds | `video_stop` | text | 0 | Seconds | Stoppzeit des Videos. Angezeigt, wenn `effect` `youtube` ist. |

### [Row](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

Bootstrap-Grid-Zeile für Spalten. Eine neue Zeile startet mit zwei halb breiten Spalten. Systemname: `az_row`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Equal-height columns | `equal` | toggle | off | `yes` when on | Gibt allen Spalten dieselbe Höhe. |
| Mirror row | `reverse_horizontal` | toggle | off | `yes` when on | Kehrt die Spaltenreihenfolge auf Bildschirmen ab 768 px um. |

### [Column](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

Eine Spalte in einer Zeile. Zeilen erzeugen ihre Spalten selbst, daher steht Column nicht im Element-Picker. Systemname: `az_column`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Vertical centering | `vertical_centering` | toggle | off | `yes` when on | Zentriert den Spalteninhalt vertikal. |

### [Tabs](/de/hc/documentation/learn-dxpr-builder/layout/tabs-element)

Container mit umschaltbaren Tab-Panels; jeder Tab wird mit der Steuerung **Add tab** hinzugefügt. Systemname: `az_tabs`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab direction | `az_dirrection` | radio | empty (Default) | empty (Default), `tabs-left` (Left), `tabs-right` (Right) | Position der Tab-Leiste. Der Code schreibt den Parameter so. |
| Style | `tab_style` | radio | empty (Default) | empty (Default), `modern` (Modern), `accordion` (Accordion) | Tab-Stil. |
| Mobile friendly | `responsive` | toggle | on | `yes` when on | Zeigt die Tabs auf kleinen Bildschirmen als aufklappbaren Bereich. |

Jeder Tab (`az_tab`) hat eigene Einstellungen:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab title | `title` | text | Title | Any text | Bezeichnung des Tabs. |
| Tab description | `subtitle` | ckeditor | empty | HTML | Optionale kurze Byline auf dem aktiven Tab. |

### [Collapse panel](/de/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)

Container aus aufklappbaren Panels; jedes Panel wird mit der Steuerung **Add toggle** hinzugefügt. Systemname: `az_accordion`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Collapse | `collapsed` | toggle | off | `yes` when on | Startet mit allen Panels geschlossen. Wenn aus, startet das erste Panel offen. |
| Expand icon | `expandicon` | radio | empty (None) | empty (None), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | Icon neben jedem Panel-Titel. |

Jedes Panel (`az_toggle`) hat eigene Einstellungen:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Toggle title | `title` | text | Title | Any text | Panel-Titel. |

### [Carousel](/de/hc/documentation/learn-dxpr-builder/layout/carousel-layout)

Container aus Slides; jeder Slide enthält andere Elemente und wird mit der Steuerung **Add slide** hinzugefügt. Slides (`az_slide`) haben keine eigenen Felder. Systemname: `az_carousel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Frames per slide | `items` | slider | 1 | 1 to 10, step 1 | Slides nebeneinander. Schmalere Bildschirme zeigen weniger. |
| Disable auto-play | `autoplay` | toggle | off | `yes` when on | Stoppt das automatische Weiterschalten der Slides. |
| Auto-play interval | `interval` | slider | 5000 | 1000 to 20000, step 100 | Zeit zwischen den Slides in Millisekunden. |
| Stop on hover | `stoponhover` | toggle | off | `yes` when on | Pausiert Autoplay, solange der Zeiger über dem Karussell ist. |

Felder im Akkordeon **Dots**. Jedes Feld nach **Dots navigation** wird nur angezeigt, solange es an ist:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Dots navigation | `pagination` | toggle | on | `yes` when on | Zeigt einen Punkt pro Slide. |
| Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Position der Punkte. |
| Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar), `circle` (Circle), `square` (Square), `triangle` (Triangle) | Punktform. |
| Active dot transformation | `pagination_transform` | radio | empty (None) | empty (None), `growTaller` (Grow taller), `growWider` (Grow wider), `scaleUp` (Scale up) | Effekt auf dem aktiven Punkt. |
| Dot color | `pagination_color` | colour | none | Any colour | Punktfarbe. |
| Active dot color | `pagination_active_color` | colour | none | Any colour | Farbe des aktiven Punkts. |

Felder im Akkordeon **Next/Previous**. Jedes Feld nach **Next/Previous** wird nur angezeigt, solange es an ist:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Next/Previous | `navigation` | toggle | off | `yes` when on | Zeigt die Weiter- und Zurück-Pfeile. |
| Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Position der Pfeile. |
| Dot shape | `navigation_shape` | radio | empty (No background) | empty (No background), `circle` (Circle), `square` (Square), `bar` (Bar) | Hintergrundform der Pfeile. Das Modal nennt sie ebenfalls **Dot shape**. |
| Icon color | `navigation_icon_color` | colour | none | Any colour | Icon-Farbe der Pfeile. |
| Icon hover color | `navigation_icon_hover_color` | colour | none | Any colour | Icon-Hover-Farbe der Pfeile. |
| Background color | `navigation_background_color` | colour | none | Any colour | Hintergrundfarbe der Pfeile. |
| Background hover color | `navigation_background_hover_color` | colour | none | Any colour | Hintergrund-Hover-Farbe der Pfeile. |
| Outside navigation position | `navigation_position` | select | `adjacent` (Adjacent) | `adjacent` (Adjacent), `topCenter` (Top center), `topLeft` (Top left), `topRight` (Top right), `bottomCenter` (Bottom center), `bottomLeft` (Bottom left), `bottomRight` (Bottom right) | Position der Pfeile außerhalb des Sliders. |

### [Positioned layers](/de/hc/documentation/learn-dxpr-builder/layout/positioned-layers)

Canvas, auf dem Kind-Elemente frei gezogen und skaliert werden. Ein Positioned-layers-Element kann nicht in ein anderes verschachtelt werden. Systemname: `az_layers`. Each child stores its place in hidden parameters: `pos_left`, `pos_top`, `pos_width`, `pos_height` and `pos_zindex`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Canvas-Breite. Eine bloße Zahl zählt als Pixel. |
| Height | `height` | slider | 500 | 0 to 10000, step 1 | Canvas-Höhe in Pixeln. |
| Responsive | `responsive` | toggle | off | `yes` when on | Skaliert Canvas-Höhe und Schriftgrößen mit der verfügbaren Breite. |

## Wie geht es weiter?

- [Elemente-Übersicht](/hc/documentation/learn-dxpr-builder/elements)
- [Layout-Übersicht](/hc/documentation/learn-dxpr-builder/layout/overview)
- [Element-Einstellungen](/hc/documentation/learn-dxpr-builder/element-settings)