---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/case-study'
title: '撰写案例研究 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:23:51+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里您分三部分介绍一个客户项目：挑战、方案和成果。结尾是七个横幅：照片首屏、带主要数字的概览、挑战、照片旁的方案、三个计数器、引言和行动号召。要在一页展示多个项目，请遵循 构建作品集图库。
  本视频撰写代理为 Northwind Retail 的工作。
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: |-
        这里您分三部分介绍一个客户项目：挑战、方案和成果。结尾是七个横幅：照片首屏、带主要数字的概览、挑战、照片旁的方案、三个计数器、引言和行动号召。要在一页展示多个项目，请遵循 构建作品集图库。
        本视频撰写代理为 Northwind Retail 的工作。
      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:51+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/case-study'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/case-study'
      description: |-
        这里您分三部分介绍一个客户项目：挑战、方案和成果。结尾是七个横幅：照片首屏、带主要数字的概览、挑战、照片旁的方案、三个计数器、引言和行动号召。要在一页展示多个项目，请遵循 构建作品集图库。
        本视频撰写代理为 Northwind Retail 的工作。
      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

- [Blockquote](/hc/documentation/learn-dxpr-builder/elements/blockquote)
- [Number Counter](/hc/documentation/learn-dxpr-builder/elements/number-counter)
- [构建作品集画廊](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

这里您分三部分介绍一个客户项目：挑战、方案和成果。结尾是七个横幅：照片首屏、带主要数字的概览、挑战、照片旁的方案、三个计数器、引言和行动号召。要在一页展示多个项目，请遵循 [构建作品集图库](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)。

本视频撰写代理为 Northwind Retail 的工作。

  ## 开始之前

- 您的角色有 **Edit with DXPR Builder** 权限。
- 媒体库为首屏保存宽照片，为交付物保存照片。
- 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**.
- 新元素落在版块或列顶部。逆序添加列的元素，或之后拖拽到位。

## 第 1 步：添加首屏

1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。悬停并打开 **More** > **Settings**.
2. 在 **HTML classes** 选择 **Align text center**.
3. 打开 **Style** 面板。在以下位置 **Background image** 点击 **Select Image**，勾选一张照片并点击 **Insert selected**。设置 **Background style** 为 **Cover**.
4. 选择深蓝色 **Background** 和白色 **Font color**，然后点击 **Save**。照片加载时显示该颜色。
5. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Visit the site"，**Link** 到客户的网址，**Type** 为 **Light** 和 **Size** 为 **Large**，然后点击 **Save**.
6. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入客户名称为 **Heading 2** 及其下方的一行摘要。设置 **Font color** 为白色，在 **Style** 面板并点击 **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**。添加 **Row** 到新版块，点击其网格图标（**Column layout**），选择 **2/3 + 1/3** 预设并点击 **Save**.
2. 点击 **+** 在宽列中并选择 **Text**。输入 "Overview" 为 **Heading 2**，添加摘要并点击 **Save**.
3. 点击 **+** 在窄列中并选择 **Text**。输入指标标签 "More online orders"，并点击 **Save**.
4. 点击 **+** 在窄列中再次并选择 **Number counter**；它落在标签上方。将 **End** 设为 32，**Suffix** 设为 %，**Thousands separator** 设为 **Comma**，**Speed** 设为 2500，然后点击 **Save**。

计数器本身没有标签字段；其下方的 Text 元素负责此事。

## 第 3 步：添加挑战

1. 添加第三个版块，其中包含 **Add Section Below**。打开其 **More** > **Settings**，选择浅灰色 **Background**：**Style** 面板并点击 **Save**.
2. 点击 **+** 在版块上并选择 **Text**。输入 "The challenge" 为 **Heading 2**，描述问题并点击 **Save**.

## 第 4 步：添加方案

1. 添加第四个版块，然后添加一个 **Row**；它带有两个等宽列。
2. 点击 **+** 在左列中并选择 **Text**。输入 "The solution" 为 **Heading 2**，描述您构建的内容并点击 **Save**.
3. 点击 **+** 在右列中并选择 **Image**。点击 **Select Image**，勾选一张交付成果照片并点击 **Insert selected**。输入 **Alt attribute**：**SEO** 面板并点击 **Save**.

## 第 5 步：添加成果

1. 添加第五个版块并打开其 **More** > **Settings**。选择 **Align text center** 在 **HTML classes**，然后深蓝色 **Background** 和白色 **Font color**：**Style** 面板。点击 **Save**.
2. 点击 **+** 在版块上并选择 **Row**。点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**.
3. 在每列中，添加一个 **Text** 先标签，然后 **Number counter** 在其上方，如第 2 步所示：**End** 32，并将 **Suffix** %, **End** 2，并将 **Suffix** s，并 **End** 15000.

## 第 6 步：添加引言

1. 添加第六个版块。
2. 点击 **+** 在版块上并选择 **Block quote**。输入客户的话，填写 **Cite** 带其姓名和角色，并点击 **Save**.

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

1. 添加第七个版块并打开其 **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**；它落在按钮上方。输入 "Ready to get started?" 为 **Heading 2** 并添加一行。设置 **Font color** 为白色并点击 **Save**.

## 第 8 步：保存并预览

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

## 您会看到的内容

客户名称和 **Visit the site** 按钮在照片上居中。概览在其摘要旁显示 32%；访客滚动查看时可看到数字增长。挑战部分在灰色横带上，解决方案在其照片旁边。

深蓝色横幅上三个结果随滚动进入视野递增：32%、2s 和 15,000。客户引言和紫色 **Contact us** 横幅收尾。

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

- **首屏照片未填满版块。** **Background style** 仍处于打开状态 **Theme defaults**。打开版块的 **Style** 面板并将其设为 **Cover**.
- **最后一个计数器显示 15000 无逗号。** **Thousands separator** 仍处于打开状态 **None**。打开计数器的设置并选择 **Comma**.
- **标签位于其计数器上方。** 计数器在其标签之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将标签拖到计数器下方。
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [引用块元素](/hc/documentation/learn-dxpr-builder/elements/blockquote) 用于推荐样式选项
- [数字计数器元素](/hc/documentation/learn-dxpr-builder/elements/number-counter) 用于每个计数器设置
- [Portfolio](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) 以在一页列出所有案例研究