构建价格表.

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 并点击 Save.
  3. 点击 + 在版块上并选择 Row；它带有两个等宽列。
  4. 点击行的网格图标（Column layout），选择 1/3 + 1/3 + 1/3 预设并点击 Save.

第 2 步：构建第一个方案

  1. 点击 + 在第一列中并选择 面板 从 Content 选项卡。
  2. 悬停面板并打开 More > Settings。设置 Title 为 "Starter"，保持 Type：DXPR 并点击 Save.
  3. 点击 + 在面板上并选择 Button。设置 Title 为 "Choose plan"， Link 为 /signup 和 Type 为 Primary。打开 Block button 以便它填满列，然后点击 Save.
  4. 点击 + 在面板上再次并选择 Text；它落在按钮上方。输入价格为 Heading 2，逐行添加功能并点击 Save。

第 3 步：构建其他方案

  1. 在第二列为 “Professional” 重复第 2 步。在面板的 Style 面板选择紫色 Background，并设置按钮的 Type 为 Success，以便方案脱颖而出。
  2. 在第三列为 “Enterprise” 重复第 2 步，价格为 “Custom pricing”。

提示

中间列吸引目光。将最想卖的方案放那里。

第 4 步：添加标题

  1. 点击 + 在版块上并选择 Text；它落在行上方。
  2. 输入 "Choose your plan" 为 Heading 2，添加一行如 "Simple monthly pricing. Cancel any time." 并点击 Save.

第 5 步：保存并预览

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

进一步了解

视频中未展示：

  • 四个方案：选择 1/4 + 1/4 + 1/4 + 1/4 预设并构建第四列。
  • Most popular badge：在高亮面板顶部添加一个 Text 元素，将 "Most popular" 加粗。
  • 包年和包月：在行上方添加一行 Text，例如 "Monthly | Annual (save 20%)"。该行是静态的；实时切换需要 HTML 元素加您自己的脚本。
  • 功能对勾：在每个功能行前粘贴对勾，或添加一个 Icon 列表上方的元素。

您会看到的内容

"Choose your plan" 居中位于灰带上三个方案上方。每个面板在标题栏显示其名称、价格、三个功能和全宽 Choose plan 按钮。中间方案紫色突出，配绿色按钮。

如果您看不到如图所示的方案

  • 面板打开时没有设置对话框。 面板空白打开，无对话框。悬停面板并打开 More > Settings 以设置其 Title.
  • Primary 等面板 Type 不显示颜色。 您的主题不设置该面板类型的样式。保持 Type：DXPR 并选择一个 Background 在面板的 Style 面板，如第 3 步所示。
  • 按钮仅与其文本等宽。 Block button 关闭。打开每个按钮的设置并打开它。
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？