---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
title: '构建营销落地页 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:24:50+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里为一个优惠构建落地页：带照片的首屏，含 Request a demo 按钮、三个带图标的功能、两条推荐和结尾行动号召。适用于目标单一的营销或产品页面。要在一页滚动网站中呈现全部内容，请遵循 创建单页滚动网站。
  本视频为名为 Insight 的分析产品构建页面。
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: |-
        这里为一个优惠构建落地页：带照片的首屏，含 Request a demo 按钮、三个带图标的功能、两条推荐和结尾行动号召。适用于目标单一的营销或产品页面。要在一页滚动网站中呈现全部内容，请遵循 创建单页滚动网站。
        本视频为名为 Insight 的分析产品构建页面。
      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: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/marketing-landing'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
      description: |-
        这里为一个优惠构建落地页：带照片的首屏，含 Request a demo 按钮、三个带图标的功能、两条推荐和结尾行动号召。适用于目标单一的营销或产品页面。要在一页滚动网站中呈现全部内容，请遵循 创建单页滚动网站。
        本视频为名为 Insight 的分析产品构建页面。
      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/hero-section)
- [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

这里为一个优惠构建落地页：带照片的首屏，含 **Request a demo** 按钮、三个带图标的功能、两条推荐和结尾行动号召。适用于目标单一的营销或产品页面。要在一页滚动网站中呈现全部内容，请遵循 [创建单页滚动网站](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/one-page-website)。

本视频为名为 Insight 的分析产品构建页面。

  ## 开始之前

- 您的角色有 **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** 为 "Request a demo"， **Link** 为 `/demo`, **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**。给新版块 **Align text center** 类。
2. 点击 **+** 在版块上并选择 **Row**。点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**.
3. 点击 **+** 在第一列中并选择 **Text**。输入功能名称作为 **Heading 3**，添加一行并点击 **Save**.
4. 点击 **+** 在同一列中并选择 **Icon**；它落在文本上方。选择 **Font Awesome Free Solid** 设置，搜索 `bolt` 并点击图标。设置 **Size** 为 **Very Large (3x)**，打开 **Icon utilities**，设置 **Style** 为 **Circle** 并点击 **Save**.
5. 对第二列重复，带 `chart-line` 和第三个 `shield`.

## 第 3 步：添加推荐

1. 添加第三个版块，其中包含 **Add Section Below**。打开其 **More** > **Settings**，选择浅灰色 **Background**：**Style** 面板并点击 **Save**.
2. 点击 **+** 在版块上并选择 **Row**；它带有两个等宽列。
3. 点击 **+** 在每列中并选择 **Block quote**。输入引言，填写 **Cite** 带人名和角色，并点击 **Save**.

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

1. 添加第四个版块并打开其 **More** > **Settings**。选择 **Align text center** 在 **HTML classes**，然后紫色 **Background** 和白色 **Font color**：**Style** 面板。点击 **Save**.
2. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Book a walkthrough"， **Link** 为 `/demo`, **Type** 为 **Light** 和 **Size** 为 **Large**，然后点击 **Save**.
3. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "See Insight on your own data" 为 **Heading 2** 并添加一行。设置 **Font color** 为白色并点击 **Save**.

## 第 5 步：保存并预览

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

## 进一步了解

视频中未展示：

- **潜在客户表单**：从 **Drupal Blocks** 选项卡插入 webform 区块，代替最后一个按钮；参见 [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **更暗的照片**：在首屏的 **Background effects** 面板设置 **Background effect** 为 **Gradient**。选择与以下内容相同的深色，约 60% 不透明度 **Start color** 和 **End color**
- **Taller hero**：在以下位置为首屏版块设置上下各 100 像素的内边距 **Style** 面板
- **从模板开始**：在空白页面上，点击 **Choose a template** 并选择落地页布局；参见 [Page templates](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)

## 您会看到的内容

标题、副标题和 **Request a demo** 按钮在照片上白色居中显示。随后三个功能，每个是短标题和文字上方的圆圈图标。两条引言在灰色横幅上并排，紫色横幅以下列内容收尾 **Book a walkthrough**.

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

- **图标没有圆圈。** **Style** 位于 **Icon utilities** 面板，而非 **General**。打开图标的设置，打开 **Icon utilities** 并设置 **Style** 为 **Circle**.
- **首屏照片未填满版块。** **Background style** 仍处于打开状态 **Theme defaults**。打开版块的 **Style** 面板并将其设为 **Cover**.
- **图标位于其功能文本下方。** 图标在文本之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将图标拖到文本上方。
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [首屏版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 用于全高和视差首屏选项
- [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms) 以添加注册表单
- [A/B testing](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview) 以测试页面的两个版本