如何使用 Divi 的博客模塊創建動態職業列表部分

在之前的 Divi 教程中，我們向您展示瞭如何使用 Divi 的主題生成器和高級自定義字段插件創建一個完全動態的空缺職位模板。 在今天的教程中，我們將向您展示如何在您的職業頁面上動態展示空缺職位。 本教程是空缺職位模板帖子的續集，因此請確保先重新創建模板，然後再返回本教程。

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載動態職業職位列表佈局

要了解免費的動態職業職位列表佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

1. 添加職業頁面

添加新頁面並切換到 Visual Builder

首先創建一個新頁面，為頁面指定標題並切換到 Visual Builder。

2. 開始在前端建立職業頁面

添加第 1 節

漸變背景

將第一部分添加到頁面，打開部分設置並使用漸變背景。

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

底部分隔線

也使用底部分隔器。

• 分隔線樣式：在列表中查找
• 分頻器高度：8vw
• 分隔線水平重複：3x
• 分隔線安排：在部分內容下方

間距

通過添加一些底部填充來完成部分設置。

• 底部填充：200px

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

將文本模塊添加到列

添加H1內容

使用您選擇的一些 H1 內容將文本模塊添加到行的列。

H1 文本設置

轉到模塊的設計選項卡並相應地更改 H1 文本設置：

• 標題字體：蒙特塞拉特
• 標題字體粗細：重
• 標題文字顏色：#ffffff
• 標題文字大小：8rem（桌面）、4rem（平板電腦）、2.5rem（手機）

將分隔模塊添加到列

能見度

在文本模塊的正下方，添加一個分隔器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

接下來更改模塊的線條顏色。

• 線條顏色：#ffffff

漿紗

並通過更改大小設置來完成模塊的設置。

• 分隔線重量：8px
• 寬度：30%

添加第 2 節

向頁面添加另一個常規部分。

添加新行

列結構

使用以下列結構向該部分添加新行：

將文本模塊添加到列

添加 H2 內容

將文本模塊添加到行的列並插入一些您選擇的 H2 內容。

H2 文本設置

修改模塊的H2文本設置如下：

• 標題 2 字體：蒙特塞拉特
• 標題 2 字體粗細：重
• 標題 2 文本顏色：#ffa500
• 標題 2 文字大小：2.3rem

將分隔模塊添加到列

能見度

本專欄中我們需要的下一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

接下來修改模塊的線條顏色。

• 線條顏色：#ffa500

漿紗

並通過更改大小設置中的分隔線重量和最大寬度來完成模塊的設置。

• 分隔線重量：6px
• 最大寬度：80px

將博客模塊添加到列

內容

為了顯示不同的空缺職位，我們將使用一個博客模塊，我們將根據我們的需要對其進行定制。 確保以下內容設置適用：

• 帖子類型：帖子
• 包括類別：營銷
• 摘錄長度：150

元素

在元素設置中，我們啟用的僅有兩個選項如下：

• 顯示閱讀更多按鈕：是
• 顯示摘錄：是

佈局

轉到模塊的設計選項卡並確保您使用的是全角佈局。

• 佈局：全寬

標題文字設置

也更改標題文本設置。

• 標題標題級別：H3
• 標題字體：蒙特塞拉特
• 標題文字大小：1.5rem

正文設置

然後，修改正文設置。

• 正文字體：Raleway
• 正文大小：1.1rem
• 車身線高：2.1em

閱讀更多文本設置

隨著閱讀更多的文字設置。

• 閱讀更多字體：蒙特塞拉特
• 閱讀更多字體樣式：大寫
• 閱讀更多文字顏色：#ffffff
• 閱讀更多文字大小：1rem

間距

在間距設置中添加一些自定義邊距和填充值。

• 左邊距：100px（桌面）、50px（平板）、0px（手機）
• 頂部填充：0px
• 底部填充：0px

閱讀更多按鈕 CSS

並通過在高級選項卡中添加一些閱讀更多按鈕 CSS 來完成模塊的設置。

max-width: 200px;
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 100px;
background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

根據需要多次克隆行

完成該行及其所有模塊後，您可以根據需要將其克隆多少次，具體取決於您公司擁有的部門數量。

更改文本模塊內容

確保更改每個重複行的 H2 內容。

更改博客模塊類別

隨著博客模塊類別。

將代碼模塊添加到最後一行的列

插入 CSS 代碼以單獨設置空缺職位的樣式

為了完成設計，我們將在頁面的最後一行添加一個代碼模塊，並插入以下幾行 CSS 代碼：

<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>

3. 保存頁面設計和查看結果

完成頁面設計後，您可以保存所有更改，退出 Visual Builder 並查看結果！

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

本教程是上一教程的續篇，我們向您展示瞭如何創建空缺職位模板。 在本教程中，我們更進了一步，我們向您展示瞭如何使用 Divi 的博客模塊在您的職業頁面上展示這些動態空缺職位。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。