如何使用 Divi 的內置動畫設置有說服力地引導訪問者向下瀏覽頁面
已發表: 2019-02-01英雄部分的主要目的之一是說服人們繼續向下滾動頁面並發現您共享的更多內容和信息。 使用 Divi 的內置動畫選項，您可以向頁面添加交互式動畫，這將幫助您有說服力地引導訪問者瀏覽頁面。 在本教程中，我們將使用引導訪問者進入服務部分的箭頭圖標來激勵訪問者向下滾動到服務部分。
讓我們開始吧！
預覽
在我們深入學習本教程之前，讓我們快速瀏覽一下不同屏幕尺寸下的結果。
桌面
移動的
讓我們開始創作吧！
訂閱我們的 YouTube 頻道
添加第 1 節
背景顏色
創建一個新頁面並向其添加常規部分。 打開部分設置並更改背景顏色。
- 背景顏色：#0f0f0f
底部分隔線
繼續向該部分添加底部分隔線。
- 分隔線樣式：在列表中查找
- 分隔線顏色：#ffffff
- 分隔線高度：30px
- 分隔線水平重複：10x（台式機），4x（平板電腦和手機）
間距
添加一些自定義填充值。
- 頂部填充：269 像素（桌面）、100 像素（平板電腦和手機）
- 底部填充：674 像素（桌面），200 像素（平板電腦和手機）
添加行
列結構
然後，使用以下列結構添加新行：
漿紗
尚未添加任何模塊，打開行設置，轉到大小設置並啟用“將此行設為全寬”選項。
- 使這一行全寬：是
添加文本模塊
添加內容
我們在這一行中唯一需要的模塊是文本模塊。 繼續添加一些選擇的 H1 內容。
標題文字設置
接下來更改標題文本設置。
- 標題字體：Didact Gothic
- 標題字體粗細：粗體
- 標題文本對齊方式：居中
- 標題文字顏色：#ffffff
- 標題文字大小：170 像素（桌面）、50 像素（平板電腦和手機）
- 標題線高度：0.8em
- 標題文字陰影垂直長度：1.5em
- 標題文字陰影顏色：rgba(0,0,0,0.11)
添加第 2 節
背景顏色
繼續將第二部分添加到頁面。 在部分設置中更改背景顏色。
- 背景顏色：#0f0f0f
頂部分隔線
也向該部分添加一個頂部分隔線。
- 分隔線樣式：在列表中查找
- 分隔線顏色：#ffffff
- 分隔線高度：30px
- 分隔線水平重複：10x（台式機），4x（平板電腦和手機）
間距
並在間距設置中增加間距值。
- 頂部填充：245px
- 底部填充：245px
添加行
列結構
繼續向該部分添加具有以下列結構的新行：
漿紗
打開行設置，轉到大小設置並進行一些更改。
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：2
添加模糊模塊
選擇圖標
第一列中我們需要的第一個模塊是 Blurb 模塊。 我們需要的 Blurb 模塊元素的唯一部分是圖標。 選擇指向下方的箭頭圖標。
圖標設置
然後，轉到設計選項卡並更改圖標設置。
- 圖標顏色：#4ffcff
- 圖標位置：頂部
- 使用圖標字體大小：是
- 圖標字體大小：150px
間距
為了增加圖標的覆蓋範圍，我們需要添加一些負上邊距。 這將允許 Blurb 模塊與上一部分重疊，並使兩個部分之間的動畫順利發生。 為了彌補自定義邊距，我們還將添加自定義頂部填充。 這將確保圖標保持與以前完全相同的位置。 唯一改變的是整個模塊的大小和範圍。
- 上邊距：-550px
- 頂部填充：550px
動畫片
最後但並非最不重要的一點是，使用以下設置向 Blurb 模塊添加動畫：
- 動畫風格：幻燈片
- 動畫方向：下
- 動畫持續時間：3000ms
- 動畫延遲：1200ms
- 動畫強度：100%
- 動畫開始不透明度：100%
- 動畫速度曲線：漸入漸出
- 圖像/圖標動畫：無動畫
將文本模塊 #1 添加到第 1 列
添加內容
第一列中我們需要的下一個模塊是文本模塊。 添加一些選擇的內容。
文字設置
繼續更改文本設置。
- 文字字體：Didact Gothic
- 文字字體粗細：粗體
- 文字顏色：rgba(255,255,255,0.03)
- 文字大小：350px
- 文字方向：居中
將文本模塊 #2 添加到第 1 列
添加內容
將第二個文本模塊添加到第一列，並選擇一些 H3 內容。
標題文字設置
並在設計選項卡中更改標題文本設置。
- 標題 3 字體：Didact Gothic
- 標題 3 文本對齊：居中
- 標題 3 文本顏色：#ffffff
- 標題 3 文字大小：40 像素（桌面）、30 像素（平板電腦和手機）
- 標題 3 字母間距：-1px
將分頻器模塊添加到第 1 列
能見度
第一列中需要的下一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
顏色
繼續更改設計選項卡中的分隔線顏色。
- 顏色：#ffffff
漿紗
也對大小設置進行一些更改。
- 寬度：59%
- 模塊對齊：居中
動畫片
並向模塊添加動畫。
- 動畫風格：幻燈片
- 動畫方向：中心
- 動畫持續時間：2000ms
- 動畫強度：10%
- 動畫速度曲線：漸入漸出
將文本模塊 #3 添加到第 1 列
添加內容
我們在第一列中需要的下一個也是最後一個模塊是另一個文本模塊。 添加一些選擇的內容。
文字設置
繼續更改文本設置。
- 文字字體粗細：輕
- 文字顏色：#b7b7b7
- 文字大小：18px
- 文本行高：1.8em
- 文字方向：居中
動畫片
並為模塊添加動畫。
- 動畫風格：幻燈片
- 動畫方向：向上
- 動畫強度：20%
- 動畫速度曲線：漸入漸出
克隆模塊 3 次並在剩餘列中放置重複項
現在我們已經完成了對第 1 列中所有模塊的修改，我們可以將第 1 列中的所有模塊克隆 3 次，並將重複項放在剩餘的列中。
更改模塊內容
更改重複項的內容。
將動畫延遲添加到重複項的分隔模塊
也為每個 Divider Module 副本添加一些動畫延遲。
- 第 2 列中的分頻器模塊：400 毫秒
- 第 3 列中的分頻器模塊：800ms
- 第 4 列中的分頻器模塊：1200 毫秒
將動畫延遲添加到文本模塊 #3 重複項
對每列中的最後一個文本模塊執行相同的操作。
- 第 2 列中的最後一個文本模塊：400 毫秒
- 第 3 列中的最後一個文本模塊：800 毫秒
- 第 4 列中的最後一個文本模塊：1200 毫秒
自定義模糊圖標 #2
圖標顏色
我們還為每個副本修改了模糊圖標的顏色和動畫。 打開第 2 列中的 Blurb 模塊並更改圖標顏色。
- 圖標顏色：#ff6b86
動畫片
還要更改動畫設置。
- 動畫類型：幻燈片
- 動畫方向：下
- 動畫持續時間：2000ms
- 動畫延遲：800ms
- 動畫強度：62%
- 動畫開始不透明度：100%
- 圖像/圖標動畫：無動畫
自定義模糊圖標 #3
圖標顏色
繼續打開第 3 列中的 Blurb 模塊並更改圖標顏色。
- 圖標顏色：#ffe500
動畫片
還要修改動畫設置。
- 動畫類型：幻燈片
- 動畫方向：下
- 動畫持續時間：1000ms
- 動畫延遲：600ms
- 動畫強度：69%
- 動畫開始不透明度：100%
- 圖像/圖標動畫：無動畫
自定義模糊圖標 #4
圖標顏色
打開第 4 列中的最後一個 Blurb 模塊，並更改圖標顏色。
- 圖標顏色：#00ff9d
動畫片
並通過更改設計選項卡中的動畫設置來完成設計。
- 動畫類型：幻燈片
- 動畫方向：下
- 動畫持續時間：3000ms
- 動畫延遲：400ms
- 動畫強度：100%
- 動畫開始不透明度：100%
- 圖像/圖標動畫：無動畫
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的動畫設置有說服力地引導訪問者瀏覽頁面。 基本的想法是你使用 Blurb 模塊作為他們的圖標，並增加他們的動畫對英雄部分的影響。 您可以在您構建的任何類型的網站上使用這種方法，並根據需要獲得盡可能多的創意。 如果您有任何問題或建議，請務必在下方評論區留言！