---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/event-page'
title: '构建活动页面 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:24:13+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里为一个活动构建页面。含带日期的照片首屏和 Register now 按钮，地图旁的详情、演讲者卡片和注册横幅。适用于开放日、演讲和网络研讨会。要在一页滚动网站中呈现全部内容，请遵循 创建单页滚动网站。
  本视频为大学开放日构建页面。
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 构建活动页面
      description: |-
        这里为一个活动构建页面。含带日期的照片首屏和 Register now 按钮，地图旁的详情、演讲者卡片和注册横幅。适用于开放日、演讲和网络研讨会。要在一页滚动网站中呈现全部内容，请遵循 创建单页滚动网站。
        本视频为大学开放日构建页面。
      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:13+0000'
      dateModified: '2026-10-24T17:19:22+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/event-page'
      articleSection: 跟着教程做
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/event-page'
      description: |-
        这里为一个活动构建页面。含带日期的照片首屏和 Register now 按钮，地图旁的详情、演讲者卡片和注册横幅。适用于开放日、演讲和网络研讨会。要在一页滚动网站中呈现全部内容，请遵循 创建单页滚动网站。
        本视频为大学开放日构建页面。
      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
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[跟着教程做](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/overview) # 构建活动页面.

 学习 DXPR Builder搭建页面跟着教程做

   ## 本指南内容

 相关指南

- [添加地图](/zh-hans/hc/documentation/learn-dxpr-builder/elements/map)
- [添加卡片](/zh-hans/hc/documentation/learn-dxpr-builder/elements/card)
- [设计首屏版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section)

这里为一个活动构建页面。含带日期的照片首屏和 **Register now** 按钮，地图旁的详情、演讲者卡片和注册横幅。适用于开放日、演讲和网络研讨会。要在一页滚动网站中呈现全部内容，请遵循 [创建单页滚动网站](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/one-page-website)。

本视频为大学开放日构建页面。

  ## 开始之前

- 您的角色有 **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** 为 "Register now"，**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**；它的两个等宽列正是您需要的分栏。
2. 点击 **+** 在左列中并选择 **Text**。输入 "Event details" 为 **Heading 2**，分别为日期、场地和联系方式各添加一行，并点击 **Save**.
3. 点击 **+** 在右列中并选择 **Map**。输入场地 **Address**，设置 **Map height** 为 320 并点击 **Save**.

## 第 3 步：添加演讲者

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 步：添加注册行动号召

1. 添加第四个版块并打开其 **More** > **Settings**。选择 **Align text center** 在 **HTML classes**，然后紫色 **Background** 和白色 **Font color**：**Style** 面板。点击 **Save**.
2. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Sign up"，**Link** 到注册页面，**Type** 为 **Light** 和 **Size** 为 **Large**，然后点击 **Save**.
3. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "Register today" as **Heading 2** 并添加一行。设置 **Font color** 为白色并点击 **Save**.

## 第 5 步：保存并预览

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

## 进一步了解

视频中未展示：

- **演讲者照片**：点击 **+** 在卡片上并添加一个 **Text** 简介，然后点击 **+** 在卡片上再次并添加一个 **Image**；它落在文本上方
- **更暗的照片**：在首屏的 **Background effects** 面板设置 **Background effect** 为 **Gradient**。选择与以下内容相同的深色，约 60% 不透明度 **Start color** 和 **End color**
- **日程**：添加一个 **Text** 元素并通过以下方式插入表格 **Table** 时间、场次和演讲者的按钮
- **页面上的注册**：参见 [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

## 您会看到的内容

活动名称、日期和 **Register now** 按钮在照片上居中白色显示。下方详情占左半，场地地图占右半。三张演讲者卡片立于灰色横幅，紫色横幅以下列内容收尾 **Sign up**。

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

- **首屏照片未填满版块。** **Background style** 仍处于打开状态 **Theme defaults**。打开版块的 **Style** 面板并将其设为 **Cover**.
- **地图显示错误位置。** Google Maps 按输入搜索地址。在 **Address** 中添加邮编、城市和国家，然后再次保存。
- **添加后卡片不显示设置对话框。** 卡片空白打开，无对话框。悬停卡片并打开 **More** > **Settings** 以填写 **Header** 和 **Title**.
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [Map 元素](/zh-hans/hc/documentation/learn-dxpr-builder/elements/map) 用于地图设置
- [卡片元素](/zh-hans/hc/documentation/learn-dxpr-builder/elements/card) 用于卡片类型和子元素
- [首屏版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 用于更多首屏选项