---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/reference/element-reference'
title: '元素参考 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:21:30+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Builder 提供 22 个内容元素和 6 个布局元素。本页列出每个元素的机器名及其设置弹窗中的字段；布局部分还列出每行内的 Column。Drupal 区块和视图（页面构建器也将其作为元素提供）不在本文范围内。
  如何阅读本页
  每个元素的第一个表格列出其
  General 手风琴。另一手风琴中的字段位于以该手风琴命名的单独表格中。Label 是弹窗显示的字段标签，用界面美式拼写。Parameter 是 param_name 元素定义中。选项读取 value （标签）。
  两个 General 字段出现在每个元素上，不在表中重复：
tags:
  - 'Elements and CSS'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 元素参考
      description: |-
        DXPR Builder 提供 22 个内容元素和 6 个布局元素。本页列出每个元素的机器名及其设置弹窗中的字段；布局部分还列出每行内的 Column。Drupal 区块和视图（页面构建器也将其作为元素提供）不在本文范围内。
        如何阅读本页
        每个元素的第一个表格列出其
        General 手风琴。另一手风琴中的字段位于以该手风琴命名的单独表格中。Label 是弹窗显示的字段标签，用界面美式拼写。Parameter 是 param_name 元素定义中。选项读取 value （标签）。
        两个 General 字段出现在每个元素上，不在表中重复：
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:21:30+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/reference/element-reference'
      articleSection: '元素与 CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/reference/element-reference'
      description: |-
        DXPR Builder 提供 22 个内容元素和 6 个布局元素。本页列出每个元素的机器名及其设置弹窗中的字段；布局部分还列出每行内的 Column。Drupal 区块和视图（页面构建器也将其作为元素提供）不在本文范围内。
        如何阅读本页
        每个元素的第一个表格列出其
        General 手风琴。另一手风琴中的字段位于以该手风琴命名的单独表格中。Label 是弹窗显示的字段标签，用界面美式拼写。Parameter 是 param_name 元素定义中。选项读取 value （标签）。
        两个 General 字段出现在每个元素上，不在表中重复：
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[参考](/zh-hans/hc/documentation/learn-dxpr-builder/reference) /[元素与 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # 元素参考.

 学习 DXPR Builder参考元素与 CSS

   ## 本指南内容

DXPR Builder 提供 22 个内容元素和 6 个布局元素。本页列出每个元素的机器名及其设置弹窗中的字段；布局部分还列出每行内的 Column。Drupal 区块和视图（页面构建器也将其作为元素提供）不在本文范围内。

## 如何阅读本页

每个元素的第一个表格列出其 **General** 手风琴。另一手风琴中的字段位于以该手风琴命名的单独表格中。Label 是弹窗显示的字段标签，用界面美式拼写。Parameter 是 `param_name` 元素定义中。选项读取 `value` （标签）。

两个 General 字段出现在每个元素上，不在表中重复：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| HTML ID | `hash` | text | empty; the field shows the generated ID as a placeholder | 首字母为字母，其后为字母、数字、连字符和下划线 | 元素的自定义 ID。 |
| 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 | 元素的额外 CSS 类。 |

每个元素还有 **Style** 和 **Hover style**折叠面板，相关文档见 [样式选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab) 页面。除 Column 以及 Tabs、Collapse panel 和 Carousel 中的面板外，所有元素还有 **Animation** 折叠面板，相关文档见 [动画选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab)页面。

Control 列命名弹窗显示的内容。每个控件来自一个参数 `type` 元素定义中：

| 控件 | 代码 `type` |
|---|---|
| text | `textfield` |
| number | `numericfield` |
| link | `link` |
| radio | `dropdown` 带少于 7 个选项 |
| select | `dropdown` 带 7 个或更多选项 |
| toggle | `checkbox` 带一个选项 |
| checkboxes | `checkbox` 带多个选项 |
| slider | `dxb_slider` |
| colour | `colorpicker` |
| icon, image, images, video, datetime | 该 `type` ，名称相同 |
| ckeditor | `textarea` |
| ace | `html` |
| social | `social_links` |

打开的 toggle 将其值存入 Allowed values 单元格；关闭的 toggle 存入 `no` 或空值。Checkboxes 将勾选的值存为逗号分隔的列表。列为 empty 的选项存为空字符串；在弹窗中，其单选按钮的键为 `dxpr-default`。

Image 和 images 字段还提供图像样式选择：网站的 `optimize` 样式优先（存在时），然后是 **Original image (No resizing)** 及其他图像样式。某些字段在另一字段有匹配值之前保持隐藏；Description 列注明该依赖关系。

## 内容元素

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

在 CKEditor 中编辑的富文本。机器名： `az_text`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder heading and paragraph | HTML | 文本内容。 |

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

单个图像，可选带链接。机器名： `az_image`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Image | `image` | image | empty | 媒体浏览器中的图像 | 要显示的图像。 |
| Image width | `width` | text | `100%` | CSS 长度，例如 `100px` 或 `50%` | 纯数字按像素计。 |
| Image height | `height` | text | empty | CSS 长度，例如 `100px` | 纯数字按像素计。 |
| Image link | `link` | link | empty | 网址或内部路径 | 将图像包在链接中。 |
| Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | 链接打开位置。显示条件为 `link` 已设置。 |

以下位置的字段 **SEO** 折叠面板：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | 图像的替代文本。 |
| Title attribute | `title` | text | empty | Any text | 图像的 Title attribute。 |

### [图像轮播](/zh-hans/hc/documentation/learn-dxpr-builder/elements/image-carousel)

多图像 Bootstrap 轮播。机器名： `az_images_carousel`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Images | `images` | images | empty | 媒体浏览器中的图像 | 每张图像一张幻灯片。 |
| Interval | `interval` | slider | 5000 | 0 to 10000, step 1 | 幻灯片间隔毫秒数。0 时幻灯片不会自动前进。 |
| Hide | `hide` | checkboxes | none ticked | `pagination_control` (Hide pagination control), `prev_next_buttons` (Hide prev/next buttons) | 隐藏指示器、箭头或两者。 |

以下位置的字段 **SEO** 折叠面板：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | 图像的替代文本。 |
| Title attribute | `title` | text | empty | Any text | 图像的 Title attribute。 |

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

嵌入 YouTube 或 Vimeo 视频。机器名： `az_video`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Video link | `link` | text | empty | YouTube 或 Vimeo 网址 | 要嵌入的视频。 |
| Video width | `width` | text | `100%` | CSS 长度，例如 `100px` 或 `50%` | 纯数字按像素计。 |
| Image | `image` | image | empty | 媒体浏览器中的图像 | 封面图像；访客点击时播放器加载。 |
| Themed play button | `play` | toggle | off | `yes` 开启时 | 在视频上显示主题播放按钮。 |

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

在 HTML5 播放器中播放自托管视频文件。机器名： `az_video_local`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Video | `video` | video | empty | MP4、WEBM、OGG 或 OGV 文件，至多网站上传大小限制 | 视频文件。 |
| Start playing automatically | `autoplay` | toggle | off | `autoplay` 开启时 | 页面加载时开始播放。自动播放始终静音。 |
| Muted | `muted` | toggle | off | `muted` 开启时 | 将视频静音。显示条件为 `autoplay` 关闭。 |
| Controls | `controls` | toggle | off | `controls` 开启时 | 显示播放器控件。 |
| Loop | `loop` | toggle | off | `loop` 开启时 | 视频结束时重新播放。 |
| Video width | `width` | text | `100%` | CSS 长度，例如 `100px` 或 `50%` | 播放器宽度。 |
| Image | `image` | image | empty | 媒体浏览器中的图像 | 播放前显示的封面图像。 |

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

在代码编辑器中编辑的原始 HTML。机器名： `az_html`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Raw HTML | `content` | ace | Placeholder message "Click the edit button to change this HTML" | HTML | HTML 内容。 |

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

带标题和导语的大横幅；其他元素可放入其中。机器名：`az_jumbotron`。

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Any text | 横幅标题。 |
| Lead | `lead` | text | empty | Any text | 标题下方显示的副标题文本。 |
| 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) | 背景和文本颜色类。 |
| Padding | `padding` | radio | `p-5` （大） | `p-5` (Large), `p-4` (Medium), `p-3` (Small) | 内边距尺寸。 |

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

链接到网址的 Bootstrap 按钮。机器名： `az_button`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Title | `title` | text | Click to add text | Any text | 按钮上的文本。 |
| Link | `link` | link | empty | 网址或内部路径 | 按钮链接。 |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | 链接打开位置。显示条件为 `link` 已设置。 |
| Type | `type` | select | `primary` (Primary) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`；每个标签是首字母大写的值 | Bootstrap 按钮样式。 |
| Block button | `block` | toggle | off | `btn-block` 开启时 | 全宽按钮。 |
| Outline style | `outlined` | toggle | off | `outline` 开启时 | 渲染 `btn-outline-*` 而非 `btn-*`. |
| Size | `size` | radio | empty (Normal) | empty (Normal), `btn-lg` (Large), `btn-sm` (Small) | 按钮尺寸。 |

### [Link 元素](/zh-hans/hc/documentation/learn-dxpr-builder/elements/link)

将其中元素包在一个链接中的容器。机器名： `az_link`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Link | `link` | link | empty | 网址或内部路径 | 内容链接。 |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | 链接打开位置。显示条件为 `link` 已设置。 |

以下位置的字段 **SEO** 折叠面板：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Title attribute | `title` | text | empty | Any text | 链接的 Title attribute。 |
| Tell search engines not to follow | `nofollow` | toggle | off | `nofollow` 开启时 | 添加 `rel="nofollow"` 到链接。 |

### [提醒框](/zh-hans/hc/documentation/learn-dxpr-builder/elements/alert)

Bootstrap 提醒框。机器名： `az_alert`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Message | `content` | ckeditor | Placeholder text | HTML | 消息。 |
| Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success), `alert-info` (Info), `alert-warning` (Warning), `alert-danger` (Danger) | 提醒颜色。 |

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

带可选页头和标题的 Bootstrap 卡片容器。机器名： `az_card`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Header | `header` | text | empty | Any text | 卡片页头文本。 |
| Title | `title` | text | empty | Any text | 卡片标题。 |
| 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) | 卡片颜色类。 |

### [面板](/zh-hans/hc/documentation/learn-dxpr-builder/elements/panel)

带标题栏的面板容器。机器名： `az_panel`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Any text | 面板标题。 |
| 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) | 面板样式。 |

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

带可选引用的引文。机器名： `az_blockquote`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder text | HTML | 引用的文本。 |
| Cite | `cite` | text | empty | Any text | 引文下方显示的引用。 |
| Reverse | `reverse` | toggle | off | `blockquote-reverse` 开启时 | 将引文对齐到行尾（`text-end`). |

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

链接到个人主页的社交网络图标行或列。机器名： `st_social`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Social links | `st_social_links` | social | Facebook and YouTube rows | 每个图标一行：品牌和资料网址 | 图标及其链接。 |
| Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Stacked) | 图标布局。 |
| Style | `st_style` | radio | empty (None) | empty (None), `rounded` (Rounded), `circle` (Circle), `square` (Square) | 图标背景形状。 |
| Size | `st_size` | radio | `lg` （大） | `lg` (Large), empty (Small), `2x`, `3x`, `4x`, `5x`；最后四个标签与其值一致 | 图标尺寸。 |
| CSS3 hover effects | `st_css3_hover_effects` | radio | empty (None) | empty (None), `disc` (Disc), `pulse` (Pulse) | 悬停效果。该效果使图标呈圆形。 |

以下位置的字段 **图标颜色** 折叠面板：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | 图标颜色来源。 |
| Color | `st_color` | colour | none | Any colour | 自定义图标颜色。显示条件为 `st_theme_color` 为 `custom`. |
| Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | 图标背景颜色来源。 |
| Background color | `st_bgcolor` | colour | none | Any colour | 自定义背景颜色。显示条件为 `st_theme_bgcolor` 为 `custom`. |

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

从起始值计数到结束值的数字。机器名： `az_counter`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Start | `start` | number | 0 | Number | 开始计数的数字。 |
| End | `end` | number | 100 | Number | 计数上限数字。 |
| Font size | `fontsize` | slider | 30 | 0 to 200, step 1 | 数字字号（像素）。 |
| Speed | `speed` | slider | 2000 | 0 to 10000, step 1 | 计数完成的毫秒数。 |
| Thousands separator | `seperator` | radio | empty (None) | empty (None), `,` (Comma), `.` (Dot), a space (Space) | 分隔最终数字中的千位。代码中参数即如此拼写。 |
| Prefix | `prefix` | text | empty | Any text | 数字前的字符，例如 `$`. |
| Suffix | `postfix` | text | empty | Any text | 数字后的字符，例如 `%`. |

### [环形计数器](/zh-hans/hc/documentation/learn-dxpr-builder/elements/circle-counter)

带可选文本、信息行和中央图标的圆形进度指示器。机器名： `az_circle_counter`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Foreground color | `fgcolor` | colour | `#333333` | Any colour | 进度弧颜色。 |
| Background color | `bgcolor` | colour | `#999999` | Any colour | 弧后轨道颜色。 |
| Fill color | `fill` | colour | none | Any colour | 圆内填充颜色。 |
| Percent | `percent` | slider | 50 | 0 to 100, step 1 | 进度值。 |
| Dimension | `dimension` | slider | 250 | 100 to 500, step 1 | 圆直径（像素）。 |
| Foreground width | `width` | slider | 10 | 1 to 100, step 1 | 弧线宽度。 |
| Animation | `animation` | toggle | on | `yes` 开启时 | 弧线播放动画。 |
| Animation duration | `duration` | slider | 1500 | 0 to 5000, step 1 | 以毫秒计。显示条件为 `animation` 打开时。 |
| Animation delay | `delay` | slider | 0 | 0 to 5000, step 1 | 以毫秒计。显示条件为 `animation` 打开时。 |
| Animation in-viewport | `in_viewport` | toggle | on | `yes` 开启时 | 元素滚动进入视野时开始动画。显示条件为 `animation` 打开时。 |

以下位置的字段 **Circle content** 折叠面板。其后的每个字段 **Show progress** 仅在其关闭时显示：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Show progress | `show_progress` | toggle | off | `yes` 开启时 | 显示百分比而非自己的文本和图标。 |
| Text | `text` | text | empty | Any text | 居中文本。 |
| Font size | `fontsize` | slider | 16 | 0 to 100, step 1 | 居中文本尺寸（像素）。 |
| Text color | `text_color` | colour | none | Any colour | 居中文本颜色。 |
| Info | `info` | text | empty | Any text | 次信息行。 |
| Info font size | `info_fontsize` | slider | 14 | 0 to 100, step 1 | 信息行尺寸（像素）。 |
| Info color | `info_color` | colour | none | Any colour | 信息行颜色。 |
| Icon | `icon` | icon | empty | 页面构建器资料允许的图标集中的图标 | 居中图标。 |
| Icon size | `icon_size` | slider | 16 | 0 to 100, step 1 | 图标字号（像素）。 |
| Icon color | `icon_color` | colour | none | Any colour | 图标颜色。 |

### [进度条](/zh-hans/hc/documentation/learn-dxpr-builder/elements/progress-bar)

带标签的水平 Bootstrap 进度条。机器名： `az_progress_bar`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Label | `label` | text | Click to add text | Any text | 栏内的文本。 |
| Progress | `width` | slider | 50 | 0 to 100, step 1 | 百分比进度。 |
| Bar height | `height` | slider | 45 | 0 to 100, step 1 | 条形高度（像素）。 |
| Back color | `bgcolor` | colour | `#e9ecef` | Any colour | 栏后的轨道颜色。 |
| Front color | `fcolor` | colour | `#284ed9` | Any colour | 条形颜色。 |
| Grow animation | `grow_animation` | toggle | off | `yes` 开启时 | 条形从 0 播放动画到其值。 |
| Stripes | `options` | checkboxes | none ticked | `progress-bar-striped` (Add striped pattern to bar), `progress-bar-animated` (Animate stripes (requires striped pattern)) | 条纹图案和动条纹。 |

### [倒计时器](/zh-hans/hc/documentation/learn-dxpr-builder/elements/countdown-timer)

倒计时到日期、时刻或重复间隔结束。机器名： `az_countdown`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Countdown style | `countdown_style` | radio | `plain` (Plain) | `plain` (Plain), `style1` (Grid), `style6` (3D flip), `style9` (Disc), `style10` (Airport style), `style12` (Transparent) | 视觉样式。 |
| 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)) | 计时器倒计时的目标。 |
| Date | `date` | datetime | empty | 日期采用 `d.m.Y` 格式 | 目标日期。显示条件为 `counter_scope` 为 `date`. |
| Date / Time | `date_time` | datetime | empty | 日期采用 `d.m.Y` 格式加小时（`H`) | 目标日期和小时。显示条件为 `counter_scope` 为 `date_time`. |
| Time | `time` | datetime | empty | 小时（`H`) | 每天的目标小时。显示条件为 `counter_scope` 为 `repeating`. |
| Reset in hours | `reset_hours` | slider | 0 | 0 to 24, step 1 | 间隔小时数。显示条件为 `counter_scope` 为 `resetting`. |
| Reset in minutes | `reset_minutes` | slider | 0 | 0 to 60, step 1 | 间隔分钟数。显示条件为 `counter_scope` 为 `resetting`. |
| Reset in seconds | `reset_seconds` | slider | 0 | 0 to 60, step 1 | 间隔秒数。显示条件为 `counter_scope` 为 `resetting`. |
| Page referrer | `referrer` | link | empty | 网址或内部路径 | 倒计时结束时打开的页面。显示条件为 `counter_scope` 为 `repeating` 或 `resetting`. |
| Automatic restart | `restart` | toggle | off | `yes` 开启时 | 间隔结束时重新开始。显示条件为 `counter_scope` 为 `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) | 要显示的单位。 |

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

不停滚动的水平图像胶片。机器名： `az_marquee`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Images | `images` | images | DXPR 徽标的三个副本 | 媒体浏览器中的图像 | 条带中的图像。 |
| Speed | `speed` | slider | 3 | 1 to 5, step 1 | 滚动速度；1 最慢，5 最快。 |
| Height | `height` | slider | 50 | 10 to 200, step 1 | 图像高度（像素）。 |
| Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images), `fw` (Fixed width images) | 图像共享高度还是宽度。 |
| Image width | `width` | slider | 400 | 50 to 500, step 1 | 图像宽度（像素）。显示条件为 `image_layout` 为 `fw`. |
| Gray scale | `grayscale` | toggle | off | `apply` 开启时 | 以灰度显示图像。 |
| Fade edges | `fade_edges` | toggle | off | `apply` 开启时 | 两侧边缘淡出胶片。 |

以下位置的字段 **SEO** 折叠面板：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | 图像的替代文本。 |
| Title attribute | `title` | text | empty | Any text | 图像的 Title attribute。 |

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

地址的嵌入式 Google 地图。机器名： `az_map`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Address | `address` | text | empty | 街道地址 | 要显示的位置。 |
| Map width | `width` | text | `100%` | CSS 长度，例如 `100px` 或 `50%` | 纯数字按像素计。 |
| Map height | `height` | text | `400px` | CSS 长度，例如 `100px` | 纯数字按像素计。 |

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

单个图标，可选带链接。机器名： `az_icon`。该模块提供 14 个图标集。主题和模块可以添加更多，页面构建器资料可以限制其用户看到的图标集。

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Icon | `icon` | icon | `bi bi-heart` | 页面构建器资料允许的图标集中的图标 | 图标。 |
| Size | `size` | radio | `fa-lg` （大） | `normal` (Normal), `fa-lg` (Large), `fa-2x` (Extra Large (2x)), `fa-3x` (Very Large (3x)), `fa-4x` (Huge (4x)), `fa-5x` (Gigantic (5x)) | 图标尺寸。 |
| Link | `link` | link | empty | 网址或内部路径 | 图标链接。 |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | 链接打开位置。显示条件为 `link` 已设置。 |

以下位置的字段 **Icon utilities** 折叠面板：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Style | `st_style` | radio | empty (None) | empty (None), `stbe-util-icon-rounded` (Rounded), `stbe-util-icon-circle` (Circle), `stbe-util-icon-square` (Square) | 背景形状。 |
| Icon animation | `animation` | radio | empty (No) | empty (No), `fa-spin` (Spin), `fa-pulse` (Pulse) | 图标动画。 |
| 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) | 旋转或翻转。 |

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

水平分隔线。机器名： `az_separator`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Color | `bgcolor` | colour | none | Any colour | 线条颜色。 |
| Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom thickness) | 是否覆盖主题粗细。 |
| Thickness | `custom_thickness` | slider | 3 | 0 to 20, step 1 | 线条粗细（像素）。显示条件为 `thickness` 为 `custom`. |
| Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom width) | 是否覆盖主题长度。 |
| Width | `custom_width` | slider | 100 | 0 to 500, step 10 | 像素单位的行长；0 呈现全宽。`width` 为 `custom` 时显示。 |
| Align | `align` | radio | `left` (Left) | `left` (Left), `center` (Center), `right` (Right) | 水平对齐。显示条件为 `width` 为 `custom`. |

## 布局元素

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

行的顶级容器，带全宽、全高和背景效果选项。机器名： `az_section`。新版块获得类 `py-5` ： **HTML classes**.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Full width | `fluid` | toggle | off | `yes` 开启时 | 使用全宽容器（`container-fluid`). |
| 100% height | `fullheight` | toggle | off | `yes` 开启时 | 版块填满视口高度。 |
| Vertical centering | `vertical_centering` | toggle | off | `yes` 开启时 | 将内容垂直居中。 |

以下位置的字段 **Background effects** 折叠面板。除以下元素外全部拥有 **Background effect** 取决于其值，如 Description 列所示：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Background effect | `effect` | radio | empty (Simple image) | empty (Simple image), `fixed` (Fixed image), `parallax` (Parallax image), `gradient` (Gradient), `youtube` (YouTube video) | 背景效果。 |
| Parallax speed | `parallax_speed` | slider | 0 | 0 to 100, step 1 | 视差滚动速度。显示条件为 `effect` 为 `parallax`. |
| Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed), `scroll` (Local) | 图像的背景附着方式。显示条件为 `effect` 为 `parallax`. |
| Disable on mobile | `parallax_mobile_disable` | toggle | off | `yes` 开启时 | 屏幕窄于 481 px 时关闭视差。显示条件为 `effect` 为 `parallax`. |
| Start color | `gradient_start_color` | colour | none | Any colour | 渐变起始颜色。显示条件为 `effect` 为 `gradient`. |
| End color | `gradient_end_color` | colour | none | Any colour | 渐变结束颜色。显示条件为 `effect` 为 `gradient`. |
| Gradient direction | `gradient_direction` | slider | 180 | 1 to 360, step 1 | 渐变角度（度）。显示条件为 `effect` 为 `gradient`. |
| Start position | `gradient_start` | slider | 0 | 0 to 100, step 1 | 起始颜色位置（百分比）。显示条件为 `effect` 为 `gradient`. |
| End position | `gradient_end` | slider | 100 | 0 to 100, step 1 | 结束颜色位置（百分比）。显示条件为 `effect` 为 `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 背景选项。显示条件为 `effect` 为 `youtube`. |
| YouTube video URL | `video_youtube` | text | empty | YouTube 网址 | YouTube 背景视频。显示条件为 `effect` 为 `youtube`. |
| Start time in seconds | `video_start` | text | 0 | Seconds | 视频开始时间。显示条件为 `effect` 为 `youtube`. |
| Stop time in seconds | `video_stop` | text | 0 | Seconds | 视频停止时间。显示条件为 `effect` 为 `youtube`. |

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

容纳列的 Bootstrap 网格行。新行以两个半宽列开始。机器名： `az_row`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Equal-height columns | `equal` | toggle | off | `yes` 开启时 | 使所有列等高。 |
| Mirror row | `reverse_horizontal` | toggle | off | `yes` 开启时 | 在 768 px 及更宽屏幕上反转列顺序。 |

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

行内的列。行创建自己的列，因此列不在元素选择器中。机器名： `az_column`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Vertical centering | `vertical_centering` | toggle | off | `yes` 开启时 | 将列内容垂直居中。 |

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

带可切换选项卡面板的容器；每个选项卡用 **Add tab** 控件添加。机器名：`az_tabs`。

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Tab direction | `az_dirrection` | radio | empty (Default) | empty (Default), `tabs-left` (Left), `tabs-right` (Right) | 选项卡栏位置。代码中参数即如此拼写。 |
| Style | `tab_style` | radio | empty (Default) | empty (Default), `modern` (Modern), `accordion` (Accordion) | 选项卡样式。 |
| Mobile friendly | `responsive` | toggle | on | `yes` 开启时 | 在小屏幕上将选项卡显示为折叠。 |

每个选项卡（`az_tab`）有自己的设置：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Tab title | `title` | text | Title | Any text | 选项卡的标签。 |
| Tab description | `subtitle` | ckeditor | empty | HTML | 当前选项卡上显示的可选短导语。 |

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

折叠面板容器；每个面板用 **Add toggle** 控件添加。机器名：`az_accordion`。

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Collapse | `collapsed` | toggle | off | `yes` 开启时 | 开始时所有面板关闭。关闭时第一个面板打开。 |
| Expand icon | `expandicon` | radio | empty (None) | empty (None), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | 每个面板标题旁的图标。 |

每个面板（`az_toggle`）有自己的设置：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Toggle title | `title` | text | Title | Any text | 面板标题。 |

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

幻灯片容器；每张幻灯片容纳其他元素，用 **Add slide** 控件添加。幻灯片（`az_slide`）没有自己的字段。机器名： `az_carousel`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Frames per slide | `items` | slider | 1 | 1 to 10, step 1 | 并排显示幻灯片。较窄屏幕显示更少。 |
| Disable auto-play | `autoplay` | toggle | off | `yes` 开启时 | 阻止幻灯片自动前进。 |
| Auto-play interval | `interval` | slider | 5000 | 1000 to 20000, step 100 | 幻灯片间隔毫秒数。 |
| Stop on hover | `stoponhover` | toggle | off | `yes` 开启时 | 指针悬停轮播时暂停自动播放。 |

以下位置的字段 **Dots** 折叠面板。其后的每个字段 **Dots navigation** 仅在其打开时显示：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Dots navigation | `pagination` | toggle | on | `yes` 开启时 | 显示每张幻灯片的圆点。 |
| Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | 圆点位置。 |
| Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar), `circle` (Circle), `square` (Square), `triangle` (Triangle) | 圆点形状。 |
| Active dot transformation | `pagination_transform` | radio | empty (None) | empty (None), `growTaller` (Grow taller), `growWider` (Grow wider), `scaleUp` (Scale up) | 对当前圆点的影响。 |
| Dot color | `pagination_color` | colour | none | Any colour | 圆点颜色。 |
| Active dot color | `pagination_active_color` | colour | none | Any colour | 选中圆点的颜色。 |

以下位置的字段 **Next/Previous** 折叠面板。其后的每个字段 **Next/Previous** 仅在其打开时显示：

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Next/Previous | `navigation` | toggle | off | `yes` 开启时 | 显示上一个和下一个箭头。 |
| Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | 箭头位置。 |
| Dot shape | `navigation_shape` | radio | empty (No background) | empty (No background), `circle` (Circle), `square` (Square), `bar` (Bar) | 箭头背景形状。弹窗中将其标记为 **Dot shape** 也。 |
| Icon color | `navigation_icon_color` | colour | none | Any colour | 箭头图标颜色。 |
| Icon hover color | `navigation_icon_hover_color` | colour | none | Any colour | 箭头图标悬停颜色。 |
| Background color | `navigation_background_color` | colour | none | Any colour | 箭头背景颜色。 |
| Background hover color | `navigation_background_hover_color` | colour | none | Any 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) | 轮播外箭头位置。 |

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

可自由拖拽和调整子元素的画布。定位图层元素不能嵌套在另一个中。机器名： `az_layers`。每个子元素将其位置存储在隐藏参数中： `pos_left`, `pos_top`, `pos_width`, `pos_height` 和 `pos_zindex`.

| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Width | `width` | text | `100%` | CSS 长度，例如 `100px` 或 `50%` | 画布宽度。纯数字按像素计。 |
| Height | `height` | slider | 500 | 0 to 10000, step 1 | 画布高度（像素）。 |
| Responsive | `responsive` | toggle | off | `yes` 开启时 | 随可用宽度缩放画布高度和字号。 |

## 接下来做什么？

- [元素概览](/hc/documentation/learn-dxpr-builder/elements)
- [布局概览](/hc/documentation/learn-dxpr-builder/layout/overview)
- [元素设置](/hc/documentation/learn-dxpr-builder/element-settings)