--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections' title: '添加版块 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:19:50+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 版块是页面的一个横带，例如顶部的首屏或下方的灰色功能带。每个版块设置自己的背景、文本颜色、间距和高度，然后用行或内容填充。阅读本页了解如何添加和设置版块；要将其分成列，请参见行和列。 添加版块 本例为诊所构建 navy 首屏版块。下方是浅灰三列版块。 tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 添加版块 description: |- 版块是页面的一个横带，例如顶部的首屏或下方的灰色功能带。每个版块设置自己的背景、文本颜色、间距和高度，然后用行或内容填充。阅读本页了解如何添加和设置版块；要将其分成列，请参见行和列。 添加版块 本例为诊所构建 navy 首屏版块。下方是浅灰三列版块。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:19:50+0000' dateModified: '2026-10-24T09:09:48+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/layout/sections' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections' description: |- 版块是页面的一个横带，例如顶部的首屏或下方的灰色功能带。每个版块设置自己的背景、文本颜色、间距和高度，然后用行或内容填充。阅读本页了解如何添加和设置版块；要将其分成列，请参见行和列。 添加版块 本例为诊所构建 navy 首屏版块。下方是浅灰三列版块。 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 --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # 添加版块. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [添加行](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [给版块配颜色、照片或渐变背景](/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds) - [让版块铺到边缘](/zh-hans/hc/documentation/learn-dxpr-builder/design/full-width-layouts) 版块是页面的一个横带，例如顶部的首屏或下方的灰色功能带。每个版块设置自己的背景、文本颜色、间距和高度，然后用行或内容填充。阅读本页了解如何添加和设置版块；要将其分成列，请参见[行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)。 ## 添加版块 本例为诊所构建 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**；[背景](/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds)展示每种效果。 要调整间距，请更换 **Vertical padding size 5 (py-5)** 更小尺寸，或 **No vertical padding (py-0)**。精确像素请在以下位置使用框模型 **Style** 面板，如 [间距](/hc/documentation/learn-dxpr-builder/element-settings/spacing)解释。 ## 版块方案 | 版块 | 实现它的设置 | |---|---| | 首屏版块 | **100% height** 和 **Vertical centering** 打开，**Parallax image** 效果、标题和按钮 | | 功能 | 浅色 **Background**，一个标题，然后是一行三列 | | 行动号召 | 醒目的 **Background**, **Align text center**，一行短文本和一个按钮 | | Testimonials | 浅色 **Background** 和一行三列，每列带一个 **Block quote** | [设计首屏版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 逐步构建第一个。 ## 如果您看不到它 - **空页面没有 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 已为您添加了一个；像其他版块一样打开其设置。 ## 接下来做什么？ - [行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)：将版块拆分为列。 - [背景](/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds)：版块的视差、渐变和视频效果。 - [全宽布局](/zh-hans/hc/documentation/learn-dxpr-builder/design/full-width-layouts)：何时让行顶到边缘。