如何使用 Divi 的新尺寸和溢出設置創建懸停部分

使用 Divi 新的可拖動大小選項不僅可以幫助您創建高度響應的網站，而且還可以真正幫助創建獨特的交互。 通過使用這些選項，您可以自定義您正在創建的任何網站並自定義您的頁面結構以滿足當前的設計趨勢。

在本教程中，具體而言，我們將向您展示如何使用 Divi 創建懸停部分。 我們將創建一個新頁面並允許顯示所有部分標題，但每個部分只會在懸停（桌面）或點擊（移動）時打開。 一旦您打開另一部分，您之前打開的部分將自動關閉。 我們將從解釋一般方法開始，然後從頭開始重新創建您可以在下面看到的示例。 我們希望本教程也能鼓勵您創建自己的懸停部分設計！

讓我們開始吧！

預覽

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

桌面

移動的

免費下載懸停部分佈局

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

下載文件

免費下載

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

下載

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

方法

在我們深入實際教程之前，我們將介紹用於創建懸停部分的技術。 您可以將此技術應用於您正在構建的任何類型的網站，具有任何類型的設計風格。

1. 將第一部分添加到您的頁面

假設您要在全新的頁面上開始新設計。 您需要做的第一件事是向其中添加一個新的常規部分。

2. 添加包含章節標題的新行

然後，您可以繼續添加一個包含您的部分標題的文本模塊的新行。 您還可以添加分隔模塊和指示行在懸停或觸摸時擴展的內容（請參閱本文預覽中的示例）。 將部分標題與部分內容的其餘部分分開很重要，因此請確保在部分標題和接下來的內容之間留出足夠的空白。

3. 微調其餘部分內容（根據需要添加盡可能多的行和模塊）

部分標題後面的設計元素完全取決於您。 您可以根據需要使該部分長或短，並使用任何類型的設計風格。

4.修改section的默認和hover max高度

完成對該部分及其中所有設計元素的微調後，就可以創建懸停效果了。 部分的默認高度僅適用於部分標題。 懸停時，該部分將恢復其初始大小。

5.隱藏垂直溢出

該技術的另一個重要部分是隱藏垂直溢出。 一旦您為您的部分設置了一個小於該部分初始高度的默認最大高度，就會創建一個溢出。 為了確保不顯示溢出，您必須確保它隱藏在該部分的可見性設置中。

5. 對頁面上的所有部分重複步驟

對頁面上的所有部分重複相同的步驟，以創建訪問者會喜歡的明顯用戶體驗。

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

添加新部分

默認背景顏色

現在我們已經完成了這篇文章的方法，是時候開始付諸行動了！ 將第一個常規部分添加到 WordPress 網站上的全新頁面，然後打開部分設置。 將部分的默認背景顏色更改為您選擇的顏色。

• 背景顏色：#000000

懸停背景顏色

在懸停時更改此背景顏色。

• 背景顏色：#ffffff

添加第 1 行

列結構

繼續使用以下列結構將第一行添加到您的部分：

添加文本模塊

添加 H2 內容

接下來將文本模塊添加到新行。 添加一些 H2 副本以及“▼”符號，表示接下來會發生一些事情。

H2 文本設置

轉到模塊的設計選項卡並更改 H2 文本設置。

• 標題 2 字體：Trebuchet
• 標題 2 字體粗細：超粗體
• 標題 2 文本對齊方式：左
• 標題 2 文本顏色：#ff0f3b
• 標題 2 文字大小：100 像素（桌面）、80 像素（平板電腦）、60 像素（手機）
• 標題 2 字母間距：-5px

添加分頻器模塊

能見度

我們在這一行中需要的第二個也是最後一個模塊是分頻器模塊。 確保在可見性設置中啟用“顯示分隔符”選項。

• 顯示分隔線：是

顏色

然後，轉到設計選項卡並更改分隔線顏色。

• 顏色：#ff0f3b

漿紗

還要修改模塊的大小設置。

• 分隔線重量：2px
• 寬度：14%

添加第 2 行

列結構

進入下一行！ 這是您需要在懸停（桌面）或單擊（平板電腦和移動設備）後放置要顯示的所有內容的地方。 我們使用以下列結構，但請注意，您可以根據需要添加任意數量的行和模塊，並根據需要設置它們的樣式：

將文本模塊添加到第 1 列

添加內容

在第一列中放置一個文本模塊，其中包含您選擇的一些內容。

文字設置

轉到文本模塊的設計選項卡並更改文本方向。

• 文本方向：對齊

將文本模塊添加到第 2 列

添加內容

將文本模塊添加到第二列以及您選擇的一些內容。

文字設置

同樣，在模塊的文本設置中更改文本方向。

• 文本方向：對齊

將大小設置添加到部分

默認大小

一旦你完成了你的部分，是時候使懸停效果發生了。 打開部分設置並更改不同屏幕尺寸的最大高度：

• 最大高度：300 像素（桌面）、280 像素（平板電腦）、260 像素（手機）

懸停大小調整

在最大高度上啟用懸停選項，並添加一個足夠高的值以覆蓋不同屏幕尺寸的所有元素。 此值可確保您的所有元素都顯示在不超過部分容器的初始大小的情況下。

• 最大高度：5000px

垂直溢出

然後，轉到該部分的高級選項卡並更改垂直溢出。 這將隱藏超出部分容器的所有內容。

• 垂直溢出：隱藏

過渡

為了創建平滑過渡，我們還更改了高級選項卡中的過渡設置。

• 轉換持續時間：800ms
• 轉換延遲：500ms

根據需要多次克隆整個部分

完成第一個懸停部分的創建後，您可以根據需要多次克隆它。

更改章節標題

當然，您需要更改重複項的部分標題。

更改 H2 文本顏色

為了在設計中創造一些變化，我們還將更改下面打印屏幕中突出顯示的模塊的文本顏色。

• 標題 2 文本顏色：#c4c4c4

更改分隔線顏色

以及伴隨文本模塊的分隔線顏色。

• 顏色：#c4c4c4

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何創造性地使用 Divi 的新可拖動大小選項，在您創建的任何網站上使用懸停部分創建獨特的交互。 我們首先解釋了該方法，然後繼續從頭開始重新創建設計示例。 您還可以免費下載 JSON 文件！ 如果您有任何問題或建議，請務必在下面的評論部分留言。

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