如何使用Divi 5構建自定義全屏滑塊（免費下載）

Divi 5的最新版本之一介紹了Group Carousel模塊，這是為您的WordPress網站創建自定義，引人入勝的滑塊和旋轉木馬的功能。您可以輕鬆地展示您的投資組合，產品，身臨其境的英雄或全屏滑塊，並將您網站的設計提升到新的高度。

在這篇文章中，我們將提供一個分步指南，用於使用組旋轉木馬模塊創建全屏滑塊。讓我們潛入！

了解組旋轉木馬模塊

組旋轉木馬模塊是Divi 5的多功能補充，使您能夠創建動態的滑塊和旋轉木馬。

與傳統模塊不同，它支持各種佈局，從簡單的圖像旋轉木馬到由循環構建器提供動力的複雜的基於後的滑塊。這種靈活性使其非常適合以引人注目的方式展示諸如投資組合，推薦或產品畫廊之類的內容。

組旋轉木載模塊的主要特徵

組旋轉木製模塊具有強大的功能。它支持動態的內容循環，使您可以使用循環構建器將帖子，頁面或自定義帖子類型直接納入滑塊。

該模塊還允許您使用任何Divi模塊使用嵌套的行和模塊組來構建美麗，引人入勝的滑塊。您可以用箭頭和分頁點自定義導航，自定義其位置，顏色和其他樣式以匹配您的網站。

自動播放選項，可調節速度和暫停懸停功能為您的訪問者提供了引人注目的體驗，以確保它們在您的網站上的停留時間更長。此外，該模塊是完全可自定義的，使您可以創建全屏和全width佈局，非常適合您網站上的英雄，服務或功能部分。

如何使用Divi 5的Carousel模塊構建全屏滑塊

在本教程中，我們將向您展示如何使用組旋轉木馬模塊為即將到來的Divi 5網站構建全屏滑塊。最後，您將擁有建立迷人的滑塊的技能，以鼓勵您的訪客採取行動。

步驟1：設置新頁面

創建一個新頁面，添加標題，然後單擊使用Divi Builder開始。

當Visual Builder打開時，請在創建頁面選項下從頭開始選擇構建。

懸停在新頁面上的部分中以顯示設置圖標。單擊它以顯示該部分的設置。

導航到“設計”選項卡。單擊佈局下拉菜單。在合理的內容下，選擇中心。在對齊項目字段中，選擇中心。這將使我們的部分的內容水平和垂直地集中。

接下來，我們將調整本節的間距設置。擴展間距下拉菜單。將邊距設置為0px ，頂部和底部。在填充下，將頂部和底部設置為0px 。

在本節的設置到位後，單擊“綠色 +圖標”以添加新行。

在相等的列下選擇單列行。

接下來，將組旋轉木載模塊添加到行中。

在添加內容之前，我們必須設置具有Flexbox和間距控件的行和輪播模塊。

步驟2：配置行設置

創建全屏滑塊需要我們將行和組旋轉木馬模塊設置為100％寬度。單擊圖層圖標以輕鬆調整部分。在使用全寬部分和行時，這是至關重要的，尤其是在將填充和保證金設置為0時。它使您更容易看到頁面的佈局結構

在“圖層”視圖中，單擊以選擇包含組旋轉木馬模塊的單列行。導航到設計設置。在佈局下拉菜單中，將水平差距調整為0 。

另外，將對齊項目設置為中心的行。

將大小選項卡中的寬度和最大寬度設置為100％。

在“間距”選項卡中，將頂部和底部邊距和填充設置為0px 。

步驟3：配置組旋轉木馬設置

接下來，我們將配置組旋轉木馬設置。在“內容”選項卡中展開Carousel設置下拉菜單。您可以在2000毫秒的默認設置下切換自動旋轉，選擇自動旋轉速度，然後在懸停時暫停。

在“元素”選項卡中，禁用show dot導航並啟用了show箭頭。您也可以為左和右箭頭選擇一個自定義圖標。

單擊“設計”選項卡中的“箭頭”選項卡。將#FFFFFF分配為箭頭顏色，將箭頭大小放在默認的48px處，然後將箭頭位置設置為內部。

展開背景選項卡，並分配＃000000作為背景顏色。

步驟4：樣式第一組

我們可以將內容添加到第一個幻燈片中，並使用該部分，行和組旋轉木馬設置。單擊“組旋轉木馬”模塊中的“內容”選項卡，然後單擊組的設置圖標。

展開背景下拉菜單，然後選擇“梯度”選項卡。

單擊第一個梯度滑塊以分配新顏色。輸入＃EFB648進入顏色字段。

接下來，單擊第二梯度滑塊，然後將＃F28F52分配為顏色。

在梯度類型字段中，選擇圓形。

接下來，導航到“設計”選項卡。擴展間距選項卡，並將5％的填充分配到組的頂部和底部。

步驟5：將內容添加到第一組

現在，我們的組設置已配置，我們可以開始向組添加內容。單擊黑色 +圖標以添加一個模塊。

出現插入模塊或行對話框時，單擊“新行”選項卡。在“平等列”部分下，選擇單列行。

添加標題模塊

選擇並插入標題模塊。

擴展文本下拉菜單，然後輸入橙汁作為標題。

導航到“設計”選項卡。擴展標題文本下拉菜單。選擇H1作為標題級別，將Bebas Neue用作標題字體，將標題字體樣式設置為大寫，標題文本對齊中心，標題文本顏色為#ffffff ，將標題文本大小和20EM標題大小。

使用Divi 5的響應性控件將標題文本大小調整為平板電腦上的15EM ，而在移動設備上進行了8EM 。

添加新行

接下來，我們將在包含標題模塊的單列行下添加一個新行。單擊黑色 +圖標以添加新模塊。

單擊“新行”選項卡。在偏移列下，選擇1/4 + 1/2 + 1/4選項。

在“設計”選項卡中，展開“大小”選項卡，然後輸入70％的寬度和最大寬度。將對齊設置為中心。

添加標題模塊

選擇標題模塊，然後將其添加到第一列。

給標題標題，然後訪問“設計”選項卡。擴展標題文本下拉菜單。選擇標題級別的H2 ，將bebas neue作為標題字體，大寫為標題字體樣式， #ffffff作為標題文本顏色，而6em則為標題文本大小。

使用Divi的響應控件將標題文本大小調整為4em 。

添加文本模塊

在第一列中的標題下方添加文本模塊。輸入一些身體文本，然後切換到“設計”選項卡。選擇poppins作為文本字體，將文本顏色設置為#ffffff ，然後將文本大小設置為16px 。

添加一個按鈕模塊

在第一列中的文本模塊下添加一個按鈕模塊。將文本分配給“內容”選項卡中的按鈕，然後將文本交換到“設計”選項卡。擴展按鈕下拉菜單，並啟用自定義樣式進行按鈕。然後展開按鈕背景菜單。在“背景顏色”選項卡中，將＃528BF2添加為按鈕的顏色。

使用Divi 5的懸停控件將＃6A7C9D分配為按鈕的懸停顏色。

切換回桌面視圖。擴展按鈕邊框下拉選項卡。在按鈕邊框半徑下添加100px ，然後將按鈕邊框寬度設置為0px 。

展開按鈕文本下拉菜單。將poppins分配為按鈕字體， #ffffff作為按鈕文本顏色，將16px作為按鈕文本大小。

展開按鈕圖標設置，並禁用顯示按鈕圖標切換。

最後，擴展“間距”下拉菜單。將15px填充在頂部和底部和左側和右側35px 。

添加圖像模塊

將圖像模塊放在第二列中。當設置出現時，將懸停在圖像字段上以揭示設置。單擊設置圖標以加載媒體庫並將圖像上傳到模塊。

接下來，我們將在圖像中添加一個交互，以創建鼠標越過效果。導航到高級選項卡。展開交互菜單以揭示其設置。單擊+添加交互按鈕。

選項出現時選擇鼠標輸入。

在管理標籤字段中輸入圖像傾斜，選擇鼠標輸入作為觸發事件，鏡像鼠標運動作為效果動作，選擇圖像作為目標模塊，傾斜為運動類型，而15表示靈敏度。最後，單擊“保存交互”按鈕以啟用交互。

添加欄計數器模塊

單擊以在第三列中添加欄計數器模塊。在“內容”選項卡中。在“元素”選項卡中，禁用顯示百分比。

接下來，擴展“背景”選項卡。添加#ffffff作為背景顏色。

交換到“設計”選項卡並擴展欄下拉菜單。在條背景顏色字段中，將＃528BF2添加為顏色。

擴展標題文本下拉菜單。在標題字體字段中，選擇Bebas Neue 。選擇#ffffff作為標題文本顏色，將22px作為標題文本大小。

交換回到內容選項卡。這次，單擊第一個條形計數器項目的設置圖標。

將文本輸入標題字段，並將百分比字段設置為75 。

單擊以返回到欄計數器模塊的主內容選項卡。

現在設置了我們的設計設置，您可以輕鬆複製第一個欄櫃檯項目以保留設置。

複製條形計數器項目，然後將標題和百分比更改為您所需的設置。

步驟6：添加動畫

為了使小組更加身臨其境，我們將添加一些動畫效果。首先，我們將為主要標題添加縮放效果。單擊以選擇該組的主要標題。導航到“設計”選項卡，然後向下滾動以擴展“動畫”選項卡。為動畫選擇縮放。保留所有設置。

接下來，單擊以展開第二行（三列行）。單擊第一列的設置。

單擊“設計”選項卡並向下滾動以顯示“動畫”選項卡。選擇動畫樣式的幻燈片，並為動畫方向提供正當的幻燈片。保留所有其他設置。

單擊該行的主要內容選項卡。這次，選擇第三列。導航到“設計”選項卡，展開“動畫”選項卡，然後選擇幻燈片>左側的動畫。將其他設置留在其默認設置中。

步驟7：重疊行

為了在佈局中增加一些額外的才能，我們將調整第二行的邊距，以創建重疊效果。這將使行向上推動，從而使其可以重疊主要標題，從而產生不錯的效果。在佈局中選擇第二行，然後導航到“設計”選項卡。展開“間距”選項卡以顯示設置。在最高邊緣，將值設置為-8％。

接下來，我們將應用Z索引值以將第二行放置在第一個上方。導航到高級選項卡，擴展位置設置，然後將999999應用於Z索引字段。

當您預覽滑塊時，您會發現第二行被推到略微重疊，從而產生了一個不錯的重疊效果。

步驟8：測試響應能力

在我們複製第一組之前，要測試佈局的響應能力是一個好主意。使用Divi 5的可自定義響應式斷點進行任何調整。

在Divi 5中，現在有7個斷點，而不是Divi 4的3。您可以使用這些斷點來確保在任何屏幕尺寸上的佈局看起來都令人難以置信。在我們複製第一組之前，請瀏覽斷點並進行必要的調整。

Divi 5中最好的新功能之一是能夠更改移動設備列的順序。這是使設計在所有屏幕尺寸上保持功能和有效性的好方法。在移動視圖中，在我們的佈局（3列行）中選擇第二行的第二列。

在“內容”選項卡中，展開訂單選項卡。從那裡，將顯示順序設置為-1 。這將使圖像放在頂部，使圖像像在台式機和平板電腦的視圖上一樣覆蓋標題。

步驟9：複製組

一旦我們將所有內容都放開，我們就可以輕鬆複製第一個組並更改背景梯度，文本和圖像，而無需重複所有步驟。在主旋轉木馬組內容選項卡中，單擊以復制第一個組。

在復制之前，將管理標籤分配給組，以使識別識別更加容易。

從那裡，更改標題，交換圖像，並將新的背景梯度分配給組。使用＃fc6a3c作為第一個梯度滑塊，第二個梯度滑塊和＃c52f00 。

您還需要將按鈕和吧台計數器顏色更改為懸停的＃3DFCCA和＃C52F00 。

我們還需要調整第二組的動畫時機。這樣可以確保在滑塊前進之前，動畫不會為其他幻燈片加載。在主要標題模塊中，導航到“設計”選項卡，展開動畫菜單，然後將動畫延遲設置為2000ms 。

對於3列行做同樣的事情。在第一列和第三列中，將動畫延遲設置為2000ms 。

更改第三組

對於第三組，將＃71B953和＃617A56用於背景梯度。

對於按鈕和條形計數器模塊，請使用＃BA54B3和＃654F64進行懸停顏色。

您還需要更改標題模塊上的動畫延遲，第二行的第一和第三列更改為4000ms 。

更改第四組

對於背景梯度，使用＃AD52B7和＃AD52B7 。

使用＃83B853和＃83B853進行條形計數器和按鈕模塊。

最後，將動畫延遲設置為組的主要標題上的6000ms，以及3列行的第一列和第三列。

步驟10：預覽並保存滑塊

最後一步是保存佈局並預覽它，以確保不會錯過任何步驟。在視覺構建器中，單擊右上角的“保存”按鈕。

單擊“預覽”按鈕在新選項卡中打開佈局。

完成後，您的滑塊應該看起來像這樣：

就是這樣！ Carousel模塊是Divi 5的多功能新成員。它允許您為任何項目創建滑塊和輪播，並提供無限制的自定義選項。

下載全屏旋轉木馬佈局

如果您想使用我們在這篇文章中重新創建的佈局，則可以通過以下表格訪問它。下載並解壓縮文件夾後，您將找到一個JSON文件。導航到您的Divi庫上傳文件，以便您可以訪問並將其用於構建的任何頁面。

下載文件

免費下載

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

下載

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

今天在Divi 5中建立您的第一台旋轉木馬

使用Divi 5的Group Carousel模塊創建自定義的全屏滑塊，為在您的網站上創造引人入勝的體驗開闢了一個世界。遵循本文中的步驟，您已經學習瞭如何使用模塊的功能，從動畫，響應式斷點和交互式效果等高級自定義選項。組旋轉木製模塊的靈活性使您可以為您想像的任何東西構建幻燈片，同時在所有屏幕尺寸上保持無縫的專業外觀。

下載最新的Divi 5 Public Alpha，對組旋轉木馬模塊進行實驗，並讓我們知道您在評論或社交媒體渠道上的想法。