如何更改懸停內容以在 Divi 中創建獨特的 CTA（3 種方式）

Divi 的內置懸停選項可以輕鬆更改懸停時任何模塊的內容。 我們可以在懸停時更改背景圖像、顏色甚至文本。 這為吸引用戶注意力的創造性方法打開了大門，並促進了那些號召性用語以實現更好的轉化。

今天，我們將向您展示如何在 Divi 中更改懸停內容以獲取一些獨特的號召性用語。 我們將展示在懸停時更改按鈕文本（和圖標）的巧妙方法。 我們將展示如何在懸停時優雅地更改號召性用語模塊中的標題和按鈕文本。 而且，我們甚至會加入一些自定義 CSS 來添加一些獨特的過渡效果（例如切換和翻轉按鈕圖標）。

一探究竟！

搶先看

以下是我們今天將要創建的三個設計的快速瀏覽。

#1 如何更改懸停按鈕的內容

#2 如何更改文本模塊的背景和正文內容

#3 如何使用號召性用語模塊更改多個元素的懸停內容

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

你需要什麼開始

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

1. 如果您還沒有，請安裝並激活已安裝的 Divi 主題（如果不使用 Divi 主題，請安裝並激活 Divi Builder 插件）。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 將 Cake Maker 登陸頁面預製佈局加載到頁面上。 我們將在我們的設計中使用這種佈局。 在部署 Divi Builder 時，您可以通過選擇“選擇預製佈局”來加載佈局。 或者，您可以從 Divi Builder 的設置菜單中選擇“從庫加載”加號圖標。 有關如何將預製佈局加載到您的頁面的更多信息，請觀看我們的視頻。

之後，您就可以開始在 Divi 中進行設計了。

#1 如何更改懸停按鈕的內容

將 Cake Maker 登陸頁面預製佈局加載到頁面後，在頁面頂部找到主按鈕 CTA 並打開按鈕模塊設計設置。

更改懸停按鈕文本

在內容選項卡下，按如下方式更新按鈕文本：

按鈕文字：“立即購買”

然後部署按鈕文本的懸停選項，在懸停選項卡下輸入替換按鈕文本，如下所示：

按鈕文本（懸停）：“我們走吧”

當鼠標懸停在按鈕上時，懸停按鈕文本下方的文本將替換默認按鈕文本。

按鈕寬度

但是按鈕是inline-block因此按鈕/鏈接的寬度將根據按鈕包含的內容（字母或空格）的數量而變化。 這不適用於此懸停效果，因為替換文本較小時，按鈕的寬度會變小，並在懸停在按鈕邊緣時產生跳躍或故障。 為了解決這個問題，我們需要為按鈕設置一個寬度。 這很容易使用一個 CSS 片段。 將以下 CSS 添加到按鈕模塊的主元素。

width: 200px;

這是結果。

其他更改和懸停效果

除了更改懸停時的內容外，我們還可以使用不同的懸停效果組合來為按鈕增添趣味。

現在按鈕圖標是一個在懸停時部署的向右箭頭。 這與懸停按鈕文本“Let's Go”配合得非常好。

在懸停時翻轉按鈕圖標

但是您也可以為按鈕圖標添加漂亮的翻轉懸停效果。 為此，首先通過更新以下內容使圖標始終顯示（不僅僅是懸停）：

僅在懸停按鈕上顯示圖標：否

然後在按鈕模塊中添加一個 CSS Class，如下所示：

CSS 類：flip-button-icon

然後打開頁面設置並添加以下自定義CSS。

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

這是結果。

更改懸停按鈕圖標

您還可以在懸停時完全更改按鈕圖標。 您真正需要的只是一小段 CSS 來替換圖標所在的 :after 偽元素的內容。

在我們添加 css 之前，首先讓我們選擇一個不同的按鈕圖標來初始顯示，然後我們可以用 CSS 將其更改為向右箭頭。

使用購物車圖標更新按鈕圖標，因為我們的 CTA 是“立即顯示”。

然後轉到高級選項卡並使用 180 度旋轉而不是 360 度更新當前的 CSS 變換屬性。 並為顯示左箭頭（“\23”）的內容添加新的 unicode。

新代碼段將如下所示：

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

由於我們還將圖標旋轉 180 度，因此當鼠標懸停在按鈕上時，這將顯示一個向右箭頭作為購物車圖標的替代。

最後結果

這是最終的結果。

#2 如何更改文本模塊的背景和正文內容

對於下一個設計，請沿著頁面佈局向下移動到“我的服務”部分。 使用兩個文本模塊打開頂行的行設置。

更新列設置

在行設置下，打開第 1 列的設置並在懸停時向該列添加背景圖像。

這將替換默認情況下存在的白色背景。

此外，還可以在懸停時在背景圖像上方添加漸變。

背景漸變左顏色：rgba(255,255,255,0)
背景漸變右顏色：rgba(46,41,142,0.75)
起始位置：30%
將漸變放在背景圖像上方：是

這將提供一個很好的覆蓋，使懸停時的替換文本更具可讀性。

之後，通過將列恢復為默認設置來刪除列的自定義填充。

自定義第 1 列中的文本模塊

更新列後，保存設置並打開第 1 列中文本模塊的文本模塊設置。然後在懸停時使用以下內容更新文本模塊正文內容：

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

這是在懸停時添加帶有鏈接的號召性用語的好方法。

接下來，更新背景如下：

背景顏色：#ffffff；
背景顏色（懸停）：rgba(255,255,255,0)；

這添加了一個很好的過渡元素來逐漸顯示列中的背景圖像。

接下來更新以下設計設置：

高度：260px

填充：頂部 30 像素，左側 30 像素，右側 30 像素
填充（懸停）：90px 頂部

這將創建一個很好的過渡效果，當鼠標懸停在文本模塊上時，它會逐漸降低文本。

接下來，將文本顏色更新為白色，如下所示：

鏈接文字顏色：#ffffff
標題 3 文本顏色（懸停）：#ffffff

要減慢懸停效果的過渡，請按如下方式更新過渡持續時間：

轉換持續時間：500ms

最後結果

現在看看最終的結果。

#3 如何使用號召性用語模塊更改多個元素的懸停內容

對於下一個設計，我們將使用一個號召性用語模塊，該模塊在懸停時更改多個內容元素。 為此，請沿著頁面向下進入“流行收藏”部分。

添加新的號召性用語模塊

然後在專業部分頂行的“立即購買”按鈕下添加一個新的號召性用語模塊。

使用懸停時更改內容更新 CTA

接下來，更新號召性用語內容如下：

標題：“特價”
標題（懸停）：“10% 折扣”
按鈕文字：“立即購買”
按鈕文本（懸停）：“獲得交易”
正文：“定製紙杯蛋糕”
按鈕鏈接網址：#

暫時保存設置。

複製和粘貼佈局按鈕樣式

我們將在為我們的 CTA 設計按鈕方面取得進展。 為此，請打開預製佈局附帶的 CTA 模塊上方的按鈕模塊的按鈕設置。 然後單擊按鈕選項組上的三點圖標並選擇“複製按鈕樣式”。

然後打開我們正在設計的號召性用語模塊上的其他選項菜單，然後選擇“粘貼按鈕樣式”。

然後打開號召性用語模塊設置並更新按鈕填充：

按鈕填充：頂部 15 像素，底部 15 像素，左側 40 像素，右側 40 像素

更新文本樣式

之後，更新標題和正文文本設計。

標題標題級別：H4
標題字體：Pacifico
標題文字大小：9vw
標題行高度：1.3em
正文字體：Open Sans
正文字體粗細：粗體
正文大小：18px
正文字母間距：1px

最終設置

接下來，更新填充。

填充：左0px，右0px

然後給模塊一個自定義的 CSS 類。

CSS 類：fade-cta-title

通過將以下自定義 CSS 添加到促銷按鈕 CSS 輸入框，使 cta 按鈕全寬。

並更新過渡持續時間。

轉換持續時間：800ms

最後，更新背景顏色，使其默認為透明，並在懸停時更改顏色。

背景顏色：無（刪除）
背景顏色（懸停）：rgba(247,78,72,0.86)

接下來，刪除我們的 Call to Action 模塊上方行中的兩個模塊，以便它替換佈局中的原始 cta。

到目前為止的結果

這是到目前為止的結果。 請注意將鼠標懸停在號召性用語模塊上時標題文本和按鈕文本的變化。

用動畫軟化內容變化

如果我們想在 CTA 中柔化大標題的過渡，我們可以使用 CSS 添加一個簡單的動畫。 由於我們已經在模塊中添加了 CSS 類，我們需要做的就是打開頁面設置模式並添加以下自定義 CSS：

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

最後結果

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

這是在手機上。

最後的想法

在本教程中，我們展示了 3 個如何在 Divi 中有效更改懸停內容的示例。 內容的內置懸停選項確實使這一過程變得簡單。 使用一些 CSS 片段，您可以添加一些獨特的過渡來使設計與眾不同。 希望這能讓您在自己的網站上提高號召性用語，以實現更多轉化和參與。

想要更多？ 我們有很多很棒的帖子，可以幫助您將 CTA 提升到一個新的水平。

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

乾杯!