如何使用 Divi & ACF 创建动态投资组合项目模板

正在寻找一种方法来简化您在网站上创建投资组合项目的方式？ 如果是这样，你会喜欢这篇文章。 在本教程中，我们将向您展示如何使用 Divi 的 Theme Builder 和 ACF 插件创建动态投资组合项目模板。 构建投资组合项目模板将允许您设计模板主体一次，并将其应用于您将来添加的所有投资组合项目。 我们创建的模板设计可以匹配各种创意职业，但这只是冰山一角。 您可以根据需要添加任意数量的字段并在模板中使用这些字段。 您还可以免费下载我们将重新创建的设计的 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载动态投资组合项目模板

重要提示：在设置 ACF 字段并将模板 JSON 文件上传到 Theme Builder 后，您必须手动向每个模块添加动态内容。

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

下载文件

免费下载

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

下载

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

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

安装和激活 ACF

首先在您的 WordPress 网站上安装免费的高级自定义字段插件。 安装后，请确保您也激活它。

设置字段组

安装并激活插件后，就可以开始创建自定义字段了。 转到您的插件设置并添加一个新的字段组。

修改字段组的位置。 我们希望它只出现在我们的项目中。

• 帖子类型 – 等于 – 项目

添加字段

继续为下面提到的每个项目添加一个新字段：

• 问题
  • 字段标签：问题
  • 字段类型：文本区域
• 解决方案
  • 字段标签：解决方案
  • 字段类型：文本区域
• 感言
  • 字段标签：推荐
  • 字段类型：文本
• 联络人
  • 字段标签：联系人
  • 字段类型：文本
• 联系人图片
  • 字段标签：联系人图像
  • 字段类型：图像
• 联系人职务
  • 字段标签：联系人职务
  • 字段类型：文本
• 客户标志
  • 字段标签：客户标志
  • 字段类型：图像
• 客户网站
  • 字段标签：客户网站
  • 字段类型：网址
• 项目持续时间
  • 字段标签：项目持续时间
  • 字段类型：范围
  • 附加：周

知道您可以随意添加任意数量的字段，具体取决于您要创建的项目模板。 要重新创建本文预览中显示的确切设计，您将需要上述所有字段。

2. 创建新项目

添加投资组合项目标题和描述

设置字段组及其所有字段后，就可以创建示例项目了。 转到您的 WordPress 仪表板，添加一个新项目并输入标题和描述。

上传特色图片

然后，上传您选择的特色图片。

填写所有自定义字段

继续填写您在本教程第一部分中添加的所有不同自定义字段。

3. 创建新模板

转到 Divi 主题生成器并创建新模板

是时候开始构建模板了！ 转到 Divi Theme Builder 并添加一个新模板。

使用时间

将该模板应用于您的所有项目。

• 用于：所有项目

4. 开始构建模板主体

继续开始构建模板的自定义主体。

第 1 节

背景颜色

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

• 背景颜色：#000000

间距

接下来添加一些自定义的顶部和底部填充。

• 顶部填充：250px
• 底部填充：250px

边界

添加一些左下角和右下角半径。

• 左下：8vw
• 右下：8vw

添加第 1 行

列结构

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

将文本模块 #1 添加到列

添加内容

然后，添加一个文本模块并在内容框中放置一些内容。

• 正文： 项目持续时间：

文字设置

转到模块的设计选项卡并按如下方式更改文本设置：

• 文字字体：蒙特塞拉特
• 文字颜色：#a0a0a0
• 文字大小：1.2rem

将文本模块 #2 添加到列

动态内容

将另一个文本模块添加到列中并选择项目持续时间动态内容。

• 动态内容：项目持续时间
• 之后：数周

文字设置

接下来更改模块的文本设置。

• 文字字体：Lora
• 文字颜色：#ffffff
• 文字大小：1.5rem

将文本模块 #3 添加到列

动态内容

添加另一个文本模块并选择帖子/存档标题动态内容。

• 动态内容：帖子/档案标题
• 之前：<H1>
• 之后：</H1>

H1 文本设置

为模块的 H1 文本设置设置样式。

• 标题字体：蒙特塞拉特
• 标题文字颜色：#ffffff
• 标题文字大小：6rem（桌面），3rem（平板电脑和手机）

间距

通过添加一些顶部和底部边距来完成模块的设置。

• 上边距：100px
• 下边距：100px

添加帖子内容模块

文字设置

我们在该列中需要的下一个也是最后一个模块是 Post Content Module。 这将显示您的项目的描述。 更改模块的文本设置如下：

• 文字字体：Lora
• 文字颜色：#ffffff
• 文字大小：1.5rem（桌面），0.9rem
• 文本行高：2em

添加第 2 行

列结构

使用以下列结构向该部分添加另一行：

将图像模块添加到第 1 列

动态内容

将图像模块添加到第 1 列并选择客户端徽标动态内容。

• 动态内容：客户标志

将文本模块添加到第 2 列

添加内容

然后，将文本模块添加到第 2 列并输入您选择的一些副本。

链接动态内容

通过在链接设置中选择客户端网站动态内容，将模块链接到客户端网站。

• 动态内容：客户网站

文字设置

接下来更改模块的文本设置。

• 文字字体：蒙特塞拉特
• 文字颜色：#ffffff
• 文字大小：1.5rem
• 文本行高：1em

间距

也添加一些自定义底部填充。

• 底部填充：50px

边界

并通过添加底部边框来完成模块的设置。

• 底部边框宽度：1px
• 底部边框颜色：#ffc300

添加第 2 节

间距

进入下一节！ 删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

添加行

列结构

继续使用以下列结构添加新行：

间距

打开行设置并删除所有默认的顶部底部填充。

• 顶部填充：0px
• 底部填充：0px

将图像模块添加到列

动态内容

我们在这一行中唯一需要的模块是图像模块。 将图像连接到项目的特色图像。

• 动态内容：特色图片

边界

添加一些左下角和右下角半径。

• 左下：8vw
• 右下：8vw

添加第 3 部分

间距

添加另一个带有一些自定义顶部和底部填充的常规部分。

• 顶部填充：250px
• 底部填充：250px

添加第 1 行

列结构

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

将文本模块添加到第 1 列

添加 H2 内容

将文本模块添加到第 1 列并插入您选择的一些 H2 内容。

H2 文本设置

更改 H2 文本设置如下：

• 标题 2 字体：蒙特塞拉特
• 标题 2 字体粗细：粗体
• 标题 2 文字大小：2rem

将文本模块添加到第 2 列

动态内容

移至第二列，添加文本模块并使用问题动态内容。

• 动态内容：问题

文字设置

然后，更改模块的文本设置：

• 文字字体：Lora
• 文字大小：1.5rem（桌面），0.9vw（平板电脑和手机）
• 文本行高：2em

克隆行

完成该行后，继续并完全克隆它。

更改第 1 列中文本模块的副本

更改重复行的第 1 列文本模块的副本。

更改第 2 列中文本模块的动态内容

修改重复行第 2 列中文本模块的动态内容。

• 动态内容：解决方案

将按钮模块添加到重复行的第 2 列

添加副本

继续将按钮模块添加到重复行的第 2 列。 添加一些您选择的副本。

按钮设置

转到模块的设计选项卡并按如下方式更改按钮设置：

• 为按钮使用自定义样式：是
• 按钮文字大小：1.5rem
• 按钮文字颜色：#000000
• 按钮边框半径：0px

• 按钮字体：蒙特塞拉特

间距

通过添加一些上边距来完成模块的设置。

• 上边距：100px

添加第 4 部分

背景颜色

进入下一个也是最后一个部分！ 添加黑色背景色。

• 背景颜色：#000000

边界

也向该部分添加一些左上角和右上角的边框半径。

• 左上角：8vw
• 右上：8vw

添加行

列结构

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

将推荐模块添加到列

动态内容

向该行添加一个推荐模块，并为模块内的不同元素选择一些动态内容。

• 作者：联系人
• 职位名称：联系人职位
• 正文：推荐书
• 图片：联系人图片

元素

接下来禁用报价图标。

• 显示报价图标：否

背景颜色

然后，将模块的背景颜色更改为黑色。

• 背景颜色：#000000

文字设置

移动模块的设计选项卡并更改文本颜色。

• 文字颜色：浅

正文设置

接下来修改正文设置。

• 正文字体：蒙特塞拉特
• 正文大小：2rem（桌面），1.5rem（平板电脑和手机）

作者文本设置

也更改作者文本设置。

• 作者字体：Lora
• 作者文字大小：1.4rem（桌面），0.9rem（平板电脑和手机）

位置文本设置

并通过相应地更改位置文本设置来完成模块的设置：

• 位置字体：Lora
• 位置文本颜色：#a8a8a8
• 位置文本大小：1.4rem（桌面），0.9rem（平板电脑和手机）

4. 保存主题生成器更改并查看结果

完成模板后，保存所有 Divi Theme Builder 更改并查看项目的结果！

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi Theme Builder 和 ACF 插件创建漂亮的投资组合项目模板。 这是简化您在网站上显示项目的方式的好方法。 将模板分配给所有项目后，它将自动应用于您将来添加的投资组合项目。 您还可以免费下载此设计的模板 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。