设计首屏版块.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里构建铺满屏幕的首屏：背景照片、标题、一行支持文字和按钮，照片随访客滚动比页面慢。用于任何页面顶部。围绕它构建整页，请遵循 构建营销落地页 接下来。

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

开始之前

  • 您的角色有 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 友好页面。
  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 为白色。

接下来做什么？