Divi 插件亮點:Divi 輪播模塊
已發表: 2023-01-23Divi Carousel Module 是 Divi 的第三方模塊,可以創建有趣的輪播。 它們非常適合圖像、產品、推薦、團隊成員等。 該模塊包含許多使其脫穎而出的設計元素。 幸運的是,它並不難使用。 在本文中,我們將了解 Divi Carousel Module,了解它的功能,並了解它的易用性,以幫助您確定這是否是滿足您需求的正確產品。 Divi Architect Layout Pack 將作為我們教程的背景。
新的 Divi 輪播模塊
Divi Carousel Module 向 Divi Builder 添加了一個新模塊。 以與任何 Divi 模塊相同的方式將模塊添加到任何 Divi 佈局。
Divi 旋轉木馬模塊幻燈片
Divi Carousel 模塊中的每張幻燈片都將幻燈片顯示為添加到主模塊中的子模塊。 幻燈片可以獨立設置樣式,也可以使用主模塊的樣式。 要添加新幻燈片,請單擊“添加新項目”。
添加任意數量。 您可以在模塊設置中為每種設備類型設置輪播在屏幕上顯示的數量,因此您添加的數量不會影響設計。 子模塊包括所有標準 Divi 設置和一些獨特的設置。 這是子模塊的獨特設置。
主要內容
添加幻燈片時,它會打開以顯示設置。 主內容區包括標題、副標題和正文內容。 使用您想要的任何或所有這些內容。 您可以在“設計”選項卡中單獨設置這些元素的樣式。
標題和圖片鏈接
添加 URL 並選擇是否在新窗口中打開。 此鏈接適用於標題和圖像,因此即使您只使用這兩個元素之一,它仍然有效。
按鈕設置
這將向幻燈片添加一個按鈕。 添加文本、URL,然後選擇打開方式。 您可以在“設計”選項卡中設置按鈕樣式。
圖像設置
在這裡,您可以選擇使用圖像或圖標。 圖像是默認設置。 它包括圖像選擇器、替代文本,以及它是否在燈箱中打開。 圖片默認位於標題上方,但您可以根據需要輕鬆更改。
選擇使用圖標提供了一個圖標選擇器。 圖標替換圖像。 它也可以在設計設置中設置樣式。
元
這包括您可以選擇的兩個選項。 您只能選擇兩個選項之一。 第一個選項是使用社交媒體。 啟用它會打開字段以輸入四個社交媒體網絡的 URL 和您的電子郵件地址。
第二個選項是使用評級。 這將打開一個下拉框,您可以在其中選擇從 1 到 5 的評級。 它將評級顯示為星號。
子模塊設計設置
子模塊的設計設置包括圖像樣式、圖像過濾器以及標題、副標題、內容、按鈕、社交媒體和評級的樣式。 如果您選擇了一個圖標來代替圖像,您將看到圖標設置以更改其顏色、添加一個圓圈、更改其大小以及調整其對齊方式。 在下面的示例中,我通過在圖像位置下拉框中選擇內部內容將圖像移動到幻燈片的中心。
主模塊設置
主要模塊設置包括滑塊詳細信息以及標準 Divi 設置。 讓我們仔細看看滑塊的設置。
滑塊設置
滑塊設置包括寬度控制、在每種設備類型上顯示的幻燈片數量、多幻燈片、持續時間、循環、自動播放、箭頭和點導航、間距、延遲加載、哈希導航等等。 查看不同設備的項目數量很有趣。 關於數字的一點是,您在這些字段中輸入的是它們不必是整數。 如果需要,您可以顯示半張幻燈片。 只需輸入小數形式的數字並進行試驗,直到幻燈片以您想要的方式顯示。
這個例子表明我已經添加了一些箭頭導航。 我還更改了單個輪播項目在台式機、平板電腦和移動設備上的顯示方式。 除了上述之外,我還在模塊中添加了一個循環功能。
高級滑塊設置
高級設置可讓您選擇滑塊效果。 在默認和 Coverflow 之間進行選擇。 默認設置正常顯示幻燈片,每張卡片都面向用戶。
Coverflow 以 3D 方式顯示傾斜的卡片。 選擇 Coverflow 會添加旋轉(調整每張卡片在 3D 中旋轉的量)和陰影(通過陰影增加 3D 效果)。 卡片在輪播中滾動到位時會顯示動畫。
主模塊設計設置
主模塊的設計設置包括圖像疊加、對齊、寬度、邊框和框陰影。 它還包括標題文本、副標題文本、正文文本、下一個和上一個按鈕、導航顏色、圖像的 z-index、每個元素的自定義間距以及標準 Divi 設置的設置。 我已經調整了下面示例中的許多設置。
下一個和上一個箭頭包括幾個位置選項。 您可以調整圖標和背景的顏色,並為上一個和下一個鏈接獨立選擇自定義圖標。 您還可以調整點導航的顏色。
Divi Carousel Module 有大量的自定義間距選項。 分別為容器和內容的每個元素添加邊距和填充。 我在下面的示例中為幾個元素添加了填充。
使用 Divi 輪播模塊
Divi Carousel Module 非常適合展示很多東西,包括產品、團隊成員、自定義博客文章和頁面、服務、圖像、推薦、投資組合、公司徽標等等。 出版商的網站包含許多可下載的模板,可幫助您入門。 它們以 JSON 文件的形式提供。 將它們上傳到您的 Divi 庫,並在任何模板、頁面或帖子中使用它們。 讓我們來看看其中的幾個。 我會邊走邊描述他們的主要設置。
Divi輪播模塊內容輪播02_05
內容輪播 02_05 包含大圖像並獨立設置卡片樣式,以創建圖像在頂部或底部的交替設計。 它在台式機上一次顯示三張幻燈片,在平板電腦上顯示 2 張,在手機上顯示 1 張。 它每秒自動滑動它們並循環。
Divi 輪播模塊見證輪播 01_07
推薦輪播 01_07 在台式機上顯示兩張幻燈片,在平板電腦和手機上顯示一張幻燈片。 它包括居中箭頭和點導航。 幻燈片將圖像放在左側,並在文本後麵包含一個漸變。 報價圖標是添加到背景的圖像。
Divi輪播模塊團隊輪播01_05
Team Carousel 01_05 在台式機上顯示三張幻燈片,在平板電腦上顯示兩張,在手機上顯示一張。 這些幻燈片具有獨特的設計,社交圖標位於底部。 主要內容區域的背景在黑色和白色之間交替。 箭頭和點是綠色的。 圖像使用圓角並包含一個 4px 的邊框,使它們成為圓圈。
Divi輪播模塊圖片輪播01_02
圖像輪播 01_02 在桌面上顯示 3.5 個項目並將幻燈片居中以創建在屏幕兩側部分顯示圖像的設計。 平板電腦顯示 3,手機顯示 1。它包括箭頭導航,幻燈片設置為循環播放,因此用戶無需改變方向即可查看所有幻燈片。 圓角使圖像具有優雅的設計。
購買 Divi 輪播模塊
Divi Carousel Module 在 Divi Marketplace 有售,售價 29 美元。 它包括無限制使用、30 天退款保證以及一年的支持和更新。
結束的想法
這就是我們對 Divi Carousel Module 的看法。 該模塊有很多功能。 每個元素都可以獨立設置樣式和調整,為您提供多種設計可能性。 我發現所有設置都很直觀,所以在 Divi Builder 中感覺很自在。 如果您對功能豐富的輪播模塊感興趣,Divi Carousel Module 值得一看。
我們希望聽到您的意見。 您是否嘗試過 Divi 輪播模塊? 在評論中讓我們知道您的想法。