如何使用 Divi 的位置設置和滾動效果混合滾動副本

您創造性地使用 Divi 的內置功能的方式可以對您的頁面設計產生影響。 例如，Divi 的滾動效果允許您在滾動時創建漂亮的交互。 今天，我們將另一個教程添加到您可以使用 Divi 的內置滾動效果執行的操作列表中。 更具體地說，我們將向您展示如何在滾動時混合副本。 乍一看，該副本位於隨附的圖像下方。 但是，只要您滾動到某個點，副本就會出現在產品圖像的頂部，並開始與圖像混合。 這會導致看起來毫不費力的引人注目的效果。 您也可以免費下載佈局 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加 2x 佔位符部分

添加新部分

首先向您正在處理的頁面添加一個佔位符部分。

漿紗

打開部分設置並在大小設置中更改高度。

• 高度：50vh

克隆部分

克隆該部分一次。 這會在您的頁面上留下兩個佔位符部分。 這些佔位符部分將幫助您在完成本教程後看到最終效果。 在實時網站上，佔位符部分將替換為您在整個頁面中使用的正常部分。

在佔位符部分之間添加新部分

佔位符部分就位後，在佔位符部分之間添加一個新部分。

背景顏色

打開部分設置並使用白色背景色。

• 背景顏色：#ffffff

間距

移至該部分的設計選項卡並相應地修改頂部和底部填充值：

• 頂部填充：10vh
• 底部填充：10vh

添加第 1 行

列結構

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

漿紗

尚未添加模塊，打開行設置，轉到大小設置並修改寬度和最大寬度值。

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

將文本模塊添加到列

添加副本

這一行我們需要的唯一模塊是文本模塊。 添加一些您選擇的副本。

文字設置

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

• 文字字體：蒙特塞拉特
• 文字字體粗細：超粗
• 文本字體樣式：大寫
• 文字顏色：#fff2ea
• 文字大小：11vw
• 文本行高：1em
• 文本對齊：居中

添加第 2 行

列結構

使用以下列結構向該部分添加另一行：

漿紗

在不添加模塊的情況下，打開行設置並按如下方式更改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 寬度：90%
• 行對齊：居中

將圖像模塊添加到列

上傳圖片

將圖像模塊添加到行的列。 上傳您選擇的圖像。

結盟

轉到模塊的設計選項卡並相應地更改圖像對齊方式：

• 圖像對齊：居中

漿紗

然後，轉到大小設置並在模塊上強制全角。

• 強制全角：是

將按鈕模塊添加到列

添加副本

我們將添加到該列的下一個也是最後一個模塊是按鈕模塊。 使用您選擇的一些副本。

按鈕對齊

轉到設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

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

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：16px
• 按鈕文字顏色：#000000
• 按鈕背景顏色：#ffffff
• 按鈕邊框寬度：0px
• 按鈕字母間距：2px
• 按鈕字體：蒙特塞拉特
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

間距

在間距設置中也使用一些自定義填充值。

• 頂部填充：20px
• 底部填充：20px
• 左填充：5%
• 右填充：5%

將絕對定位添加到第 1 行

完成第二行後，導航回第 1 行。 打開行的設置，轉到高級選項卡，然後將部分設為絕對。 通過這樣做，該行和其中的文本模塊將被放置在包含圖像模塊的行下方。

• 位置：絕對
• 地點：中心

克隆第 1 行並在第 2 行下方放置重複項

為了讓文本模塊出現在圖像的頂部，我們需要另一行具有更高的 z 索引值。 克隆第一行並將副本放在第二行下方。

將效果應用於第 3 行

增加 Z 指數

打開重複行並在高級選項卡中更改 z 索引。

• Z指數：12

更改文本顏色

打開行中的文本模塊並更改文本顏色。

• 文字顏色：#1e1e1e

將混合模式應用於行

然後，打開行設置並在過濾器設置中更改混合模式。

• 混合模式：疊加

在第 3 行的文本模塊上使用滾動效果

添加淡入淡出效果

通過再次打開文本模塊，轉到滾動效果並啟用淡入淡出效果來完成教程。 就是這樣！

• 啟用淡入淡出：是
  • 起始不透明度：0%
  • 中等不透明度：0%（26%）
  • 結束不透明度：100%（28%）
• 運動效果觸發器：元素中間

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何利用 Divi 的內置滾動效果發揮創意。 更具體地說，我們向您展示瞭如何在滾動時混合副本。 起初，副本似乎在圖像下方。 滾動後，副本顯示在圖像上方並與圖像混合。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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