如何使用 Divi 的新動畫效果

歡迎來到這個 6 部分系列的第 1 部分，它將教您如何使用 Divi 的新動畫選項來設計精彩的頁面部分。 我將向您介紹如何構建我們的現場演示頁面的不同部分，以便向您展示向您的網站添加動畫的技巧。 動畫功能真正有趣且易於使用。 使用 Visual Builder，您可以看到您的創作在每個階段都栩栩如生。 快來和我一起探索 Divi 動畫的力量。

動畫可以使頁面栩栩如生。 如果有效地完成，用戶可以參與並更傾向於探索您頁面上的內容。 如果做得不好，動畫會完全分散用戶的注意力，並使他們在茫然失望的狀態下離開。 當用戶向下滾動頁面時，動畫的速度、時間和強度都在這種運動交響樂中發揮著重要作用。

Divi 的高級動畫功能允許您為網站的任何元素添加動畫。 您可以結合這些動畫元素來創建無數的運動組合，使您的部分變得生動。

在本系列的第 1 部分中，我將向您展示如何使用視覺構建器來構建和動畫演示我們現場演示頁面的前兩個部分，展示 Divi 動畫功能的強大功能。

讓我們開始吧。

這是我們將在本系列中構建的內容的先睹為快

系列的第 1 部分

第 1 節

第 2 節

系列的第 2 部分

第 3 節

第 4 節

系列的第 3 部分

第 5 節

系列的第 4 部分

第 6 節

系列的第 5 部分

第 7 節

系列的第 6 部分

第 8 節

第 9 節

準備設計元素

對於第一部分，您將需要兩個圖像。 第一個是尺寸約為 1280×800 的全屏背景圖像。 這是我正在使用的一個：

第二張圖像是同一圖像的編輯版本，已垂直翻轉並向底部淡出。 第二張圖片將作為主要標題的背景，大小應在 800×400 左右。

要創建顛倒的圖像，請在“預覽”中打開圖像並選擇“工具”>“垂直翻轉”或在 Photoshop 中打開圖像，選擇“圖像”>“圖像旋轉”>“垂直翻轉畫布”。 為了給圖像底部添加淡出效果，我在畫筆模式下使用了橡皮擦工具，大小為 800px，硬度為 0%。 然後我按住 shift 並沿著底部邊緣拖動畫筆。

確保將其導出為 png 文件。

如果您沒有 Photoshop，您可以嘗試使用 gimpshop 等免費照片編輯解決方案來完成許多相同的設計編輯。 如果您不知道如何使用照片編輯軟件（並且此時不想學習），請暫時忽略第二張圖片，或使用下面的一張（單擊並將其拖到您的桌面）。

對於第二部分，您將需要兩張圖片。 第一個應該是像這個這樣的 730×490 左右。

第二個應該是 525×660 左右，如下圖所示。

理解動畫術語

如果您還沒有，請繼續閱讀介紹高級動畫的功能更新帖子。 在帖子的最後，Nick 給出了您將在整個構建器中找到的每個動畫功能的有用定義/描述。 了解這些動畫功能的實際作用對於創建過程很重要。

一旦您了解了這些動畫功能是什麼，讓我們深入研究。

如何使用 Divi 的新動畫效果

訂閱我們的 YouTube 頻道

添加您的新頁面設置

從 WordPress 儀表板，轉到頁面 > 添加新。 然後為您的頁面添加標題。 接下來，在頁面右上角的框中找到Divi Page Settings，然後選擇Dot Navigation“ON”。 在頁面屬性框中，為頁面模板選擇空白頁面。 最後，單擊“使用 Divi Builder”按鈕並部署 Visual Builder 以開始構建佈局。

構建部分 1：全屏標題設計和動畫

此標題部分的行為很像設置為全屏的全寬標題模塊。 換句話說，當站點加載時，無論窗口大小如何，該部分都將填充瀏覽器窗口的整個寬度和高度。 但是我們將使用標準部分並將高度設置為 100vh，而不是使用全寬頭模塊。 這樣我們就可以在其中添加一個文本模塊。

使用可視化構建器，單擊 編輯啟動構建器時默認已顯示的標準截面的截面設置。 更新以下內容：

在內容選項卡下...

背景圖片：[輸入您的 1280×800 背景圖片]
使用視差效果：是
視差法：真視差

在設計選項卡下...

自定義填充：頂部 5%，右側 0px，底部 5%，左側 0px

在高級選項卡下...

在 Main Element 框中添加以下自定義 CSS：

min-height: 100vh

這一行 css 告訴該部分顯示 100% 的視口高度。

保存設置

接下來在您的行中插入一個單列結構，並向該列添加一個文本模塊。 更新文本模塊設置如下：

在“內容”選項卡下...

只需在內容框中添加“Divi”一詞即可。

在設計選項卡下...

文本字體：Oswald，大寫 (TT)
文字字體大小：14px
文字文字顏色：#08408e
文本字母間距：1.5em（您需要輸入）
文字方向：居中
自定義保證金：2%
動畫風格：翻轉
動畫重複：一次
動畫方向：右
動畫持續時間：2000ms
動畫延遲：1100ms
動畫強度：100%
動畫開始不透明度：0%
動畫速度曲線：漸入漸出

超時... 讓我們暫停一分鐘，以便我向您展示手動添加此類似動畫需要什麼。

這是動畫所需的內聯樣式的 html：

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

這是動畫所需的 CSS：

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

這不包括當動畫在瀏覽器窗口中可見時激活動畫所需的代碼。 無論如何，所有這些都說明擁有這些內置動畫功能可以節省大量時間。 並且能夠在編輯動畫選項時實時查看動畫是相當可觀的。

現在讓我們繼續更新我們的文本模塊設置：

在高級選項卡下...

將以下自定義 CSS 行添加到 Main Element 框中：

text-indent: 1.5em

保存設置

接下來直接在您剛剛創建的文本模塊下添加另一個文本模塊，並按如下方式更新設置：

在內容選項卡下...

在內容框的文本選項卡中添加以下html：

<p><span>Believing</span><br />is  Seeing</p>

在設計選項卡下...

文字顏色：淺
文本字體：Oswald，大寫 (TT)
文本字體大小：8vw（你必須輸入它；這使得字體大小為視口寬度的 8%）
文字文字顏色：rgba(255,255,255,0.79)
文本行高：1.4em
文字方向：居中
動畫風格：折疊
動畫方向：向上
動畫持續時間：1800ms
動畫延遲：0ms
動畫強度：60%

保存設置

此動畫效果將通過從看似平坦的位置折疊（或站立）來顯示主要標題。 現在我們已經完成了主要的標題文本，讓我們將顛倒的背景圖像添加到行中。

現在轉到包含您剛剛創建的兩個文本模塊的行的行設置，並按如下方式更新設置：

在內容選項卡下...

背景圖片：[插入您的 800×440 圖片]
背景圖片尺寸：適合
背景圖片位置：頂部中心
背景圖像重複：不重複

在設計選項卡下...

使用自定義寬度：是
單元： ％
自定義寬度：50%
自定義填充：頂部 12%，右側 0%，底部 5%，左側 0%
動畫風格：幻燈片
動畫方向：向上
動畫延遲：300ms
動畫強度：20%

此動畫效果將圖像向上滑動，幾乎就像從山後升起一樣。

這就是第一部分。 讓我們看看我們的最終設計和動畫。

這裡的三個動畫元素包括 Row（向上滑動）、帶有文本“Believing is Seeing”（從其中心向外折疊）的文本模塊以及帶有文本“Divi”（延遲）的文本模塊在其他元素停止後向右翻開）。 這種組合通過有目的地和及時地展示不同的內容來真正吸引訪問者。

建築第 2 部分

我們動畫演示頁面的第二部分展示了一種微妙但非常酷的方式來顯示頁面上的內容。 事實上，幾乎不可能一眼就認出所有的動作。

要構建第二部分，請在上一部分下添加一個常規部分。 在該部分中添加一個兩列（一半一半）的行。

在左欄中，添加具有以下設置的文本模塊：

在內容選項卡下...

在內容框的文本選項卡中輸入以下 html：

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

在設計選項卡下...

文字顏色：淺
文字字體：蒙特塞拉特
文字字體大小：18px
文本行高：1.8em
標題字體：Montserrat，粗體 (B)，大寫 (TT)
標題字體大小：39px（桌面）
標題行高度：2.2em
底部邊距：50px
動畫風格：幻燈片
動畫方向：向上
動畫強度：10%

此動畫效果將通過將文本塊向上滑動到視圖中來顯示文本塊。

保存設置

接下來在剛剛創建的 Text 模塊下添加一個按鈕模塊。 更新按鈕模塊設置如下：

在內容選項卡下...

按鈕文字：了解更多
按鈕 URL：#（或任何你想要的）

在設計選項卡下...

按鈕對齊：左
文字顏色：淺
為按鈕使用自定義樣式：是
按鈕文字大小：15px
按鈕邊框半徑：0
按鈕字母間距：3px
按鈕字體：Montserrat，粗體 (B)，大寫 (TT)
顯示按鈕圖標：是
自定義填充：頂部 10 像素，右側 30 像素，底部 10 像素，左側 30 像素
動畫風格：幻燈片
動畫方向：下
動畫延遲：100ms
動畫強度：10%

為了抵​​消上面之前文本的效果，此動畫效果將通過將按鈕向下滑動到視圖中來顯示按鈕，並稍有延遲。

您還看不到文本和按鈕，因為它目前是白底白字。 沒關係。 我們將很快添加我們的背景。

接下來將一個分隔模塊添加到右列。

然後更新設置如下：

在設計選項卡下...

高度：260px

在高級選項卡下...

禁用桌面上的可見性

在此處添加分隔線將有助於背景圖像在移動設備上保持可見。

保存設置

現在讓我們為每一列添加背景。 轉到行設置並更新以下內容：

在內容選項卡下...

第 1 列背景漸變顏色：#fe8840，rgba(238,78,78,0.9)
第 1 列梯度方向：135deg
第 2 列背景圖片：[輸入您的 730×490 圖片]
第 2 列背景圖像位置：左上角
第 2 列背景圖像重複：無重複

在設計選項卡下...

使用自定義寬度：是
自定義寬度：1366px
使用自定義裝訂線寬度：是
天溝寬度：1
均衡柱高：是
自定義填充：頂部 0px、右側 0px、底部 0px、左側 0px
第 1 列自定義填充：頂部 5%，右側 7%，底部 5%，左側 7%
動畫風格：折疊
動畫方向：向上
動畫持續時間：800ms

此動畫效果將通過折疊（或站立）將整行顯示在視野中。

在高級選項卡下...

將以下自定義 CSS 添加到 Main Element 框：

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

保存設置

接下來在您剛剛完成創建的行下添加一個兩列（三分之一三分之二）的行。

在左欄中添加一個分隔模塊並更新設置如下：

在設計選項卡下...

高度：400px

在高級選項卡下...

禁用桌面上的可見性

在此處添加分隔線將有助於背景圖像在移動設備上保持可見。

保存設置

為了節省時間，請繼續右鍵單擊並複制上方行左列中包含文本“時間就是金錢”的文本模塊。 然後將其粘貼到下方行的右側（三分之二）列中。

更新新的文本模塊設置如下：

在內容選項卡下...

在內容框中將 h1 標題文本更改為“像專業人士一樣通勤”。

在設計選項卡下...

文字文字顏色：#a8a8a8
標題文本顏色：#414159
動畫風格：幻燈片
動畫方向：下
動畫強度：10%

此動畫效果通過將文本塊向下滑動到視圖中來顯示文本塊。

現在右鍵單擊並複制上一行左列中的按鈕模塊，然後將其粘貼到您剛剛完成編輯的文本模塊下。

更新按鈕模塊設置如下：

按鈕文字顏色：#ff4823
按鈕邊框顏色：#ff4823
按鈕懸停文本顏色：#ff2323

保存設置

對於最後一步，通過更新以下內容來編輯您的行設置：

在內容選項卡下...

背景顏色：#ffffff
第 1 列背景圖片：[插入您的 525×660 圖片]
第 1 列背景圖像位置：左上角
第 1 列背景圖像重複：無重複
第 2 列背景漸變顏色：rgba(255,255,255,0.91), #ffffff
第 2 列梯度方向：135deg

在設計選項卡下...

使用自定義寬度：是
自定義寬度：1040px
使用自定義裝訂線寬度：是
天溝寬度：1
均衡柱高：是
自定義填充：頂部 0px、右側 0px、底部 0px、左側 0px
第 2 列自定義填充：頂部 5%，右側 7%，底部 5%，左側 7%
動畫風格：折疊
動畫方向：下
動畫持續時間：800ms

此動畫效果將通過將其折疊到視圖中來顯示整行。

在高級選項卡下...

在 Main Element 框下添加以下自定義 CSS：

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

這就是本節。 看看你的結果。

因為本節的動畫和設計元素很微妙，我認為它是大多數頁面可以使用的設計和動畫類型的一個很好的例子。 頂行和底行打開，就像您從後面看打開的書一樣。 文本和按鈕在頂行稍微向上移動，在底行向下移動。 一個很棒的組合。

獎勵：下載這些部分以輕鬆導入

作為額外獎勵，我們將今天教程中的部分打包成免費下載，您可以使用下面的電子郵件選擇加入表格獲取。 只需輸入您的電子郵件，就會出現下載按鈕。 如果您已經是我們 Divi 通訊的一員，請不要擔心“重新訂閱”。 重新輸入您的電子郵件不會導致更多電子郵件或重複。 它只會顯示下載。

享受！

下載佈局包

免費下載

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

下載

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

要使用這些下載，首先在我們的下載文件夾中找到名為Animation_Effects_Part_1.zip的壓縮文件。 解壓縮它以顯示以下導入。

動畫效果第 1 部分（第 1 節）.json

動畫效果第 1 部分（第 2 節）.json

在您的 WordPress 管理員中導航到 Divi > Divi Library > 導入和導出。 當可移植性模式彈出時，單擊導入選項卡和標記為選擇文件的按鈕。

選擇您喜歡的 json 文件，然後單擊“導入 Divi Builder 佈局”。 導入完成後，導航到您想要添加上述部分之一的帖子或頁面。

激活可視化構建器。 導航到您想要添加上述部分之一的頁面部分。 當您單擊添加新部分圖標時，您將看到“從庫中添加”選項。 選擇此選項並選擇所需的佈局。

包起來

我希望這兩個部分將成為使用 Divi 動畫功能的未來構建的靈感。 設計理念本身就很棒，只需稍作調整，佈局就可以輕鬆適應任何網站。 請繼續關注，因為我們將在本系列中介紹更多內容。

接下來

在本系列的下一部分中，我將通過構建動畫演示頁面的第 3 部分和第 4 部分來繼續探索 Divi 的高級動畫功能。

這是您可以期望構建的內容。

第 3 節：

第 4 節：

請在下面留下您的任何意見。

乾杯!