關於Divi 5的組旋轉木馬模塊，您需要了解的一切

Divi 5的最新模塊之一是Carousel，它在這裡可以輕鬆為Divi網站創建視覺令人驚嘆的輪播和動畫。這種功能強大的補充使網頁設計師可以在不需要第三方插件或自定義CSS的情況下創建引人入勝的網站旋轉木馬。無論您是建立光滑的投資組合，電子商務商店還是博客，Carousel模塊都可以解鎖新的創造力水平。

在這篇文章中，我們將介紹您需要了解的有關組旋轉木馬模塊的所有信息，並提供有關如何使用它的示例和逐步指南。讓我們潛入！

什麼是旋轉木馬模塊？

Divi 5中的組旋轉木載模塊使您可以創建動態的，引人注目的輪播和滑塊，從而為您的網站增加一些移動和交互性。無論您是展示投資組合零件，團隊成員還是產品，此多功能模塊都可以使您幾乎構建任何類型的旋轉木馬，包括基於郵政的旋轉木馬，這些旋轉木馬會動態吸引內容。

每張幻燈片都是空白的畫布，使您可以添加任何Divi模塊，使其成為創造性和功能設計的絕佳工具。

關鍵功能

組旋轉木製模塊建在Divi 5的優化基礎上，確保快速加載時間和平穩的過渡。 Divi 5的拖放界面可讓您輕鬆地向滑塊添加模塊，並具有響應控件，可在台式機，平板電腦和移動設備上進行微調佈局，同時保持快速的性能。

可自定義的幻燈片

組旋轉木馬模塊可以完全控制滑塊，其內容和動畫設置的數量。您可以調整幻燈片過渡，定時和導航選項，以創建與您的視野相匹配的無縫用戶體驗。

循環構建器的動態內容

該模塊與Divi 5的循環構建器集成，根據帖子，術語或用戶數據支持動態旋轉木馬。例如，您可以使用自定義帖子類型和高級自定義字段（ACF）創建一個證明旋轉木馬，自動進行客戶評論或案例研究而無需手動更新。

設計靈活性

您可以利用Divi 5的設計設置來構建獨特的旋轉木馬樣式。將變換，過濾器，盒子陰影或懸停效果應用於幻燈片，並自定義組中的單個模塊，以創建視覺吸引人的幻燈片，以使訪問者保持參與度。

如何使用組旋轉木載模塊

在Divi 5中設置組旋轉木馬是直觀且靈活的。首先在頁面上添加單列行。接下來，在Visual Builder中選擇組旋轉木模塊，然後將其添加到您的頁面中。

在“內容”選項卡中，單擊以展開Carousel設置下拉菜單。

啟用自動旋轉，中心模式，並將幻燈片設置為3 。

在“元素”下拉菜單中啟用show dot導航。您可以將Show Arrows啟用或禁用。

將樣式分配給第一組

旋轉木馬設置到位，我們可以添加第一組。單擊“組設置”圖標以啟動設置。

在“內容”選項卡中，展開背景下拉菜單。單擊“背景圖像”選項卡，然後單擊+添加背景圖像以將圖像添加到組中。

接下來，導航到“設計”選項卡。展開佈局下拉菜單，並將其設置為合理的內容以結束。

接下來，擴展“間距”下拉菜單，並在我們組的左側和右側增加5％的邊距。這將增加旋轉木馬組之間的呼吸空間。

將頂部填充設置為100％。向左右塗上25px填充。

將內容添加到第一組

我們可以將注意力轉向為小組添加內容。單擊“黑色 +圖標” ，然後添加一個分隔器模塊。

導航到“設計”選項卡。將線路下拉菜單展開，然後將顏色更改為#FFFFFF 。

接下來，擴展“大小”選項卡。將分隔的重量設置為4px ，寬度為15％ 。

接下來，向組添加標題模塊。給標題標題。

切換到“設計”選項卡。在標題文本下，將標題級別設置為H2（或您想要的任何其他標題） ，選擇inter in inter for標題字體，為字體重量選擇燈， #ffffff的標題文本顏色和2em的標題文本大小。

在復制我們的小組之前，讓我們返回“設計”選項卡，然後將垂直差距調整為10px。這將消除模塊之間的任何不必要的垂直空間。

添加其他組

現在，我們的第一組已經設計了，我們可以復製樣式的組，然後簡單地將我們的內容（背景圖像和標題）換成旋轉木馬。複製該組八次，我們總共有9張幻燈片。

複製小組後，您的小組旋轉木馬應該看起來像這樣。

當我們在這裡時，最好給每個小組一個唯一的名稱，以便易於識別。單擊第一組的設置圖標，然後向下滾動以進行管理標籤。命名希臘團體。

單擊旋轉木馬中的第二組。展開背景選項卡，然後用新圖像替換圖像。

在“內容”選項卡中，不要忘記在管理標籤字段中添加名稱。接下來，將標題模塊的標題更改為緬因州。

重複所有其他組的步驟。完成後，您的旋轉木馬應該看起來像這樣。在視覺構建器中，您可以使用導航點滾動旋轉旋轉木馬，以確保您沒有錯過任何步驟。

如您所見，我們一些幻燈片上的文字很難閱讀。我們可以在Carousel級別的“設計”選項卡中糾正此問題，而無需單獨編輯每個組項目。

定制組和活躍組

在組旋轉木馬模塊中，您可以風格為主動和不活躍的組樣式。關鍵是組旋轉木製模塊本身用作空白畫布，並且您將樣式應用於其中的模塊組。這樣可以進行高水平的自定義，從而使您創建獨特的佈局和效果。

現在，我們已經創建了一個組旋轉木馬，請前往主旋轉木馬設置中的“設計”選項卡。

擴展組下拉菜單。此選項卡控制組旋轉木馬中包含的模塊組的設計設置。您在此處應用的任何設置都將應用於非活動組模塊。

展開背景選項卡。我們將在非活動選項卡上應用輕梯度，以確保文本清晰可見。將第一個梯度停止設置為＃000000 ，並具有0％的不透明度。稍微向右調整滑塊。啟用背景圖像切換上方的位置梯度。

將第二個梯度停止設置為＃000000 ，不透明度為40％ 。

啟用背景圖像切換上方的位置梯度。

接下來，找到“過濾器”選項卡。我們將減少非活動組的飽和度，以使背景圖像具有黑色和白色效果。找到飽和滑塊並將其設置為0 。

接下來，擴展“活動組”下拉菜單，然後單擊“背景”選項卡。應用與上述相同的梯度設置。

確保在背景圖像切換上方啟用位置梯度。

將過濾器下拉菜單在活動組下擴展，並將飽和滑塊調整為75％ 。這將僅使活動的旋轉木馬項目著色，從而允許用戶識別旋轉木馬中的活動幻燈片。

自定義響應式佈局

現在，我們的組旋轉木馬已經準備好台式機，我們將使用Divi 5的可自定義響應式斷點來設計旋轉木馬的移動版本。默認情況下，Divi 5啟用三個斷點。如果您想對各種設備尺寸進行更多控制，則可以使用所有七個可用斷點。單擊視覺構建器頂部欄中中間的省略號菜單。

啟用您想要的斷點，然後單擊保存以繼續。

單擊平板電腦斷點以查看平板電腦設備上的佈局外觀。向下滾動到旋轉木馬設置，然後調整幻燈片以顯示為1 。這也將適用於任何較小的斷點，例如在電話和手機上。

最後，單擊屏幕左上方的“預覽”按鈕，以在新標籤中查看您的組旋轉媒體。

完成後，您的組旋轉木馬應該看起來與下面的視頻相似。

就是這樣！在Divi 5中建立一個旋轉木馬是簡單的，可提供令人難以置信的結果。

與Divi 5的循環構建器集成

Divi 5的循環構建器是一個強大的功能，可以將組模塊變成動態內容顯示。此功能使設計人員可以創建動態的自動旋轉木製，這些旋轉木馬直接從WordPress中拉出內容，將靜態內容轉換為產品顯示，類別檔案或團隊成員旋轉木馬，並單擊幾下。

通過將Loop Builder與組旋轉木馬集成在一起，Divi 5使用戶能夠用最少的手動工作來製作複雜的內容驅動的旋轉木馬，從而成為動態網絡設計的出色功能。

循環構建器使組旋轉木馬能夠通過帖子，術語或用戶數據動態循環，從而創建自動反映您網站最新內容的輪播。由於循環構建器直接從WordPress數據庫中刪除數據，因此您可以輕鬆地展示博客文章，產品類別或用戶配置文件。

例如，您可以使用WooCommerce術語使用帖子類型或產品類別滑塊創建博客帖子旋轉木馬，從而使模塊具有令人難以置信的多功能性，以滿足動態內容的需求。

團體旋轉木馬模塊的現實世界例子

組旋轉木製模塊的柔韌性使其適用於各種用例。以下是一些現實世界中的示例，可以顯示可能的可能性。

自定義全寬度 /全屏滑塊

在此示例中，我們創建了一個全寬/全屏幕滑塊，為冰淇淋店搖晃。我們將旋轉木馬設置為一次顯示一個幻燈片，每個幻燈片都包含一個背景圖像，兩個標題和一個呼叫行動按鈕。我們還將動畫設置為三秒鐘的延遲後，將動畫推向下一個幻燈片。您可以通過將組旋轉木製和部分設置為100VH來實現此外觀。

團隊成員展示

當您想在網站上展示團隊成員時，使用組旋轉木馬模塊是一個很好的方法。在此示例中，我們已將3列佈局配置為旋轉木馬。每個幻燈片都使用Divi的社交關注模塊，包括爆頭，名稱，角色和社交媒體鏈接。將旋轉木馬一次滾動一次滾動滾動，以使其具有乾淨，專業的外觀。

類別展示

Divi 5的組旋轉木載模塊與Loop Builder完美無瑕。這使您可以創建具有網站產品類別的引人入勝的滑塊。每個幻燈片都動態地吸引了類別名稱和特色圖像，這是展示您的產品的好方法。在此示例中，我們使用過濾效果

推薦

組旋轉木馬模塊也非常適合創建推薦滑塊。您可以輕鬆地展示最佳的客戶評論，客戶推薦等。多虧了Group Carousel模塊，您不再僅限於靜態列或外部插件。

下載文件

免費下載

加入Divi新聞通訊，我們將向您發送終極Divi著陸頁佈局包的副本，以及大量其他驚人和免費的Divi資源，提示和技巧。跟進，您將立即成為Divi大師。如果您已經訂閱，則只需在下面的電子郵件地址中輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

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

使用Divi 5的旋轉木載模塊解鎖創意可能性

Divi 5的Group Carousel模塊是一個有力的補充，可以解鎖創建動態Divi網站的新可能性。從創建引人入勝的產品滑塊到證明，該模塊使您的Divi網站添加交互式內容更加容易。

現在，Divi 5的改進基金會為更多功能鋪平了道路，這是潛水的最佳時機！您是否嘗試過小組旋轉木馬模塊？在下面的評論中讓我們知道。