创建联系页面.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里构建联系页面：地址地图、三种带图标的联系方式和联系表单。用于菜单链接为 "Contact" 的页面。仅在另一页面内放表单，请遵循 向页面添加表单。

本视频构建市议会的联系页面。

开始之前

  • 您的角色有 Edit with DXPR Builder 权限。
  • 联系表单以区块存在，例如用 Webform 模块制作的开放网络表单。
  • 页面在页面构建器中打开。新页面请前往 Content > Add content > Landing Page (/node/add/landing_page），然后点击 Save.
  • 新元素落在版块或列顶部。逆序添加列的元素，或之后拖拽到位。

第 1 步：添加地图

  1. 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。
  2. 点击 + 在版块上并选择 Map 从 Content 选项卡。
  3. 输入您的 Address，设置 Map height 为 400 并点击 Save.

地图嵌入以地址为中心的 Google Maps。

第 2 步：添加联系详情

  1. 悬停版块并点击 Add Section Below。打开新版块的 More > Settings，选择 Align text center 在 HTML classes，然后浅灰色 Background：Style 面板。点击 Save.
  2. 点击 + 在版块上并选择 Row；它带有两个等宽列。点击其网格图标（Column layout），选择 1/3 + 1/3 + 1/3 预设并点击 Save.
  3. 点击 + 在第一列中并选择 Text。输入 "Visit us" 为 Heading 3，添加地址和营业时间，并点击 Save.
  4. 点击 + 在同一列中并选择 Icon；它落在文本上方。选择 Font Awesome Free Solid 设置，搜索 location-dot 并点击图标。设置 Size 为 Extra Large (2x) 并点击 Save.
  5. 在第二列用 “Call us” 和 phone 图标重复，第三列用 "Email us" 和 envelope 图标。

选择相同的 Size 为三个图标统一设置，以便行对齐。

第 3 步：添加表单

  1. 添加第三个版块，其中包含 Add Section Below 并为其提供 Align text center 类。
  2. 点击 + 在版块上并打开 Drupal Blocks 选项卡。
  3. 选择联系表单的区块并在其设置对话框中点击 Save；表单出现在版块中。
  4. 点击 + 在版块上再次并选择 Text；它落在表单上方。输入 "Send us a message" 为 Heading 2，添加一行并点击 Save.

表单制作于 Structure > Contact forms (/admin/structure/contact） 在 Drupal 核心中没有对应区块。贡献模块 Contact Block 增加了一个 Contact block 到同一选项卡。

第 4 步：保存并预览

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

进一步了解

视频中未展示：

  • Tap to call：选择文本中的电话号码，点击工具栏上的链接按钮并输入 tel:+31104001234
  • 点击发邮件：选择地址并将其链接到 mailto:info@example.com
  • 任何区块：Drupal Blocks 选项卡嵌入网站上的区块，如搜索表单、订阅注册和自定义区块

您会看到的内容

400 像素的地址地图填满页面顶部。下方灰带显示三个居中列，每列有图标、标题和您的详情。表单在居中的 "Send us a message" 标题下结束页面。

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

  • 地图显示错误位置。 Google Maps 按输入搜索地址。添加邮编、城市和国家到 Address 并再次保存。
  • 您的表单不在 Drupal Blocks 选项卡中。 页面构建器仅列出开放的网络表单，核心联系表单需要 Contact Block 模块。将网络表单的状态设为 Open：Structure > Webforms (/admin/structure/webform)。
  • 图标大小不同。 每个图标保留自己的 Size。打开每个图标的设置并选择同一个。
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？