添加版块.

Learn DXPR BuilderBuild pagesAdd contentLay-out

版块是页面的一个横带，例如顶部的首屏或下方的灰色功能带。每个版块设置自己的背景、文本颜色、间距和高度，然后用行或内容填充。阅读本页了解如何添加和设置版块；要将其分成列，请参见行和列。

访客看到的诊所页面：深蓝色版块顶到边缘，居中标题 Book your health check，一行关于同周可约的文本和白色 Book online 按钮；下方浅灰色版块三列：Same-week visits、Experienced GPs 和 Results online

添加版块

本例为诊所构建 navy 首屏版块。下方是浅灰三列版块。

  1. 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。在现有版块下方，点击 Add Section Below，其下方的圆形加号。
  2. 悬停版块，打开 More 并选择 Settings.
  3. 设置整个版块：Align text center 在 HTML classes，深蓝色 Background 和白色 Font color。点击 Save.
  4. 点击 + 在版块上直接添加内容，或添加一个 Row 以将其分成列。
  5. 点击 Save 在工具栏上以存储页面。

Background 和 Font color 在对话框的 Style 面板。新元素落在版块顶部，因此先添加最低的：视频中按钮在标题之前放入。

您会看到的内容

navy 横幅从边缘铺满窗口。其标题和按钮位于居中框（版块的内部容器）中。灰色版块紧随其下，三个功能列在同一居中框中。

每个新版块已带有类 Vertical padding size 5 (py-5) ：HTML classes。该类为其内容上下提供间距。

设置版块

设置对话框有五个面板：General, Background effects, Animation, Style 和 Hover style。只有版块拥有 Background effects.

设置 面板 它的作用 默认值
Full width General 行顶到边缘，而非在居中容器内 Off
100% height General 版块至少与浏览器窗口等高 Off
Vertical centering General 内容在其更高的版块中垂直居中 Off
HTML ID General 锚名称；指向 #name 的链接跳转到本版块 Empty
HTML classes General 实用程序类，例如 Align text center 或内边距尺寸 Vertical padding size 5 (py-5)
Background effect Background effects Simple image, Fixed image, Parallax image, Gradient 或 YouTube video Simple image
Background, Font color Style 版块后面的颜色及其文本的颜色 None: the theme decides

背景始终铺满整个版块，与 Full width 的设置无关。图像效果移动您在 Style 面板中选择的 Background image；背景展示每种效果。

要调整间距，请更换 Vertical padding size 5 (py-5) 更小尺寸，或 No vertical padding (py-0)。精确像素请在以下位置使用框模型 Style 面板，如 间距 解释。

版块方案

版块 实现它的设置
首屏版块 100% height 和 Vertical centering 打开，Parallax image 效果、标题和按钮
功能 浅色 Background，一个标题，然后是一行三列
行动号召 醒目的 Background, Align text center，一行短文本和一个按钮
Testimonials 浅色 Background 和一行三列，每列带一个 Block quote

设计首屏版块 逐步构建第一个。

如果您看不到它

  • 空页面没有 Add Elements 按钮。 页面创建助手已关闭，因此空页面仅提供 Choose a template。点击空白区域打开元素选择器，或打开 Enable page creation assistant ： /admin/dxpr_studio/dxpr_builder/ai_settings.
  • 没有 Add Section Below 按钮。 只有直接放在页面上的版块拥有它，列或选项卡中的版块没有。点击 + 改为在列上。
  • Vertical centering 无变化。 版块仅与其内容等高，因此没有居中空间。打开 100% height 同样。
  • 全宽似乎不起作用。 背景已铺满整个版块；Full width 只是将行移到其边缘。一列中文本较短时，变化难以察觉。
  • 出现了一个您未添加的版块。 您在空白页面上选择了 Row 或内容元素，而每个元素周围都需要一个版块。DXPR Builder 已为您添加了一个；像其他版块一样打开其设置。

接下来做什么？