Elementreferenz.
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-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-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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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. |