Divi 插件亮點：Divi 產品輪播模塊

Divi 產品輪播模塊是 Divi 的第三方插件，可在輪播滑塊中顯示 WooCommerce 產品。 構建產品輪播並將其放置在任何 Divi 佈局中。 您可以為它們設置樣式並選擇多個佈局和顯示選項。 在本文中，我們將了解 Divi Product Carousel Module，了解其功能，並了解它的易用性。

Divi 產品輪播模塊可從開發人員的網站和 Divi 市場獲得。

Divi 產品輪播模塊

上傳並激活插件後，轉到儀表板菜單中的 DiviGear 並激活您的許可證。 如果您有來自該開發人員的多個插件，則需要選擇該插件的選項卡。

Divi Builder 中添加了一個名為 Product Carousel 的新模塊。 它包括一個紫色圖標，因此它從人群中脫穎而出。

設置包括內容、設計和高級選項卡。 內容選項卡具有 WooCommerce 內容的設置。 從下拉框中選擇最近、特色、銷售、暢銷、評分最高或產品類別的產品類型。 輸入要顯示的產品數量的數字。 從受歡迎程度、評級、日期或價格中選擇排序順序。 您還可以啟用添加到購物車按鈕和說明。 顯示完整的描述或摘錄。

輪播設置讓您可以根據所使用的設備選擇列數。 它還包括多幻燈片（允許它按照屏幕上的幻燈片數量滑動或禁用它一次滑動一張幻燈片）、項目間距、過渡持續時間、中心、循環、自動播放、點和箭頭導航、對齊和幻燈片效果。 其他設置包括鏈接和背景。 有趣的是，您可以同時使用點和箭頭。 您可以將點放在幻燈片底部的右側、中間或左側。

設計選項卡包括疊加、標題、價格、描述、銷售徽章、添加到購物車按鈕、評論、箭頭、點、圖像、懸停、間距、邊框和框陰影的設置。 根據您選擇的選項添加其他設置。 這些設置中的每一個都是廣泛的。

高級選項卡包括預期的 CSS、可見性和過渡功能。 自定義 CSS 包括產品、圖像、標題、價格、上一個銷售徽章箭頭、下一個箭頭和點的字段。 這使您可以對 CSS 進行大量控制。

Divi 產品輪播模塊設置

您可以將標題和價格移至頂部或底部。 在本例中，我將兩者都移到了頂部並更改了它們的大小和顏色。 我通過更改背景顏色和字體大小來設計銷售徽章的樣式。 我還設計了非活動和活動點的樣式。

這是它在前端的外觀。 我還添加了一個疊加層，懸停時會出現“添加到購物車”按鈕。 您可以為疊加懸停和按鈕懸停設置此按鈕的樣式。

在這一列中，我選擇了 6 列，將所有文本移回底部，調整文本顏色，並為添加到購物車按鈕添加了一些不透明度。 我默認保留懸停不透明度，因此如果您將鼠標懸停在按鈕本身上，則該按鈕是實心的。

對於這個，我將佈局設置為 4 列。 我添加了箭頭並更改了箭頭和圓點的顏色。 我還為標題、價格和描述添加了背景，並將所有文本更改為白色。 為了使文本在框中對齊，我添加了一些內容填充。 它還包括頂部的內容填充（如果您將標題或價格放在圖像上方）。

這是它在前端的外觀。 右側的箭頭較亮，表示它位於它可以顯示的產品的末尾。 如果我將它設置為循環，它將是正常顏色。

這是選擇溢出時的外觀。 它提供了不錯的 3D 卡片效果。 您可以調整旋轉量並啟用幻燈片陰影。

在這個例子中，我給卡片一個框陰影並調整了模糊。 我還將箭頭更改為圓形並調整了顏色。

這是啟用了中心幻燈片的前端的外觀。 這是 4 列佈局。 當您選擇中心幻燈片時，它的顯示方式會有所不同。

這是使用與上述示例相同的設置的 5 列佈局。

產品輪播非常適合 Divi 佈局。 在這個例子中，我用 Divi Product Carousel Module 替換了 Divi shop 模塊，並將它的樣式設置為與佈局相匹配。

在這個中，我將標題移到頂部，在頂部和底部添加了一些填充，並將標題設為半粗體。 我還更改了添加到購物車按鈕的顏色以匹配佈局。

對於這個，我調整了幻燈片和圖像的邊框以創建圓角。 我繼續將圖像製作成圓圈。 我還添加了一個框陰影。

它在佈局中看起來很棒。 不過，它確實隱藏了大部分銷售徽章。 CSS 可能有辦法解決這個問題。

這個使用 3 列佈局的溢出。

對於這個，我刪除了圖像邊框，但保留了幻燈片的邊框。 我添加了一個盒子陰影並調整了它的強度和位置。

它還顯示懸停時評論的星級。 它將評級放在“添加到購物車”按鈕旁邊。 它通過一個很酷的動畫將它們結合在一起。 這是默認設置。 您可以設置背景和星星的顏色。

在這一篇中，我設計了評級的樣式以匹配佈局中的元素。

對於這個，我將價格移到頂部，將標題移到底部。 我添加了描述和覆蓋。 我將點導航移到右側。 我不得不為盒子陰影添加一些填充以顯示在側面。 在沒有填充的情況下，它將產品放置在模塊空間的邊緣。

Divi 產品輪播模塊演示

目前在開發者的網站上有 13 個可下載的演示。 這些是您可以上傳到 Divi 庫並與任何 Divi 佈局一起使用的佈局。 所有這些都包括 Divi Product Carousel 模塊的樣式，有些還包括其他樣式的模塊和背景。 這些有助於從您的產品輪播設計開始，並展示可以使用該模塊完成的一些事情。 讓我們來看看其中的幾個。

這個將標題放在頂部，樣式到頂部和底部以匹配，在圖像外添加帶圓圈的箭頭並包括點。 它還有一個底部邊框，使幻燈片脫穎而出。 我喜歡大膽的顏色。 頂部和底部有一點透明度，所以背景圖案可以透出來。 此佈局包括標題的樣式文本模塊。

一些佈局包括具有樣式的其他模塊。 這個使用兩列佈局來添加使用文本和按鈕模塊的號召性用語。

這是它從前端的外觀。 它包括一個邊框、頂部的標題和添加到購物車按鈕的兩種顏色。 箭頭顯示在模塊的圖像中。

這個包括綠色背景和样式幻燈片以匹配。 當您將鼠標懸停在產品上時，添加到購物車按鈕為淺綠色，當您將鼠標懸停在按鈕上時，該按鈕為深綠色。 它包括標題的樣式文本模塊。

這包括銷售徽章的藍色樣式、圖像外的圓形箭頭和添加到購物車按鈕。 它為幻燈片添加了一個小邊框。 它顯示具有溢出效果的幻燈片。

這一個還展示了具有溢出效果的產品。 它還使用藍色作為箭頭和添加到購物車按鈕。 標題移到頂部。 覆蓋層為白色，不透明度高，銷售徽章為紅色。

這包括一個風格化的背景，並添加了一個邊框、風格化的添加到購物車按鈕、銷售徽章和帶圓圈的箭頭。 覆蓋層是白色的。 它將價格放在頂部，將所有其他數據放在底部。

Divi 產品輪播模塊價格和文檔

Divi 產品輪播模塊有兩種購買選項：

• 單個站點 – 19 美元
• 無限站點 – 39 美元

它可以從開發人員的網站和市場上獲得。

文檔由 YouTube 視頻提供，可引導您了解這些功能。 您可以在儀表板的 DiviGear 菜單中找到它的鏈接。 如果您有多個 DiviGear 產品，請選擇該產品的選項卡，然後選擇文檔。

結束的想法

Divi Product Carousel 易於使用，非常適合讓您的產品脫穎而出。 即使您不想將它們顯示為滑塊，它也有很多樣式和產品展示選項值得考慮。 我在 Extra 上工作得不是很好。 我很想看到 Extra 支持，因為它已經有很多 WooCommerce 功能，並且是構建 WooCommerce 商店的絕佳平台。

我喜歡它有可下載的演示。 它們包括模塊的背景和样式。 這些非常適合為您提供一個起點或激發您的想像力，以在您的 Divi 佈局中展示您的 WooCommerce 產品。

如果您有興趣在輪播中展示您的 WooCommerce 產品，或者只是有更多的設計選項，Divi 產品輪播模塊值得一看。 它可以從開發者的網站和 Divi 市場獲得。

我們希望聽到您的意見。 您是否嘗試過 Divi 產品輪播模塊？ 請在評論中告訴我們您對此的看法。

特色圖片字母-Shmetters / shutterstock.com