构建 FAQ 页面.
这里您构建常见问题页面,每个问题点击展开收起。结尾是居中标题、折叠面板中的一类问题和联系行动号召。适用于简短常见问题列表。要按主题分组的帮助文章,请遵循 构建知识库。
本视频构建健康诊所的 FAQ。
开始之前
- 您的角色有 Edit with DXPR Builder 权限。
- 页面在页面构建器中打开。新页面请前往 Content > Add content > Landing Page (
/node/add/landing_page),然后点击 Save. - 新元素和新开关落在容器顶部。从最后一个问题开始添加,或之后拖拽到位。
第 1 步:添加页头
- 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。
- 悬停版块并打开 More > Settings。在以下位置的下方 HTML classes 选择 Align text center,然后点击 Save.
- 点击 + 在版块上并选择 Text 从 Content 选项卡。
- 输入 "Frequently asked questions" 并设为 Heading 2 从工具栏。添加一行说明页面内容,然后点击 Save。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1,请参见 构建 SEO 友好页面。
第 2 步:添加带问题的分类
- 悬停版块并点击 Add Section Below.
- 点击新版块上的 +,并从 Layout 选项卡选择 Collapse panel;它带有一个空开关。
- 打开 More > Settings 在面板上。打开 Collapse 以便每个问题开始时关闭,设置 Expand icon 为 +,然后点击 Save.
- 打开 More > Settings 在开关上,输入问题作为其 Toggle title 并点击 Save。新开关落在顶部,因此从最后一个问题开始。
- 点击问题打开其正文,点击 + 其中并选择 Text。输入答案并点击 Save.
- 点击 Add toggle 在面板上并为每个问题重复第 4 和 5 步,从最后一个做到第一个。
- 点击 + 在版块上再次并选择 Text;它落在面板上方。输入分类名称为 Heading 2 并点击 Save.
每个类别设 3 到 6 个问题。
第 3 步:添加联系行动号召
- 添加第三个版块,其中包含 Add Section Below 并打开其 More > Settings。选择 Align text center 在 HTML classes 和浅灰色 Background:Style 面板。点击 Save.
- 点击 + 在版块上并选择 Button。设置 Title 为 "Contact us", Link 为
/contact, Type 为 Primary 和 Size 为 Large,然后点击 Save. - 点击 + 再次选择 Text;它落在按钮上方。输入 "Still have questions?" 为 Heading 2,添加一行指向您团队的内容,然后点击 Save.
第 4 步:保存并预览
- 点击 Save 在页面构建器工具栏上。
- 打开视图菜单( 眼睛图标),然后选择 Preview.
进一步了解
视频中未展示:
- 更多分类:为每个类别重复第 2 步,每个类别一个版块和一个折叠面板。常见类别有入门、账户与账单、功能、故障排查、隐私与安全。
- 用 Tabs 代替版块:类别较少时,添加一个 Tabs 元素,来自 Layout 选项卡,每类一个选项卡,在每个选项卡内放置折叠面板。每个分类触手可及,无需滚动。
SEO 技巧
- 使用真实问题为 Toggle title
- 第一句即作答,然后补充细节
- 将答案链接到其引用的页面
- 通过主题或 Drupal 模块添加常见问题结构化数据
您会看到的内容
标题居中位于顶部。分类标题下每个问题关闭并显示 +。点击打开答案,结尾横幅提供 Contact us 按钮。
如果您看不到如图所示的页面
- 所有问题开始时都是展开的。 Collapse 在折叠面板上关闭。打开面板的 More > Settings,打开 Collapse 并点击 Save.
- 开关内没有 +。 开关的主体关闭。点击问题打开,然后点击 + 内部。
- 问题顺序错误。 新开关落在面板顶部。通过控制栏上的拖拽柄将每个开关拖拽到位。
- 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错,参见 更改无法保存。