如何在 Divi 中為部分/行添加動畫效果

已發表: 2017-08-11

在今天的 Divi 教程中，我們將向您展示如何在 Divi 中為部分和行添加動畫效果。 Divi 主題本身提供了一些相關的動畫效果，可幫助您為網站帶來額外級別的交互。 在“高級”選項卡的“動畫”子類別中，可以輕鬆地將這些效果分配給 Divi Builder 中的圖像。

但是，如果您正在尋找一種方法將這些動畫效果添加到您網站的其他模塊、部分或行，那也是可能的。 在這篇文章中，我們將向您展示如何做到這一點。 除了向您展示如何添加內置動畫效果外，我們還將向您展示如何將 wow.js 和 animate.css 集成到您的 Divi 網站中。

在這篇文章的最後，您將能夠為行和部分添加漂亮的效果。 為了幫助您可視化該過程，我們想分享以下示例（我們將在本文末尾向您展示如何實現）：

動畫效果

Divi Animations 還是 Wow.js 和 Animate.css？

你可能想知道在什麼情況下你應該考慮使用 Divi 動畫，在什麼情況下 wow.js 和 animate.css 會做得更好。 如果您不想創建一些高級動畫效果，使用 Divi 內置動畫是最簡單的解決方案，但 wow.js 和 animate.css 效果肯定也會為您的網站帶來巨大的附加值。

何時使用 Divi 動畫

您可以使用 Divi 中的五種可用動畫效果：

  • 淡入
  • 底部幻燈片
  • 左側滑入
  • 正確的滑入
  • 頂部滑入

雖然只有五種可能，但它們也是最常用的。 它們簡單明了。 如果您想在不付出太多努力的情況下為您的網站提供不錯的額外效果，Divi 動畫效果就是您的最佳選擇。 從您滾動並查看已添加效果的模塊、行或部分的那一刻起，這些效果中的每一個都會被激活。 這樣，您的訪問者就不會錯過位於頁面底部的效果，例如。

要集成 Divi 動畫效果，您不必在您的網站上上傳子主題。 您可以在處理父主題的同時輕鬆添加這些效果。

何時使用 Wow.js 和 Animate.css

將 wow.js 和 animate.css 集成到您的網站中是您可能非常喜歡的，因為您有很多選擇。 有 14 個動畫效果類別，其中包含與該類別相關的不同效果。 您可以選擇的類別如下：

  • 希望引人關注的人
  • 彈跳入口
  • 彈跳退出
  • 淡入淡出
  • 淡出退出
  • 腳蹼
  • 光速
  • 旋轉入口
  • 輪換出口
  • 滑動入口
  • 滑動出口
  • 縮放入口
  • 縮放退出
  • 特價商品

您可以通過單擊以下鏈接查看所有可用的效果。 滾動時也會出現這些動畫效果。

如何在 Divi 中為部分/行添加動畫效果

訂閱我們的 YouTube 頻道

使用內置動畫效果

我們將向您展示的第一種可能性是內置動畫效果。 我們將向您展示如何將效果應用於部分和行。 打開您要進行修改的頁面。

在我們的示例中，我們將向頁面的第一部分和第一行添加動畫效果。 為部分或行添加動畫在兩種情況下都是相同的。 不同動畫效果的 CSS 類代碼如下：

  • 淡入 CSS 類： et-waypoint et_pb_animation_fade_in
  • 底部滑入 CSS 類： et-waypoint et_pb_animation_bottom
  • 左滑入 CSS 類： et-waypoint et_pb_animation_left
  • 右側滑入：CSS 類： et-waypoint et_pb_animation_right
  • 頂級滑入式 CSS 類： et-waypoint et_pb_animation_top

向行添加動畫效果

要將動畫添加到某一行，請打開該行的設置並轉到“高級”選項卡。 在高級選項卡中，將動畫效果 CSS 類放置在 CSS 類字段中。 在這種情況下，我們將向您展示如何添加淡入動畫。

動畫效果

為部分添加動畫效果

將動畫效果添加到行的相同方法也適用於部分。 轉到“高級”選項卡，將您選擇的動畫效果 CSS 類放置在“CSS 類”字段中。 在本例中，我們將向您展示如何添加頂部滑入動畫效果。

結果

將效果添加到部分和行後，您將看到以下結果：

將 Wow.js 和 Animate.css 添加到您的子主題

在下一部分中，我們將向您展示如何將 wow.js 和 animate.css 添加到您的 WordPress 網站，以及如何在整個 Divi 主題中使用它。

首先，我想感謝 Jeremy Cookson 關於如何將 wow.js 和 animate.css 集成到 WordPress 的這篇文章。 在這篇文章的這一部分中，我們將向您展示如何為使用 Divi 主題構建的 WordPress 網站進行集成。

要將 wow.js 和 animate.css 添加到您的網頁，您必須在您的網站上使用子主題。 如果您想知道如何創建子主題，請查看這篇文章。 創建子主題的主文件後，您需要添加另外兩個文件以完成帶有動畫效果的子主題。

下載文件並將它們添加到您的孩子主題

讓您的孩子主題觸手可及，同時點擊以下兩個鏈接下載以下兩個文件：

  • 動畫.min.css
  • 哇.min.js

下載這兩個文件後，在您的子主題中創建子文件夾。 將其中一個命名為 CSS，另一個命名為 JS。 之後，將 animate.min.css 放在 CSS 文件夾中，將 wow.min.js 放在 JS 文件夾中。

動畫效果

上傳子主題

您需要做的下一件事是上傳並激活您剛剛添加 wow.js 和 animate.css 的子主題。 轉到您的WordPress 儀表板 > 外觀 > 主題 > 然後單擊頁面頂部的“添加新”。

將 PHP 代碼添加到您的 Functions.php 文件中

上傳子主題後，將以下 PHP 代碼行添加到子主題的 functions.php 文件中：

//* 將 Animate.CSS 和 WOW.js 入隊
add_action('wp_enqueue_scripts', 'sk_enqueue_scripts');
函數 sk_enqueue_scripts() {
wp_enqueue_style('animate', get_stylesheet_directory_uri() .'/css/animate.min.css');
wp_enqueue_script( '哇', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), ”, true );
}
//* 入隊腳本以激活 WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
函數 sk_wow_init_in_footer() { add_action('print_footer_scripts', 'wow_init');}
//* 在 </body>function wow_init() { ?> 之前添加 JavaScript
<腳本類型=”文本/javascript”>
新哇().init(); </script><?php }

向行和節添加動畫

將 wow.js 和 animate.css 效果添加到行和部分的系統與 Divi 動畫效果相同。 您必須打開要添加動畫效果的行或部分的設置。 接下來，您可以將分配給動畫的 CSS 類放入您的部分或行的 CSS 類字段中。

向行添加動畫

對於我們將向您展示行的示例，我們使用了在動畫效果列表中找到的fadeInRight 效果。 轉到“行”設置的“高級”選項卡，並將“哇淡入淡出”添加到“CSS 類”字段。 每次您想為網站的某個部分添加效果時，請確保在您使用的效果前加上“哇”。

結果

添加 CSS 類並預覽您正在處理的頁面後，您應該獲得以下結果：

動畫效果

將動畫添加到部分

相同的方法適用於向部分添加動畫效果。 轉到“高級”選項卡，將“wowbounceInDown”CSS 類添加到您部分的“CSS 類”字段。

結果

如果您正確地遵循了所有步驟，您應該獲得以下結果：

動畫效果

高級選項

如果您想為動畫添加一些額外的規範，您也可以這樣做。 例如，您可以為您的動畫效果之一添加延遲時間。 當您在同一部分中將部分動畫與行動畫相結合時，這可能會派上用場。 這樣，您可以確保動畫效果不會相互重疊。

為了向您展示如何添加此延遲時間，我們將結合本文前一部分中使用的兩種效果。 一種動​​畫效果分配給該部分，另一種分配給該行。 為了確保行動畫效果不會丟失，我們將為其添加 2 秒的延遲時間。

打開行設置並返回到高級選項卡。 在 CSS Class 字段中，添加另一個名為“delay”的類。 此類尚不存在，但我們將在下一步中添加它。

現在，通過單擊以下按鈕將延遲 CSS 類添加到您正在處理的頁面的設置中：

接下來，將帶有 CSS 代碼行的 CSS 類添加到自定義 CSS 字段。 如果你想添加 2 秒的延遲時間，就像我們在這個例子中要做的那樣，你將需要以下 CSS 代碼行： 

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

結果

添加延遲時間後，結果應如下所示：

動畫效果

最後的想法

在這篇文章中，我們向您展示瞭如何向您的 Divi 網站添加動畫效果。 我們為您提供了兩種可能性。 第一個向您展示如何使用 Divi 提供的標準動畫效果。 第二種可能性允許您集成 wow.js 和 animate.css。 在您的網站上使用動畫效果可以幫助您強調要與訪問者共享的內容。 除此之外，它看起來也很棒。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論。

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

精選圖片由 Stocker 頂部/shutterstock.com 提供