创建关于我们页面.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里您构建关于我们页面：使命标题、照片旁的故事、三个递增数字、团队卡片和结尾行动号召。当一页应向访客介绍您时使用它。要列出每位同事的页面，请遵循 构建团队名录。

本视频为鹿特丹设计工作室构建页面。

开始之前

  • 您的角色有 Edit with DXPR Builder 权限。
  • 媒体库保存办公室、团队或产品的照片。
  • 页面存在：前往 Content > Add content > Landing Page (/node/add/landing_page），输入 "About Us" 为 Title 并点击 Save。页面打开时页面构建器已就绪。
  • 在 DXPR CMS 上，在本页隐藏主题页面标题：在其编辑表单中，打开 DXPR Theme Settings 并勾选 DXPR Hide Regions 下的 Page Title。Jumbotron Title 随后是页面唯一的 Heading 1，正如构建 SEO 友好页面所解释。
  • 新元素落在版块或列顶部。逆序添加版块的行或列的元素，或之后拖拽到位。

第 1 步：添加使命声明页头

  1. 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。
  2. 悬停版块并打开 More > Settings。打开 Style 面板，选择深色 Background 色板并点击 Save.
  3. 点击 + 在版块上并选择 Jumbotron 从 Content 选项卡。
  4. 将使命声明输入为 Title："We build websites people enjoy using"。
  5. 在 Lead 字段中输入支持句："A 24-person studio in Rotterdam working with brands across Europe since 2012"。
  6. 设置 Type 为 Primary 在主色上显示白色文本，然后点击 Save.

第 2 步：讲述公司故事

  1. 悬停版块并点击 Add Section Below，+ 在其下。
  2. 点击 + 在新版块上并选择 Row；它带有两个等宽列。 点击网格图标（Column layout），在行上选择 2/3 + 1/3 预设并点击 Save.
  3. 点击 + 在更宽列中并选择 Text。输入 "Our story" 为 Heading 2，然后是两个短段落：如何起步以及项目如何运作。点击 Save.
  4. 点击 + 在较窄列中并选择 Image.
  5. 点击 Select Image，通过以下方式搜索媒体库 Apply filters，勾选一张办公室或团队照片并点击 Insert selected.
  6. 打开 SEO 面板，填写 Alt attribute 并点击 Save.

提示

故事保持简短并用副标题分段。访客先浏览后阅读。

第 3 步：用计数器添加关键统计

  1. 添加第三个版块，其中包含 Add Section Below。打开其 More > Settings，选择浅灰色 Background：Style 面板并点击 Save.
  2. 点击 + 在版块上并选择 Row。点击其网格图标（Column layout），选择 1/3 + 1/3 + 1/3 预设并点击 Save.
  3. 在每列中，添加一个 Text 带统计标签的元素："Projects delivered"、"Years in business"、"Clients who return"。
  4. 在每列中，点击 + 再次选择 Number counter；它落在标签上方。设置：
    • End：统计值（140、12、98）
    • Suffix：适用处 "+" 或 "%"
    • Thousands separator：Comma
    • Speed：2500，计数耗时毫秒数
  5. 点击 Save 在每个计数器上。

计数器没有自己的标签字段，因此 Text 元素位于其下方。

第 4 步：构建团队版块

  1. 添加第四个版块，其中包含 Add Section Below.
  2. 点击 + 在版块上并选择 Row。点击其网格图标（Column layout），选择 1/3 + 1/3 + 1/3 预设并点击 Save.
  3. 在每列中，点击 + 并选择 Card。打开其 More > Settings，将 Header 设为人名（"Sofia Andersen"），Title 设为其角色（"Creative Director"），然后点击 Save。
  4. 点击 + 在版块本身上并选择 Text；它落在卡片行上方。输入 "Meet the team" 为 Heading 2，将其居中并点击 Save。

第 5 步：添加结尾版块

  1. 添加最后一个版块，其中包含 Add Section Below 并打开其 More > Settings。在以下位置的下方 HTML classes 选择 Align text center，以便文本和按钮一起居中。在 Style 面板选择品牌颜色作为 Background 和白色作为 Font color，然后点击 Save.
  2. 点击 + 在版块上并选择 Button。设置 Title 为 "Get in touch"， Link 为 /contact, Type 为 Light 和 Size 为 Large，然后点击 Save.
  3. 点击 + 在版块上再次并选择 Text；它落在按钮上方。输入 "Want to work with us?" 为 Heading 2，然后 "We take on a handful of new clients each quarter." 在 Style 面板设置 Font color 为白色，然后点击 Save.

第 6 步：保存并预览

  1. 点击 Save 在页面构建器工具栏上。
  2. 打开视图菜单（ 眼睛图标），然后选择 Preview.
  3. 滚动页面检查每个版块。

进一步了解

视频中未展示，但值得添加：

  • 个人简介 Text 和一张头像照 Image 每张卡片内，以及 Social links 其下方
  • 100% height 在填满屏幕的页头的第一节设置中

您会看到的内容

预览显示五个横幅。深色页头以白色显示使命声明及其导语。故事在照片旁。灰带上三个数字滚动进入视野时从零计数。

团队标题居中位于三张卡片上方，每张有名称和角色。结尾横幅在浅色 Get in touch 按钮。选择 Edit 在眼睛菜单中以继续工作。

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

  • 空页面上没有 Add Elements 按钮。 页面创建助手已关闭，因此页面仅提供 Choose a template。改为点击空白区域打开元素选择器。
  • 新元素位于之前添加的元素上方。 页面构建器将新元素插入其版块或列的顶部。用其控制栏上的拖动手柄拖到位置。
  • 数字计数器或卡片在选择器中缺失。 页面构建器用户资料隐藏它。请管理员在以下位置勾选 Elements ： DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile).
  • 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？