如何使用 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%
模塊對齊：左

空缺職位模板