如何在 Divi 中創建響應式手風琴滑塊

手風琴滑塊是一種在小空間內顯示內容的有趣且引人入勝的方式。 手風琴滑塊通常由水平堆疊的多個元素（或面板）組成，就像窗簾的褶皺一樣。 當您將鼠標懸停在其中一個面板上時，它會隨著其他手風琴面板收縮而擴展以顯示內容。 這就是我們獲得伸縮的手風琴式效果的地方。

在本教程中，我將向您展示如何僅使用 CSS 在 Divi 中創建響應式手風琴滑塊。 為此，我們將使用多個 Divi 模塊作為手風琴面板。 任何模塊都可以使用，但對於這個例子，我們將以一種非常有創意的方式使用模糊模塊來構建一個漂亮的手風琴滑塊，在桌面和移動設備上看起來（和工作）都很棒。

一探究竟！

搶先看

這是我們將在本教程中構建的內容的快速瀏覽。

桌面

平板電腦和手機

免費下載 Divi 響應式手風琴滑塊佈局

要將您的手放在本教程中設計的手風琴滑塊上，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

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

訂閱我們的 YouTube 頻道

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有，請安裝並激活已安裝的 Divi 主題（如果不使用 Divi 主題，請安裝並激活 Divi Builder 插件）。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 將大約 5 個不同的模擬圖像上傳到媒體庫，以用於教程中所需的背景圖像。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中創建響應式手風琴滑塊

創建行

首先，向常規部分添加一列行。

然後打開行設置並更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：800px
• 高度：400px（桌面）； 700px（平板電腦和手機）

寬度和最大寬度值可以更改為您需要的任何值。 手風琴將在任何行寬內縮放和運行。 此外，為設計工作設置固定高度非常重要。 子元素（列和模塊）的高度為 100%，因此如果您不設置行的固定高度，子元素將根本沒有高度。

列設置

現在我們已經為行設置了高度，打開列設置並將以下 CSS 添加到主元素：
桌面

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

藥片

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

flex 屬性將在桌面上水平對齊手風琴面板，在平板電腦和手機上垂直對齊。 100% 高度將允許我們將添加的模塊也使用 100% 高度值。

使用 Blurb 模塊創建手風琴面板

手風琴滑塊可以使用任何類型的模塊構建。 如果我們願意，我們可以使用不同模塊的組合作為我們的手風琴面板。 但是對於這個設計，我們將使用模糊模塊。

首先向該行添加一個模糊模塊。

設計 Blurb 模塊

打開模糊模塊設置並更新以下內容：

保留模擬標題和正文內容。 我們以後可以隨時更改。

然後更新模糊圖標如下：

• 圖標（桌面）：水平箭頭線圖標（見截圖）

• 圖標（懸停）：勾選圖標（見截圖）

• 圖標（平板電腦和手機）：垂直箭頭線圖標（見截圖）

背景

然後在懸停時為模糊提供背景圖像和漸變疊加，如下所示：

• 添加至少 1000 像素寬的背景圖像
• 背景圖像位置：左中

然後在懸停時添加漸變背景疊加層。

徘徊

• 背景漸變左顏色（懸停）：#3e215b
• 背景漸變右顏色（懸停）：rgba(0,0,0,0)
• 梯度方向：90度
• 將漸變放在背景圖像上方：是

圖標

• 圖標顏色：#ffffff
• 圖像/圖標放置：左

接下來，跳轉到設計選項卡並更新以下內容：

標題和正文

• 標題字體: Poppins
• 標題字體粗細：半粗體
• 標題文字顏色：透明（桌面），#ffffff（懸停）
• 標題文字大小：22px
• 正文顏色：透明（桌面），#ffffff（懸停）

高度和框陰影

文本樣式化後，給模塊一個 100% 的高度和一個框陰影，如下所示：

• 高度：100%
• 盒子陰影：見截圖
• 框陰影水平位置：-12px
• 框陰影垂直位置：0px

模糊自定義 CSS

為了讓我們的手風琴面板（或模糊模塊）與其他模塊一起擴展和收縮，我們需要添加一些自定義 css 以使用 flex-grow 更改模塊的大小。 由於我們將總共有 5 個模塊組成手風琴，因此我們為默認狀態添加“flex:1”，然後在懸停狀態將其更改為“flex:5”。

在高級選項卡下，將以下自定義 CSS 添加到 Blurb 主元素：

桌面

flex:1;
position: relative !important;
transition: flex 800ms !important;

藥片

flex:5;

然後將以下自定義 css 添加到 Blurb Content CSS：

桌面

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

藥片

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

溢出和過渡

• 水平溢出：隱藏
• 垂直溢出：隱藏
• 轉換持續時間：400ms
• 過渡速度曲線：線性

好吧！ 那是對模糊模塊的一些嚴重定制。 但好消息是我們需要做的就是複制它們以創建剩餘的手風琴面板。

為更多手風琴面板複製 Blurbs

將鼠標懸停在模糊模塊上並單擊重複圖標四次以創建總共五個手風琴面板（或模塊）。

然後為您複製的每個新簡介更新背景圖像。

最後結果

桌面

平板電腦和手機

最後的想法

這個響應式手風琴滑塊確實有一些獨特的元素，使其使用起來很有趣。 手風琴面板在懸停時無縫擴展和收縮，沒有任何意外故障。 並且模糊圖標會在懸停和移動設備上發生變化以提升用戶體驗。 希望這個設計能在你的下一個項目中派上用場。

我期待在評論中收到您的來信。

乾杯!