撰写案例研究.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里您分三部分介绍一个客户项目：挑战、方案和成果。结尾是七个横幅：照片首屏、带主要数字的概览、挑战、照片旁的方案、三个计数器、引言和行动号召。要在一页展示多个项目，请遵循 构建作品集图库。

本视频撰写代理为 Northwind Retail 的工作。

开始之前

  • 您的角色有 Edit with DXPR Builder 权限。
  • 媒体库为首屏保存宽照片，为交付物保存照片。
  • 页面在页面构建器中打开。新页面请前往 Content > Add content > Landing Page (/node/add/landing_page），然后点击 Save.
  • 新元素落在版块或列顶部。逆序添加列的元素，或之后拖拽到位。

第 1 步：添加首屏

  1. 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。悬停并打开 More > Settings.
  2. 在 HTML classes 选择 Align text center.
  3. 打开 Style 面板。在以下位置 Background image 点击 Select Image，勾选一张照片并点击 Insert selected。设置 Background style 为 Cover.
  4. 选择深蓝色 Background 和白色 Font color，然后点击 Save。照片加载时显示该颜色。
  5. 点击 + 在版块上并选择 Button。设置 Title 为 "Visit the site"，Link 到客户的网址，Type 为 Light 和 Size 为 Large，然后点击 Save.
  6. 点击 + 再次选择 Text；它落在按钮上方。输入客户名称为 Heading 2 及其下方的一行摘要。设置 Font color 为白色，在 Style 面板并点击 Save。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 构建 SEO 友好页面。

第 2 步：添加概览

  1. 悬停首屏并点击 Add Section Below。添加 Row 到新版块，点击其网格图标（Column layout），选择 2/3 + 1/3 预设并点击 Save.
  2. 点击 + 在宽列中并选择 Text。输入 "Overview" 为 Heading 2，添加摘要并点击 Save.
  3. 点击 + 在窄列中并选择 Text。输入指标标签 "More online orders"，并点击 Save.
  4. 点击 + 在窄列中再次并选择 Number counter；它落在标签上方。将 End 设为 32，Suffix 设为 %，Thousands separator 设为 Comma，Speed 设为 2500，然后点击 Save。

计数器本身没有标签字段；其下方的 Text 元素负责此事。

第 3 步：添加挑战

  1. 添加第三个版块，其中包含 Add Section Below。打开其 More > Settings，选择浅灰色 Background：Style 面板并点击 Save.
  2. 点击 + 在版块上并选择 Text。输入 "The challenge" 为 Heading 2，描述问题并点击 Save.

第 4 步：添加方案

  1. 添加第四个版块，然后添加一个 Row；它带有两个等宽列。
  2. 点击 + 在左列中并选择 Text。输入 "The solution" 为 Heading 2，描述您构建的内容并点击 Save.
  3. 点击 + 在右列中并选择 Image。点击 Select Image，勾选一张交付成果照片并点击 Insert selected。输入 Alt attribute：SEO 面板并点击 Save.

第 5 步：添加成果

  1. 添加第五个版块并打开其 More > Settings。选择 Align text center 在 HTML classes，然后深蓝色 Background 和白色 Font color：Style 面板。点击 Save.
  2. 点击 + 在版块上并选择 Row。点击其网格图标（Column layout），选择 1/3 + 1/3 + 1/3 预设并点击 Save.
  3. 在每列中，添加一个 Text 先标签，然后 Number counter 在其上方，如第 2 步所示：End 32，并将 Suffix %, End 2，并将 Suffix s，并 End 15000.

第 6 步：添加引言

  1. 添加第六个版块。
  2. 点击 + 在版块上并选择 Block quote。输入客户的话，填写 Cite 带其姓名和角色，并点击 Save.

第 7 步：添加行动号召

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

第 8 步：保存并预览

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

您会看到的内容

客户名称和 Visit the site 按钮在照片上居中。概览在其摘要旁显示 32%；访客滚动查看时可看到数字增长。挑战部分在灰色横带上，解决方案在其照片旁边。

深蓝色横幅上三个结果随滚动进入视野递增：32%、2s 和 15,000。客户引言和紫色 Contact us 横幅收尾。

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

  • 首屏照片未填满版块。 Background style 仍处于打开状态 Theme defaults。打开版块的 Style 面板并将其设为 Cover.
  • 最后一个计数器显示 15000 无逗号。 Thousands separator 仍处于打开状态 None。打开计数器的设置并选择 Comma.
  • 标签位于其计数器上方。 计数器在其标签之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将标签拖到计数器下方。
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？