如何使用 Divi 的動態內容功能設計動態帖子佈局

Divi 的新動態內容功能使我們能夠為博客文章（以及更多內容）構建動態佈局。 您有充分的理由可以考慮這樣做。 原因之一是設計。 您可以使用可視化構建器使用 Divi 設計一些令人驚嘆的後期佈局，尤其是當您使用可用的預製佈局作為起點時。 另一個原因是方便。 一旦設計了所有動態內容元素（如類別、特色圖像、帖子標籤、自定義字段等）的帖子佈局，創建和更新博客帖子的過程就會大大簡化。 除了實際的帖子內容之外，所有其他帖子數據都可以更新，而無需部署可視化構建器。

在本教程中，我將向您展示如何在 Divi 中構建動態帖子佈局。 通過從預製佈局開始，我將引導您完成在整個佈局中添加動態內容，然後設計匹配的內容的過程。 我什至會介紹一種將自定義字段用作動態內容的簡單方法。

讓我們開始吧。

搶先看

你需要什麼開始

對於本教程，您將需要以下內容：

• 迪維主題
• 私人教練佈局包。 可從 Divi Builder 訪問此佈局包。 我們將使用私人教練服務頁面佈局來啟動我們帖子佈局的設計。

我還將向您展示如何利用自定義字段使用自定義帖子類型功能構建特色鍛煉部分。 自定義字段內置於 WordPress，不需要額外的插件或任何東西。 所以你已經有了你需要的東西。

第 1 部分：將預製佈局添加到帖子

要開始，請繼續創建一個新帖子（不是頁面），為您的帖子命名，然後單擊“使用 Divi Builder”按鈕。 暫時不要部署可視化構建器，因為我們首先需要從默認的 WordPress 編輯器屏幕自定義我們的帖子設置。

因為我們確實想添加我們的預製佈局以便從佈局中提取我們的圖像（我們需要它作為我們的特色圖像）。 單擊位於 Divi Builder 菜單中的加載佈局按鈕。

從從庫加載彈出窗口中，選擇 Personal Trainer Service 頁面佈局並通過單擊“使用此佈局”按鈕將其部署到您的帖子。

然後發布您的帖子以保存您的設置。

第 2 部分：更新 Divi 頁面設置、發布元數據和特色圖片

分區頁面設置

重要的是我們更新 Divi 頁面設置，以便我們的新佈局適合設計。 我們還需要隱藏默認的帖子標題顯示，因為我們將使用帖子標題模塊。

在頁面右上角，找到 Divi 頁面設置框並更新以下內容：

頁面佈局：全角
顯示帖子標題：隱藏

如果您沒有看到 Divi 頁面設置，則您可能沒有激活 Divi Builder，因此請確保先執行此操作。

添加類別

在類別框下，添加一個名為“力量訓練”的新類別，並確保它是唯一選擇的類別。

添加標籤

在標籤框中，添加以下三個標籤：速度、訓練和鍛煉。

特色圖片

接下來，添加與佈局標題中使用的背景圖像匹配的特色圖像，如下面的屏幕截圖所示。

第 3 部分：為動態鍛煉內容添加自定義字段

自定義字段內置於 WordPress。 除了默認的元數據（如類別、帖子作者、發布日期等）之外，它們允許帖子作者向帖子添加額外信息（稱為元數據）。在基本級別，自定義字段可用於顯示天氣或者作者寫文章時的心情。 但是有許多不同的方法可以使用自定義字段為您的網站創建動態內容。 請隨時閱讀有關如何向您的網站添加自定義字段的更多信息。 但是對於這個用例，我認為您可以通過為自己構建一些自定義字段來掌握自定義字段的基本概念。

對於此示例，我將向您展示如何添加一些可用於向帖子添加動態內容的自定義字段。 此示例的動態內容是特色鍛煉。 一旦自定義字段就位，帖子作者需要做的就是填寫自定義字段值，內容將（動態）更新到帖子，而無需加載 Visual Builder。

為此，向下滾動到帖子底部並找到自定義字段框。 如果由於某種原因它沒有顯示，請確保從頁面頂部的屏幕選項中選擇它。

然後單擊自定義字段框下拉列表（如果已折疊）以添加新的自定義字段並輸入以下內容：

名稱：訓練標題
價值：特色鍛煉

然後單擊添加自定義字段按鈕。

名稱是您在 Divi 中識別自定義字段的方式。 Value 是將使用 Divi 的動態內容功能動態添加到頁面的內容（稍後會詳細介紹）。

繼續此過程以將以下自定義字段添加到您的網站。

名稱：熱身
價值：800m跑

名稱：持續時間
價值：30分鐘

名稱：舉重
價值：

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

名稱：降溫
價值：400m跑

注意：這些自定義字段將添加到 Divi 主題中，並將在您將來創建的任何新帖子中可用。 換句話說，它不僅限於此單個帖子。

不要忘記更新您的帖子！

第 4 部分：使用 Visual Builder 將動態內容添加到帖子佈局

現在我們已經有了我們的帖子設置和元數據，是時候開始向我們的帖子添加動態內容了。 為此，請部署 Visual Builder。

為了讓這個高級佈局設計更容易定位和編輯，打開設置菜單並將構建器默認交互模式設置為單擊模式。

在標題部分，刪除按鈕模塊（我們不需要它）。

用特色圖片動態內容替換背景圖片

對於我們的第一條動態內容，我們將使用帖子中使用的特色圖片替換頂部標題部分行的第 1 列中使用的背景圖片。 為此，請打開行設置並找到第 1 列的背景設置，然後單擊背景圖像選項卡。 然後刪除當前存在的圖像，然後將鼠標懸停在背景圖像預覽框上。 您將在框的右上角看到動態內容圖標。 單擊它以打開動態內容選項。 然後從列表中選擇特色圖像動態內容選項。

由於我們使用相同的圖像，因此您的佈局看起來完全相同。 現在唯一的區別是背景圖片是從設置為帖子特色圖片的任何圖片中提取的。 這就是動態內容之美！

讓我們繼續。

使用帖子標題模塊添加帖子標題

在當前包含頁面標題的文本模塊下，添加一個 Post Title 模塊。 還有一個選項是使用動態內容將帖子標題添加到模塊中，但由於帖子標題模塊已經像動態內容一樣工作並為 SEO 保留了 h1 標題標籤，因此將其用於您的自定義帖子佈局是完美的.

然後更新帖子標題模塊設置如下：

顯示元：否
顯示特色圖片：否

現在轉到上面的文本模塊並通過右鍵單擊 h2 選項卡並從此列表中選擇選項來複製 h2 標題樣式。

然後通過右鍵單擊模塊並從列表中選擇選項，將 h2 標題樣式粘貼到帖子標題模塊。

之後，再次回到上面的文本模塊，複製間距樣式並粘貼到帖子標題模塊。 然後將帖子標題文本顏色更改為淺色以獲得白色。

現在您的帖子標題應該與原始佈局標題的設計相匹配。

現在您可以刪除包含原始標題的文本模塊。

使用動態內容創建一行元數據

移至佈局的第二部分。 然後通過在視覺構建器中將其拖走或在部分設置中將其設置為 0px 來取出該部分的頂部填充。

在佈局的第二部分的第一行中，您會注意到一個文本模塊（其中包含“關於個人訓練”的內容），其下方有一個分隔線。 這是我們將使用動態內容構建自定義元數據行的地方。

我們希望這一行的大小與頂部的行的大小相匹配。 為此，請在頂部打開行的行設置並複制大小調整樣式。 然後將它們粘貼到第二部分的第一行。 然後將行裝訂線更新為 2。新的大小應類似於以下屏幕截圖。

您還需要添加自定義間距，如下所示：

自定義填充：左 1%，右 1%

然後保存行設置。

現在將行列結構更新為四列佈局。

現在我們準備添加我們的動態內容。 為此，現在在最左側的列中打開文本模塊的設置並將鼠標懸停在內容框上。 您將在框的右上角看到動態內容圖標。 單擊它以打開動態內容選項。

然後選擇選項：發布發布日期。

然後相應地更改日期格式。

這會將帖子的發布日期添加為動態內容。

要使用動態日期內容設置文本模塊的樣式，請在正下方行的左列中復製文本模塊的模塊樣式。

然後將模塊樣式粘貼到具有動態日期內容的文本模塊，並將文本文本顏色更改為白色。

接下來，複製文本模塊和它下面的分隔符並將其粘貼到第 2 列中。然後將動態內容更改為 Post Categories。

您需要將鏈接文本顏色更新為白色以匹配佈局設計。

現在將帶有分隔符的帖子類別文本模塊複製到第 3 列。然後將動態內容更改為 Post Comment Count。 在 Post Comment Count 彈出窗口中，在 Before 輸入框中輸入以下內容：

之前： 評論：

動態內容彈出窗口中可用的前後輸入框是在動態內容之前和/或之後添加文本的便捷選項。 這有助於在需要時添加標籤、價格符號和其他元素。

現在讓我們繼續添加我們的動態內容。 複製第 3 列中的文本模塊和分隔符並將其粘貼到第 4 列。最後一列將保存我們的帖子作者縮略圖和作者姓名。 因此，將文本模塊的動態內容更改為 Post Author。 在 Post Author 彈出窗口中，更新以下內容：

之前： 通過：
姓名格式：名字和姓氏

在帶有作者內容的文本模塊上方，添加一個新的圖像模塊。 打開圖像模塊設置並刪除默認圖像。 就像我們一直在做的那樣，單擊圖像預覽框中的動態內容圖標，並將發布者個人資料圖片添加為動態內容。

然後調整設計設置將圖像拉起來並給它一個自定義寬度，如下所示：

寬度：80px
自定義邊距（桌面）：-82px 頂部
自定義邊距（平板電腦）：0px 頂部

注意：帖子作者姓名將顯示已分配給當前帖子的作者。 帖子作者個人資料圖片是在 WordPress 儀表板中用戶 > 您的個人資料下為用戶個人資料設置的任何內容。

第 5 部分：將自定義字段添加為動態內容以向帖子添加特色鍛煉

還記得我們在教程前面是如何添加這些自定義字段的嗎？ 現在我們將使用這些自定義字段作為我們帖子中特色鍛煉的內容。

要添加我們的特色鍛煉動態內容，首先複製四列行正下方的兩列行，其中包含我們所有的動態元數據。 然後刪除兩列中的模塊並在左列中添加一個模糊模塊。

我們將使用模糊模塊為鍛煉部分添加動態內容。 首先，向左列添加一個新的模糊模塊。

對於標題，添加名為“鍛煉標題”的自定義字段作為動態內容。 然後對於簡介內容，添加名為“Duration”的自定義字段作為動態內容。

為了讓事情順利進行，我不會詳細討論這些模塊的樣式。 但是，您需要在標題左側添加一個模糊圖標並更新設計以匹配佈局。

接下來，在下面添加第二個模糊模塊。 輸入文本“Warmup”作為標題。 然後添加名為“Warmup”的自定義字段作為動態內容。

在該模塊下方添加第三個簡介模塊，標題為“舉重”，自定義字段“舉重”作為動態內容。 由於我們將 html 用於此自定義字段值，因此您需要在舉重彈出窗口中啟用原始 html。

添加以“Cool Down”為標題、自定義字段“Cool Down”為動態內容的最終簡介模塊。

現在您有一個動態版塊，可以將鍛煉添加到您的帖子中！

您需要做的就是從 WordPress 中的默認頁面編輯器更新自定義字段值，該內容將自動添加到您的帖子佈局中，而無需進入 Divi 構建器。

第 6 部分：使用帖子標籤動態內容設計“相關主題”部分

您可以使用動態內容來顯示帖子標籤並為您的帖子創建一個看起來很酷的“相關主題”部分。 為此，請創建一個新的一列行並向該行添加一個文本模塊。

然後對於內容框，添加 Post Tags 作為動態內容。 然後更新以下帖子標籤選項：

之前： 相關主題：
標籤分隔符：//

注意：您幾乎可以使用任何您想要的字符集作為標籤分隔符，因此您可以隨意嘗試不同的字符進行創意設計。

要設置內容樣式，請更新以下設計設置：

文字字體：Oswald
文字字體粗細：半粗體
文字文字顏色：#ff4c00
文字文字大小：30px
鏈接字體：Oswald
鏈接字體粗細：半粗體
鏈接文字顏色：#262d3f
鏈接文字大小：50px
鏈接字母間距：2px
鏈接線高：1.6em

這是最終的設計。

第 7 部分：添加作者簡介和評論部分

在這一點上，您已經準備好添加動態內容並輕鬆調整帖子佈局的設計，因此我不會詳細介紹最後兩個元素。

使用動態內容添加作者簡介部分

要在帖子內容的底部添加作者簡介部分，您可以使用帖子作者、帖子作者簡介圖片和作者簡介動態內容。 正如您在下面的屏幕截圖中看到的，我創建了一個 1/4 3/4 列的行。 然後我將帖子作者個人資料圖片添加到左欄中。 在右欄中，我添加了帖子作者，下方是作者簡介。 我還添加了特色圖像動態內容作為該部分的背景圖像（和漸變疊加）。 下面是一個示例。

使用評論模塊添加評論部分

由於我們使用的是自定義帖子佈局，因此需要使用評論模塊，以便我們可以將評論部分的設計與佈局相匹配。 只需將評論模塊添加到新的部分行，使按鈕樣式和字體與當前佈局相匹配。 下面是一個示例。

最終設計

這是所有設計都調整後的整個帖子的最終設計。

更新帖子內容並保存未來帖子的佈局

由於我們使用 Divi Builder 創建帖子佈局，因此您仍然需要使用 Divi 模塊更新帖子的實際帖子內容。 但是現在其他一切都是動態的，這使得這個過程變得更加容易。 您需要將帖子佈局保存到您的庫中，以便在創建新帖子時，您所需要做的就是將保存的佈局添加到您的帖子並更新帖子內容。

最後的想法

Divi 的動態內容是一項強大的功能，可以讓添加和更新帖子數據變得更加容易。 因此，如果您希望使用 Divi Builder 為您的博客文章（或其他自定義文章類型，如項目）設計自定義佈局，那麼動態內容是不二之選。 當然，動態內容不限於帖子。 您可以在整個網站中利用動態內容和自定義字段。 我希望這篇文章可以幫助您了解一些可能性，並激發您以令人敬畏的新方式使用動態內容。

我期待在評論中收到您的來信。

乾杯!