使用 Divi 的動畫來展開帶有滑動圖像的內容
已發表: 2017-10-12歡迎來到這個由 5 部分組成的系列的第 2 部分，它將教您如何使用 Divi 的新動畫選項來設計精彩的頁面部分。 我將向您介紹如何構建我們的現場演示頁面的不同部分，以便向您展示向您的網站添加動畫的技巧。 動畫功能真正有趣且易於使用。 使用 Visual Builder，您可以看到您的創作在每個階段都栩栩如生。 快來和我一起探索 Divi 動畫的力量。
在我們系列的第 1 部分中，我們創建了動畫演示頁面的前兩部分。 第一部分中標題的設計和動畫展示了一種獨特的方式來為全屏標準部分內的文本模塊的元素設置動畫。 在構建第二部分時，我們發現了一種將微妙而和諧的動畫融入內容行的方法，這些動畫可以輕鬆地以引人入勝的方式用於在登錄頁面上展示內容。
今天，我們將繼續設計在滾動頁面時有效（和創造性地）使用動畫的部分佈局。 我們將構建現場演示頁面的第三和第四部分，展示 Divi 動畫功能的強大功能。 這兩個部分的佈局都可以很容易地用於您自己的項目來展示產品或服務。
讓我們開始吧。
這是我們將在今天的帖子中構建的內容的先睹為快
第 3 節
第 4 節
準備設計元素
準備好您的圖像
對於第三部分，您將需要兩個圖像。 第一個需要在 880×600 左右，第二個需要在 790×880 左右。 這些圖像大小不必精確。 我只是包括這些維度給你一個想法。
在構建第四部分時，您還將獲得兩個 600×400 左右的圖像。
使用可視化構建器
這裡不需要高級代碼。 我們將僅使用 Visual Builder 來設計我們在本系列第 1 部分中創建的頁面的下兩個部分。 由於您的頁面已經設置完畢，您可以開始使用了。
使用 Divi 的動畫來展開帶有滑動圖像的內容
訂閱我們的 YouTube 頻道
構建演示的第 3 部分
第 3 節是一個很好的示例，說明如何使用隨附的圖像設計行動號召模塊並為其製作動畫。
讓我們潛入。
使用 Visual Builder，添加一個包含兩列行的常規部分。 在左欄中添加一個圖像模塊。
更新圖像設置如下：
在內容選項卡下...
圖片網址：[插入您的 880×600 圖片]
在設計選項卡下...
強制全角：是
動畫風格：幻燈片
動畫方向：左
動畫強度：20%
動畫開始不透明度：100%
保存設置
添加分頻器模塊
在右欄中，我們將使用分隔器模塊和號召性用語模塊展示我們的內容。 分隔線模塊將用於在文本上方添加一條短分隔線。
將分隔模塊添加到右列。
然後按如下方式更新設置：
在內容選項卡下...
顯示分隔線：是
在設計選項卡下...
顏色：#e4ca77
分隔線重量：4px
寬度：80px（你必須輸入這個值，因為默認是百分比）
模塊對齊：默認（左）
自定義邊距：頂部 60 像素，底部 0 像素
動畫風格：折疊
動畫方向：右
動畫持續時間：1200ms
動畫延遲：50ms
動畫強度：70%
動畫開始不透明度：0%
保存設置
添加號召性用語模塊
在 Divider Module 下添加一個 Call to Action Module，設置如下：
在內容選項卡下...
書名：《完美的風景》
按鈕文字：“了解更多”
內容：“Lorem ipsum dolor sat amet，consectetur adipiscing 精英。 Phasellus bibendum est vitae felis rhoncus gravida。 Sed nec purus tempus, sagittis mi id, efficitur nisl。 Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。 Phasellus bibendum est vitae felis rhoncus gravida。 Sed nec purus tempus、sagittis mi id、efficitur nisi。”
關聯： ＃
使用背景顏色：否
在設計選項卡下...
文字顏色：深色
文本方向：左
標題字體：Lato，大寫 (TT)
標題字體大小：38px
標題文本顏色：#0c0c0c
標題字母間距：0.2em
標題行高度：1.4em
正文字體：Lato
正文字體大小：18px
正文顏色：#9e9e9e
車身線高：1.8em
為按鈕使用自定義樣式：是
按鈕文字大小：15px
按鈕文字顏色：#000000
按鈕背景顏色：rgba(225,225,225,0)
按鈕邊框寬度：0px
按鈕字母間距：2px
按鈕字體：Lato、粗體 (B)、大寫 (TT)
按鈕圖標：向右箭頭
僅在懸停按鈕時顯示圖標：否
按鈕懸停字母間距：0px
動畫風格：折疊
動畫方向：右
動畫持續時間：1200ms
動畫延遲：50ms
動畫強度：70%
動畫開始不透明度：0%
保存設置
現在單擊以編輯行設置並更新以下內容：
在設計選項卡下...
使用自定義寬度：是
自定義寬度：1366px
在高級選項卡下...
將以下自定義 CSS 添加到 Column 1 Main Element 框：
z-index: 999;
保存設置
複製您的行並更新它
第一行就是這樣。 為了節省創建第二行的時間，複製您剛剛創建的行。
編輯重複的行設置如下：
在高級選項卡下...
取出 Column 1 Main Element 中的 Custom CSS 並將其添加到 Column 2 Main Element 框中：
z-index: 999;
由於我們的圖像將位於右列，因此我們需要該列位於左側動畫文本的頂部。
保存設置
更新第二行中的圖像模塊和號召性用語模塊
接下來將圖像模塊拖到右列，並將分隔器模塊和號召性用語模塊拖到左列。
本節將有一個略有不同的列結構。 單擊更改列結構行圖標（在重複行圖標旁邊）並選擇三分之二和三分之一的列佈局。
現在我們需要做的就是重新訪問行內的每個模塊並進行一些更改。
首先，更新分頻器模塊設置如下：
在設計選項卡下...
模塊對齊：右
動畫方向：左
保存設置
接下來更新號召性用語模塊設置，如下所示：
書名：《為自己說話》
文字方向：右
標題文本對齊方式：右
寬度：700px（輸入）
動畫方向：左
保存設置
接下來使用新的 790×880 圖像更新右列中的圖像模塊。
這就是第 3 節的內容！
看看你的結果。
構建演示的第 4 部分
第 4 節通過一些高級 CSS 技巧將圖像模塊的設計提升到另一個層次。 而且，堆疊文本模塊以將它們折疊在鉸鏈上與交付結合得很好。 讓我們潛入。
使用 Visual Builder，添加一個包含兩列（二分之一）行的常規部分。 在我們添加第一個模塊之前，讓我們為我們的部分添加背景顏色。 單擊以編輯部分設置。
在內容選項卡下，選擇背景顏色選項卡並輸入顏色#262938。
保存設置
添加第一個文本模塊
在左欄中添加一個文本模塊並更新文本設置，如下所示：
在內容選項卡下...
在內容框的文本選項卡中輸入以下 html：
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
在設計選項卡下...
文字顏色：淺
標題字體：Playfair Display，粗體 (B)
標題字體大小：38px
標題行高度：1.3em
自定義邊距：底部 20px
動畫：折疊
動畫方向：向上
添加第二個文本模塊
接下來直接在當前文本模塊下添加另一個文本模塊。 然後按如下方式更新設置：
在內容選項卡下...
內容：“Lorem ipsum dolor sat amet，consectetur adipiscing 精英。 Phasellus bibendum est vitae felis rhoncus gravida。 Sed nec purus tempus, sagittis mi id, efficitur nisl。 Sed nec purus tempus、sagittis mi id、efficitur nisl。”
在設計選項卡下...
文字顏色：淺
文字字體大小：18px
文字文字顏色：rgba(255,255,255,0.66)
文本行高：1.9em
自定義邊距：40px 底部
動畫風格：折疊
動畫方向：下
動畫延遲：150ms
保存設置
添加按鈕模塊
在最後一個文本模塊下添加一個按鈕模塊，更新設置如下：
按鈕文字：了解更多
按鈕網址：#
為按鈕使用自定義樣式：是
按鈕文字大小：15px
按鈕文字顏色：#01254c
按鈕背景顏色：#ffffff
按鈕邊框半徑：0px
按鈕字體：粗體 (B)、大寫 (TT)
自定義填充：頂部 10 像素，右側 30 像素，底部 10 像素，左側 30 像素
動畫風格：幻燈片
動畫方向：下
動畫持續時間：1600ms
動畫延遲：150ms
動畫強度：20%
保存設置
將圖像模塊添加到右列
這就是那個列。 現在我們需要在右欄中添加一個圖像模塊。 然後按如下方式更新設置：
在內容選項卡下...
圖片網址：[插入您的 600×400 圖片]
在設計選項卡下...
強制全角：是
動畫風格：幻燈片
動畫方向：右
動畫延遲：800ms
動畫強度：20%
保存設置
更新行設置
現在單擊以編輯行設置並更新以下內容：
在設計選項卡下...
使用自定義寬度：是
自定義寬度：1366px
自定義填充：頂部 27 像素，右側 0 像素，底部 170 像素，左側 0 像素
第 1 列自定義填充：頂部 6%
在高級選項卡下...
將以下自定義 CSS 添加到 Column 1 Main Element 框：
z-index: 999;
這個 css 添加確保文本在動畫期間保持在圖像的頂部。
然後將以下自定義 CSS 添加到 Column 2 Main Element 框：
transform: scale(1.3); transform-origin: top right;
這個 css 添加了一個巧妙的設計來放大（增加）第 2 列（圖像）中所有內容的大小。 變換原點屬性告訴列從行的右上角縮放。 這會創建左側文本和圖像的輕微重疊。
保存設置
複製和更新您的行
現在就像我們在第 3 節中所做的那樣，我們將復制該行。 複製行後，將2個文本模塊和按鈕模塊從左列拖到右列。 並將圖像模塊從右列拖到左側。 現在我們需要做的就是對重複的行及其內容進行一些小的更新。
首先，讓我們使用以下內容更新行設置：
在設計選項卡下...
自定義填充：頂部 40 像素，右側 0 像素，底部 40 像素，左側 0 像素
第 1 列自定義填充：[恢復為默認值； 擦除 6% 頂部]
第 2 列自定義填充：頂部 6%
在高級選項卡下...
從 Column 1 Main Element Box 和 Column 2 Main Element Box 中刪除自定義 CSS。 這是從重複中延續下來的，我們不再需要它了。
更新圖像模塊
接下來，使用以下內容更新圖像模塊（現在在左列中）：
在內容選項卡下...
圖片網址：[插入新的 600×400 圖片]
在設計選項卡下...
動畫方向：左
在高級選項卡下...
如果您認為此圖像已經模糊。 再想想！ 添加此模糊效果所需要做的就是將以下自定義 CSS 行添加到 Main Element 框：
filter: blur(5px) opacity(.6);
除了模糊效果，這個 css 還使圖像半透明，不透明度為 60%。
保存設置
更新右欄中的文本模塊
移至右列，使用較短的 h1 標題更新頂部文本模塊內容：
<h1>Consectetur adipiscing elit</h1>
保存設置
瞧！ 我們都完成了第 4 部分。讓我們看看我們的最終結果。
獎勵：下載這些部分以輕鬆導入
作為額外獎勵，我們將今天教程中的部分打包成免費下載，您可以使用下面的電子郵件選擇加入表格獲取。 只需輸入您的電子郵件，就會出現下載按鈕。 如果您已經是我們 Divi 通訊的一員，請不要擔心“重新訂閱”。 重新輸入您的電子郵件不會導致更多電子郵件或重複。 它只會顯示下載。
享受！
下載佈局包
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您很快就會成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要使用這些下載，首先在我們的下載文件夾中找到名為Animation_Effects_Part_2.zip的壓縮文件。 解壓縮它以顯示以下導入。
動畫效果第 2 部分（第 1 節）.json
動畫效果第 2 部分（第 2 節）.json
在您的 WordPress 管理員中導航到 Divi > Divi Library > 導入和導出。 當可移植性模式彈出時，單擊導入選項卡和標記為選擇文件的按鈕。
選擇您喜歡的 json 文件，然後單擊“導入 Divi Builder 佈局”。 導入完成後，導航到您想要添加上述部分之一的帖子或頁面。
激活可視化構建器。 導航到您想要添加上述部分之一的頁面部分。 當您單擊添加新部分圖標時，您將看到“從庫中添加”選項。 選擇此選項並選擇所需的佈局。
包起來
除了讓我對碳水化合物有點飢渴之外，本節還展示了顯示和動畫圖像的創造性方法。 此外，帶有延遲按鈕滑動的鉸鏈上折疊的文本模塊進一步吸引用戶單擊 CTA。
接下來
在本系列的第 3 部分中，我將向您展示一種設計和動畫模糊模塊的漂亮方法。 此部分佈局可用於多種目的。 我可以看到這是展示您的服務流程或您的服務或產品列表的一種方式。
期待它。
不要忘記在下面的評論中聯繫！