自定義 Divi 標題 CTA 的 8 個延遲按鈕動畫

將延遲按鈕動畫添加到任何 CTA 可以成為吸引訪問者註意力的有效方式，從而增加獲得點擊的可能性。 在本教程中，我們將向您展示如何使用 Divi 為自定義標題 CTA 創建 8 個延遲按鈕動畫。 為此，我們將以您可能從未考慮過的方式組合動畫設置。 此外，這些動畫幾乎可以應用於整個網站的任何 CTA 按鈕。

讓我們開始吧。

搶先看

以下是我們將添加到 Divi 中自定義標題 CTA 的 8 個延遲按鈕動畫：

免費下載 8 個延遲標題按鈕動畫佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要安裝並激活 Divi 主題。 確保您擁有最新版本的 Divi。

您將需要下載 Second Theme Builder Pack，因為我們將在本教程中使用該包中的 404 頁面模板上的自定義標題。

之後，您就可以開始了。

從第二個 Theme Builder Pack 導入模板

從 WordPress 儀表板，導航到 Divi > Theme Builder。 在主題構建器中，選擇頁面右上角的便攜性圖標。 在可移植性彈出窗口中，選擇導入選項卡，選擇 theme-builder-pack-2-404-page-template.json 文件並單擊導入按鈕。 （此導入文件將在 Second Theme Builder Pack 文件夾中）

您還可以選擇將全局頁眉和頁腳作為靜態佈局導入的選項。

導入模板後，單擊圖標可編輯自定義標題區域。

這將帶您進入正文模板佈局編輯器，我們將在其中將延遲動畫添加到預製標題上的按鈕。

自定義標題 CTA 的 8 個延遲按鈕動畫

下面的 8 個延遲按鈕動畫包括內置 Divi 動畫選項和透視 CSS 屬性的獨特組合。 當按鈕動畫包含翻轉或折疊效果時，透視屬性會添加 3D 效果。 對於這些動畫中的大多數，我們將向按鈕及其父列添加動畫以獲得更複雜的運動。

他們來了…

#1 下拉彈跳

按鈕設置：

下拉彈跳延遲按鈕動畫簡單有效。 要構建它，請打開按鈕模塊的設置並更新以下內容：

• 動畫風格：彈跳
• 動畫方向：下
• 動畫持續時間：1100ms
• 動畫延遲：1500ms
• 動畫開始不透明度：100%

#2 3D 垂直翻轉

要構建 3D 垂直翻轉延遲按鈕動畫，您必須首先將透視屬性添加到按鈕的父列（第 2 列）。

列設置

要向列添加透視，請打開行設置，然後單擊以編輯列 2 設置。 在高級選項卡下，將以下自定義 CSS 添加到主元素：

perspective: 150px

按鈕設置：

• 動畫風格：翻轉
• 動畫方向：中心
• 動畫持續時間：1500ms
• 動畫延遲：1000ms
• 動畫強度：400%
• 動畫開始不透明度：100%

#3 3D 水平翻轉

3D Horizo​​ntal Flip 延遲按鈕動畫類似於垂直翻轉。 唯一真正的區別是動畫方向。

列設置：

首先，通過將以下自定義 CSS 添加到主元素，確保已將透視圖添加到第 2 列：

perspective: 150px

按鈕設置：

打開按鈕模塊設置並更新以下內容：

• 按鈕對齊：居中

這確保水平翻轉與父透視屬性居中。

• 動畫風格：折疊
• 動畫方向：中心
• 動畫持續時間：1000ms
• 動畫延遲：2000ms
• 動畫強度：400%
• 動畫開始不透明度：100%
• 動畫速度曲線：線性

#4 下拉彈跳 + 3D 垂直翻轉

這種延遲按鈕動畫是通過組合反彈動畫（添加到列）和翻轉動畫（添加到按鈕）來完成的。

這是構建它的方法。

列設置：

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

• 動畫風格：彈跳
• 動畫方向：下
• 動畫延遲：2000ms
• 動畫開始不透明度：100%

然後將透視css添加到主元素中，如下所示：

perspective: 150px;

按鈕設置：

列設置到位後，更新按鈕模塊設置如下：

• 動畫風格：翻轉
• 動畫方向：中心
• 動畫持續時間：1500ms
• 動畫延遲：1000ms
• 動畫強度：400%
• 動畫開始不透明度：100%

這裡的技巧是確保在列動畫完成後延遲翻轉開始。

#5 俯衝（下滑+旋轉）

為了獲得下一個的“俯衝”動畫，我們需要結合滑動動畫（添加到列）和滾動動畫（添加到按鈕）。

我們開始做吧。

列設置：

打開行設置並更新第 2 列設置，如下所示：

• 動畫風格：幻燈片
• 動畫方向：下
• 動畫延遲：1000ms
• 動畫開始不透明度：100%

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

perspective: 150px

按鈕設置：

然後更新按鈕設置如下：

• 動畫風格：滾動
• 動畫方向：下
• 動畫持續時間：1500ms
• 動畫延遲：1000ms
• 動畫開始不透明度：100%

#6 放大（縮放 + 變換比例）

這種延遲按鈕動畫的獨特之處在於它涉及使用變換比例縮放按鈕。 然後我們給按鈕添加縮放動畫。

這是如何做到的。

按鈕設置：

打開按鈕模塊設置並更新以下內容：

• 變換比例：175%
• 動畫風格：縮放
• 動畫方向：中心
• 動畫持續時間：1500ms
• 動畫延遲：1000ms
• 動畫開始不透明度：100%

#7 Pulse（放大+縮小）

這種延遲脈衝動畫是通過組合縮小動畫（添加到列）和放大動畫（添加到按鈕）來創建的。

我們開始做吧。

列設置：

打開行設置並更新第 2 列的設置，如下所示：

• 動畫風格：縮放
• 動畫方向：中心
• 動畫持續時間：1000ms
• 動畫延遲：2000ms
• 動畫強度：-100%
• 動畫開始不透明度：100%

請注意，我們為動畫強度添加了一個負值 (-100%)。 這會導致列具有相反的效果，這將縮小列/按鈕（或縮小）。

按鈕設置：

然後更新按鈕設置如下：

• 動畫風格：縮放
• 動畫方向：中心
• 動畫持續時間：1500ms
• 動畫延遲：1000ms
• 動畫強度：50%
• 動畫開始不透明度：100%

請注意，動畫延遲設置為在列動畫之前 1000 毫秒發生，以便按鈕在縮小之前放大。

#8 螺旋（向左滑動 + 旋轉）

這個最終的延遲按鈕動畫結合了幻燈片動畫（添加到列）和 720 度翻轉動畫（添加到按鈕）。

這是如何做到的。

列設置：

首先，打開行設置並更新第 2 列的設置，如下所示：

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫持續時間：2000ms
• 動畫延遲：2000ms
• 動畫強度：100%
• 動畫開始不透明度：100%

按鈕設置：

然後更新按鈕模塊設置如下：

• 動畫風格：翻轉
• 動畫方向：中心
• 動畫持續時間：2000ms
• 動畫延遲：2000ms
• 動畫強度：800%
• 動畫開始不透明度：100%

請注意，此處動畫強度設置為 800%。 這將導致按鈕翻轉三次以創建旋轉效果。

最終結果

讓我們最後看看 8 個延遲按鈕動畫。

最後的想法

我希望這 8 個延遲按鈕動畫將有助於提高自定義標題 CTA 的轉化率。 您還可以使用這些示例獲取靈感，並為您自己的網站探索其他設計和應用程序！

有喜歡的嗎？

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

乾杯!