---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/services-page'
title: '创建服务页面 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:25:43+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里构建列出所提供内容的页面。含有页头、三个带图标的服务、照片旁详细介绍的一项服务、客户徽标和行动号召。销售多项服务时使用。关于一项优惠的页面，请遵循 构建营销落地页。
  本视频构建数字代理的服务页面。
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 创建服务页面
      description: |-
        这里构建列出所提供内容的页面。含有页头、三个带图标的服务、照片旁详细介绍的一项服务、客户徽标和行动号召。销售多项服务时使用。关于一项优惠的页面，请遵循 构建营销落地页。
        本视频构建数字代理的服务页面。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:25:43+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/services-page'
      articleSection: 跟着教程做
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/services-page'
      description: |-
        这里构建列出所提供内容的页面。含有页头、三个带图标的服务、照片旁详细介绍的一项服务、客户徽标和行动号召。销售多项服务时使用。关于一项优惠的页面，请遵循 构建营销落地页。
        本视频构建数字代理的服务页面。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[跟着教程做](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/overview) # 创建服务页面.

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

   ## 本指南内容

 相关指南

- [构建营销落地页](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [添加图标](/zh-hans/hc/documentation/learn-dxpr-builder/elements/icon)
- [添加跑马灯](/zh-hans/hc/documentation/learn-dxpr-builder/elements/marquee)

这里构建列出所提供内容的页面。含有页头、三个带图标的服务、照片旁详细介绍的一项服务、客户徽标和行动号召。销售多项服务时使用。关于一项优惠的页面，请遵循 [构建营销落地页](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)。

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

  ## 开始之前

- 您的角色有 **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 友好页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2) 解释。
- 新元素落在版块或列顶部。逆序添加列的元素，或之后拖拽到位。

## 第 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 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [Landing page](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 用于每项服务的专属页面
- [图标元素](/zh-hans/hc/documentation/learn-dxpr-builder/elements/icon) 用于尺寸和样式
- [Marquee 元素](/zh-hans/hc/documentation/learn-dxpr-builder/elements/marquee) 用于徽标横幅设置