Divi 插件亮點：Divi Carousel 模塊

DIVI Carousel Module 是 Divi 和 Extra 的第三方插件，它為 Divi Builder 添加了高級輪播滑塊。 您可以控制模塊中的幾乎所有內容，為您的 Divi 或 Extra 網站創建幾乎任何類型的輪播。 在本文中，我們將看看 Divi Carousel Module，看看它可以做什麼以及它是多麼容易使用。

Divi Carousel 模塊安裝和激活

正常上傳並激活插件。 儀表板中添加了一個名為 DiviGear 的新菜單項。 進入此菜單並添加您的許可證密鑰。

Divi Builder 中的 Divi Carousel 模塊

Divi Builder 中添加了一個名為 Divi Carousel 的新模塊。

該模塊包括一個用於添加新項目的區域。 “內容”選項卡具有滑塊設置，可讓您根據用戶使用的設備選擇要顯示的幻燈片數量、啟用多幻燈片、設置過渡持續時間等。啟用中心幻燈片、循環播放、自動播放、箭頭導航和點導航. 設置項目間距，啟用等高和垂直對齊。 高級設置讓您選擇滑塊效果。

“設計”選項卡包括疊加層、圖像（寬度）、圖像邊框、標題和正文文本、顏色、間距和邊框的設置。 這包括箭頭和點導航的顏色自定義。

高級選項卡包含您期望的所有 CSS 字段，以及可見性和過渡設置。 它為標題、內容、圖像和按鈕添加 CSS 字段。

輪播項目設置還包括三個選項卡。 這些設置會覆蓋主模塊設置中的任何設置。 內容選項卡有一個區域，用於顯示主要內容、標題和圖像鏈接、按鈕設置、圖像設置和背景。

“設計”選項卡包括標題文本、內容樣式（正文）、按鈕、間距和框陰影的設置。 這些是您在大多數 Divi 模塊中看到的標准設計設置。 高級選項卡是大多數模塊中的基本設置。

對於圖像設置，您可以使用圖像或圖標。

根據需要添加任意數量的幻燈片。 幻燈片根據您設置的顯示數量並排顯示。 這一項設置為顯示四項。 當然，您可以按您想要的任何順序拖放它們。

在本例中，我將項目間距調整為 100。在我的示例中顯示的主要區別是文本。 現在每行顯示更少的單詞。

這個使用箭頭導航。 我已將其設置為顯示在幻燈片的外側。 我已經將項目間距設置為 1。如果您使用背景顏色，它會更明顯。

我已將其設置為顯示兩張幻燈片。 它顯示點導航。

下面來看看高級設置。 我已將滑塊效果設置為 Coverflow。 這將打開一個旋轉和一個陰影選項。 此功能顯示了模塊與標準滑塊的真正區別。 這是默認設置。

現在我將旋轉設置為 100。幻燈片向左側傾斜更多 3D，遠離屏幕。

這是相同的旋轉，但沒有 Coverflow 陰影。

Divi Carousel 模塊示例

我最喜歡的旋轉木馬用途之一是顯示客戶或產品的標誌。 在這個例子中，我將模塊添加到 App Developer Landing Page 的投資組合頁面。 我已將其設置為顯示 3 個公司徽標、循環滾動和自動播放，因此訪問者無需瀏覽它們。

它還可以顯示您參與過的項目。 對於這個，我添加了幾個帶有按鈕的項目，以便訪問者可以看到該項目。 我已將按鈕的文本顏色更改為白色，並為按鈕添加了框陰影。 我將箭頭設為白色並將其背景的不透明度設置為幾乎透明。

在這裡，我為幻燈片添加了背景，使其半透明，並添加了框陰影。 間距包括按鈕、圖像和內容填充。 我已經為按鈕和圖像添加了間距。

這個使用溢出滑塊效果。 這是默認設置。

對於這一點，我已將其設置為使幻燈片居中。 當與溢出設置一起使用時，它使中間幻燈片居中並使兩側的幻燈片傾斜以面對彼此。 它設置為顯示四張幻燈片。

這個設置為顯示 3 張幻燈片。 我已將旋轉設置為 80。

這個設置為顯示 6 張幻燈片。 旋轉設置為默認值 (50)。

這一張顯示了 6 張沒有啟用中心幻燈片或溢出的幻燈片。

這個顯示了 6 啟用了中心幻燈片。

在本示例中，我將該模塊用作食物菜單滑塊。 通過添加圖像、文本和按鈕，它實際上創建了一個模糊的滑塊。 圖像設置為 100 寬度。 我添加了一個疊加層、一個購買每件商品的按鈕（該按鈕會將您帶到該商品的產品頁面）和點導航。 我已經設計了覆蓋層和覆蓋層圖標以及活動和非活動幻燈片的點。 它非常適合咖啡佈局。

對於這個，我添加了箭頭導航並將其樣式化以匹配按鈕。 我讓它在懸停時顯示箭頭。 您可以在滑塊內部或外部設置箭頭並更改其顏色。 您無法在模塊的設置中更改它們的大小。

這個使用了 Coverflow 效果。 我將鼠標懸停在左側幻燈片上以顯示疊加層和箭頭。

對於這個，我只在其中一張幻燈片中添加了背景和框陰影。 這可用於顯示正在出售的商品或突出顯示最優惠的價格。

對於這個，我只使用圖標。 我將該模塊放在一組簡介模塊旁邊，並設置了 6 個社交媒體鏈接。 它們的樣式與宣傳語相匹配。 單擊該圖標可打開社交網絡。 我已將其設置為每秒自動滑動一次。

顯示多張幻燈片會切斷圖標的一部分，這在滑塊動畫時提供了良好的視覺效果。

對於這個例子，我想構建一個簡單的定價表滑塊。 我簡化了高爾夫球場佈局包中的價格。

現在我添加了框陰影。 起初，我無法讓垂直陰影進入幻燈片下方。 然後我意識到幻燈片正在接觸模塊容器的側面。 我添加了模塊填充，然後我可以在幻燈片的所有側面添加框陰影。

您還可以單獨調整每張幻燈片的按鈕、圖像和內容填充。 在此示例中，我正在調整左側幻燈片的填充。

我添加了箭頭並設置了它們的樣式以匹配佈局中的元素。

在這個例子中，我添加了圖像，更改了框陰影，並添加了更多的內容填充，以便框陰影完全顯示。 我還將箭頭移到幻燈片的外部。

現在我添加了一個按鈕。 我調整了按鈕樣式，包括顏色、邊框半徑、文本大小，並添加了與幻燈片匹配的框陰影。

當然，由於該模塊包含一個內容區域，您可以添加您想要的任何類型的內容，包括媒體。 我添加了與佈局匹配的圖像。 所有內容都放在標題下。 圖像在這個位置看起來很棒。

以下是模塊在高爾夫球場佈局中的外觀。 原始佈局具有許多定價功能。 使用 Divi Carousel Module，所有定價仍然存在，但顯示在幻燈片中。 看起來它屬於這種佈局。

它也適用於 Extra。 在此示例中，我已將頁面設置為不顯示側邊欄。

這是側邊欄的外觀（雖然我沒有為側邊欄添加任何小部件，但大小是相同的）。 您可以在此處看到該模塊具有響應性。

Divi Carousel 模塊價格

Divi Carousel Module 可從開發人員的網站獲得。 有兩種選擇：

• 單個站點 – 15 美元
• 無限站點 – $29

Divi Carousel 模塊文檔和支持

DiviGear 儀表板菜單中提供了文檔。 選擇文檔選項卡。 這提供了指向 DiviGear YouTube 頻道上 4 分鐘視頻演練的鏈接。 通過 Freshdesk 提供票證支持。

結束的想法

Divi 輪播模塊是一種向 Divi Builder 添加輪播滑塊的簡單方法。 它很直觀，實際上比我預期的有更多的自定義。 有幾次我無法正確克隆幻燈片，但這可能是我的問題。 記住給每張幻燈片一個管理標籤，否則它們會在模塊中顯示項目的名稱，這使得很難區分它們。

我喜歡它分別有圖像、內容和按鈕。 這允許您創建卡片、簡介、圖像、文本、顯示圖標或任何您需要在滑塊中顯示的內容。 您可以將圖像添加到滑塊的頂部，並且仍然可以向內容區域添加更多圖像。

Divi Carousel Module 是一款出色的旋轉木馬滑塊。 它可以從開發者的網站和 Divi 市場獲得。

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

精選圖片來自 Anatolir/shutterstock.com