构建作品集画廊.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里构建作品集页面：居中标题、三个并排项目（封面照片和一行成果各一）和行动号召。一览展示工作并链接每个项目到其故事。深入撰写一个项目，请遵循 撰写案例研究。

本视频构建名为 "Our work" 的代理页面。

开始之前

  • 您的角色有 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 work" 为 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. 点击 + 在第一列中并选择 Text。输入项目名称作为 Heading 3，添加单行成果并点击 Save.
  4. 点击 + 在同一列中并选择 Image；它落在文本上方。点击 Select Image，勾选封面照片并点击 Insert selected。在 SEO 面板输入 Alt attribute 并点击 Save。
  5. 对第二和第三列重复。

第 3 步：添加行动号召

  1. 添加第三个版块，其中包含 Add Section Below 并打开其 More > Settings。选择 Align text center 在 HTML classes，然后紫色 Background 和白色 Font color：Style 面板。点击 Save.
  2. 点击 + 在版块上并选择 Button。设置 Title 为 "Contact us"， Link 为 /contact, Type 为 Light 和 Size 为 Large，然后点击 Save.
  3. 点击 + 再次选择 Text；它落在按钮上方。输入 "Let's work together" 为 Heading 2 并添加一行。设置 Font color 为白色，在 Style 面板并点击 Save.

第 4 步：保存并预览

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

进一步了解

视频中未展示：

  • 链接每个项目：设置 Image link 在封面照片上到案例研究页面。
  • Lift on hover：在每个图像的 Style 面板设置 Border radius 为 4 并 Drop shadow 为 1。在 Hover style 提高 Drop shadow 为 3。
  • 更多项目：添加另一个 Row 用同一预设在第一个下方。

使网格可过滤

静态网格适合少量项目。要让访客按类型过滤，将每个项目存储为内容并用带暴露过滤器的 View 显示。Views 是 Drupal 核心的一部分。

1. 创建 Portfolio 内容类型

  1. 前往 Structure > Content types > Add content type (/admin/structure/types/add).
  2. 将其命名为 “Portfolio” 并保存。
  3. 在 Manage fields 选项卡上，添加标记为 "Cover image" 的 Image 字段。
  4. 添加一个标记为 "Project type" 的 List (text) 字段，值例如 web|Web, branding|Branding 和 campaign|Campaign.
  5. 在以下位置创建几个 Portfolio 条目 Content > Add content > Portfolio.

2. 构建视图

  1. 前往 Structure > Views > Add view (/admin/structure/views/add).
  2. 将其命名为 "Portfolio grid"；在 View settings 下显示 Content 类型的 Portfolio。
  3. 勾选 Create a block，将显示格式设为 Grid，类型 fields 并保存。
  4. 在视图编辑器中，添加字段 Cover image 和 Title，并在其格式设置中将网格设为 3 列。
  5. 在 Filter criteria，点击 Add，选择 Project type 并勾选 Expose this filter to visitors。将其标记为 "Filter by type"。
  6. 在 Advanced，设置 Use AJAX 为 Yes。页面构建器页面中的暴露过滤器仅通过 AJAX 工作。
  7. 保存视图。

3. 在页面中插入视图

  1. 回到 DXPR Builder，清空三个静态列或添加新的 Row.
  2. 点击 +，打开 Drupal Views 选项卡并选择 View: Portfolio grid (Block).
  3. 在设置对话框中，勾选 Show exposed filters 并点击 Save。网格在其上方渲染 "Filter by type" 下拉框，新 Portfolio 条目自动出现。
  4. 点击 Save 在页面构建器工具栏上。

您会看到的内容

居中的 "Our work" 标题开启页面。下方灰带上三个项目并排，每个是封面照片加名称和成果。紫色横幅以 Contact us 结束页面。

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

  • 封面照片位于其文本下方。 照片在文本之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将照片拖到文本上方。
  • 封面高度不同。 其比例不同。裁剪为相同比例，重新上传并选择新副本。
  • Portfolio grid 不在 Drupal Views 选项卡中。 该视图禁用，或页面构建器用户资料隐藏它。在以下位置启用 Structure > Views，或请管理员在以下位置勾选 Views 在您的用户资料中。
  • 编辑器显示 "Turn on Ajax on this view to use exposed filters"。 该视图不使用 AJAX。设置 Use AJAX 为 Yes（在视图编辑器的 Advanced 下）；参见 元素显示或行为异常。
  • "Filter by type"下拉框缺失。 Show exposed filters 在元素上关闭。打开视图元素的设置，勾选并点击 Save.

接下来做什么？