构建团队目录.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里构建团队页面：居中页头、三张领导卡片（第三张下有 LinkedIn 链接）和四张团队卡片网格。每位同事都应易找时使用。公司页面上的简短团队版块，请遵循 创建关于我们页面。

本视频构建物流公司的团队页面。

开始之前

  • 您的角色有 Edit with DXPR Builder 权限。
  • 页面在页面构建器中打开。新页面请前往 Content > Add content > Landing Page (/node/add/landing_page），然后点击 Save.
  • 新元素落在版块或列顶部。因此社交链接在上方卡片之前放入。

第 1 步：添加页头

  1. 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。
  2. 悬停版块并打开 More > Settings。在以下位置的下方 HTML classes 选择 Align text center，然后点击 Save.
  3. 点击 + 在版块上并选择 Text 从 Content 选项卡。
  4. 输入 "Our team" 为 Heading 2，添加一行介绍并点击 Save。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 构建 SEO 友好页面。

第 2 步：添加领导卡片

  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. 添加一个 Card 以同样方式到第二列。
  5. 点击 + 在第三列中并选择 Social links。它带两个示例行到来。输入 linkedin 在第一行 “Facebook” 上悬停并在其旁边输入资料网址。移除带其 ×，设置 Style 为 Circle 和 Size 为 2x，然后点击 Save.
  6. 点击 + 在同一列中并选择 Card；它落在链接上方。以同样方式设置其 Header 和 Title，然后点击 Save。
  7. 点击 + 在版块上并选择 Text；它落在行上方。输入 "Leadership" as Heading 2 并点击 Save.

第 3 步：添加团队网格

  1. 添加第三个版块，其中包含 Add Section Below，然后一个 Row。点击其网格图标（Column layout），选择 1/4 + 1/4 + 1/4 + 1/4 预设并点击 Save.
  2. 添加一个 Card 到每列。打开其 More > Settings，将角色设为 Header 和名称作为 Title，并点击 Save.
  3. 点击 + 在版块上并选择 Text；它落在行上方。输入 "The team" as Heading 2 并点击 Save.

第 4 步：保存并预览

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

进一步了解

视频中未展示：

  • 照片和简介：点击 + 在卡片上并添加一个 Text 简介。然后点击 + 在卡片上再次并添加一个 Image；它落在文本上方。用人名填写 Alt attribute。
  • 圆角照片：在每张图像上，设置 Border radius：Style 面板。值以像素计，最大 100。
  • Lift on hover：在卡片的 Hover style 面板设置 Drop shadow 为 2。
  • 自动更新的团队：创建 "Team member" 内容类型和 Grid 带区块显示的视图。从以下位置插入视图 Drupal Views 选项卡，编辑人员无需触碰页面即可添加人员。

您会看到的内容

"Our team" 居中位于顶部。灰带上三张领导卡片在页头显示每个角色，名称在下，第三张下有圆形 LinkedIn 图标。"The team" 随后四张卡片并排。

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

  • 添加后卡片不显示设置对话框。 卡片空白打开，无对话框。悬停卡片并打开 More > Settings 以填写 Header 和 Title.
  • 社交链接显示 "No matching brand icon found"。 该品牌不是已知图标名。用小写输入，例如 linkedin.
  • LinkedIn 图标位于卡片上方。 卡片在链接之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将卡片拖到链接上方。
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？