如何使用 Divi 的帖子滑塊模塊創建博客帖子代碼

博客文章代碼是一種方便的工具，用於在您的網站上動態展示博客文章（最近的、相關的等）。 您可以將其視為 WordPress 博客文章的新聞自動收報機。

今天，我們將向您展示如何使用 Divi 的帖子滑塊模塊創建博客帖子自動收報機。 類似於新聞行情，我們將要創建的博客文章行情將是 Divi 的文章滑塊模塊的簡化和​​緊湊版本。 而且，由於帖子滑塊模塊具有以多種方式展示帖子的內置功能，您可以在任何地方使用它。 您可以在主頁上使用它作為帖子代碼來顯示最近的帖子，或者您可以在博客帖子模板的標題上使用它來顯示與當前類別相關的帖子。

在向您展示如何在 Divi 中創建博客文章自動收報機後，我們還將向您展示如何將其保存到您的 Divi 庫中，以便您可以將其添加到 Divi Builder 中的博客文章模板的標題中。

讓我們開始吧！

搶先看

下面是我們將在本教程中構建的博客文章代碼的快速瀏覽。

以下是郵政自動收報機如何在手機顯示屏上很好地堆疊。

我們將展示如何添加帖子代碼以在博客帖子模板的標題上顯示相關帖子。

免費下載佈局和模板

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

下載文件

免費下載

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

下載

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

將佈局導入到 Divi 庫

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。 它將是名為“博客文章代碼佈局（Divi 庫）”的文件夾中的 JSON 文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

將標題模板導入 Divi Theme Builder

如果要導入將帖子代碼添加到標題的博客帖子模板，則需要導航 Divi > Theme Builder。

然後使用頁面右上角的可移植性圖標導入 JSON 文件。 它將是名為“帶有帖子代碼的博客帖子標題模板（主題生成器）”的文件夾內的文件。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中創建博客帖子代碼

創建行

首先，讓我們在該部分內創建一個單列行。

行設置

接下來，按如下方式更新行設計設置：

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

使用文本模塊創建帖子代碼標題

現在該行已就位，向該行添加一個文本模塊以創建帖子代碼標題。

標題文本和背景

更新正文以閱讀“最近的帖子：”。

然後更新背景顏色：

• 背景顏色：#333333

設計設置

在設計選項卡下，更新文本樣式如下：

• 文字字體： Poppins
• 文字字體粗細：半粗體
• 文字字體樣式：TT
• 文字文字顏色：rgba(255,255,255,0.7)
• 文字字母間距：1px
• 文本行高：40px
• 文本對齊：居中

• 寬度：100%
• 最大寬度：175px（桌面和平板電腦），100%（手機）

這照顧了我們的帖子代碼標題。 現在讓我們開始構建帖子代碼。

使用博客文章滑塊模塊創建博客文章代碼

為了創建博客帖子自動收報機，我們將使用帖子滑塊模塊，然後簡化設計以使其非常緊湊。

在文本模塊下添加一個帖子滑塊模塊。

發布滑塊內容

在內容選項卡下，您可以選擇帖子計數、包含的類別以及它們或排序的方式。 在這個例子中，我們將保留默認值並讓滑塊顯示最新的帖子。

要隱藏帖子摘錄，請確保更新以下內容：

• 使用帖子摘錄：否
• 摘錄長度：0

發布滑塊元素和背景

真的，我們想要在滑塊中顯示的只是帖子標題和幻燈片箭頭。 在元素選項組下，隱藏除箭頭之外的所有內容。

• 顯示控制：否
• 顯示閱讀更多按鈕：否
• 顯示帖子元：否

我們將保留顯示特色圖像作為每張幻燈片背景的選項。 但是對於備份，請確保添加以下背景顏色：

• 背景顏色：#eeeeee

後滑塊設計設置

疊加和箭頭樣式

在設計選項卡下，更新背景疊加和箭頭顏色如下：

• 使用背景疊加：是
• 背景疊加顏色：rgba(248,248,248,0.9)
• 箭頭顏色：#ffffff（桌面），#ef51f7（懸停）

標題文字

然後，更新標題文本樣式如下：

• 標題字體: Poppins
• 標題字體粗細：中等
• 標題文本對齊方式：左
• 標題文字顏色：#333333
• 標題文本顏色（懸停）：#ef51f7
• 標題文字大小：16px（桌面），14px（手機）
• 標題行高度：40px
• 標題文字陰影：見截圖
• 標題文字陰影顏色：透明

間距

我們需要為帖子代碼標題文本模塊騰出空間，以便我們可以將帖子滑塊放在它的右側。 為此，請更新以下內容：

• 邊距：左 175 像素（桌面和平板電腦），左 0 像素（手機）
• 填充：0px 頂部，0px 底部，0px 左，0px 右

自動動畫

帖子滑塊具有用於添加自動動畫的內置選項。 這將為我們提供查看帖子所需的股票代碼功能，而無需單擊滑動箭頭。

添加自動動畫如下：

• 自動動畫：開
• 自動動畫速度：3500

隨意增加或降低速度，以達到您認為最好的程度。

高級造型

CSS 類和自定義 CSS

在這一點上，帖子滑塊在很大程度上是一個功能性的帖子代碼。 但是我們可以添加一些高級調整來清理設計。

首先，添加一個自定義 CSS 類，如下所示：

• CSS 類：et-post-ticker

要確保帖子標題位於滑塊/自動收報機內的一行並用省略號隱藏溢出，請將以下 CSS 添加到幻燈片標題：

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

為了給滑動箭頭更多的按鈕感覺，將以下 CSS 添加到滑動箭頭：

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

帶有用於定位滑動箭頭的代碼模塊的附加 CSS

此時，幻燈片箭頭的默認功能將僅在懸停時顯示，並且箭頭的位置在幻燈片的右側和左側。 為了改善用戶體驗並使它更像一個帖子自動收報機，我們可以讓箭頭始終顯示並將它們放置在滑塊的右側。

為此，請在帖子滑塊下添加一個新的代碼模塊。

然後粘貼以下 CSS，確保用必要的樣式標籤包裹它。

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

最後結果

這是實時頁面上的最終結果。

請注意帖子代碼如何處理標題文本的溢出。

以下是郵政行情在手機顯示屏上很好地堆疊的方式。

將帖子代碼添加到博客帖子模板的標題

這個帖子代碼的一個明顯用例是讓它在博客帖子模板的實際標題上顯示最近的帖子。 以下是您如何做到這一點。

將行保存到 Divi 庫

首先，將包含構成我們的帖子代碼的元素的行保存到 Divi 庫。 您可以通過單擊行上的三點圖標並選擇“保存到庫”來執行此操作。 然後為佈局命名並單擊“保存到庫”按鈕。

將 Post Ticker 行添加到標題模板

編輯自定義標題

將行保存到庫中後，我們準備將其添加到自定義標題中。 對於此示例，請確保將模板分配給“所有帖子”。 然後單擊以編輯該模板的自定義標題。

從庫中插入行（發布代碼）

在標題佈局編輯器中，單擊以在要顯示帖子代碼的任何位置添加新行。

在“插入行”模式中，選擇“從庫中添加”選項卡。 找到您之前保存到庫中的博客文章代碼行並選擇它。

現在，帖子代碼將顯示在標題上。

展示當前類別的相關帖子

由於此帖子代碼將僅顯示在博客帖子上，因此我們可以選擇僅顯示與當前類別相關的帖子。

首先，我們需要將文本模塊中的標題文本更新為“相關帖子：”。

然後，打開帖子滑塊設置。 在包含的類別下，選擇當前類別選項。

現在，每篇博客文章的標題中都會有一個文章代碼，按當前類別顯示相關文章。

博客帖子模板的結果

這是正在運行的自動動畫。

以下是單擊導航箭頭跳轉到下一個和上一個帖子的方法。 單擊帖子標題會將您帶到該帖子。

這是它在平板電腦和手機上的外觀。

最後的想法

正如我們所了解的，我們可以通過簡化 Divi 的滑塊模塊設計並對導航箭頭進行一些自定義調整來輕鬆創建博客文章自動收報機。 並且不要忘記，您始終可以使用帖子滑塊的所有內置選項輕鬆進行樣式調整。 希望這對所有博客作者和 Web 開發人員都會派上用場。

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

乾杯!