---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
title: '构建作品集画廊 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:25:13+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里构建作品集页面：居中标题、三个并排项目（封面照片和一行成果各一）和行动号召。一览展示工作并链接每个项目到其故事。深入撰写一个项目，请遵循 撰写案例研究。
  本视频构建名为 "Our work" 的代理页面。
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: |-
        这里构建作品集页面：居中标题、三个并排项目（封面照片和一行成果各一）和行动号召。一览展示工作并链接每个项目到其故事。深入撰写一个项目，请遵循 撰写案例研究。
        本视频构建名为 "Our work" 的代理页面。
      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:13+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/portfolio-gallery'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      description: |-
        这里构建作品集页面：居中标题、三个并排项目（封面照片和一行成果各一）和行动号召。一览展示工作并链接每个项目到其故事。深入撰写一个项目，请遵循 撰写案例研究。
        本视频构建名为 "Our work" 的代理页面。
      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

- [在页面上显示 Drupal 视图](/zh-hans/hc/documentation/learn-dxpr-builder/integrations/drupal-views)
- [撰写案例研究](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/case-study)
- [Image](/hc/documentation/learn-dxpr-builder/elements/image)

这里构建作品集页面：居中标题、三个并排项目（封面照片和一行成果各一）和行动号召。一览展示工作并链接每个项目到其故事。深入撰写一个项目，请遵循 [撰写案例研究](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/case-study)。

本视频构建名为 "Our work" 的代理页面。

  ## 开始之前

- 您的角色有 **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 work" 为 **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. 点击 **+** 在第一列中并选择 **Text**。输入项目名称作为 **Heading 3**，添加单行成果并点击 **Save**.
4. 点击 **+** 在同一列中并选择 **Image**；它落在文本上方。点击 **Select Image**，勾选封面照片并点击 **Insert selected**。在 **SEO** 面板输入 **Alt attribute** 并点击 **Save**。
5. 对第二和第三列重复。

## 第 3 步：添加行动号召

1. 添加第三个版块，其中包含 **Add Section Below** 并打开其 **More** > **Settings**。选择 **Align text center** 在 **HTML classes**，然后紫色 **Background** 和白色 **Font color**：**Style** 面板。点击 **Save**.
2. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Contact us"， **Link** 为 `/contact`, **Type** 为 **Light** 和 **Size** 为 **Large**，然后点击 **Save**.
3. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "Let's work together" 为 **Heading 2** 并添加一行。设置 **Font color** 为白色，在 **Style** 面板并点击 **Save**.

## 第 4 步：保存并预览

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

## 进一步了解

视频中未展示：

- **链接每个项目**：设置 **Image link** 在封面照片上到案例研究页面。
- **Lift on hover**：在每个图像的 **Style** 面板设置 **Border radius** 为 4 并 **Drop shadow** 为 1。在 **Hover style** 提高 **Drop shadow** 为 3。
- **更多项目**：添加另一个 **Row** 用同一预设在第一个下方。

## 使网格可过滤

静态网格适合少量项目。要让访客按类型过滤，将每个项目存储为内容并用带暴露过滤器的 View 显示。Views 是 Drupal 核心的一部分。

### 1. 创建 Portfolio 内容类型

1. 前往 **Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`).
2. 将其命名为 “Portfolio” 并保存。
3. 在 **Manage fields** 选项卡上，添加标记为 "Cover image" 的 **Image** 字段。
4. 添加一个标记为 "Project type" 的 **List (text)** 字段，值例如 `web|Web`, `branding|Branding` 和 `campaign|Campaign`.
5. 在以下位置创建几个 Portfolio 条目 **Content** > **Add content** > **Portfolio**.

### 2. 构建视图

1. 前往 **Structure** > **Views** > **Add view** (`/admin/structure/views/add`).
2. 将其命名为 "Portfolio grid"；在 **View settings** 下显示 **Content** 类型的 **Portfolio**。
3. 勾选 **Create a block**，将显示格式设为 **Grid**，类型 **fields** 并保存。
4. 在视图编辑器中，添加字段 **Cover image** 和 **Title**，并在其格式设置中将网格设为 3 列。
5. 在 **Filter criteria**，点击 **Add**，选择 **Project type** 并勾选 **Expose this filter to visitors**。将其标记为 "Filter by type"。
6. 在 **Advanced**，设置 **Use AJAX** 为 Yes。页面构建器页面中的暴露过滤器仅通过 AJAX 工作。
7. 保存视图。

### 3. 在页面中插入视图

1. 回到 DXPR Builder，清空三个静态列或添加新的 **Row**.
2. 点击 **+**，打开 **Drupal Views** 选项卡并选择 **View: Portfolio grid (Block)**.
3. 在设置对话框中，勾选 **Show exposed filters** 并点击 **Save**。网格在其上方渲染 "Filter by type" 下拉框，新 Portfolio 条目自动出现。
4. 点击 **Save** 在页面构建器工具栏上。

## 您会看到的内容

居中的 "Our work" 标题开启页面。下方灰带上三个项目并排，每个是封面照片加名称和成果。紫色横幅以 **Contact us** 结束页面。

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

- **封面照片位于其文本下方。** 照片在文本之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将照片拖到文本上方。
- **封面高度不同。** 其比例不同。裁剪为相同比例，重新上传并选择新副本。
- **Portfolio grid 不在 Drupal Views 选项卡中。** 该视图禁用，或页面构建器用户资料隐藏它。在以下位置启用 **Structure** > **Views**，或请管理员在以下位置勾选 **Views** 在您的用户资料中。
- **编辑器显示 "Turn on Ajax on this view to use exposed filters"。** 该视图不使用 AJAX。设置 **Use AJAX** 为 Yes（在视图编辑器的 **Advanced** 下）；参见 [元素显示或行为异常](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong)。
- **"Filter by type"下拉框缺失。** **Show exposed filters** 在元素上关闭。打开视图元素的设置，勾选并点击 **Save**.

## 接下来做什么？

- [Drupal Views 集成](/zh-hans/hc/documentation/learn-dxpr-builder/integrations/drupal-views) 了解视图显示如何进入元素选择器
- [客户案例](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/case-study) 用于每个项目链接到的页面
- [图像元素](/hc/documentation/learn-dxpr-builder/elements/image) 用于每个图像设置