创建服务页面.

学习 DXPR Builder搭建页面跟着教程做

这里构建列出所提供内容的页面。含有页头、三个带图标的服务、照片旁详细介绍的一项服务、客户徽标和行动号召。销售多项服务时使用。关于一项优惠的页面，请遵循 构建营销落地页。

本视频构建数字代理的服务页面。

开始之前

  • 您的角色有 Edit with DXPR Builder 权限。
  • 媒体库为详细介绍的服务保存照片和四个客户徽标。
  • 页面在页面构建器中打开。新页面请前往 Content > Add content > Landing Page (/node/add/landing_page），然后点击 Save.
  • 在 DXPR CMS 上，在本页隐藏主题页面标题：在其编辑表单中，打开 DXPR Theme Settings 并勾选 DXPR Hide Regions 下的 Page Title。Jumbotron Title 随后是页面唯一的 Heading 1，因为 构建 SEO 友好页面 解释。
  • 新元素落在版块或列顶部。逆序添加列的元素，或之后拖拽到位。

第 1 步：添加页头

  1. 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。悬停，打开 More > Settings，选择深蓝色 Background：Style 面板并点击 Save.
  2. 点击 + 在版块上并选择 Jumbotron 从 Content 选项卡。
  3. 设置 Title 为 "Our services"，Lead 为关于所提供内容的一行和 Type 为 Primary，然后点击 Save.

第 2 步：添加服务概览

  1. 悬停版块并点击 Add Section Below。给新版块 Align text center 类。
  2. 点击 + 在版块上并选择 Row。点击其网格图标（Column layout），选择 1/3 + 1/3 + 1/3 预设并点击 Save.
  3. 点击 + 在第一列中并选择 Text。输入 "Design" 为 Heading 3，添加一行并点击 Save.
  4. 点击 + 在同一列中并选择 Icon；它落在文本上方。选择 Font Awesome Free Solid 设置，搜索 palette 并点击图标。设置 Size 为 Very Large (3x)，打开 Icon utilities，设置 Style 为 Circle 并点击 Save.
  5. 针对 “Development” 重复，带 code 和 "Marketing" 带 bullhorn.

第 3 步：详细介绍一项服务

  1. 用 Add Section Below 添加第三个版块，然后添加一个 Row；它带有两个等宽列。
  2. 点击 + 在左列中并选择 Image。点击 Select Image，勾选一张照片并点击 Insert selected。输入 Alt attribute：SEO 面板并点击 Save.
  3. 点击 + 在右列中并选择 Button。设置 Title 为 "Get a quote"， Link 为 /contact 和 Type 为 Primary，然后点击 Save.
  4. 点击 + 在右列中再次并选择 Text；它落在按钮上方。输入 "Design" 为 Heading 2，添加描述和包含内容，并点击 Save.

第 4 步：添加客户徽标

  1. 添加第四个版块并打开其 More > Settings。选择 Align text center 在 HTML classes 和浅灰色 Background：Style 面板。点击 Save.
  2. 点击 + 在版块上并选择 Marquee。通过以下方式移除三张示例图像 × 在每张上。点击 Select Image，搜索您的徽标，勾选其中四个并点击 Insert selected。打开 Gray scale 并点击 Save.
  3. 点击 + 在版块上再次并选择 Text；它落在跑马灯上方。输入 "Trusted by leading brands" 为 Heading 2 并点击 Save.

第 5 步：添加行动号召

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

第 6 步：保存并预览

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

进一步了解

视频中未展示：

  • 每项服务一个详情版块：为 Development 和 Marketing 重复第 3 步。打开 Mirror row 在每隔一行的设置中，以便照片在平板和桌面上交替两侧。
  • 跳转链接：设置每个详情版块的 HTML ID (design, development, marketing）。添加一个 Button 在每个概览文本下，用 Link #design 等。
  • Testimonials：添加一个 Block quote 每家客户在徽标上方。

您会看到的内容

深蓝色横幅开启页面，"Our services" 以大号白色字显示在一行摘要上。随后三个居中服务，每个是名称和行上方的圆圈图标。Design 拥有自己的横幅，含照片、描述和 Get a quote。灰色客户徽标在浅色横幅上滚动，紫色横幅结束页面。

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

  • 跑马灯仍显示示例徽标。 三个示例图像保留到您移除。打开跑马灯的设置，点击 × 在每张示例图像上并保存。
  • 徽标为彩色。 Gray scale 关闭。打开跑马灯的设置，打开它并点击 Save.
  • 图标没有圆圈。 Style 位于 Icon utilities 面板，而非 General。打开图标的设置，打开 Icon utilities 并设置 Style 为 Circle.
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？