Element reference
DXPR Builder provides 22 content elements and 6 layout elements. This page lists each element's machine name and the fields in its settings modal; the layout part also lists the Column inside each row. Drupal blocks and views, which the builder also offers as elements, are not covered.
How to read this page
Each element's first table lists the fields in its
General accordion. A field in another accordion sits in
a separate table named after that accordion. Label is the
field label as the modal shows it, in the interface's US
spelling. Parameter is the param_name in the element
definition. Options read value (Label).
Two General fields appear on every element and are not repeated in the tables:
| 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 | Custom ID for the 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 | Extra CSS classes for the element. |
Every element also has the Style and Hover style accordions, documented on the Style tab page. All elements except Column and the panels inside Tabs, Collapse panel and Carousel also have the Animation accordion, documented on the Animation tab page.
The Control column names what the modal shows. Each control
comes from a parameter type in the element definition:
| 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 |
A toggle that is on stores the value in its Allowed values
cell; a toggle that is off stores no or an empty value.
Checkboxes store the ticked values as a comma-separated
list. An option listed as empty is stored as an empty
string; in the modal its radio button has the key
dxpr-default.
Image and images fields also offer an image style select:
the site's optimize style first when it exists, then
Original image (No resizing) and the other image styles.
Some fields stay hidden until another field has a matching
value; the Description column names that dependency.
Content elements
Text
Rich text edited in CKEditor. Machine name: az_text.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | content |
ckeditor | Placeholder heading and paragraph | HTML | The text content. |
Image
A single image, optionally wrapped in a link. Machine name:
az_image.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Image | image |
image | empty | Image from the media browser | The image to show. |
| Image width | width |
text | 100% |
CSS length, for example 100px or 50% |
A bare number counts as pixels. |
| Image height | height |
text | empty | CSS length, for example 100px |
A bare number counts as pixels. |
| Image link | link |
link | empty | URL or internal path | Wraps the image in a link. |
| Image link target | link_target |
radio | _self (Same window) |
_self (Same window), _blank (New window) |
Where the link opens. Shown when link is set. |
Fields in the SEO accordion:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | alt |
text | empty | Any text | Alt text of the image. |
| Title attribute | title |
text | empty | Any text | Title attribute of the image. |
Image carousel
A Bootstrap slideshow of several images. Machine name:
az_images_carousel.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | images |
images | empty | Images from the media browser | One slide per image. |
| Interval | interval |
slider | 5000 | 0 to 10000, step 1 | Time between slides in milliseconds. At 0 the slides do not advance on their own. |
| Hide | hide |
checkboxes | none ticked | pagination_control (Hide pagination control), prev_next_buttons (Hide prev/next buttons) |
Hides the indicators, the arrows or both. |
Fields in the SEO accordion:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | alt |
text | empty | Any text | Alt text of the images. |
| Title attribute | title |
text | empty | Any text | Title attribute of the images. |
Video
Embeds a YouTube or Vimeo video. Machine name: az_video.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video link | link |
text | empty | YouTube or Vimeo URL | The video to embed. |
| Video width | width |
text | 100% |
CSS length, for example 100px or 50% |
A bare number counts as pixels. |
| Image | image |
image | empty | Image from the media browser | Cover image; the player loads when the visitor clicks it. |
| Themed play button | play |
toggle | off | yes when on |
Shows the themed play button over the video. |
Local video
Plays a self-hosted video file in an 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 | The video file. |
| Start playing automatically | autoplay |
toggle | off | autoplay when on |
Starts playback on page load. Autoplay always mutes the video. |
| Muted | muted |
toggle | off | muted when on |
Mutes the video. Shown while autoplay is off. |
| Controls | controls |
toggle | off | controls when on |
Shows the player controls. |
| Loop | loop |
toggle | off | loop when on |
Restarts the video when it ends. |
| Video width | width |
text | 100% |
CSS length, for example 100px or 50% |
Player width. |
| Image | image |
image | empty | Image from the media browser | Poster image shown before playback. |
HTML
Raw HTML edited in a code editor. Machine name: az_html.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Raw HTML | content |
ace | Placeholder message "Click the edit button to change this HTML" | HTML | The HTML content. |
Jumbotron
Large banner with a title and lead text; other elements can
be dropped inside it. Machine name: az_jumbotron.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | title |
text | empty | Any text | Banner title. |
| Lead | lead |
text | empty | Any text | Subtitle text shown below the title. |
| 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) |
Background and text colour classes. |
| Padding | padding |
radio | p-5 (Large) |
p-5 (Large), p-4 (Medium), p-3 (Small) |
Padding size. |
Button
A Bootstrap button that links to a URL. Machine name:
az_button.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | title |
text | Click to add text | Any text | Text on the 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) |
Where the link opens. Shown when link is set. |
| 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 style. |
| Block button | block |
toggle | off | btn-block when on |
Full-width button. |
| Outline style | outlined |
toggle | off | outline when on |
Renders btn-outline-* instead of btn-*. |
| Size | size |
radio | empty (Normal) | empty (Normal), btn-lg (Large), btn-sm (Small) |
Button size. |
Link element
Container that wraps the elements inside it in one link.
Machine name: az_link.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Link | link |
link | empty | URL or internal path | Content link. |
| Link target | link_target |
radio | _self (Same window) |
_self (Same window), _blank (New window) |
Where the link opens. Shown when link is set. |
Fields in the SEO accordion:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title attribute | title |
text | empty | Any text | Title attribute of the link. |
| Tell search engines not to follow | nofollow |
toggle | off | nofollow when on |
Adds rel="nofollow" to the link. |
Alert
A Bootstrap alert message. Machine name: az_alert.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Message | content |
ckeditor | Placeholder text | HTML | The message. |
| Type | type |
radio | alert-success (Success) |
alert-success (Success), alert-info (Info), alert-warning (Warning), alert-danger (Danger) |
Alert colour. |
Card
A Bootstrap card container with an optional header and
title. Machine name: 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 title. |
| 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 colour classes. |
Panel
A panel container with a title bar. Machine name: az_panel.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | title |
text | empty | Any text | Panel title. |
| 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 style. |
Block quote
A quotation with an optional citation. Machine name:
az_blockquote.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | content |
ckeditor | Placeholder text | HTML | The quoted text. |
| Cite | cite |
text | empty | Any text | Citation shown below the quote. |
| Reverse | reverse |
toggle | off | blockquote-reverse when on |
Aligns the quote to the end of the line (text-end). |
Social links
A row or column of social network icons that link to
profile pages. Machine name: 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 | The icons and their 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 background shape. |
| Size | st_size |
radio | lg (Large) |
lg (Large), empty (Small), 2x, 3x, 4x, 5x; the last four labels match their values |
Icon size. |
| CSS3 hover effects | st_css3_hover_effects |
radio | empty (None) | empty (None), disc (Disc), pulse (Pulse) |
Hover effect. An effect makes the icon circle-style. |
Fields in the Icon colors accordion:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | st_theme_color |
radio | custom (Custom) |
brand (Brand color), custom (Custom), inherit (Inherit) |
Source of the icon colour. |
| Color | st_color |
colour | none | Any colour | Custom icon colour. Shown when st_theme_color is custom. |
| Background color | st_theme_bgcolor |
radio | custom (Custom) |
brand (Brand color), custom (Custom), inherit (Inherit) |
Source of the icon background colour. |
| Background color | st_bgcolor |
colour | none | Any colour | Custom background colour. Shown when st_theme_bgcolor is custom. |
Number counter
A number that counts from a start value to an end value.
Machine name: az_counter.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Start | start |
number | 0 | Number | Number to start counting from. |
| End | end |
number | 100 | Number | Number to count up to. |
| Font size | fontsize |
slider | 30 | 0 to 200, step 1 | Font size of the number in pixels. |
| Speed | speed |
slider | 2000 | 0 to 10000, step 1 | Time in milliseconds for the count to finish. |
| Thousands separator | seperator |
radio | empty (None) | empty (None), , (Comma), . (Dot), a space (Space) |
Separates thousands in the end number. The code spells the parameter this way. |
| Prefix | prefix |
text | empty | Any text | Characters before the number, for example $. |
| Suffix | postfix |
text | empty | Any text | Characters after the number, for example %. |
Circle counter
Circular progress indicator with optional text, an info line
and an icon in the centre. Machine name: az_circle_counter.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Foreground color | fgcolor |
colour | #333333 |
Any colour | Colour of the progress arc. |
| Background color | bgcolor |
colour | #999999 |
Any colour | Colour of the track behind the arc. |
| Fill color | fill |
colour | none | Any colour | Fill colour inside the circle. |
| Percent | percent |
slider | 50 | 0 to 100, step 1 | Progress value. |
| Dimension | dimension |
slider | 250 | 100 to 500, step 1 | Circle diameter in pixels. |
| Foreground width | width |
slider | 10 | 1 to 100, step 1 | Stroke width of the arc. |
| Animation | animation |
toggle | on | yes when on |
Animates the arc. |
| Animation duration | duration |
slider | 1500 | 0 to 5000, step 1 | In milliseconds. Shown when animation is on. |
| Animation delay | delay |
slider | 0 | 0 to 5000, step 1 | In milliseconds. Shown when animation is on. |
| Animation in-viewport | in_viewport |
toggle | on | yes when on |
Starts the animation when the element scrolls into view. Shown when animation is on. |
Fields in the Circle content accordion. Every field after Show progress is shown only while it is off:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Show progress | show_progress |
toggle | off | yes when on |
Shows the percentage instead of your own text and icon. |
| Text | text |
text | empty | Any text | Centre text. |
| Font size | fontsize |
slider | 16 | 0 to 100, step 1 | Centre text size in pixels. |
| Text color | text_color |
colour | none | Any colour | Centre text colour. |
| Info | info |
text | empty | Any text | Secondary info line. |
| Info font size | info_fontsize |
slider | 14 | 0 to 100, step 1 | Info line size in pixels. |
| Info color | info_color |
colour | none | Any colour | Info line colour. |
| Icon | icon |
icon | empty | Icon from the sets your builder profile allows | Centre icon. |
| Icon size | icon_size |
slider | 16 | 0 to 100, step 1 | Icon font size in pixels. |
| Icon color | icon_color |
colour | none | Any colour | Icon colour. |
Progress bar
Horizontal Bootstrap progress bar with a label. Machine name:
az_progress_bar.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Label | label |
text | Click to add text | Any text | Text inside the bar. |
| Progress | width |
slider | 50 | 0 to 100, step 1 | Progress as a percentage. |
| Bar height | height |
slider | 45 | 0 to 100, step 1 | Bar height in pixels. |
| Back color | bgcolor |
colour | #e9ecef |
Any colour | Track colour behind the bar. |
| Front color | fcolor |
colour | #284ed9 |
Any colour | Bar colour. |
| Grow animation | grow_animation |
toggle | off | yes when on |
Animates the bar from 0 to its value. |
| Stripes | options |
checkboxes | none ticked | progress-bar-striped (Add striped pattern to bar), progress-bar-animated (Animate stripes (requires striped pattern)) |
Striped pattern and moving stripes. |
Countdown timer
Counts down to a date, a time of day or the end of a
repeating interval. Machine name: 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) |
Visual style. |
| 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)) |
What the timer counts down to. |
| Date | date |
datetime | empty | Date in d.m.Y format |
Target date. Shown when counter_scope is date. |
| Date / Time | date_time |
datetime | empty | Date in d.m.Y format plus hour (H) |
Target date and hour. Shown when counter_scope is date_time. |
| Time | time |
datetime | empty | Hour (H) |
Target hour of each day. Shown when counter_scope is repeating. |
| Reset in hours | reset_hours |
slider | 0 | 0 to 24, step 1 | Hours in the interval. Shown when counter_scope is resetting. |
| Reset in minutes | reset_minutes |
slider | 0 | 0 to 60, step 1 | Minutes in the interval. Shown when counter_scope is resetting. |
| Reset in seconds | reset_seconds |
slider | 0 | 0 to 60, step 1 | Seconds in the interval. Shown when counter_scope is resetting. |
| Page referrer | referrer |
link | empty | URL or internal path | Page opened when the countdown expires. Shown when counter_scope is repeating or resetting. |
| Automatic restart | restart |
toggle | off | yes when on |
Starts the interval again when it ends. Shown when counter_scope is resetting. |
| 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) |
Units to show. |
Marquee
Horizontal strip of images that scrolls without stopping.
Machine name: az_marquee.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | images |
images | Three copies of the DXPR logo | Images from the media browser | The images in the strip. |
| Speed | speed |
slider | 3 | 1 to 5, step 1 | Scroll speed; 1 is slowest, 5 is fastest. |
| Height | height |
slider | 50 | 10 to 200, step 1 | Image height in pixels. |
| Image layout | image_layout |
radio | fh (Fixed height images) |
fh (Fixed height images), fw (Fixed width images) |
Whether images share a height or a width. |
| Image width | width |
slider | 400 | 50 to 500, step 1 | Image width in pixels. Shown when image_layout is fw. |
| Gray scale | grayscale |
toggle | off | apply when on |
Shows the images in greyscale. |
| Fade edges | fade_edges |
toggle | off | apply when on |
Fades the strip at both edges. |
Fields in the SEO accordion:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | alt |
text | empty | Any text | Alt text of the images. |
| Title attribute | title |
text | empty | Any text | Title attribute of the images. |
Map
Embedded Google Map for an address. Machine name: az_map.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Address | address |
text | empty | Street address | Location to show. |
| Map width | width |
text | 100% |
CSS length, for example 100px or 50% |
A bare number counts as pixels. |
| Map height | height |
text | 400px |
CSS length, for example 100px |
A bare number counts as pixels. |
Icon
Single icon, optionally linked. Machine name: az_icon. The
module ships 14 icon sets. Themes and modules can add more,
and a builder profile can limit which sets its users see.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Icon | icon |
icon | bi bi-heart |
Icon from the sets your builder profile allows | The 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 size. |
| Link | link |
link | empty | URL or internal path | Icon link. |
| Link target | link_target |
radio | _self (Same window) |
_self (Same window), _blank (New window) |
Where the link opens. Shown when link is set. |
Fields in the Icon utilities accordion:
| 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) |
Background shape. |
| 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) |
Rotation or flip. |
Divider
Horizontal rule. Machine name: az_separator.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | bgcolor |
colour | none | Any colour | Line colour. |
| Thickness | thickness |
radio | auto (Theme default) |
auto (Theme default), custom (Custom thickness) |
Whether to override the theme thickness. |
| Thickness | custom_thickness |
slider | 3 | 0 to 20, step 1 | Line thickness in pixels. Shown when thickness is custom. |
| Length | width |
radio | auto (Theme default) |
auto (Theme default), custom (Custom width) |
Whether to override the theme length. |
| Width | custom_width |
slider | 100 | 0 to 500, step 10 | Line length in pixels; 0 renders full width. Shown when width is custom. |
| Align | align |
radio | left (Left) |
left (Left), center (Center), right (Right) |
Horizontal alignment. Shown when width is custom. |
Layout elements
Section
Top-level container for rows, with full-width, full-height
and background effect options. Machine name: az_section.
New sections get the class py-5 in HTML classes.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Full width | fluid |
toggle | off | yes when on |
Uses a full-width container (container-fluid). |
| 100% height | fullheight |
toggle | off | yes when on |
The section fills the viewport height. |
| Vertical centering | vertical_centering |
toggle | off | yes when on |
Centres the content vertically. |
Fields in the Background effects accordion. All but Background effect depend on its value, as the Description column shows:
| 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) |
Background effect. |
| Parallax speed | parallax_speed |
slider | 0 | 0 to 100, step 1 | Parallax scroll speed. Shown when effect is parallax. |
| Parallax mode | parallax_mode |
radio | fixed (Fixed) |
fixed (Fixed), scroll (Local) |
Background attachment of the image. Shown when effect is parallax. |
| Disable on mobile | parallax_mobile_disable |
toggle | off | yes when on |
Turns parallax off on screens narrower than 481 px. Shown when effect is parallax. |
| Start color | gradient_start_color |
colour | none | Any colour | Gradient start colour. Shown when effect is gradient. |
| End color | gradient_end_color |
colour | none | Any colour | Gradient end colour. Shown when effect is gradient. |
| Gradient direction | gradient_direction |
slider | 180 | 1 to 360, step 1 | Gradient angle in degrees. Shown when effect is gradient. |
| Start position | gradient_start |
slider | 0 | 0 to 100, step 1 | Start colour position in percent. Shown when effect is gradient. |
| End position | gradient_end |
slider | 100 | 0 to 100, step 1 | End colour position in percent. Shown when effect is gradient. |
| 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 background options. Shown when effect is youtube. |
| YouTube video URL | video_youtube |
text | empty | YouTube URL | YouTube background video. Shown when effect is youtube. |
| Start time in seconds | video_start |
text | 0 | Seconds | Start time of the video. Shown when effect is youtube. |
| Stop time in seconds | video_stop |
text | 0 | Seconds | Stop time of the video. Shown when effect is youtube. |
Row
Bootstrap grid row that holds columns. A new row starts with
two half-width columns. Machine name: az_row.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Equal-height columns | equal |
toggle | off | yes when on |
Gives all columns the same height. |
| Mirror row | reverse_horizontal |
toggle | off | yes when on |
Reverses the column order on screens 768 px and wider. |
Column
A column inside a row. Rows create their columns, so Column
is not in the element picker. Machine name: az_column.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Vertical centering | vertical_centering |
toggle | off | yes when on |
Centres the column content vertically. |
Tabs
Container with switchable tab panels; each tab is added with
the Add tab control. Machine name: 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 of the tab bar. The code spells the parameter this way. |
| Style | tab_style |
radio | empty (Default) | empty (Default), modern (Modern), accordion (Accordion) |
Tab style. |
| Mobile friendly | responsive |
toggle | on | yes when on |
Displays the tabs as a collapsible on small screens. |
Each tab (az_tab) has its own settings:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab title | title |
text | Title | Any text | Label of the tab. |
| Tab description | subtitle |
ckeditor | empty | HTML | Optional short byline shown on the active tab. |
Collapse panel
Container of collapsible panels; each panel is added with
the Add toggle control. Machine name: az_accordion.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Collapse | collapsed |
toggle | off | yes when on |
Starts with every panel closed. When off, the first panel starts open. |
| Expand icon | expandicon |
radio | empty (None) | empty (None), az-accordion--icon-plusminus (+), az-accordion--icon-arrow (﹀) |
Icon next to each panel title. |
Each panel (az_toggle) has its own settings:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Toggle title | title |
text | Title | Any text | Panel title. |
Carousel
Container of slides; each slide holds other elements and is
added with the Add slide control. Slides (az_slide)
have no fields of their own. Machine name: az_carousel.
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Frames per slide | items |
slider | 1 | 1 to 10, step 1 | Slides shown side by side. Narrower screens show fewer. |
| Disable auto-play | autoplay |
toggle | off | yes when on |
Stops the slides from advancing on their own. |
| Auto-play interval | interval |
slider | 5000 | 1000 to 20000, step 100 | Time between slides in milliseconds. |
| Stop on hover | stoponhover |
toggle | off | yes when on |
Pauses auto-play while the pointer is over the carousel. |
Fields in the Dots accordion. Every field after Dots navigation is shown only while it is on:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Dots navigation | pagination |
toggle | on | yes when on |
Shows a dot for each slide. |
| Dots orientation | pagination_orientation |
radio | outside (Outside slider) |
outside (Outside slider), inside (Inside slider) |
Dots position. |
| Dot shape | pagination_shape |
radio | bar (Bar) |
bar (Bar), circle (Circle), square (Square), triangle (Triangle) |
Dot shape. |
| Active dot transformation | pagination_transform |
radio | empty (None) | empty (None), growTaller (Grow taller), growWider (Grow wider), scaleUp (Scale up) |
Effect on the active dot. |
| Dot color | pagination_color |
colour | none | Any colour | Dot colour. |
| Active dot color | pagination_active_color |
colour | none | Any colour | Active dot colour. |
Fields in the Next/Previous accordion. Every field after Next/Previous is shown only while it is on:
| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Next/Previous | navigation |
toggle | off | yes when on |
Shows the next and previous arrows. |
| Orientation | navigation_orientation |
radio | outside (Outside slider) |
outside (Outside slider), inside (Inside slider) |
Arrow position. |
| Dot shape | navigation_shape |
radio | empty (No background) | empty (No background), circle (Circle), square (Square), bar (Bar) |
Arrow background shape. The modal labels it Dot shape too. |
| Icon color | navigation_icon_color |
colour | none | Any colour | Arrow icon colour. |
| Icon hover color | navigation_icon_hover_color |
colour | none | Any colour | Arrow icon hover colour. |
| Background color | navigation_background_color |
colour | none | Any colour | Arrow background colour. |
| Background hover color | navigation_background_hover_color |
colour | none | Any colour | Arrow background hover colour. |
| 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 of the arrows outside the slider. |
Positioned layers
Canvas on which child elements are dragged and resized
freely. A Positioned layers element cannot be nested inside
another one. Machine name: 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 width. A bare number counts as pixels. |
| Height | height |
slider | 500 | 0 to 10000, step 1 | Canvas height in pixels. |
| Responsive | responsive |
toggle | off | yes when on |
Scales the canvas height and font sizes with the available width. |
What's next?
Something wrong or missing on this page?
Report it
or edit the page.