如何使用 Divi 的粘性選項顯示英雄中的底層圖像網格

創建一個吸引訪問者註意力的英雄部分可以為網站的其餘部分定下基調。 如果您正在尋找一種創造性的方式來使用 Divi 的粘性選項來幫助您實現目標，那麼您會喜歡本教程。 今天，我們將向您展示如何使用 Divi 的粘性選項在您的英雄中顯示底層圖像網格。 我們包括從默認到粘性的非常平滑的過渡，您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

1.創造英雄設計

添加新部分

背景顏色

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

• 背景顏色：#111111

間距

轉到該部分的設計選項卡並添加一些底部填充。 這個底部填充將為我們提供足夠的空間來創建滾動體驗。

• 底部填充：120vh

添加第 1 行

列結構

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

漿紗

還沒有添加模塊，打開行設置，轉到設計選項卡並更改大小設置如下：

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

間距

接下來添加一些響應式上邊距。

• 最高保證金：
  • 台式機：10vh
  • 平板電腦和手機：5vh

Z索引

為了確保這一行保持在我們將添加到此部分的第二行之下，稍後，我們將在高級選項卡中使用 az 索引 10。

• Z指數：10

所有列設置

完成常規行設置後，單獨打開每一列。

主要元素 CSS

在每一列中，將以下 CSS 代碼行應用於手機上的主要元素：

僅限電話：

width: 50% !important;
margin: 0 !important;

第 2 列設置

然後，打開第 2 列設置。

Z索引

並將 Z 索引增加到 12。這將使此列位於第三列之上。

• Z指數：12

將圖像模塊添加到第 1 列

上傳圖片

是時候添加模塊了，從第 1 列中的圖像模塊開始。上傳您選擇的圖像。

間距

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

• 底部邊距：
  • 平板電腦和手機：10px
• 右邊距：
  • 平板電腦和手機：2%

克隆圖像模塊三次並在剩餘列中放置重複項

完成模塊設置後，您可以克隆整個模塊 3 次，並將重複項放置在行的其餘列中。

更改圖像

確保更改每個重複模塊中的圖像。

更改圖像模塊 #2 和 #4 間距

然後，打開第 2 列和第 4 列中圖像模塊的設置，並將以下間距值應用於它們：

• 底部邊距：
  • 平板電腦和手機：10px
• 左邊距：
  • 平板電腦和手機：2%
• 右邊距：/

添加第 2 行

列結構

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

漸變背景

打開行設置並應用以下漸變背景：

• 顏色 1：#111111
• 顏色 2：rgba(255,255,255,0)

漿紗

接下來修改大小設置。

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

間距

然後，應用一些頂部和底部填充。

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

位置

要將這一行放在圖像網格的頂部，我們將相應地使用位置設置：

• 位置：絕對
• 位置：頂部中心
• Z指數：12

將文本模塊添加到列

添加H1內容

使用您選擇的一些 H1 內容將第一個文本模塊添加到此行。

H1 文本設置

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

• 標題字體：Kumbh Sans
• 標題字體粗細：粗體
• 標題字體樣式：大寫
• 標題文本對齊方式：居中
• 標題文字顏色：#ffdbaa
• 標題文字大小：
  • 桌面：120px
  • 平板電腦：60px
  • 電話：40px
• 標題字母間距
  • 桌面：-3px
  • 平板電腦和手機：0px
• 標題文字陰影：
  • 選擇：第三個選項
  • 標題文字陰影顏色：rgba(0,0,0,0.4)

漿紗

接下來修改大小設置。

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

將按鈕模塊添加到列

添加副本

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

按鈕對齊

移至設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

然後，設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：
  • 桌面：20px
  • 平板電腦：16px
  • 電話：14px
• 按鈕文字大小：#111111
• 按鈕背景顏色：#ffffff
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：100px

• 按鈕字體：Kumbh Sans
• 按鈕字體粗細：粗體

間距

並在間距設置中使用一些響應式填充值。

• 頂部填充：
  • 台式機和平板電腦：20px
  • 電話：15px
• 底部填充：
  • 台式機和平板電腦：20px
  • 電話：15px
• 左填充：
  • 台式機和平板電腦：50px
  • 電話：40px
• 右填充：
  • 台式機和平板電腦：50px
  • 電話：40px

2. 應用粘性設置

轉動第 1 行粘性

現在我們已準備好所有元素，我們可以專注於粘性設置。 打開第一行的設置並應用以下粘性設置：

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

粘性不透明度

然後，更改過濾器設置中的不透明度。

• 默認值：20%
• 粘性：100%

圖像模塊 #1 粘性設置

間距

接下來，打開第 1 列中圖像模塊的設置。移至設計選項卡並添加一些粘性頂部和右邊距。

• 粘性頂部邊距：-20%
• 粘性右邊距：-20%

過渡

也增加過渡持續時間。

• 轉換持續時間：700ms

圖像模塊 #2 粘性間距

間距

轉到第 2 列中的圖像模塊並使用以下粘性間距設置：

• 粘性頂部保證金：20%
• 粘性左邊距：-30%

過渡

在這裡也增加過渡持續時間。

• 轉換持續時間：1000ms

圖像模塊 #3 粘性間距

間距

接下來，我們有第 3 列中的圖像模塊。使用以下粘性間距值：

• 粘性頂部邊距：-10%
• 粘性左邊距：-25%
• 粘性右邊距：-25%

過渡

相應地更改過渡持續時間：

• 轉換持續時間：700ms

圖像模塊 #4 粘性間距

間距

最後，打開第 4 列中的圖像模塊。應用以下粘性間距值：

• 粘性頂部邊距：-20%
• 粘性左邊距：-30%

過渡

通過增加過渡持續時間來完成模塊設置和本教程。 就是這樣！ 保存並退出頁面以查看結果。

• 轉換持續時間：1000ms

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何利用 Divi 中的英雄部分發揮創意。 更具體地說，我們向您展示瞭如何使用 Divi 的粘性部分在滾動時顯示圖像網格。 您也可以免費下載 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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