如何使用 Divi 的 Theme Builder 和 ACF 创建动态职位空缺帖子模板

已发表: 2019-12-26

当您将 Divi Theme Builder 与动态内容结合使用时，您会很快发现自己正在用自制模板替换插件。在今天的教程中，我们将向您展示如何使用 Divi Theme Builder 和 ACF 字段组创建一个完全动态的职位空缺帖子模板。这个动态的职位空缺帖子模板是完全可定制的，您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

空缺职位模板

移动的

空缺职位模板

免费下载职位空缺职位模板

要使用免费的职位空缺职位模板，您首先需要使用下面的按钮下载它。要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

1. 添加帖子分类

转到帖子类别

创建空缺职位模板的第一部分是添加新的职位类别，这些类别将用于您添加的空缺职位。转到 WordPress 仪表板内的帖子类别。

空缺职位模板

添加空缺职位类别

为每个部门添加一个父类别和一个单独的类别。

职位空缺
- 通讯
- 设计
- 发展
- 营销
- …

空缺职位模板

2. 安装 ACF 并设置项目字段

安装和激活 ACF

继续安装并启用免费的高级自定义字段插件。

空缺职位模板

设置字段组

通过转到WordPress 仪表板 > 自定义字段 > 添加新来设置新字段组。

空缺职位模板

我们希望字段组只出现在属于我们在本教程前一部分中添加的父类别的帖子上。为此，请确保以下规则适用于字段组：

帖子类型等于帖子和
职位类别等于职位空缺

空缺职位模板

添加字段

创建字段组后，就可以添加不同的字段了。要重新创建与本教程预览中完全相同的模板，您需要以下自定义字段：

职责
- 字段标签：职责
- 字段类型：文本区域
所需经验
- 字段标签：所需经验
- 字段类型：所见即所得编辑器
所需技能
- 字段标签：所需技能
- 字段类型：所见即所得编辑器
奖金资格
- 字段标签：奖金资格
- 字段类型：所见即所得编辑器
地点
- 字段标签：位置
- 字段类型：文本
工作类型
- 字段标签：工作类型
- 字段类型：复选框
- 选择：全职 + 兼职 + 自由职业者（每个选择都有新行）
应用重定向
- 字段标签：应用重定向
- 字段类型：网址

空缺职位模板

3. 添加新的博客帖子

添加空缺职位名称、简短描述和类别

完成自定义字段组及其所有字段后，就可以创建示例空缺职位帖子了。输入标题、职位描述并选择类别。

空缺职位模板

填写所有自定义字段

继续完成所有自定义字段。

空缺职位模板

4. 创建新模板

转到 Divi 主题生成器并添加新模板

一旦您的示例博客文章就位，就可以创建空缺职位模板了！为此，请导航到 Divi Theme Builder 并单击“添加新模板”。

空缺职位模板

使用时间

在职位空缺类别中的帖子上使用模板。

空缺职位模板

5. 开始构建模板主体

现在，通过单击“添加自定义主体”并选择“构建自定义主体”开始构建设计。这会将您重定向到模板编辑器。

空缺职位模板

第 1 节

渐变背景

在 Divi 模板编辑器中，您会注意到一个部分。打开该部分并添加渐变背景。

颜色 1：#ff6600
颜色 2：#fbff30
梯度方向：126deg

空缺职位模板

底部分隔线

在下一个部分添加底部分隔线。

分隔线样式：在列表中查找
分频器高度：8vw
分隔线安排：在部分内容下方

空缺职位模板

间距

并包括一些底部填充。

底部填充：400px

空缺职位模板

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

空缺职位模板

将 Blurb 模块添加到第 1 列

动态内容

是时候开始添加模块了！第 1 列中我们需要的第一个模块是 Blurb 模块。为标题框选择位置动态内容并将内容框留空。

标题：位置

空缺职位模板

选择图标

继续选择一个图标。

空缺职位模板

图标设置

转到设计选项卡并按如下方式更改图标设置：

图标颜色：#ffffff
图像/图标放置：左
使用图标字体大小：是
图标字体大小：25px

空缺职位模板

标题文字设置

还要修改 H3 文本设置。

标题标题级别：H3
标题字体：Lato
标题文字颜色：#ffffff
标题文字大小：1.4rem

空缺职位模板

动画片

最后，在动画设置中删除图标动画。

图像/图标动画：无动画

空缺职位模板

克隆 Blurb 模块并在第 2 列中放置重复项

完成第 1 列中的 Blurb 模块后，您可以将其克隆一次并将副本放置在第二列中。

空缺职位模板

更改动态内容和图标

确保随图标一起更改标题动态内容。

标题：工作类型

空缺职位模板

将按钮模块添加到第 3 列

添加副本

在最后一列中，添加一个按钮模块。添加一些您选择的副本。

空缺职位模板

动态链接

接下来选择动态应用重定向链接。

按钮链接 URL：应用重定向
按钮链接目标：在新标签中

空缺职位模板

结盟

转到模块的设计选项卡并更改不同屏幕尺寸的对齐方式。

按钮对齐：右（桌面），左（平板电脑和手机）

空缺职位模板

按钮设置

样式按钮。

为按钮使用自定义样式：是
按钮文字大小：1rem
按钮文字颜色：#ff6600
按钮背景颜色：#ffffff
按钮边框宽度：0px

空缺职位模板

按钮边框半径：100px
按钮字体：蒙特塞拉特
按钮字体样式：大写

空缺职位模板

间距

并通过向间距设置添加一些自定义填充值来完成模块的设置。

顶部填充：15px
底部填充：15px
左填充：50px
右填充：50px

空缺职位模板

添加第 2 行

列结构

进入下一行！选择以下列结构：

空缺职位模板

将文本模块添加到列

动态内容

将新的文本模块添加到列中并选择帖子标题动态内容。

动态内容：帖子/档案标题

空缺职位模板

之前：<H1>
之后：</H1>

空缺职位模板

H1 文本设置

转到模块的设计选项卡并相应地更改 H1 文本设置：

标题字体：蒙特塞拉特
标题字体粗细：重
标题文字颜色：#ffffff
标题文字大小：8rem（桌面）、4rem（平板电脑）、2.5rem（手机）

空缺职位模板

将分隔模块添加到列

能见度

我们需要的下一个模块是分频器模块。确保启用了“显示分隔线”选项。

显示分隔线：是

空缺职位模板

线

接下来更改模块的线条颜色。

线条颜色：#ffffff

空缺职位模板

浆纱

也修改大小设置。

分隔线重量：8px
宽度：30%
模块对齐：左

空缺职位模板