如何使用分區分隔線高度懸停效果顯示 Divi 中的內容

分區分隔線仍然是流行的 Divi 設計元素。 有許多分隔線樣式可供選擇，其中包含有用的選項，可以輕鬆地向頁面添加獨特的過渡和背景。

在本教程中，我們將使用不同的部分分隔符。 Divi 允許您調整每個分隔線的高度和排列。 這允許我們將分隔線放置在部分內的某些區域或內容上方。 通過使用分隔高度的懸停選項，我們可以添加獨特的懸停效果，顯示部分隱藏的內容。 這非常適合將注意力吸引到您希望訪問者單擊的特定號召性用語或按鈕上。

讓我們開始吧。

搶先看

免費下載部分分隔線高度懸停效果

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

你需要什麼開始

首先，您需要具備以下條件：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）
3. 在設計中使用的一些模擬圖像。 我將使用來自 Juice Shop Layout Pack 的一些具有透明背景的圖像。

之後，您就可以開始了！

在Divi中實現Section Divider高度懸停效果設計

創建部分和行

首先，讓我們創建一個有兩列行的常規部分。

在添加模塊之前，打開部分設置並更新以下內容：

背景漸變左顏色：#73ba57
背景漸變右顏色：#2a4c23
寬度：80%
最大寬度：1080px
截面對齊：居中

添加章節標題

要添加該部分的標題，請創建一個文本模塊並使用以下 h2 標題更新正文內容：

<h2>The Juice</h2>

然後更新設計如下：

標題 2 字體：Lato
標題 2 文字大小：80px
標題 2 字母間距：-5px
邊距：-50px 頂部，-40px 底部
Z-索引：-1

自定義邊距和 z 索引將允許文本位於我們將在下一步中添加的圖像後面。

添加圖像

在第 1 列標題中的文本模塊下，添加一個圖像模塊。 然後上傳具有透明背景的圖像。 我使用的是 Juice Shop Layout Pack 中 240 像素 x 300 像素的圖像。

將圖像對齊調整為居中。

在第 2 列中添加號召性用語

在第 2 列中，添加號召性用語模塊。

添加按鈕鏈接 URL 以確保按鈕顯示。

設置 CTA 背景和標題文本的樣式

然後更新以下設計設置：

背景顏色：#ffffff
文字顏色：深色
標題字體：Lato
標題字體粗細：重
標題字體樣式：TT
標題文字大小：18px

為 CTA 按鈕設計樣式

更新按鈕設計如下：

按鈕文字顏色：#ffffff
按鈕背景顏色：#73ba57
按鈕邊框寬度：0px

CTA 邊框樣式

然後添加一個邊框來框住模塊，如下所示：

邊框寬度：10px
邊框顏色：rgba(115,186,87,0.15)

添加分隔線高度懸停效果以顯示號召性用語

現在是時候添加部分分隔線高度懸停效果以顯示號召性用語。 為此，我們必須首先創建我們的部分分隔符。

添加頂部分隔線

使用以下設置打開部分設置和頂部分隔線。

頂部分隔線樣式：見截圖
頂部分隔線顏色：#73ba57
頂部分隔線高度：70%（默認），0%（懸停）
頂部分隔線翻轉：水平

請注意，分隔線高度從默認高度 70% 開始，然後在懸停時更改為 0% 高度。

添加底部分隔線

接下來將類似的底部分隔線添加到具有以下設置的部分。

頂部分隔線樣式：見截圖
頂部分隔線顏色：#73ba57
頂部分隔線高度：70%（默認），0%（懸停）
頂部分隔線翻轉：水平
分隔線安排：在部分內容的頂部

這個底部分隔線也從 70% 的高度開始，在懸停時變為 0%。 但是，由於分隔符排列選項設置在內容的頂部，因此分區分隔符隱藏了第 1 列中號召性用語的底部。然後在懸停時，會顯示號召性用語的其餘部分。

查看到目前為止的結果。

為獨特的過渡和設計添加框陰影懸停效果

對於懸停時的獨特過渡和設計，我們可以添加一個框陰影懸停效果，該效果將與分隔高度懸停效果同時發生。 為此，將以下框陰影添加到該部分。

盒子陰影：見截圖
框陰影水平位置：0px
框陰影垂直位置：0px
框陰影傳播強度：0px（默認），150px（懸停）
框陰影顏色：#73ba57

減慢過渡持續時間

最後一步，讓我們稍微放慢過渡持續時間。

轉換持續時間：700ms

最後結果

這是桌面上的最終結果。

如果您不想在平板電腦和手機顯示屏上隱藏內容，您可以輕鬆地將這些設備的分隔線排列更改為“下方內容”。

這是平板電腦和手機上的最終設計。

在幾秒鐘內嘗試其他分區分隔樣式以獲得完全獨特的設計

有了這個設置，您可以輕鬆地嘗試不同的分隔樣式和組合！

以下是我在免費下載中包含的更多內容。

最後的想法

希望這篇文章能給你一些靈感，讓你知道如何創建一些獨特的分區分隔高度懸停效果來顯示內容。 事實上，在懸停時調整分隔線高度本身就是一個很好的設計元素。 而且，設計示例應該可以幫助您快速開始自己的探索和設計。

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

乾杯!