构建活动页面.

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

这里为一个活动构建页面。含带日期的照片首屏和 Register now 按钮，地图旁的详情、演讲者卡片和注册横幅。适用于开放日、演讲和网络研讨会。要在一页滚动网站中呈现全部内容，请遵循 创建单页滚动网站。

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

开始之前

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

第 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 时间、场次和演讲者的按钮
  • 页面上的注册：参见 向页面添加表单

您会看到的内容

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

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

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

接下来做什么？