如何使用 Divi 在懸停時創建 3 步 Blurb 顯示

許多公司網站在某些時候分享了他們方法的預覽。 創建方法部分時，您可以以傳統方式處理它，也可以嘗試為其添加更多交互。 如果您正在尋找實現第二種選擇的方法，那麼您會喜歡這篇文章的。

在本教程中，我們將向您展示如何使用 Divi 的新尺寸選項創建 3 步模糊顯示。 我們將首先顯示標題，繼續顯示通向步驟的三個箭頭，並通過顯示動畫簡介來完成效果。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載 3 步 Blurb 顯示佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新部分

默認漸變背景

您需要做的第一件事是向您正在處理的頁面添加一個新部分。 打開部分設置並向其添加以下漸變背景：

• 顏色 1：#ffa3ad
• 顏色 2：#ffcea3
• 梯度方向：122deg

懸停漸變背景

修改懸停時的漸變背景：

• 顏色 1：#000000
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：頂部
• 起始位置：36%
• 結束位置：26%

間距

轉到設計選項卡，然後添加一些自定義的頂部和底部填充。

• 頂部填充：1vw
• 底部填充：1vw

溢出

在這篇文章的後面，我們將討論該部分的高度。 為了確保沒有超出部分容器的內容，我們將隱藏可見性設置中的溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加第 1 行

列結構

完成部分設置後，您可以繼續使用以下列結構將第一行添加到該部分：

將文本模塊添加到行

添加 H2 內容

將新的文本模塊添加到行的列並輸入您選擇的一些 H2 內容。

H2 文本設置

轉到設計選項卡並相應地更改 H2 文本設置：

• 標題 2 字體：蒙特塞拉特
• 標題 2 字體粗細：半粗體
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：2vw（桌面）、5vw（平板電腦）、6vw（手機）
• 標題 2 字母間距：-2px

添加第 2 行

列結構

繼續使用以下列結構添加第二行：

間距

在不添加任何模塊的情況下，打開行設置並在不同的屏幕尺寸上添加一些自定義的頂部和底部填充。

• 頂部填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）
• 底部填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）

展示

為了確保所有列在較小的屏幕尺寸上彼此相鄰顯示，我們將向行的主要元素添加一行 CSS 代碼。

display: flex;

將箭頭文本模塊添加到第 1 列

添加符號

我們將使用這一行來添加動畫箭頭。 將新的文本模塊添加到行的第一列，並將“↓”符號添加到內容框中。

文字設置

移至設計選項卡並更改文本設置。

• 文本對齊：右
• 文字顏色：#ffa3ad
• 文字大小：4vw（桌面）、6vw（平板電腦）、8vw（手機）

間距

接下來在間距設置中添加一些自定義邊距值。

• 最高利潤率：-3vw
• 底邊距：8vw

變換旋轉

在變換設置中旋轉模塊。

• 左：45度

動畫片

並使用以下設置添加自定義動畫：

• 動畫風格：幻燈片
• 動畫方向：中心
• 動畫延遲：1000ms

將箭頭文本模塊添加到第 2 列

添加符號

繼續向第二列添加新行，並將“↓”符號添加到內容框中。

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文本對齊：居中
• 文字顏色：#ffa3ad
• 文字大小：4vw（桌面）、6vw（平板電腦）、8vw（手機）

間距

接下來添加一些自定義上邊距。

• 最高利潤率：1vw

動畫片

並應用以下動畫設置：

• 動畫風格：幻燈片
• 動畫方向：中心

將箭頭文本模塊添加到第 3 列

添加符號

轉到第 3 列中的最後一個箭頭文本模塊。將“↓”箭頭添加到內容框。

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文本對齊方式：左
• 文字顏色：#ffa3ad
• 文字大小：4vw（桌面）、6vw（平板電腦）、8vw（手機）

間距

接下來添加一些負上邊距。

• 最高利潤率：-3vw

變換旋轉

在變換設置中旋轉模塊。

• 左：315度

動畫片

並通過添加以下動畫完成模塊的設置：

• 動畫風格：幻燈片
• 動畫方向：中心
• 動畫延遲：1000ms

添加第 3 行

列結構

完成第二行後，您可以繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小設置中的寬度和最大寬度值。

• 寬度：100%
• 最大寬度：100%

間距

接下來在不同的屏幕尺寸中添加一些自定義填充值。

• 頂部填充：2vw（桌面）、8vw（平板電腦）、6vw（手機）
• 底部填充：2vw（桌面）、8vw（平板電腦）、6vw（手機）
• 左填充：10vw（台式機），0vw（平板電腦和手機）
• 右填充：10vw（台式機），0vw（平板電腦和手機）

展示

將一行 CSS 代碼添加到行的主要元素，以確保所有列在較小的屏幕尺寸上彼此相鄰。

display: flex;

溢出

在本教程的最後一部分，我們將更改行的高度。 為此，我們需要通過在可見性設置中隱藏溢出來確保沒有任何內容超出行容器。

• 水平溢出：隱藏
• 垂直溢出：隱藏

將數字文本模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 將新的文本模塊添加到第一列並輸入一個數字。

漸變背景

使用以下設置為模塊添加漸變背景：

• 顏色 1：#ffa3ad
• 顏色 2：#ffcea3
• 梯度方向：122deg

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：蒙特塞拉特
• 文字字體粗細：超粗
• 文本對齊：居中
• 文字顏色：#ffffff
• 文字大小：2vw（桌面）、4vw（平板電腦）、8vw（手機）
• 文本行高：1em

間距

在不同的屏幕尺寸上添加一些頂部和底部填充。

• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）

邊界

並通過向邊框設置中的每個角添加“20px”來完成模塊的設置。

克隆編號文本模塊兩次並在剩餘列中放置重複項

繼續克隆第 1 列中的文本模塊兩次，並將重複項放置在該行的其餘兩列中。

更改號碼

確保更改每個副本中的數字。

將 Blurb 模塊添加到第 1 列

添加內容

第一列中我們需要的第二個模塊是 Blurb 模塊。 輸入您選擇的一些內容。

選擇圖標

繼續選擇一個圖標。

背景顏色

並將背景顏色更改為白色。

• 背景顏色：#ffffff

圖標設置

轉到設計選項卡並相應地更改圖標設置：

• 圖標顏色：#ffcea3
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：4vw（桌面）、5vw（平板電腦）、6vw（手機）

標題文字設置

也修改標題文本設置。

• 標題字體：蒙特塞拉特
• 標題字體粗細：粗體
• 標題文本對齊：居中
• 標題文字顏色：#000000
• 標題文字大小：1vw（桌面）、2vw（平板電腦）、4vw（手機）

正文設置

隨著正文文本設置。

• 正文對齊方式：居中
• 正文大小：0.6vw（桌面）、1.3vw（平板電腦）、2vw（手機）
• 車身線高：2.5em

間距

我們還通過在不同的屏幕尺寸中添加以下自定義填充值來為我們的模塊提供所需的形狀：

• 頂部填充：3vw（桌面）、5vw（平板電腦）、7vw（手機）
• 底部填充：3vw（桌面）、5vw（平板電腦）、7vw（手機）
• 左填充：1vw
• 右填充：1vw

邊界

接下來在邊框設置中的每個角上添加“20px”。

盒子陰影

並通過添加一個微妙的框陰影來創建一點深度。

• 陰影顏色：rgba(0,0,0,0.07)

動畫片

最後但並非最不重要的一點是，向模塊添加動畫。

• 動畫風格：幻燈片
• 動畫方向：中心
• 動畫延遲：1000ms

克隆 Blurb 模塊兩次並在剩餘列中放置重複項

完成第 1 列中的 Blurb 模塊後，您可以將其克隆 3 次並將重複項放置在該行的其餘兩列中。

更改兩個副本的內容

確保更改每個重複項的內容。

修改第 3 行大小設置

默認高度

現在，為了使懸停效果起作用，我們將打開最後一行的設置並轉到大小設置。 在那裡，我們將修改不同屏幕尺寸的高度。

• 高度：6vw（桌面）、18vw（平板電腦）、24vw（手機）

懸停高度

我們將在懸停時使高度恢復正常。

• 高度：自動

修改截面大小設置

默認高度

接下來打開部分設置並相應地更改高度：

• 高度：7vw（桌面）、15vw（平板電腦）、20vw（手機）

懸停高度

在懸停時恢復高度，你就完成了！

• 高度：自動

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的新尺寸選項創建 3 步模糊顯示。 該示例的結果具有高度響應性，並允許您向頁面添加額外的交互。 我們希望本教程也能激發您創建自己的替代 3 步設計。 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。