构建产品页面.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里为一个产品构建页面。照片在名称、价格和旁边 Buy now 按钮，随后三个功能、规格列表和销售行动号召。适用于您销售的任何产品。要比较多个方案，请添加 价格表 到它。

本视频构建名为 Insight Hub 的硬件产品页面。

开始之前

  • 您的角色有 Edit with DXPR Builder 权限。
  • 媒体库保存产品照片。
  • 页面在页面构建器中打开。新页面请前往 Content > Add content > Landing Page (/node/add/landing_page），然后点击 Save.
  • 新元素落在列顶部。因此右列从按钮开始向上构建。

第 1 步：添加产品

  1. 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。
  2. 点击 + 在版块上并选择 Row；它带有两个等宽列。
  3. 点击 + 在左列中并选择 Image。点击 Select Image，勾选产品照片并点击 Insert selected。输入 Alt attribute：SEO 面板并点击 Save.
  4. 点击 + 在右列中并选择 Button。设置 Title 为 "Buy now"，Link 到您的商店，Type 为 Primary 和 Size 为 Large，然后点击 Save.
  5. 点击 + 在右列中再次并选择 Text；它落在按钮上方。输入价格为 Heading 2 并点击 Save。
  6. 点击 + 再次并选择 Text；它落在顶部。输入产品名称为 Heading 2，添加一行描述并点击 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. 点击 + 在第一列中并选择 Text。输入功能名称作为 Heading 3，添加一行并点击 Save.
  4. 点击 + 在同一列中并选择 Icon；它落在文本上方。选择 Font Awesome Free Solid 设置，搜索 plug 并点击图标。设置 Size 为 Very Large (3x)，打开 Icon utilities，设置 Style 为 Circle 并点击 Save.
  5. 对第二列重复，带 cloud 和第三个 battery-full.

第 3 步：添加规格

  1. 添加第三个版块，其中包含 Add Section Below。打开其 More > Settings，选择浅灰色 Background：Style 面板并点击 Save.
  2. 点击 + 在版块上并选择 Text。输入 "Specifications" 为 Heading 2，然后逐行添加一项规格，并点击 Save.

第 4 步：添加行动号召

  1. 添加第四个版块并打开其 More > Settings。选择 Align text center 在 HTML classes，然后紫色 Background 和白色 Font color：Style 面板。点击 Save.
  2. 点击 + 在版块上并选择 Button。设置 Title 为 "Talk to sales"， Link 为 /contact, Type 为 Light 和 Size 为 Large，然后点击 Save.
  3. 点击 + 再次选择 Text；它落在按钮上方。输入 "Insight Hub from 249 euro" 为 Heading 2 并添加一行。设置 Font color 为白色并点击 Save.

第 5 步：保存并预览

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

进一步了解

视频中未展示：

  • 规格表：通过以下方式插入表格 Table 文本工具栏上的按钮，而非每个规格一行。
  • 图库：将单张照片替换为 Image carousel 产品照片。
  • 方案：将价格链接到 价格表。

您会看到的内容

产品照片填满左半，含名称、价格和 Buy now 右侧的按钮。随后三个居中功能，每个是名称和文字上方的圆圈图标。规格立于灰色横幅，紫色横幅以下列内容收尾 Talk to sales.

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

  • 名称、价格和按钮顺序错误。 它们从上到下放入，新元素落在列顶部。用其控制栏上的拖动手柄拖到位置。
  • 图标没有圆圈。 Style 位于 Icon utilities 面板，而非 General。打开图标的设置，打开 Icon utilities 并设置 Style 为 Circle.
  • 标题在紫色上保持深色。 Text 元素没有 Font color 自己的。打开其 Style 面板并设置 Font color 为白色。
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？