---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/about-page'
title: '创建关于我们页面 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:23:28+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里您构建关于我们页面：使命标题、照片旁的故事、三个递增数字、团队卡片和结尾行动号召。当一页应向访客介绍您时使用它。要列出每位同事的页面，请遵循 构建团队名录。
  本视频为鹿特丹设计工作室构建页面。
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+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:23:28+0000'
      dateModified: '2026-10-24T09:09:48+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/about-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/about-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
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 创建关于我们页面.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [构建团队目录](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/team-directory)
- [Card](/hc/documentation/learn-dxpr-builder/elements/card)

这里您构建关于我们页面：使命标题、照片旁的故事、三个递增数字、团队卡片和结尾行动号召。当一页应向访客介绍您时使用它。要列出每位同事的页面，请遵循 [构建团队名录](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/team-directory)。

本视频为鹿特丹设计工作室构建页面。

  ## 开始之前

- 您的角色有 **Edit with DXPR Builder** 权限。
- 媒体库保存办公室、团队或产品的照片。
- 页面存在：前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），输入 "About Us" 为 **Title** 并点击 **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** 选项卡。
2. 悬停版块并打开 **More** > **Settings**。打开 **Style** 面板，选择深色 **Background** 色板并点击 **Save**.
3. 点击 **+** 在版块上并选择 **Jumbotron** 从 **Content** 选项卡。
4. 将使命声明输入为 **Title**："We build websites people enjoy using"。
5. 在 **Lead** 字段中输入支持句："A 24-person studio in Rotterdam working with brands across Europe since 2012"。
6. 设置 **Type** 为 **Primary** 在主色上显示白色文本，然后点击 **Save**.

## 第 2 步：讲述公司故事

1. 悬停版块并点击 **Add Section Below**，**+** 在其下。
2. 点击 **+** 在新版块上并选择 **Row**；它带有两个等宽列。 点击网格图标（**Column layout**），在行上选择 **2/3 + 1/3** 预设并点击 **Save**.
3. 点击 **+** 在更宽列中并选择 **Text**。输入 "Our story" 为 **Heading 2**，然后是两个短段落：如何起步以及项目如何运作。点击 **Save**.
4. 点击 **+** 在较窄列中并选择 **Image**.
5. 点击 **Select Image**，通过以下方式搜索媒体库 **Apply filters**，勾选一张办公室或团队照片并点击 **Insert selected**.
6. 打开 **SEO** 面板，填写 **Alt attribute** 并点击 **Save**.

**提示**

故事保持简短并用副标题分段。访客先浏览后阅读。

## 第 3 步：用计数器添加关键统计

1. 添加第三个版块，其中包含 **Add Section Below**。打开其 **More** > **Settings**，选择浅灰色 **Background**：**Style** 面板并点击 **Save**.
2. 点击 **+** 在版块上并选择 **Row**。点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**.
3. 在每列中，添加一个 **Text** 带统计标签的元素："Projects delivered"、"Years in business"、"Clients who return"。
4. 在每列中，点击 **+** 再次选择 **Number counter**；它落在标签上方。设置：
    - **End**：统计值（140、12、98）
    - **Suffix**：适用处 "+" 或 "%"
    - **Thousands separator**：**Comma**
    - **Speed**：2500，计数耗时毫秒数
5. 点击 **Save** 在每个计数器上。

计数器没有自己的标签字段，因此 Text 元素位于其下方。

## 第 4 步：构建团队版块

1. 添加第四个版块，其中包含 **Add Section Below**.
2. 点击 **+** 在版块上并选择 **Row**。点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**.
3. 在每列中，点击 **+** 并选择 **Card**。打开其 **More** > **Settings**，将 **Header** 设为人名（"Sofia Andersen"），**Title** 设为其角色（"Creative Director"），然后点击 **Save**。
4. 点击 **+** 在版块本身上并选择 **Text**；它落在卡片行上方。输入 "Meet the team" 为 **Heading 2**，将其居中并点击 **Save**。

## 第 5 步：添加结尾版块

1. 添加最后一个版块，其中包含 **Add Section Below** 并打开其 **More** > **Settings**。在以下位置的下方 **HTML classes** 选择 **Align text center**，以便文本和按钮一起居中。在 **Style** 面板选择品牌颜色作为 **Background** 和白色作为 **Font color**，然后点击 **Save**.
2. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Get in touch"， **Link** 为 `/contact`, **Type** 为 **Light** 和 **Size** 为 **Large**，然后点击 **Save**.
3. 点击 **+** 在版块上再次并选择 **Text**；它落在按钮上方。输入 "Want to work with us?" 为 **Heading 2**，然后 "We take on a handful of new clients each quarter." 在 **Style** 面板设置 **Font color** 为白色，然后点击 **Save**.

## 第 6 步：保存并预览

1. 点击 **Save** 在页面构建器工具栏上。
2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**.
3. 滚动页面检查每个版块。

## 进一步了解

视频中未展示，但值得添加：

- 个人简介 **Text** 和一张头像照 **Image** 每张卡片内，以及 **Social links** 其下方
- **100% height** 在填满屏幕的页头的第一节设置中

## 您会看到的内容

预览显示五个横幅。深色页头以白色显示使命声明及其导语。故事在照片旁。灰带上三个数字滚动进入视野时从零计数。

团队标题居中位于三张卡片上方，每张有名称和角色。结尾横幅在浅色 **Get in touch** 按钮。选择 **Edit** 在眼睛菜单中以继续工作。

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

- **空页面上没有 Add Elements 按钮。** 页面创建助手已关闭，因此页面仅提供 **Choose a template**。改为点击空白区域打开元素选择器。
- **新元素位于之前添加的元素上方。** 页面构建器将新元素插入其版块或列的顶部。用其控制栏上的拖动手柄拖到位置。
- **数字计数器或卡片在选择器中缺失。** 页面构建器用户资料隐藏它。请管理员在以下位置勾选 **Elements** ： **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`).
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [团队目录](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/team-directory) 用于专属团队页面
- [卡片元素](/hc/documentation/learn-dxpr-builder/elements/card) 用于卡片类型和子元素
- [元素](/hc/documentation/learn-dxpr-builder/elements) 查看完整元素参考