元素参考.
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 折叠面板,相关文档见 样式选项卡 页面。除 Column 以及 Tabs、Collapse panel 和 Carousel 中的面板外,所有元素还有 Animation 折叠面板,相关文档见 动画选项卡 页面。
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
在 CKEditor 中编辑的富文本。机器名: az_text.
| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Text | content |
ckeditor | Placeholder heading and paragraph | HTML | 文本内容。 |
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。 |
图像轮播
多图像 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
嵌入 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
在 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
在代码编辑器中编辑的原始 HTML。机器名: az_html.
| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Raw HTML | content |
ace | Placeholder message "Click the edit button to change this HTML" | HTML | HTML 内容。 |
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
链接到网址的 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 元素
将其中元素包在一个链接中的容器。机器名: 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" 到链接。 |
提醒框
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
带可选页头和标题的 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) |
卡片颜色类。 |
面板
带标题栏的面板容器。机器名: 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
带可选引用的引文。机器名:
az_blockquote.
| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Text | content |
ckeditor | Placeholder text | HTML | 引用的文本。 |
| Cite | cite |
text | empty | Any text | 引文下方显示的引用。 |
| Reverse | reverse |
toggle | off | blockquote-reverse 开启时 |
将引文对齐到行尾(text-end). |
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
从起始值计数到结束值的数字。机器名: 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 | 数字后的字符,例如 %. |
环形计数器
带可选文本、信息行和中央图标的圆形进度指示器。机器名: 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 | 图标颜色。 |
进度条
带标签的水平 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)) |
条纹图案和动条纹。 |
倒计时器
倒计时到日期、时刻或重复间隔结束。机器名: 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
不停滚动的水平图像胶片。机器名: 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
地址的嵌入式 Google 地图。机器名: az_map.
| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Address | address |
text | empty | 街道地址 | 要显示的位置。 |
| Map width | width |
text | 100% |
CSS 长度,例如 100px 或 50% |
纯数字按像素计。 |
| Map height | height |
text | 400px |
CSS 长度,例如 100px |
纯数字按像素计。 |
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
水平分隔线。机器名: 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
行的顶级容器,带全宽、全高和背景效果选项。机器名: 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
容纳列的 Bootstrap 网格行。新行以两个半宽列开始。机器名: az_row.
| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Equal-height columns | equal |
toggle | off | yes 开启时 |
使所有列等高。 |
| Mirror row | reverse_horizontal |
toggle | off | yes 开启时 |
在 768 px 及更宽屏幕上反转列顺序。 |
Column
行内的列。行创建自己的列,因此列不在元素选择器中。机器名: az_column.
| 标签 | 参数 | 控件 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| Vertical centering | vertical_centering |
toggle | off | yes 开启时 |
将列内容垂直居中。 |
Tabs
带可切换选项卡面板的容器;每个选项卡用 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
折叠面板容器;每个面板用 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
幻灯片容器;每张幻灯片容纳其他元素,用 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
可自由拖拽和调整子元素的画布。定位图层元素不能嵌套在另一个中。机器名: 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 开启时 |
随可用宽度缩放画布高度和字号。 |