如何將 Divi 行轉換為水平和垂直懸停選項卡

標籤對於在您網站的簡潔區域中提供重要信息絕對有用。 這減少了用戶滾動瀏覽長頁面內容的需要。 Divi 的選項卡模塊易於使用，非常適合在點擊時切換簡單的內容。

但在本教程中，我將向您展示如何將整個 Divi 行轉換為懸停選項卡。 我還將向您展示如何創建水平和垂直選項卡。 這將釋放 Divi 的力量，為每個選項卡內容區域設計具有多個模塊的完整行佈局。 無需插件！

讓我們開始吧。

搶先看

這是我們將在本教程中一起構建的水平和垂直懸停選項卡的快速瀏覽。

免費下載 Divi Rows 懸停選項卡佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

你需要什麼開始

首先，您需要進行以下設置：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）
3. 用於模擬內容的三個圖像

之後，您將有一個空白畫布開始在 Divi 中構建一些懸停選項卡。

使用 Divi Rows 創建水平懸停選項卡

首先，創建一個包含兩列行的新常規部分。

行背景、填充和框陰影

在添加模塊之前，讓我們先自定義行設置。 我們稍後需要返回到該行，以便為我們的選項卡功能定位它。

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

背景漸變左顏色：#284f91
背景漸變右顏色：#4646c4

填充：頂部 50 像素，底部 50 像素，左側 50 像素，右側 50 像素
盒子陰影：見截圖
框陰影顏色：rgba(70,70,196,0.66)

向行添加內容

現在我們要向我們的行添加一些模擬內容。 請記住，您可以為內容區域添加列和模塊的任意組合。

在第 1 列中，添加帶有圖像模塊的圖像。 我正在使用 Design Conference Layout Pack 中的一個。

在右欄中，添加一個號召性用語模塊並更新以下內容：

按鈕鏈接 URL：#（現在只是為了顯示按鈕）
使用背景顏色：否

文本對齊：左
標題字體：Lato
標題文字大小：60px（桌面），50px（手機）

創建選項卡

要創建用戶將鼠標懸停在其上以顯示該行內容的實際選項卡，我們需要創建一個文本模塊並使用一些自定義 CSS 將其放置在右上角。

繼續在第 1 列的圖像下添加一個新的文本模塊並更新以下內容：

內容：“標籤一”

背景顏色：#284f91（這應該與行的左側漸變顏色匹配）
文本 文本對齊：居中
文字文字顏色：#ffffff
寬度：100px
高度：50px
邊距：-100px 頂部，-50px 左
填充：14px 頂部

最後，將以下自定義 css 添加到主元素以使其在行的頂部具有絕對位置。

position: absolute !important;
top: 0;

這個 css 加上我們添加的自定義邊距將確保選項卡正好位於行的左上角。 重要的是標籤實際上位於行上方，以便用戶稍後可以將鼠標懸停在它上面。

截面高度和間距

現在，在我們繼續創建剩餘的行和選項卡之前，讓我們通過向該部分添加一些頂部和底部邊距來給我們的行一些喘息的空間。 對於這個設計，重要的是我們使用邊距來分隔我們的部分，因為我們也會給我們的部分設置一個高度。 我們需要為我們的部分設置一個高度，因為我們希望我們的行跨越我們部分的整個高度。 這意味著我們的每一行（標籤內容）都將與我們的部分具有相同的高度。 因此，最好每一行都有相似數量的內容，否則某些行選項卡中會出現不需要的負空間。 這應該在以後更有意義。

現在，打開部分設置並更新以下內容：

高度：500px（桌面）、900px（平板）、750px（手機）
邊距：頂部 100 像素，底部 100 像素
填充：0px 頂部，0px 底部

請注意，當行列在移動設備上堆疊時，需要調整部分的高度以考慮更長的內容空間。 因此，您需要根據自己的需要對這個高度進行一些調整。

現在保存您的設置，讓我們回到添加更多行。

創建標籤內容的第二行

要創建第二行，請複制您之前創建的行。 將文本模塊移至第 1 列，將圖像移至第 2 列。然後使用新圖像更新圖像。 這將幫助您了解每個選項卡上的不同內容是什麼樣的。

打開第二行的設置，通過將鼠標懸停在背景預覽區域上並單擊小“切換”圖標來切換背景漸變顏色。

然後打開用於在第 1 列中創建選項卡的文本模塊的設置，並為其指定與新頂部漸變相匹配的顏色。

背景顏色：#4646c4

然後我們需要將選項卡向右移動，以便當這一行與上面的行重疊時，您可以直接看到第一行選項卡右側的選項卡。

邊距：50px 左

為第二行添加不透明度過濾器懸停效果

對於行，我們可以添加不透明度過濾器懸停效果，以便在懸停在選項卡上並顯示行內容時有一個很好的懸停過渡。

打開行設置並添加以下過濾器：

不透明度：70%（默認），100%（懸停）

然後為不透明度過濾器懸停效果添加過渡持續時間和速度曲線。

轉換持續時間：500ms
過渡速度曲線：線性

創建第三行標籤內容

現在我們可以添加最後一行選項卡內容。 為此，請複制您剛剛創建的第二行。 然後將文本模塊移至第 1 列，將圖像移至第 2 列。並使用新圖像更新圖像模塊。

使用新的背景漸變更新行設置。

背景漸變左顏色：#333333
背景漸變右顏色：#4646c4

接下來打開用於在第 1 列中創建選項卡的文本模塊的設置並更新顏色和邊距。

背景顏色：#333333
邊距：左 150 像素

在我們將行定位為彼此重疊之前，您的頁面應該是這樣的。

用絕對定位重疊行

要重疊我們的行，我們需要使用絕對定位。 然後，當鼠標懸停在選項卡上時，我們將使用 Z 索引選項將每一行置於最前面。 但是因為我們給我們的行一個絕對位置（並且父/節有一個設置的高度），我們可以為每一行添加 100% 的高度，以便它們跨越該節的整個高度。

這是如何做到的。

首先，部署線框模式。 然後使用多選來選擇所有三行並打開其中之一的設置以部署元素設置模式。 然後將高度更新為 100%。

高度：100%

這會將所有三行的高度設置為 100%。

然後將以下自定義 CSS 添加到主元素：

position: absolute !important;
left: 0;
right: 0;
margin: auto;

現在部署桌面視圖模式以查看行如何很好地重疊以創建我們的選項卡。

使用 Z 索引更改懸停時的行順序

現在您可能已經註意到第三行/標籤位於最前面。 所以我們需要使用 Z 索引對行重新排序，以便第一個選項卡首先顯示，直到您將鼠標懸停在另一個選項卡上。

為此，請返迴線框視圖模式並打開您創建的第一行的設置（帶有選項卡）。 然後更新z索引如下：

Z指數：10

接下來使用多選來選擇第二行和第三行。 然後打開元素設置模式並在懸停時將以下 z 索引添加到兩行。

Z 指數：11（懸停）

就是這樣。 讓我們看看最終的結果。

最後結果

這樣做的原因是因為技術上每個選項卡（文本模塊）都是每行的一部分，即使它們位於行的上方和外部。 這就是為什麼將鼠標懸停在選項卡上會顯示它所在的行。

這是它在移動設備上的外觀。

創建垂直懸停選項卡

如果您想向行添加垂直選項卡，您真正需要做的就是重新定位用於創建每個選項卡的文本模塊。 我們還需要調整行的大小和節間距，以便為選項卡騰出空間。

這是該怎麼做。

繼續複製包含我們剛剛構建的懸停選項卡的部分，以便您可以使用新設計。

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

填充：左 10%，右 10%

然後使用多選來選擇所有三行並使用以下內容更新元素設置：

寬度：70%（桌面）、70%（平板電腦）、80%（手機）
最大寬度：980px

然後將所有三個模糊的漸變方向更新為 90 度，這樣當我們將選項卡放在左側時，左側漸變顏色將與選項卡背景顏色混合。

梯度方向：90度

現在是時候將我們的文本模塊選項卡放在行的左側以獲得我們想要的垂直選項卡。

打開第一行中的文本模塊選項卡設置並更新以下內容：

邊距（桌面）：頂部 -50px，左側 -150px
邊距（手機）：頂部 -100 像素，左側 -50 像素

手機的邊距設置是將標籤帶回到水平標籤顯示的行上方。

接下來，打開部分行中文本模塊選項卡的設置並更新以下內容：

邊距（桌面）：頂部 0px，左側 -150px
邊距（手機）：頂部 -100 像素，左側 50 像素

對於第三行的最後一個選項卡，更新以下內容：

邊距（桌面）：頂部 50 像素，左側 -150 像素
邊距（手機）：頂部 -100 像素，左側 150 像素

最後結果

現在讓我們看看最終的結果。

這是一台平板電腦和一部手機。

最後的想法

借助一些創造性思維和 Divi 的強大功能，您可以使用 Divi 行創建一些非常酷的自定義懸停選項卡。 您可以顯示的內容有一些限制。 例如，使用此設置，所有行的高度都必須與該部分的高度相同。 但是，由於不需要使用插件，我認為這是一個很好的解決方案。 不要忘記，由於您可以將 Divi 行用於您的內容，因此您可以通過多種方式在下一個項目中使用這些懸停選項卡。

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

乾杯!