构建知识库.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里您构建帮助中心首页：深蓝色页头、三张各带图标的分类卡片、两份热门文章列表和支持行动号召。当帮助分散在多篇文章中时使用它。要简短问答列表，请遵循 构建常见问题页面。

本视频构建软件产品的帮助中心。

开始之前

  • 您的角色有 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。在 Style 面板选择深蓝色 Background 和白色 Font color，然后点击 Save.
  3. 点击 + 在版块上并选择 Text。输入 "Help centre" 为 Heading 2 并添加 "How can we help you today?"。设置 Font color 为白色，在 Style 面板并点击 Save。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 构建 SEO 友好页面。

第 2 步：添加分类

  1. 悬停版块并点击 Add Section Below。给新版块 Align text center 类。
  2. 点击 + 在版块上并选择 Row。点击其网格图标（Column layout），选择 1/3 + 1/3 + 1/3 预设并点击 Save.
  3. 点击 + 在第一列中并选择 Card。打开其 More > Settings，设置 Header 到分类名称和 Title 到文章数，然后点击 Save.
  4. 点击 + 在同一列中并选择 Icon；它落在卡片上方。选择 Font Awesome Free Solid 设置，搜索 rocket 并点击图标。设置 Size 为 Extra Large (2x) 并点击 Save.
  5. 对第二列重复，带 credit-card 和第三个 screwdriver-wrench.
  1. 添加第三个版块，其中包含 Add Section Below。打开其 More > Settings，选择浅灰色 Background：Style 面板并点击 Save.
  2. 点击 + 在版块上并选择 Row；它带有两个等宽列。
  3. 点击 + 在每列中并选择 Text。输入三个文章标题，每行一个，并点击 Save.
  4. 点击 + 在版块上并选择 Text；它落在行上方。输入 "Popular articles" 为 Heading 2 并点击 Save。

第 4 步：添加支持行动号召

  1. 添加第四个版块并打开其 More > Settings。选择 Align text center 在 HTML classes，然后紫色 Background 和白色 Font color：Style 面板。点击 Save.
  2. 点击 + 在版块上并选择 Button。设置 Title 为 "Contact support"， Link 为 /support, Type 为 Light 和 Size 为 Large，然后点击 Save.
  3. 点击 + 再次选择 Text；它落在按钮上方。输入 "Can't find what you need?" 为 Heading 2 并添加一行。设置 Font color 为白色并点击 Save.

第 5 步：保存并预览

  1. 点击 Save 在页面构建器工具栏上。
  2. 打开视图菜单（ 眼睛图标），然后选择 Preview.

进一步了解

视频中未展示：

  • 搜索框：打开核心 Search 模块，位于 Extend。点击 + 在页头版块中，打开 Drupal Blocks 选项卡并选择 Block: Forms: Search form。访客落在 /search/node.
  • 可点击卡片：添加一个 Link 元素先放到列中并设置其 Link 到分类页面。然后添加 Card 其中。
  • 文章链接：选择列表中的每个标题，并通过工具栏上的链接按钮链接它。
  • 更多分类：使用同一预设添加第二个 Row。常见分类包括 Using the editor、Templates and design 和 API and development。

您会看到的内容

深蓝色页头以白色 "Help centre" 迎接访客。随后是三个居中分类，每个是卡片及其名称和文章数上方的图标。灰带用两列列出六篇热门文章，紫色横幅提供 Contact support。

如果您看不到如图所示的页面

  • 添加后卡片不显示设置对话框。 卡片空白打开，无对话框。悬停卡片并打开 More > Settings 以填写 Header 和 Title.
  • 图标位于其卡片下方。 图标在卡片之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将图标拖到卡片上方。
  • 标题在 navy 上保持深色。 Text 元素没有 Font color 自己的。打开其 Style 面板并设置 Font color 为白色。
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？