如何為您的 Divi 博客帖子模板創建動態帖子信息欄

將動態內容添加到您的博客帖子模闆對於提供諸如帖子標題、元數據、特色圖像等內容至關重要。通常，這些動態元素在佈局設計中作為普通靜態元素放置。 但是，將這些動態元素中的一些放在讀者的最前沿可能會有所幫助。 這是動態帖子信息欄派上用場的地方。 動態帖子信息欄固定在瀏覽器頂部（就像固定標題一樣），並包含有用的動態內容和其他 CTA。 例如，您可以使用此欄提醒讀者他們當前正在閱讀的帖子、發表評論的鏈接或指向相關類別的鏈接。

在本教程中，我們將向您展示如何使用 Divi Theme Builder 創建動態帖子信息欄並將其添加到您的博客帖子模板中。 完成後，此欄將對整個站點的所有博客帖子無縫運行。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。 注意錨鏈接（“發表評論”和“訂閱”）如何將用戶發送到帖子的相應區域。

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入 Divi Theme Builder，請導航到 Divi Theme Builder。

單擊便攜性圖標。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，部分模板將出現在 Divi Theme Builder 中。

讓我們進入教程，好嗎？

第 1 部分：導入預製模板

在本教程中，我們將使用第六個主題構建器包中的幾個預製模板。 我們將導入默認網站模板，這將為我們提供一個有效的全局標題，我們將在其中添加帖子信息欄。 我們將導入博客帖子模板以在實時帖子上測試我們的結果。

重要提示：最好在測試站點上導入這些模板，以免弄亂實時站點。

導入默認網站模板

首先，您需要為 Divi 下載第六個免費主題生成器包。 然後解壓文件。

從 WordPress 儀表板，導航到 Divi > Theme Builder。 然後單擊右上角的便攜性圖標。 在可移植性彈出窗口中，選擇導入選項卡。 然後從下載的文件夾中選擇默認的網站模板json文件並單擊導入按鈕。 這將導入一個帶有全局頁眉和頁腳的新默認網站模板。

導入帖子模板

重複此過程以從同一下載文件夾導入帖子模板。 打開便攜彈窗，選擇post模板json文件，點擊導入按鈕。 這將為您提供一個分配給整個網站的所有帖子的帖子模板，以及默認的頁眉和頁腳。

在帖子模板標題上禁用全局

我們要將動態帖子信息欄添加到帖子模板的標題中。 但是，因為我們只希望帖子模板上的帖子信息欄，我們需要在標題上禁用全局，以便我們的欄不會添加到站點範圍內的所有標題。 要在全局標題上禁用全局，請打開全局標題上的設置菜單並選擇“禁用全局”。

現在標題應該是灰色的，帶有“自定義標題”標籤。 準備就緒後，單擊編輯圖標以編輯頁眉佈局模板。

構建動態帖子信息欄

添加節和行

在標題佈局編輯器中，在包含標題的當前部分下創建一個新的常規部分。

然後向該部分添加一個四分之一四分之一列的行。

部分設置

打開部分設置並更新以下內容：

• 背景顏色：#eceffe
• 填充：頂部 10 像素，底部 10 像素

行設置

添加部分設置後，打開該行的設置並更新以下內容：

• 天溝寬度：1
• 填充：0px 頂部，0px 底部

在高級選項卡下，將以下自定義 CSS 添加到主元素：

display:flex !important;
flex-wrap: nowrap;
align-items: center;

這將確保向下的列在移動設備上堆疊。

添加帖子標題動態內容

我們要添加到欄中的第一條動態內容是帖子標題。 這將有助於提醒讀者他們當前正在閱讀的帖子標題。

添加文本模塊

要將帖子標題創建為動態內容，請在最左側的列中創建一個新的文本模塊。

添加帖子/存檔標題作為動態內容

接下來，將鼠標懸停在文本設置的正文區域上時，單擊“使用動態內容”圖標。 從列表中選擇“發布/存檔標題”。

打開帖子/存檔標題的動態內容設置，並在之前的輸入框中添加以下內容：

You're Reading: 

然後保存更改。

設計設置

在設計選項卡下，自定義動態標題的樣式如下：

• 文字字體：Ubuntu
• 文字字體粗細：中等
• 文字文字顏色：#121212
• 文字 文字大小：14px（桌面）、12px（平板電腦）、11px（手機）

添加動態帖子分類信息

要創建帖子類別信息，請複制包含帖子標題的文本模塊。

然後打開復製文本模塊的設置，將帖子類別作為動態內容添加到正文中。

打開帖子類別動態內容設置並更新以下內容：

• 之前：在
• 類別分隔符：&

更新鏈接顏色

在設計選項卡下，更新鏈接顏色如下：

• 鏈接文字顏色：#4160fd

添加動態評論計數信息

我們要添加到帖子信息欄的另一條有用信息是評論計數，它提醒用戶如果需要，可以參與他們自己的評論。 評論計數還將包括指向帖子評論的鏈接。

要創建動態評論計數信息，請複制帶有類別的文本模塊並將其拖到中間列中。

然後將帖子評論計數作為動態內容添加到文本正文中。

打開 Post Comment Count Settings 並添加以下內容：

• 之後：評論

添加“發表評論”號召性用語

除了評論計數之外，我們還將添加一個簡單的號召性用語來發表評論。 該鏈接將是一個錨鏈接，可​​滾動到帖子底部的評論部分。

要創建 CTA，請複制第 2 列中保存評論計數的文本模塊。

然後打開副本的文本設置並將以下鏈接 html 添加到正文：

<a href="#respond">Leave a Comment</a>

添加訂閱按鈕

我們要添加到帖子信息欄的最後一件事是訂閱按鈕。 這也將是一個錨鏈接，將用戶帶到包含電子郵件選擇加入表單的帖子模板部分。

為此，請在最右側的列中添加一個按鈕模塊。

在設計選項卡下，更新按鈕樣式如下：

• 按鈕文字大小：14px（桌面）、12px（平板電腦）、11px（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景漸變左側顏色：#7e5ce6
• 按鈕背景漸變右顏色：#25b8ee
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：100px
• 按鈕字母間距：2px
• 按鈕字體：Ubuntu
• 按鈕字體粗細：粗體
• 按鈕字體樣式：TT
• 填充（桌面）：頂部 10 像素，底部 10 像素，左側 20 像素，右側 20 像素
• 填充（平板電腦）：頂部 6 像素，底部 6 像素，左側 14 像素，右側 14 像素

要將錨鏈接添加到按鈕，請轉到內容選項卡並添加以下按鈕鏈接 URL：

• 按鈕鏈接網址：#subscribe

除非我們將相應的 CSS ID 添加到帖子模板正文中包含電子郵件選擇加入表單的部分，否則此鏈接將無法使用。

在移動設備上禁用第 1 列

固定酒吧在移動設備上只有這麼多空間。 這就是為什麼我們需要決定要包含哪些信息。 對於此示例，我們將在移動設備上保留帶有 CTA 的兩列，並禁用帶有帖子標題和類別的列。

為此，請打開第 1 列的設置。在高級選項卡下，禁用手機和平板電腦上的可見性。

給截面一個固定位置和一個高 Z 索引

設計完成後，我們現在可以給截面一個固定的位置。 這個想法是最初隱藏帶有標題的部分後面的欄。 然後當用戶滾動時，固定的帖子信息欄將從標題下方顯示。

打開部分設置並更新以下內容：

• 位置：固定
• Z指數：998

請注意 z 索引是 998，因為我希望固定條位於帖子的其餘內容上方。

更新節標題 Z 索引

由於帖子信息欄部分具有較高的 z 索引，因此它將顯示在帶有標題的部分上方。 要解決此問題，請打開帶有標題的部分的部分設置並添加以下內容：

• Z指數：999（比帶槓的部分多一）

在佈局編輯器中保存更改。

將 CSS ID 添加到正文模板上的電子郵件選擇加入行

我們添加到欄的訂閱按鈕 CTA 仍然需要一個錨點，或者在帖子模板上“跳轉”到的地方。 由於 CTA 是“訂閱”，我們需要它跳轉到電子郵件選擇表單。

為此，請在主題構建器中打開帖子模板的“自定義正文”區域。

在佈局底部找到帶有電子郵件選擇加入表單的行並添加以下 CSS ID：

• CSS ID：訂閱

這將允許訂閱按鈕錨鏈接滾動到模板的這個特定區域。

完成後保存對佈局和主題構建器的更改。

最後結果

要查看最終結果，只需打開並查看網站上的實時帖子。 請注意錨鏈接（“發表評論”和“訂閱”）如何將用戶發送到帖子的相應區域。

最後的想法

希望這個動態的帖子信息欄能派上用場，提升你的 Divi 博客帖子的用戶體驗。 也可以隨意嘗試其他信息。 我確信有一種方法可以使用博客模塊在其中展示相關帖子。

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

乾杯!