---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
title: '设计首屏版块 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:24: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:24: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/hero-section'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      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/marketing-landing)
- [添加版块](/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections)
- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

这里构建铺满屏幕的首屏：背景照片、标题、一行支持文字和按钮，照片随访客滚动比页面慢。用于任何页面顶部。围绕它构建整页，请遵循 [构建营销落地页](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 接下来。

本视频构建报告产品的首屏。

  ## 开始之前

- 您的角色有 **Edit with DXPR Builder** 权限。
- 媒体库保存宽照片，至少 1920 像素宽。
- 页面在页面构建器中打开。新页面请前往 **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. 打开 **100% height**，使首屏填满屏幕，并打开 **Vertical centering** 使内容居中。
4. 打开 **Style** 面板。在以下位置 **Background image** 点击 **Select Image**，勾选一张宽幅照片并点击 **Insert selected**.
5. 设置 **Background style** 为 **Cover** 以便照片填满版块。
6. 选择深色 **Background** 颜色，照片加载时显示。设置 **Font color** 为白色，然后点击 **Save**.

**提示**

将照片压缩到 500 KB 以下，以便首屏快速加载。

## 第 2 步：添加按钮

1. 点击 **+** 在版块上并选择 **Button** 从 **Content** 选项卡。
2. 设置 **Title** 为 "Start free trial"， **Link** 为 `/trial`, **Type** 为 **Light** 在照片上形成对比，以及 **Size** 为 **Large**，然后点击 **Save**.

## 第 3 步：添加标题

1. 点击 **+** 在版块上再次并选择 **Text** 从 **Content** 选项卡。它落在按钮上方，因为新元素落在顶部。
2. 输入您的标题 "Reporting that keeps up with your team"，并选择 **Heading 2** 从标题下拉菜单。主题将页面标题打印为页面的 Heading 1。要将此标题改为 Heading 1，请参见 [构建 SEO 友好页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)。
3. 添加一行支持文字："Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required"。
4. 在 **Style** 面板设置 **Font color** 为白色，然后点击 **Save**.

## 第 4 步：添加视差

1. 悬停版块并打开 **More** > **Settings** 再次。
2. 打开 **Background effects** 面板并设置 **Background effect** 为 **Parallax image**. **Parallax speed** 起始值为 20；将其拖到 35 以增强效果，然后点击 **Save**。

## 第 5 步：在首屏下方添加内容

1. 悬停首屏并点击 **Add Section Below**，以便页面有内容可滚动。
2. 点击 **+** 在新版块上并选择 **Text** 从 **Content** 选项卡。输入标题和短段落，将第一行设为 **Heading 2** 并点击 **Save**.

## 第 6 步：保存并预览

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

## 进一步了解

视频中未展示：

- **叠加**：设置 **Background effect** 为 **Gradient** 并选择深色 **Start color** 和 **End color** 约 50% 不透明度。文本在任何照片上都清晰可读。该效果只能取一个值，因此叠加会替换视差。
- **较矮首屏**：切换 **100% height** 关闭，并为版块设置自己的上下内边距，位置为 **Style** 面板，例如 100 像素。
- **Wide button**：打开 **Block button** 按钮与其列等宽。

## 变体

视频中搭建方式的替代方案：

### 视频背景首屏

1. 在 **Background effects** 面板，设置 **Background effect** 为 **YouTube video**.
2. 粘贴视频网址到以下位置 **YouTube video URL**.
3. 在 **Video options** 下，勾选 **Loop** 和 **Disable on mobile devices**；audio 保持关闭。

### 纯渐变首屏

跳过背景图像并使用 **Gradient** 双品牌纯色效果，首屏加载快。

### 分栏首屏

1. 在版块内添加一个 **Row**；它带有两个等宽列。
2. 将文本和按钮放在左列，图像放在右列。

## 您会看到的内容

照片铺满屏幕，含您的标题、支持行和 **Start free trial** 按钮白色居中置顶。向下滚动到第二个版块时，照片移动比页面慢。

## 如果您看不到如图所示的首屏

- **首屏仅与其文本等高。** **100% height** 关闭。在版块设置中打开它并点击 **Save**.
- **滚动时照片保持不动。** **Background effect** 仍处于打开状态 **Simple image**, **Parallax speed** 为 0，或首屏下方无内容可滚动。设置 **Parallax image**，拖拽 **Parallax speed** 大于 0，并添加第 5 步的第二个版块。
- **标题在照片上保持深色。** Text 元素没有 **Font color** 自己的。打开其 **Style** 面板并设置 **Font color** 为白色。

## 接下来做什么？

- [Landing page](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 围绕首屏构建完整页面
- [版块](/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections) 用于版块的布局选项
- [样式选项卡参考](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) 用于所有样式选项