--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/faq-page' title: '构建 FAQ 页面 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:24:21+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 这里您构建常见问题页面，每个问题点击展开收起。结尾是居中标题、折叠面板中的一类问题和联系行动号召。适用于简短常见问题列表。要按主题分组的帮助文章，请遵循 构建知识库。 本视频构建健康诊所的 FAQ。 tags: - 'Volg een tutorial' 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: '构建 FAQ 页面' description: |- 这里您构建常见问题页面，每个问题点击展开收起。结尾是居中标题、折叠面板中的一类问题和联系行动号召。适用于简短常见问题列表。要按主题分组的帮助文章，请遵循 构建知识库。 本视频构建健康诊所的 FAQ。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:24:21+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/tutorials/faq-page' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/faq-page' description: |- 这里您构建常见问题页面，每个问题点击展开收起。结尾是居中标题、折叠面板中的一类问题和联系行动号召。适用于简短常见问题列表。要按主题分组的帮助文章，请遵循 构建知识库。 本视频构建健康诊所的 FAQ。 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) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 构建 FAQ 页面. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [添加折叠面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) - [添加选项卡面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element) - [创建联系页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/contact-page) - [构建知识库](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base) 这里您构建常见问题页面，每个问题点击展开收起。结尾是居中标题、折叠面板中的一类问题和联系行动号召。适用于简短常见问题列表。要按主题分组的帮助文章，请遵循 [构建知识库](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base)。 本视频构建健康诊所的 FAQ。 ## 开始之前 - 您的角色有 **Edit with DXPR Builder** 权限。 - 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**. - 新元素和新开关落在容器顶部。从最后一个问题开始添加，或之后拖拽到位。 ## 第 1 步：添加页头 1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。 2. 悬停版块并打开 **More** > **Settings**。在以下位置的下方 **HTML classes** 选择 **Align text center**，然后点击 **Save**. 3. 点击 **+** 在版块上并选择 **Text** 从 **Content** 选项卡。 4. 输入 "Frequently asked questions" 并设为 **Heading 2** 从工具栏。添加一行说明页面内容，然后点击 **Save**。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 [构建 SEO 友好页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)。 ## 第 2 步：添加带问题的分类 1. 悬停版块并点击 **Add Section Below**. 2. 点击新版块上的 **+**，并从 **Layout** 选项卡选择 **Collapse panel**；它带有一个空开关。 3. 打开 **More** > **Settings** 在面板上。打开 **Collapse** 以便每个问题开始时关闭，设置 **Expand icon** 为 **+**，然后点击 **Save**. 4. 打开 **More** > **Settings** 在开关上，输入问题作为其 **Toggle title** 并点击 **Save**。新开关落在顶部，因此从最后一个问题开始。 5. 点击问题打开其正文，点击 **+** 其中并选择 **Text**。输入答案并点击 **Save**. 6. 点击 **Add toggle** 在面板上并为每个问题重复第 4 和 5 步，从最后一个做到第一个。 7. 点击 **+** 在版块上再次并选择 **Text**；它落在面板上方。输入分类名称为 **Heading 2** 并点击 **Save**. 每个类别设 3 到 6 个问题。 ## 第 3 步：添加联系行动号召 1. 添加第三个版块，其中包含 **Add Section Below** 并打开其 **More** > **Settings**。选择 **Align text center** 在 **HTML classes** 和浅灰色 **Background**：**Style** 面板。点击 **Save**. 2. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Contact us"， **Link** 为 `/contact`, **Type** 为 **Primary** 和 **Size** 为 **Large**，然后点击 **Save**. 3. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "Still have questions?" 为 **Heading 2**，添加一行指向您团队的内容，然后点击 **Save**. ## 第 4 步：保存并预览 1. 点击 **Save** 在页面构建器工具栏上。 2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**. ## 进一步了解 视频中未展示： - **更多分类**：为每个类别重复第 2 步，每个类别一个版块和一个折叠面板。常见类别有入门、账户与账单、功能、故障排查、隐私与安全。 - **用 Tabs 代替版块**：类别较少时，添加一个 **Tabs** 元素，来自 **Layout** 选项卡，每类一个选项卡，在每个选项卡内放置折叠面板。每个分类触手可及，无需滚动。 ## SEO 技巧 - 使用真实问题为 **Toggle title** - 第一句即作答，然后补充细节 - 将答案链接到其引用的页面 - 通过主题或 Drupal 模块添加常见问题结构化数据 ## 您会看到的内容 标题居中位于顶部。分类标题下每个问题关闭并显示 **+**。点击打开答案，结尾横幅提供 **Contact us** 按钮。 ## 如果您看不到如图所示的页面 - **所有问题开始时都是展开的。** **Collapse** 在折叠面板上关闭。打开面板的 **More** > **Settings**，打开 **Collapse** 并点击 **Save**. - **开关内没有 +。** 开关的主体关闭。点击问题打开，然后点击 **+** 内部。 - **问题顺序错误。** 新开关落在面板顶部。通过控制栏上的拖拽柄将每个开关拖拽到位。 - **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。 ## 接下来做什么？ - [折叠元素](/zh-hans/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) 用于每个折叠面板设置 - [Tabs 元素](/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element) 用于选项卡布局 - [联系页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/contact-page) 用于按钮链接到的页面 - [知识库](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base) 以构建更有结构的帮助版块