您可以使用 Divi 將 3 種輕鬆的滾動運動效果添加到您的頭條新聞中

Divi 的新滾動效果為您構建的頁面帶來了大量新的設計可能性。 您可以為每個容器添加自定義滾動效果並相應地同步效果。 這種設計自由可輕鬆幫助您以優雅的方式突出顯示某些內容。 在本教程中，我們將向您展示如何向標題添加滾動運動效果。 這樣，您就可以特別強調您的頭條新聞，並讓您的訪問者參與其中。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

示例#1

桌面

移動的

示例#2

桌面

移動的

示例 #3

桌面

移動的

免費下載滾動運動效果部分佈局

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

下載文件

免費下載

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

下載

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

1. 在新頁面或現有頁面上構建您的英雄部分設計

添加新部分

背景顏色

首先向您正在處理的頁面添加一個新部分。 打開部分設置並將背景顏色更改為白色。

• 背景顏色：#FFFFFF

間距

移至設計選項卡並修改間距值。

• 頂部填充：15vw（桌面）、20vw（平板電腦）、25vw（手機）
• 底部填充：0vw

溢出

並且為了確保滾動效果不會導致任何水平滾動條出現，我們還將隱藏該部分的溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並在大小設置中修改寬度和最大寬度。

• 寬度：90%
• 最大寬度：100%

間距

也刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

將文本模塊 #1 添加到列

添加H1內容

我們在這一行中唯一需要的模塊是帶有一些 H1 內容的文本模塊。

H1 文本設置

相應地更改模塊的 H1 文本設置：

• 標題字體：Playfair Display
• 標題字體粗細：粗體
• 標題文本對齊方式：居中
• 標題文字顏色：#000000
• 標題文字大小：6vw

添加第 2 行

列結構

然後，使用以下列結構添加另一行：

漸變背景

尚未添加任何模塊，打開行設置並使用漸變背景。

• 顏色 1：#444444
• 顏色 2：#000000
• 漸變類型：線性
• 梯度方向：237deg

漿紗

也修改行的大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

然後，添加一些自定義的頂部和底部填充。

• 頂部填充：0vw
• 底部填充：10vw（台式機）、15vw（平板電腦）、20vw（手機）

將文本模塊 #2 添加到列

添加內容

我們在這一行中需要的第一個模塊是一個包含一些內容的文本模塊。

文字設置

轉到模塊的設計選項卡並按如下方式更改文本設置：

• 文字字體：Playfair Display
• 文字顏色：#dddddd
• 文字大小：6vw
• 文本行高：1em
• 文字陰影模糊強度：0.29em
• 文字陰影顏色：#ffffff
• 文本對齊：居中

將文本模塊 #3 添加到列

添加內容

然後，添加另一個具有您選擇的描述內容的文本模塊。

文字設置

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

• 文字字體：Open Sans
• 文字顏色：#e8e8e8
• 文字大小：0.9vw（桌面）、2vw（平板電腦）、2.5vw（手機）
• 文本行高：2em
• 文本對齊：居中

漿紗

也修改大小設置。

• 寬度：40%（桌面），90%（平板電腦和手機）
• 模塊對齊：居中

間距

並在不同的屏幕尺寸中包含一些頂部和底部邊距。

• 上邊距：10vw（桌面）、15vw（平板電腦）、20vw（手機）
• 下邊距：3vw（桌面）、8vw（平板電腦）、13vw（手機）

將按鈕模塊添加到列

添加副本

我們需要的下一個也是最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

結盟

繼續更改設計選項卡中的按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

然後，按如下方式設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.8vw（桌面）、1.5vw（平板電腦）、2.5vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕邊框顏色：#ffffff
• 按鈕邊框半徑：1px
• 按鈕字體：Open Sans
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

間距

並包括一些跨不同屏幕尺寸的自定義填充值。

• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 左填充：2.5vw（台式機）、5vw（平板電腦）、8vw（手機）
• 右填充：2.5vw（桌面）、5vw（平板電腦）、8vw（手機）

2. 應用滾動效果

示例#1

文本模塊 #1

水平運動

現在我們已經設計了我們英雄部分的整體外觀和感覺，是時候將不同的滾動運動效果應用到我們的副本中了。 要重新創建第一個示例，請打開第一個文本模塊並使用以下水平運動：

• 啟用水平運動：是
• 起始偏移：0
• 中間偏移：0
  • 0% – 80%（桌面）
  • 0% – 95%（平板電腦和手機）
• 結束偏移：-10

淡入淡出

我們還將添加淡入淡出效果。

• 啟用淡入淡出：是
• 起始不透明度：100%
• 中等不透明度：100%
  • 0% – 70%（桌面）
  • 0% – 95%（平板電腦和手機）
• 結束不透明度：0%

文本模塊 #2

水平運動

然後，打開您部分中的第二個文本模塊並應用以下水平運動：

• 啟用水平運動：是
• 起始偏移：10
• 中間偏移：0
  • 10% – 70%（桌面）
  • 10% – 95%（平板電腦和手機）
• 結束偏移：10

淡入淡出

隨著匹配的淡入淡出效果：

• 啟用淡入淡出：是
• 起始不透明度：0%
• 中等不透明度：100%
  • 35% – 60%（桌面）
  • 35% – 95%（平板電腦和手機）
• 結束不透明度：0%

示例#2

文本模塊 #1

垂直運動

想要重新創建第二個滾動運動效果嗎？ 打開您部分中的第一個文本模塊並添加以下垂直運動：

• 啟用垂直運動：是
• 起始偏移：0
• 中間偏移：0
  • 90%（桌面）
  • 95%（平板電腦和手機）
• 結束偏移：-8

放大和縮小

也添加縮放效果。

• 啟用向上和向下擴展：是
• 起始比例：20%
• 中等規模：100%
  • 20% – 80%（桌面）
  • 20% – 95%（平板電腦和手機）
• 結束比例：20%

文本模塊 #2

垂直運動

然後，打開第二個文本模塊並使用以下垂直運動設置：

• 啟用垂直運動：是
• 起始偏移：0
• 中間偏移：0
  • 15% – 70%（桌面）
  • 15% – 90%（平板電腦和手機）
• 結束偏移：-8

放大和縮小

接下來添加縮放效果。

• 啟用向上和向下擴展：是
• 起始比例：0%
• 中等規模：100%
  • 30% – 70%（桌面）
  • 30% – 90%（平板電腦和手機）
• 結束比例：100%

模糊

並通過向您部分的第二個文本模塊添加模糊效果來完成滾動效果。

• 啟用模糊：是
• 起始模糊：10px
• 中間模糊：0px
  • 40% – 73%（桌面）
  • 40% – 95%（平板電腦和手機）
• 結束模糊：100px

示例 #3

文本模塊 #1

水平運動

最後但並非最不重要的一點是，我們將向您展示如何重新創建第三個滾動運動效果。 打開該部分的第一個文本模塊並添加水平運動效果。

• 啟用水平運動：是
• 起始偏移：0
• 中間偏移：0
  • 0% – 90%
• 結束偏移：10

淡入淡出

也為此模塊使用淡入淡出效果。

• 啟用淡入淡出：是
• 起始不透明度：100%
• 中等不透明度：100%
  • 0% – 90%（桌面）
  • 0% – 95%（平板電腦和手機）
• 結束不透明度：0%

旋轉

我們還將應用旋轉效果。

• 啟用旋轉：是
• 起始旋轉：0°
• 中間旋轉：0°
  • 0% – 90%（桌面）
  • 0% – 95%（平板電腦和手機）
• 結束旋轉：90°

文本模塊 #2

水平運動

然後，打開您部分中的第二個文本模塊並應用以下水平運動設置：

• 啟用水平運動：是
• 起始偏移：0
• 中間偏移：0
  • 0% – 90%
• 結束偏移：-10

淡入淡出

繼續使用淡入淡出滾動運動效果。

• 啟用淡入淡出：是
• 起始不透明度：100%
• 中等不透明度：100%
  • 0% – 80%（桌面）
  • 0% – 95%（平板電腦和手機）
• 結束不透明度：0%

旋轉

並通過添加旋轉滾動效果來完成模塊的設置。

• 啟用旋轉：是
• 起始旋轉：0°
• 中間旋轉：0°
  • 0% – 80%（桌面）
  • 0% – 90%（平板電腦和手機）
• 結束旋轉：-90°

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

示例#1

桌面

移動的

示例#2

桌面

移動的

示例 #3

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的新滾動效果為您的標題添加滾動運動效果。 我們已經處理了三個不同的例子，但可能性確實是無窮無盡的。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。