构建营销落地页.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里为一个优惠构建落地页：带照片的首屏，含 Request a demo 按钮、三个带图标的功能、两条推荐和结尾行动号召。适用于目标单一的营销或产品页面。要在一页滚动网站中呈现全部内容，请遵循 创建单页滚动网站。

本视频为名为 Insight 的分析产品构建页面。

开始之前

  • 您的角色有 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 为 "Request a demo"， Link 为 /demo, Type 为 Light 和 Size 为 Large，然后点击 Save.
  6. 点击 + 再次选择 Text；它落在按钮上方。输入标题为 Heading 2 及其下方的副标题。设置 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. 点击 + 在第一列中并选择 Text。输入功能名称作为 Heading 3，添加一行并点击 Save.
  4. 点击 + 在同一列中并选择 Icon；它落在文本上方。选择 Font Awesome Free Solid 设置，搜索 bolt 并点击图标。设置 Size 为 Very Large (3x)，打开 Icon utilities，设置 Style 为 Circle 并点击 Save.
  5. 对第二列重复，带 chart-line 和第三个 shield.

第 3 步：添加推荐

  1. 添加第三个版块，其中包含 Add Section Below。打开其 More > Settings，选择浅灰色 Background：Style 面板并点击 Save.
  2. 点击 + 在版块上并选择 Row；它带有两个等宽列。
  3. 点击 + 在每列中并选择 Block quote。输入引言，填写 Cite 带人名和角色，并点击 Save.

第 4 步：添加行动号召

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

第 5 步：保存并预览

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

进一步了解

视频中未展示：

  • 潜在客户表单：从 Drupal Blocks 选项卡插入 webform 区块，代替最后一个按钮；参见 向页面添加表单
  • 更暗的照片：在首屏的 Background effects 面板设置 Background effect 为 Gradient。选择与以下内容相同的深色，约 60% 不透明度 Start color 和 End color
  • Taller hero：在以下位置为首屏版块设置上下各 100 像素的内边距 Style 面板
  • 从模板开始：在空白页面上，点击 Choose a template 并选择落地页布局；参见 Page templates

您会看到的内容

标题、副标题和 Request a demo 按钮在照片上白色居中显示。随后三个功能，每个是短标题和文字上方的圆圈图标。两条引言在灰色横幅上并排，紫色横幅以下列内容收尾 Book a walkthrough.

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

  • 图标没有圆圈。 Style 位于 Icon utilities 面板，而非 General。打开图标的设置，打开 Icon utilities 并设置 Style 为 Circle.
  • 首屏照片未填满版块。 Background style 仍处于打开状态 Theme defaults。打开版块的 Style 面板并将其设为 Cover.
  • 图标位于其功能文本下方。 图标在文本之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将图标拖到文本上方。
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？