Divi 插件亮點 – Divi 博客附加功能

Divi 包含一個博客模塊，以全寬或網格佈局顯示您的帖子。 這是一個很好的模塊，可以完成工作。 如果您想要不同的佈局和功能怎麼辦？ 這可以通過 CSS 來完成，但名為 Divi Blog Extras 的第三方插件使任務變得更加容易。

Divi Blog Extras 是 Divi Extended 的第三方插件，它向 Divi Builder 添加了一個新模塊，其中包含一些新功能來顯示您的博客文章。 它包括六種不同的佈局設計，並添加了帶有加載更多按鈕的 AJAX 加載功能。 滾動時加載帖子，加載速度很快。 您可以更改閱讀更多和加載更多按鈕的文本。

在這個插件亮點中，我們將看看 Divi Blog Extras 並了解可以使用這個插件做什麼。 這些示例的圖片來自 Unsplash.com。

Divi Blog Extras 安裝和設置

正常上傳和激活。 然後，Divi Builder 中將提供一個名為 Divi Blog Extras 的新模塊。 要使用它，只需像任何模塊一樣將其放入一行即可。 由於選項與標準 Divi Builder 模塊相同，因此使用此模塊很直觀。

內容設置包括熟悉的選項，並有六個佈局選擇、摘錄長度、類別顏色、加載更多按鈕文本、特色圖像疊加、閱讀更多按鈕文本和文本顏色選項。 設計設置包括標題、元和正文以及邊框樣式。 Block Extended 佈局添加了圖像位置，Classic 添加了社交圖標。 讓我們仔細看看每個佈局。

網格擴展

默認佈局 Grid Extended 顯示圖像和文本交替的博客文章。 懸停時圖像變亮。 類別名稱放在一個框中。 在響應模式下，圖像放置在頂部。

在此示例中，我添加了懸停覆蓋、懸停圖標、更改了閱讀更多文本、將摘錄限制為 100 個字符，並更改了類別文本和背景顏色。 當您將鼠標懸停在帖子的任何部分時，會顯示懸停動畫。

盒子擴展

Box Extended 將摘錄放在與圖像重疊的框中，並移除類別名稱周圍的框。 作者的圖像被添加到元部分。 圖片和文字交替出現。 這是更優雅的博客佈局之一。

在此示例中，我更改了類別字體和背景顏色，將摘錄長度限制為 150 個字符並將字體更改為藍色，並更改了閱讀更多按鈕文本。 默認懸停使圖像變亮，如上圖所示。

全屏寬度

全寬將圖像放在左側，將摘錄放在右側，在最左側添加樣式日期。 每個帖子由一行分隔。 類別名稱放置在元數據中。

此示例禁用日期和元信息。 文本使用自定義顏色。 我改變了閱讀更多並加載更多按鈕文本。 摘錄限制為 200 個字符。

所有的佈局都是響應式的。 下面來看看 Full Width 的響應式外觀。 這在 2 列行中並排顯示了兩個模塊。

塊擴展

Block Extended 是一個博客網格，它在卡片底部的圖像和元數據上添加類別名稱。 當您將鼠標懸停在卡片的任何部分時，圖像會縮放。 我喜歡這種類型的微交互，因為它顯示卡片是可點擊的。

Block Extended 具有三個用於顯示圖像的選項。 本示例將特色圖像置於背景中，文本置於疊加層中。

此示例在前兩個選項之間交替背景圖像。

全寬背景

全寬背景以全寬顯示圖像的裁剪版本，並將帶有元數據的摘錄放置在圖像的疊加層中。 摘錄位置交替出現。 Meta 與摘錄之間用一行分隔。

此示例在圖像上使用深色疊加層以顯示摘錄的疊加層在懸停時不使用相同的疊加層。 在這個例子中，該部分的背景是紅色的。 注意紅色在懸停時顯示出來。 我還添加了自己的閱讀更多按鈕文本和 2 像素邊框。

經典的

經典佈局顯示帶有全尺寸圖像和圖像下方全寬摘錄的博客文章。 類別和日期位於標題上方。 標題包括一個短行分隔符，使其與圖像分開。 摘錄下方是作者姓名和評論數，以橫槓分隔。 更細更寬的線分隔符將柱子彼此分開。

此佈局具有顯示社交圖標的選項。 單擊“加載更多”（或我標記為“查看更多文章”）會顯示下一組帖子，這等於我選擇顯示的帖子數量。 在這個例子中，我展示了兩個帖子。 加載更多加載接下來的 2 個帖子。

使用 Divi Blog Extras 創建獨特的佈局

多個模塊可以一起使用來創建雜誌佈局。 這個簡單的佈局包括四個顯示網格擴展佈局的模塊。 每個模塊顯示不同的類別。 中間的兩個分別顯示兩個帖子。

這為各個部分創建了具有不同類別的雜誌佈局。 此示例顯示了擴展網格如何響應。

這是相同的 Divi Builder 佈局，但使用全寬背景。 在響應模式下，覆蓋層幾乎完全覆蓋了圖像。

此示例對頂部模塊使用 Classic 佈局，對接下來的兩個模塊使用 Grid Extended。 每個模塊顯示不同的類別，並具有自己的類別文本樣式。 頂部模塊不顯示摘錄。

這創造了一個有趣的雜誌佈局。 我還將行設置為顯示全寬。 您可以混合和匹配佈局以獲得獨特的設計。 我為每個模塊創建了具有不同類別的佈局。 在未來的更新中，該模塊將具有偏移功能，因此您可以在同一類別中使用多個模塊。

執照

單個站點是 15 美元。 擴展許可證是 30 美元，可以在無限站點上為您和您的客戶使用。 它包括終身更新。

此插件不適用於 Extra。

• 您可以在 Divi Extended 的網站上購買此插件。

最後的想法

Divi Blog Extras 添加了一些不錯的樣式和設計功能，讓您的博客模塊變得更加有趣。 它還增加了設置類別背景和文本樣式的能力。 它使用 AJAX 進行加載並包含一個新的加載按鈕。 您甚至可以將自己的文本添加到加載更多並閱讀更多按鈕。 這些設計中的每一個都非常適合為您的博客提供標準博客的獨特外觀。 如果您想要一個超越標準 Divi Builder 博客模塊的博客設計，Divi Blog Extras 可能是您正在尋找的模塊。

我們希望聽到您的意見。 您是否嘗試過 Divi Blog Extras？ 在下面的評論中讓我們知道您的體驗。

精選圖片來自 pulsar011/shutterstock.com