如何使用 Divi 中的擴展角選項卡顯示懸停內容（免費下載）

使用獨特的懸停效果發現新的和創造性的方式來吸引用戶與您的內容互動總是很有趣的。 做到這一點的一種好方法是使用擴展的角選項卡在懸停時顯示內容。 這允許用戶將鼠標懸停在列或圖像角落的選項卡上，以擴展包含對用戶有用的附加內容的覆蓋層。

在本教程中，我們將創建一個完全獨特的 Divi 佈局，它將使用擴展的角標籤顯示懸停時的內容。 事實上，我們將向您展示如何為 Divi 中一列的所有四個角設計一個擴展的角選項卡。

讓我們開始吧！

搶先看

這是我們將一起構建的擴展角選項卡佈局的快速瀏覽。 請注意懸停效果和內容如何精美對稱。

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

讓我們開始教程吧？

你需要什麼開始

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

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

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

從頭開始創建擴展內容覆蓋佈局

第 1 部分：從右下角位置創建擴展角選項卡

首先，向常規部分添加一個兩列（一半一半）的行。

在添加模塊之前，使用自定義裝訂線寬度更新行設置，如下所示：

• 天溝寬度：4

對於第一個特色項目，我們將創建一個列背景圖像，該圖像將在列的右下方有一個角選項卡（使用模糊模塊），在懸停時展開並覆蓋整個列/圖像。

讓我們從添加一個模糊模塊開始。

添加模糊模塊

向第 1 列添加一個模糊模塊。

我們還不會設計它的樣式。 我們基本上需要一些內容，以便我們可以設置包含簡介的列的樣式。

第 1 列設置

定位好後，打開行設置，然後單擊以編輯第 1 列設置。 然後更新以下內容：

• 背景圖片 [插入圖片]
• 背景圖片尺寸：實際尺寸

注意：在我的示例中，我使用的是從 Brewery Layout Pack 中獲取的透明背景啤酒圖像。 它們是 128 像素 x 359 像素，這就是我使用圖像的實際大小的原因。

第 1 列邊框

• 圓角：10px 右下角
• 右邊框寬度：2px
• 右邊框顏色：#e94558
• 底部邊框寬度：2px
• 底部邊框顏色：#e94558

自定義 CSS 和溢出

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

height: 400px;

更新內容如下：

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

這個自定義高度是必要的，以便我們的模糊模塊（角選項卡）擴展列的整個高度。 並且需要隱藏溢出，以便我們可以隱藏列外的大部分模糊模塊，直到懸停狀態。

添加模糊模塊內容

現在我們準備開始自定義第 1 列中的模糊模塊。打開模糊設置並更新以下內容：

• 名稱：芒果IPA
• 身體：

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• 圖像：添加用於列背景的相同圖像

設計 Blurb 模塊

在懸停時為模糊提供背景顏色，如下所示：

• 背景顏色（桌面）：透明
• 背景顏色（懸停）：rgba(255,255,255,0.9)

在設計選項卡下，更新以下內容：

• 圖像/圖標放置：左
• 標題字體：Oswald
• 標題字體樣式：TT
• 標題文字大小：40px
• 正文字體粗細：半粗體
• 正文顏色（桌面）：透明
• 正文顏色（懸停）：#121212

• 圖片寬度：100px（桌面），64px（手機）
• 內容寬度：100%
• 高度：100%
• 填充（桌面）：頂部 15%，底部 15%，左側 8%，右側 8%
• 填充（懸停）：頂部 8%，底部 8%，左側 8%，右側 8%

• 圓角（默認）：20px 左上角
• 圓角（懸停）：左上角 10px
• 頂部邊框寬度：4px（桌面），2px（懸停）
• 頂部邊框顏色：#e94558
• 左邊框寬度：4px（桌面），2px（懸停）
• 左邊框顏色：#e94558

轉換選項（桌面）

• 變換縮放 Y 軸：50%
• 變換比例 X 軸：50%
• 變換平移 Y 軸：50%
• 變換平移 X 軸：30%
• 變換原點：右下角

變換選項（懸停）

• 變換縮放 Y 軸（懸停）：100%
• 變換縮放 X 軸（懸停）：100%
• 變換平移 Y 軸（懸停）：0%
• 變換平移 X 軸（懸停）：0%

為了將模糊圖像翻轉到右側，請將以下自定義 CSS 添加到模糊內容框：

direction: rtl

注意：方向“rtl”代表“從右到左”，它切換內容的默認順序（從左到右）。

結果

讓我們從右下角位置查看擴展角選項卡的最終結果。 注意它在懸停時如何擴展以填充整個列。

第 2 部分：從左下角位置創建擴展角選項卡

複製列

要從左下角位置創建擴展角選項卡，我們可以通過複製整個列來快速啟動設計。 打開行設置並複制第 1 列。然後刪除多餘的列，這樣您就只有兩個完全相同的重複項。

更新第 2 列設置

接下來，打開第 2 列的設置並更新以下內容：

• 圓角：左下角 10px
• 右邊框寬度：0px
• 左邊框寬度：2px
• 左邊框顏色：#e94558

更新模糊設置

接下來，更新 Blurb 設置如下：

• 文字對齊：右
• 圓角（桌面）：20px 右上角
• 圓角（懸停）：10px 右上角
• 左邊框寬度：0px
• 右邊框寬度：4px（桌面），2px（懸停）
• 右邊框顏色：#e94558

• 變換平移 X 軸（桌面）：-30%
• 變換原點（桌面）：左下角

然後確保刪除 Blurb Content 框中的自定義 CSS。

結果

這是結果。 注意這個是如何與第一個對稱的，並從列的左下角位置擴展。

第 3 部分：從右上角位置創建擴展角選項卡

現在我們準備開始我們的最後兩個擴展角標籤設計。 為了搶先一步，讓我們複製包含我們已經設計好的宣傳語的整行。

更新第 1 列設置

接下來打開重複行的設置，然後打開第 1 列的設置並更新以下內容：

• 圓角 10px 右上角
• 底部邊框寬度：0px
• 頂部邊框寬度：2px
• 頂部邊框顏色：#e94558

更新模糊模塊設置

接下來，打開模糊模塊的設置並更新以下內容：

• 圓角（桌面）：20px 左下角
• 圓角（懸停）：左下角 10px
• 頂部邊框寬度：0px
• 底部邊框寬度：4px（桌面），2px（懸停）
• 底部邊框顏色：#e94558
• 變換平移 Y 軸（桌面）：-50%
• 變換原點：右上角

模糊自定義 CSS

現在我們只能看到blurb 模塊的左下部分，它不像上面一行中的其他兩個blurb 那樣顯示我們的標題。 為了在選項卡內顯示標題，我們需要使用一些自定義 CSS 將標題重新定位到簡介的左下角。

將以下自定義 CSS 添加到 Blurb 標題框中：

position: absolute;
bottom: 0;
left: 15px;

然後將以下 CSS 添加到 Blurb 內容框：

direction: rtl;
height: 100%;

第 4 部分：從左上角位置創建擴展角選項卡

對於我們的第四個也是最後一個擴展角選項卡懸停效果，我們將其放置在左上角以完成整個網格佈局的對稱設計。

更新第 2 列設置

在行設置下，打開第 2 列的設置並更新以下內容：

• 圓角：左上角 10px
• 底部邊框寬度：0px
• 頂部邊框寬度：2px
• 頂部邊框顏色：#e94558

更新模糊設置

接下來，打開第 2 列中的模糊設置並更新以下內容：

• 圓角（桌面）：20px 右下角
• 圓角（懸停）：10px 右下角
• 頂部邊框寬度：0px
• 底部邊框寬度：4px（桌面），2px（懸停）
• 底部邊框顏色：#e94558

然後更新轉換選項：

• 變換平移 X 軸（桌面）：-30%
• 變換原點：左上角

模糊自定義 CSS

然後將以下自定義 CSS 添加到 Blurb Title 框中：

position: absolute;
bottom: 0%;
right: 0%;

然後將以下 CSS 添加到 Blurb Content 框中：

height: 100%;

第 4 部分：完成佈局的設計

部分背景顏色

添加部分背景顏色如下：

• 背景顏色：#efefef

添加標題

要創建標題，請在兩行中間添加一行並將文本模塊添加到一列行。

添加內容：“季節性”。

然後更新以下設置：

• 標題 2 字體：Merriweather
• 標題 2 字體粗細：粗體
• 標題 2 字體樣式：TT
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#999999
• 標題 2 文字大小：50 像素（桌面）、30 像素（平板電腦）、24 像素（手機）
• 標題 2 字母間距：1em
• 填充：左 50 像素（桌面）、左 30 像素（平板電腦）、左 24 像素（手機）

最後結果

使用擴展的角選項卡查看佈局的最終結果。

這是移動設備上的設計。

最後的想法

此佈局設計中的擴展角標籤肯定適用於您想要在 Divi 網站上展示的各種內容。 您也不必使用所有四個角。 例如，您可以僅使用右上角的選項卡為圖像創建網格佈局，以在懸停時顯示內容。 這個設計功能很豐富。 玩得開心。

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

乾杯!