如何使用一些簡單的懸停效果在 Divi 中創建引人注目的 CTA

微妙的交互和懸停效果對於創建引人注目的 CTA（號召性用語）非常有用。 訣竅是使用使您的 CTA 更具吸引力和直觀性的效果，以便用戶更有可能採取行動。 由於大多數 CTA 的最終目標是單擊鏈接或按鈕，因此優化 CTA 的方式很重要，可以將這些可點擊的項目放在首位。

在本教程中，我將向您展示如何使用 Divi 使用多個懸停效果來優化 CTA 的可見性。 我將向您展示如何在懸停時添加部分分隔線背景來展示您的 CTA，以獲得更好的對比度和可讀性。 我將向您展示如何在懸停時放大 CTA 並將其移動到頁面中心，使其成為主要焦點。 這些懸停效果將有助於使任何號召性用語脫穎而出，並有望改善用戶體驗。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的引人注目的 CTA 懸停效果一瞥。

免費下載引人注目的 CTA 懸停效果佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

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

讓我們進入教程好嗎？

你需要什麼開始

要開始，您將需要以下內容：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）
3. 要在設計構建中使用的背景圖像。 我將在本教程中使用 Veterinarian Layout Pack 中的一個。

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

在 Divi 中實現引人注目的 CTA 懸停效果

對於此設計示例，我們將從左對齊或右對齊的號召性用語模塊開始。 然後我們將模塊帶到頁面的中心並在懸停在行上時縮放（或放大）它。 為了使號召性用語在行懸停狀態下更加突出，我們將通過添加將在模塊後面關閉以獲得更好對比度的部分分隔符來進行分階段。

這是如何做到的。

創建部分和行

首先，創建一個具有一列行的常規部分。

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

在右側添加具有圖像焦點的背景圖像，以便在左側添加我們的模塊時它仍然可見。

• 最大寬度：1080px
• 截面對齊：居中

現在處理這個部分。 稍後我們將返回到部分設置以添加部分分隔符懸停效果。

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

• 寬度：100%
• 最大寬度：100%
• 填充：頂部 5%，底部 5%，右側 35%

正確的填充是此設計的關鍵，因為它將內容推向左側。 我們稍後會回來添加我們的懸停選項，以便稍後將行的內容移回中心。

添加號召性用語模塊

現在我們已準備好構建號召性用語模塊，這將是我們引人注目的 CTA 的主要焦點。

繼續將號召性用語模塊添加到一列行。

然後更新號召性用語模塊設置，如下所示：

內容

• 標題：首次訪問折扣
• 按鈕：預約
• 按鈕鏈接網址：#

設計

• 背景顏色：#ffffff
• 文字顏色：深色
• 標題字體：Nunito
• 標題字體粗細：粗體
• 標題文字大小：36px

• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#154c87
• 按鈕邊框寬度：0px
• 最大寬度：500px
• 模塊對齊：居中
• 圓角：10px

這種設計的一個關鍵特點是最大寬度為 500 像素。 這將確保當我們稍後在懸停時調整行的正確填充時，模塊的寬度不會改變。

• 盒子陰影：見截圖
• 框陰影垂直位置：30px
• 框陰影模糊強度：100px
• 框陰影傳播強度：-30px

將鼠標懸停在行上時縮放和居中號召性用語

現在我們準備開始添加引人注目的 CTA 懸停效果。 在這一點上，當鼠標懸停在行上時，我們想要完成兩件事。 首先，我們要將 CTA 移到中心。 然後我們想要增加模塊的比例（使其更大）以使其更加可見。

為此，請打開行設置並更新以下內容：

• 填充（懸停）：0% 正確

然後調整移動顯示的填充：

• 填充（平板電腦）：0% 正確
• 填充（電話）：左 5%，右 5%

要放大 CTA，請將以下轉換屬性添加到懸停時的行：

• 變換比例（懸停）：110%

即使將變換比例屬性應用於行，這也間接應用於行內的所有子元素，包括模塊。 因此，當懸停在行上時，模塊將縮放到 110%。

使用分區分隔符在懸停時上演 CTA

最後，當鼠標懸停在部分/行上時，我們準備添加部分分隔線來暫存 cta。 這裡的關鍵是確保部分和行具有相同的高度和寬度，以便用戶將同時懸停在部分和行上而沒有任何間隙。 所以，我們需要去掉任何部分的填充。 然後我們需要創建一個頂部和底部部分分隔線，當懸停在該部分上時，它的高度會增加。

這是該怎麼做。

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

填充：0px 頂部，0px 底部

• 頂部分隔線樣式（桌面）：見截圖
• 頂部分隔線樣式（平板電腦和手機）：無
• 頂部分隔線顏色：rgba(21,76,135,0.61)
• 頂部分隔線高度（默認）：0%
• 頂部分隔線高度（懸停）：120%
• 頂部分隔線翻轉：水平

• 底部分隔線樣式（桌面）：見截圖
• 底部分隔線樣式（平板電腦和手機）：無
• 底部分隔線顏色：rgba(21,76,135,0.61)
• 底部分隔線高度（默認）：0%
• 底部分隔線高度（懸停）：120%
• 底部分隔線翻轉：水平

為確保分隔線不會顯示在部分之外，請將垂直和水平溢出選項更新為隱藏。

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

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

最後結果

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

改變 CTA 的位置

如果您想在懸停狀態之前更改號召性用語模塊的初始位置，您可以輕鬆更新行間距。

從右側

假設您希望模塊在懸停之前從右側開始。 只需按如下方式更新行設置：

• 填充：左 35%
• 填充（懸停）：0% 左

您將需要更新圖像以具有左焦點。 之後，這是結果。

從底部

或者，如果需要，您可以從行的底部彈出 CTA。 為此，您需要為該部分添加一個固定高度，然後用一些頂部填充將模塊放下。

打開部分設置並為該部分設置最大高度並將溢出設置為隱藏。

• 最大高度（桌面）：415px
• 水平溢出：隱藏
• 垂直溢出：隱藏

然後打開行設置並更新填充以將模塊部分推出該部分下方的視圖。 然後在懸停時取出頂部填充物以將其恢復。

• 填充（桌面）：頂部 25%，底部 5%
• 填充（懸停）：5% 頂部

這是結果……

最後的想法

Divi 使將各種懸停效果添加到您的網頁設計中變得輕鬆有趣。 最好的懸停效果是那些有目的的並且實際上可以改善用戶體驗的效果。 這篇文章中介紹的幾個簡單的懸停效果應該有助於創建一些引人注目的 CTA，它們看起來很棒，改善用戶體驗，並有望帶來更多的轉化。

有關更多想法，請查看我們關於使用懸停選項在 Divi 中強調 CTA 的 3 種方式的帖子以及我們關於創建滑入 CTA 的帖子。

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

乾杯!