如何使用 Divi 的滑塊模塊創建移動演練（免費下載！）
已發表: 2019-03-10滑塊在網頁設計中一直非常流行。 它們最大的優勢之一是訪問者可以在移動設備上滑動瀏覽。 如今，滑動是新的點擊方式，因此不用說，包含滑塊可以幫助改善訪問者在您網站上的移動用戶體驗。 使用 Divi 構建網站時，您可以輕鬆地將滑塊模塊添加到您正在處理的任何行或部分。 通過一點創造力和實驗，您可以獲得令人驚嘆的網頁設計。
您可以做的一件事是使用滑塊模塊創建移動演練。 您可以根據需要添加任意數量的幻燈片，並且該演練在台式機和平板電腦上看起來同樣出色，儘管它最初是為移動設備設計的。 在這篇文章中，我們將從頭開始重新創建一個令人驚嘆的示例，並在其末尾提供下載部分。
讓我們開始吧！
預覽
在我們深入學習本教程之前，讓我們快速瀏覽一下我們將在不同屏幕尺寸上重新創建的結果。
靜止的
動圖
讓我們開始重建吧！
如何使用 Divi 的滑塊模塊創建移動演練
訂閱我們的 YouTube 頻道
添加新部分
間距
讓我們開始創作吧！ 添加新頁面或打開現有頁面並向其添加新的常規部分。 打開部分設置並添加一些匹配不同屏幕尺寸的自定義填充值。
- 頂部填充：4vw（桌面）、5vw（平板電腦）、3vw（手機）
- 底部填充：4vw（桌面）、5vw（平板電腦）、3vw（手機）
- 左填充：30vw（桌面）、18vw（平板電腦）、3vw（手機）
- 右填充：30vw（桌面）、18vw（平板電腦）、3vw（手機）
添加新行
列結構
繼續使用以下列結構向該部分添加新行：
漸變背景
尚未添加任何模塊，打開行設置並添加徑向漸變背景。
- 顏色 1：#f9f9f9
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：頂部
- 起始位置：40%
- 結束位置：40%
漿紗
繼續轉到行的大小設置並刪除列之間的所有空間。
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
我們還在行中添加了一些底部填充。
- 底部填充：30px
邊界
接下來，為邊框設置中的每個角添加“20px”。
盒子陰影
最後但並非最不重要的一點是，向行添加一個微妙的框陰影以在頁面上創建一些深度。
- 框陰影模糊強度：80px
- 陰影顏色：rgba(0,0,0,0.07)
添加滑塊模塊
更改背景顏色
完成修改行設置後，您可以繼續添加滑塊模塊。 打開模塊的設置並修改背景顏色。 您在設計選項卡中所做的所有更改將自動應用於您之後添加的所有幻燈片。
- 背景顏色：rgba(255,255,255,0)
文字設置
然後，轉到設計選項卡並更改文本設置。
- 文字方向：居中
- 陰影顏色：rgba(0,0,0,0)
正文設置
接下來修改正文設置。
- 正文字體：默認（Open Sans）
- 正文大小：0.6vw（桌面）、1.5vw（平板電腦）、2.4vw（手機）
- 機身線高：2.2em（桌面）、2.3em（平板）、2.4em（手機）
間距
也添加一些自定義的頂部和底部填充。
- 頂部填充：2vw
- 底部填充：2vw
按鈕自定義 CSS
我們還需要特別為滑塊模塊的按鈕添加一些自定義填充和邊距值。 由於此元素與每張幻燈片中的不同元素組合在一起，因此您必須使用高級選項卡中的 CSS 代碼手動添加內邊距和邊距。
padding-left: 80px; padding-right: 80px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 80px;
刪除活動滑塊
完成所有常規幻燈片設置的修改後，您可以繼續刪除已經存在的活動幻燈片。 我們將在文章的下一部分中從頭開始創建一個，而不是使用這些。 這將幫助我們更快地修改和自定義所有內容。
自定義第一張幻燈片
自定義內容框中的內容
將新幻燈片添加到滑塊模塊並開始自定義內容框中的內容。 在下面的打印屏幕中，您會注意到我們將圖像添加到內容框而不是圖像設置。 這將允許我們將圖像放置在書面內容上方。 您可以通過轉到 Graphic Illustrator Layout Pack 帖子並在其末尾下載圖像來找到我們使用過的插圖。 我們還在內容框中添加並設置了 H3 標題而不是標題字段的樣式，以使其準確顯示在我們想要的位置。
按鈕鏈接
繼續轉到鏈接設置並添加指向按鈕的鏈接，該按鈕會將訪問者重定向到有關相關幻燈片的更詳細頁面。
漸變背景
然後，使用以下設置添加漸變背景：
- 顏色 1：#aaacff
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：頂部
- 起始位置：30%
- 結束位置：30%
導航
接下來修改文本設置。
- 箭頭自定義顏色：#f4f4f4
- 點導航自定義顏色：#000000
文字設置
並在幻燈片的文本設置中更改文本顏色。
- 文字顏色：深色
按鈕
最後但並非最不重要的一點是，修改按鈕以使其看起來完全符合您的要求。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：0.8vw（桌面）、2vw（平板電腦）、3vw（手機）
- 按鈕文字顏色：#ffffff
- 按鈕背景顏色：#aaacff
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：10px
根據需要多次克隆幻燈片
完成第一張幻燈片的創建和自定義後，您可以繼續複製幻燈片，次數不限。 您需要對每個副本進行一些手動修改。
更改內容框中的內容
您需要更改的第一件事是內容框中的內容。 這包括正在使用的圖像/插圖。 您可以通過轉到 Graphic Illustrator Layout Pack 帖子並在其末尾下載圖像來找到本教程中使用的兩個插圖。
更改鏈接
也更改按鈕鏈接。
修改漸變背景
您還可以通過更改第一個漸變顏色來自定義每個重複幻燈片的調色板。
- 顏色 1：#ffccaa
更改按鈕背景顏色
使用相同的顏色來更改按鈕背景顏色。 對您創建的每個副本重複這些步驟，您就完成了！
- 按鈕背景顏色：#ffccaa
免費下載移動演練部分
要使用免費的移動演練部分，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
預覽
在我們深入學習本教程之前，讓我們快速瀏覽一下我們將在不同屏幕尺寸上重新創建的結果。
靜止的
動圖
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的滑塊模塊來創建一個華麗的移動演練。 雖然它最初是為移動屏幕尺寸設計的，但在平板電腦和台式機上看起來同樣出色。 您可以使用這種方法在您的網站上創建各種幻燈片部分，並與訪問者無縫交互。 我們希望本教程能激發您使用 Divi 的滑塊模塊發揮創意。 如果您有任何問題或建議，請務必在下方評論區留言！