---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
title: '构建团队目录 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:25:50+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里构建团队页面：居中页头、三张领导卡片（第三张下有 LinkedIn 链接）和四张团队卡片网格。每位同事都应易找时使用。公司页面上的简短团队版块，请遵循 创建关于我们页面。
  本视频构建物流公司的团队页面。
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: |-
        这里构建团队页面：居中页头、三张领导卡片（第三张下有 LinkedIn 链接）和四张团队卡片网格。每位同事都应易找时使用。公司页面上的简短团队版块，请遵循 创建关于我们页面。
        本视频构建物流公司的团队页面。
      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:50+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/team-directory'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
      description: |-
        这里构建团队页面：居中页头、三张领导卡片（第三张下有 LinkedIn 链接）和四张团队卡片网格。每位同事都应易找时使用。公司页面上的简短团队版块，请遵循 创建关于我们页面。
        本视频构建物流公司的团队页面。
      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/elements/card)
- [添加社交链接元素](/zh-hans/hc/documentation/learn-dxpr-builder/elements/social-links)
- [创建关于我们页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/about-page)

这里构建团队页面：居中页头、三张领导卡片（第三张下有 LinkedIn 链接）和四张团队卡片网格。每位同事都应易找时使用。公司页面上的简短团队版块，请遵循 [创建关于我们页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/about-page)。

本视频构建物流公司的团队页面。

  ## 开始之前

- 您的角色有 **Edit with DXPR Builder** 权限。
- 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**.
- 新元素落在版块或列顶部。因此社交链接在上方卡片之前放入。

## 第 1 步：添加页头

1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。
2. 悬停版块并打开 **More** > **Settings**。在以下位置的下方 **HTML classes** 选择 **Align text center**，然后点击 **Save**.
3. 点击 **+** 在版块上并选择 **Text** 从 **Content** 选项卡。
4. 输入 "Our team" 为 **Heading 2**，添加一行介绍并点击 **Save**。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 [构建 SEO 友好页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)。

## 第 2 步：添加领导卡片

1. 悬停版块并点击 **Add Section Below**。打开新版块的 **More** > **Settings**，选择浅灰色 **Background**：**Style** 面板并点击 **Save**.
2. 点击 **+** 在版块上并选择 **Row**。点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**.
3. 点击 **+** 在第一列中并选择 **Card**。打开其 **More** > **Settings**，设置 **Header** 到角色和 **Title** 到名称，然后点击 **Save**.
4. 添加一个 **Card** 以同样方式到第二列。
5. 点击 **+** 在第三列中并选择 **Social links**。它带两个示例行到来。输入 `linkedin` 在第一行 “Facebook” 上悬停并在其旁边输入资料网址。移除带其 **×**，设置 **Style** 为 **Circle** 和 **Size** 为 **2x**，然后点击 **Save**.
6. 点击 **+** 在同一列中并选择 **Card**；它落在链接上方。以同样方式设置其 **Header** 和 **Title**，然后点击 **Save**。
7. 点击 **+** 在版块上并选择 **Text**；它落在行上方。输入 "Leadership" as **Heading 2** 并点击 **Save**.

## 第 3 步：添加团队网格

1. 添加第三个版块，其中包含 **Add Section Below**，然后一个 **Row**。点击其网格图标（**Column layout**），选择 **1/4 + 1/4 + 1/4 + 1/4** 预设并点击 **Save**.
2. 添加一个 **Card** 到每列。打开其 **More** > **Settings**，将角色设为 **Header** 和名称作为 **Title**，并点击 **Save**.
3. 点击 **+** 在版块上并选择 **Text**；它落在行上方。输入 "The team" as **Heading 2** 并点击 **Save**.

## 第 4 步：保存并预览

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

## 进一步了解

视频中未展示：

- **照片和简介**：点击 **+** 在卡片上并添加一个 **Text** 简介。然后点击 **+** 在卡片上再次并添加一个 **Image**；它落在文本上方。用人名填写 **Alt attribute**。
- **圆角照片**：在每张图像上，设置 **Border radius**：**Style** 面板。值以像素计，最大 100。
- **Lift on hover**：在卡片的 **Hover style** 面板设置 **Drop shadow** 为 2。
- **自动更新的团队**：创建 "Team member" 内容类型和 **Grid** 带区块显示的视图。从以下位置插入视图 **Drupal Views** 选项卡，编辑人员无需触碰页面即可添加人员。

## 您会看到的内容

"Our team" 居中位于顶部。灰带上三张领导卡片在页头显示每个角色，名称在下，第三张下有圆形 LinkedIn 图标。"The team" 随后四张卡片并排。

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

- **添加后卡片不显示设置对话框。** 卡片空白打开，无对话框。悬停卡片并打开 **More** > **Settings** 以填写 **Header** 和 **Title**.
- **社交链接显示 "No matching brand icon found"。** 该品牌不是已知图标名。用小写输入，例如 `linkedin`.
- **LinkedIn 图标位于卡片上方。** 卡片在链接之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将卡片拖到链接上方。
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [卡片元素](/hc/documentation/learn-dxpr-builder/elements/card) 用于卡片类型和子元素
- [社交链接元素](/hc/documentation/learn-dxpr-builder/elements/social-links) 用于图标样式和颜色
- [关于页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/about-page) 以在公司页面放置较短的团队版块