如何使用 Divi 在 Scroll 上創建漂亮的列碰撞英雄部分

Divi 的滾動效果為您創建的網站帶來了大量新的設計可能性。 您選擇添加的微妙交互確實有助於提升您網站的整體外觀和感覺。 一旦同步滾動效果，一切都會變得更好。 在本教程中，我們將專門處理在滾動上創建漂亮的列碰撞英雄部分。 英雄部分設計在滾動上合併了兩個不同的列，這反過來有助於強調副本。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

現在我們已經完成了所有步驟，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載列碰撞英雄部分佈局

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

下載文件

免費下載

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

下載

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

重新創建英雄部分部分佈局

添加新部分

背景顏色

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

• 背景顏色：#f4f2f7

間距

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

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

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並相應地修改大小設置：

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

間距

接下來刪除所有默認的頂部和底部填充。

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

溢出

並隱藏行的溢出。

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

第 1 列設置

間距

然後，打開第 1 列設置並添加一些自定義填充值。

• 頂部填充：15vw
• 底部填充：10vw
• 左填充：5vw
• 右填充：5vw

Z索引

也增加列的 z 索引。

• Z指數：12

第 2 列設置

背景圖片

繼續打開第 2 列設置並上傳您選擇的背景圖像。

• 背景圖片尺寸：封面
• 背景圖片位置：中心
• 背景圖像重複：不重複
• 背景圖像混合：正常

將文本模塊 #1 添加到第 1 列

添加H1內容

是時候添加模塊了，從第 1 列中的第一個文本模塊開始。添加一些您選擇的 H1 內容。

H1 文本設置

轉到模塊的設計選項卡並相應地更改 H1 文本設置：

• 標題字體：Shadows Into Light
• 標題字體粗細：粗體
• 標題文字顏色：#000000
• 標題文字大小：6vw（桌面）、11vw（平板電腦）、13vw（手機）
• 標題字母間距：-2px
• 標題線高度：1.2em

間距

也添加一些上邊距。

• 最高利潤率：10vw

將文本模塊 #2 添加到第 1 列

添加內容

插入另一個帶有您選擇的一些描述內容的文本模塊。

文字設置

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

• 文字字體：Open Sans
• 文字顏色：#1e1e1e
• 文字大小：0.9vw（桌面）、1.9vw（平板電腦）、3vw（手機）
• 文本行高：2.4em

間距

並在不同的屏幕尺寸中添加一些自定義邊距值。

• 上邊距：4vw（桌面）、8vw（平板電腦）、12vw（手機）
• 下邊距：4vw（桌面）、8vw（平板電腦）、12vw（手機）

將按鈕模塊添加到第 1 列

添加副本

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

按鈕設置

修改模塊的按鈕設置如下：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：100px

• 按鈕字體：Open Sans

間距

並通過在不同屏幕尺寸上添加一些自定義填充值來完成按鈕設置。

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

將文本模塊添加到第 2 列

添加內容

在第二列中，我們唯一需要的模塊是文本模塊。 輸入您選擇的一些內容。

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：Shadows Into Light
• 文字顏色：rgba(0,0,0,0.25)
• 文字大小：9vw（桌面），14vw（平板電腦和手機）
• 文字字母間距：-3px
• 文本行高：1em
• 文本對齊方式：居中（桌面），左側（平板電腦和手機）

間距

也添加一些自定義填充值。

• 頂部填充：5vw（桌面），
• 底部填充：60vw（平板電腦和手機）
• 左填充：5vw（平板電腦和手機）

應用滾動動畫

部分

放大和縮小

一旦您的所有模塊就位，就可以應用滾動效果了！ 先打開部分設置，使用如下縮放效果：

• 啟用向上和向下清理
• 起始比例：100%（49%）
• 中檔：
  • 桌面：70%（100%）
  • 平板電腦和手機：100%（100%）
• 結束規模：
  • 台式機：70%
  • 平板電腦和手機：100%

第 1 欄

水平運動

繼續打開第 1 列設置並使用以下水平運動效果：

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

放大和縮小

也對列應用縮放效果。

• 啟用向上和向下擴展：是
• 起始規模：
  • 台式機：10%
  • 平板電腦和手機：100%
• 中檔：
  • 台式機：90%
  • 平板電腦和手機：100%
• 結束比例：100%

第 2 欄

水平運動

接下來，打開第 2 列設置並使用以下水平運動設置：

• 啟用水平運動：是
• 起始偏移：0
• 中間偏移：
  • 桌面：0（53%）
  • 平板電腦和手機：0（56%）
• 結束偏移：
  • 桌面：-6（53%）
  • 平板電腦和手機：0（100%）

淡入淡出

通過添加淡入淡出效果來完成列設置。

• 啟用淡入淡出：是
• 起始不透明度：100%（47%）
• 中等不透明度：
  • 台式機：0%（47%）
  • 平板電腦和手機：100%（47%）
• 結束不透明度：
  • 台式機：0%
  • 平板電腦和手機：100%

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何創造性地使用 Divi 的滾動效果來創建一個列碰撞的英雄部分。 一旦訪問者滾動，兩個不同的列及其元素將開始合併。 反過來，這將使您更加強調副本。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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