如何使用 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 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。