如何使用 Divi 創建粘性背景蒙版

Divi 的粘性選項使您能夠為您的網站構建大量不同的設計。 今天的帖子將另一個教程添加到您可以實現的目標列表中，它有望幫助激發創造力。 我們將向您展示如何創建一個粘性背景蒙版，並讓這個蒙版跟隨訪問者滾動直到本節結束。 本教程將 Divi 的粘性選項與過濾器混合模式相結合。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

1.在Divi中創建設計

添加新部分

背景圖片

首先向您正在處理的頁面添加一個新部分。 上傳您選擇的背景圖片。

• 背景圖片尺寸：封面

間距

轉到該部分的設計選項卡並刪除間距設置中的所有默認頂部和底部填充。

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

溢出

接下來在高級選項卡中隱藏該部分的溢出。

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

添加第 1 行

列結構

繼續使用以下列結構添加新行：

漿紗

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

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

間距

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

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

過濾器

我們還為此行添加了混合模式。 這種混合模式將幫助我們在本教程後面創建一個蒙版。

• 混合模式：屏幕

Z索引

為了確保這一行保持在我們將添加到該部分的第二行下方，我們正在修改高級選項卡中的 z 索引。

• Z指數：9

列設置

接下來，我們將打開列設置。

背景顏色

我們使用完全白色的背景色。 您在此處使用的任何其他顏色都將通過部分背景圖像顯示出來，因此堅持使用全白色很重要。

• 背景顏色：#ffffff

主要元素 CSS

我們還在高級選項卡中為主要元素添加了高度值。 一旦我們將行變為粘性，此高度將確保該列始終覆蓋整個部分背景圖像。

height: 100vh;

將文本模塊添加到行

將內容框留空

完成行設置後，將文本模塊添加到其列。 將內容框留空。 相反，我們使用此模塊創建一個形狀，以顯示部分背景圖像的一部分。

背景顏色

為了允許混合模式顯示部分背景圖像的一部分，我們為此模塊使用了較暗的背景顏色。

• 背景顏色：#0b3835

漿紗

然後，我們將導航到設計選項卡並按如下方式更改尺寸設置：

• 寬度：
  • 台式機：20vw
  • 平板電腦和手機：70vw
• 高度：
  • 台式機：30vh
  • 平板電腦和手機：10vh

間距

我們也增加了一些上邊距。

• 最高邊距：3vh

邊界

我們將包括一些圓角。

• 所有角：15px

添加第 2 行

列結構

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

漿紗

在不添加模塊的情況下，打開行設置並對大小設置進行以下更改：

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

Z索引

也增加行的 z 索引。 這將有助於確保該行的內容保留在前一行的頂部。

• Z指數：12

將文本模塊添加到行

添加 H2 內容

是時候添加模塊了，從包含您選擇的一些 H2 內容的第一個文本模塊開始。

H2 文本設置

H2 文本設置的樣式如下：

• 標題 2 字體：Playfair Display
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#0b3835
• 標題 2 文字大小：
  • 桌面：150px
  • 平板電腦和手機：45px
• 標題 2 行高：1.2em

漿紗

然後，導航到大小設置並應用以下設置：

• 最大寬度：980px
• 模塊對齊：居中

間距

還包括一些負的上邊距。

將按鈕模塊添加到行

添加副本

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

按鈕對齊

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

• 按鈕對齊：居中

按鈕設置

然後，轉到按鈕設置並應用以下樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：15px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：100px

• 按鈕字體：蒙特塞拉特
• 按鈕字體粗細：半粗體
• 按鈕字體樣式：大寫

間距

我們還在間距設置中添加了一些自定義邊距和填充值。

• 底邊距：60vh
• 頂部填充：15px
• 底部填充：15px
• 左填充：40px
• 右填充：40px

2. 應用粘性效果

打開第 1 行

現在我們已經建立了我們的設計基礎，是時候應用粘性樣式了。 打開第一行的設置。

應用粘性選項

導航到高級選項卡並應用以下粘性設置：

• 粘滯位置：粘在頂部
• 底部粘性限制：部分
• 從周圍的粘性元素偏移：是
• 過渡默認和粘性樣式：是

文本模塊粘性選項

現在該行已變為粘性，我們可以將粘性樣式應用於行內的文本模塊。 打開模塊的設置。

粘性尺寸

然後，導航到尺寸設置並應用以下粘性尺寸值：

• 粘性寬度：80vw
• 粘性高度：90vh

過渡持續時間

最後但並非最不重要的是，導航到高級選項卡並增加過渡持續時間。 就是這樣！

• 轉換持續時間：500ms

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們再次向您展示瞭如何使用 Divi 的粘性選項發揮創意。 更具體地說，我們向您展示瞭如何結合 Divi 的過濾器設置和粘性選項來創建粘性背景蒙版。 您也可以免費下載 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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