如何使用 Divi 將模塊固定在其列容器中

在頁面上顯示多個號召性用語時，它可以幫助創建將不同元素結合在一起的交互式滾動效果。 解決此問題的一種方法是在模塊在其列容器中移動時將模塊轉換為固定元素。 在今天的教程中，我們將向您展示如何創建處理此技術的精美設計，您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們最後看看不同屏幕尺寸的結果。

桌面

平板電腦和手機

免費下載粘性列容器設計

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

添加新部分

首先向您正在處理的頁面添加一個新的常規部分。

間距

打開部分設置並修改不同屏幕尺寸的頂部和底部填充。

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

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並允許行佔據該部分的整個寬度。 啟用“均衡列高”選項也非常重要。 通過這樣做，您將在列中創建一些空白空間，允許固定模塊在向下滾動頁面時自由移動。

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

第 2 列頂部填充

接下來打開第 2 列設置並在桌面上添加一些頂部填充。

• 頂部填充：20vw（台式機），0vw（平板電腦和手機）

第 3 列頂部填充

還將自定義頂部填充值添加到第三列。

• 頂部填充：40vw（台式機），0vw（平板電腦和手機）

第 4 列頂部填充

並通過向第 4 列添加頂部填充值來完成行的設置。

• 頂部填充：60vw（台式機），0vw（平板電腦和手機）

將 CTA 添加到第 1 列

添加內容

是時候開始添加模塊了！ 我們在第 1 列中需要的第一個模塊是 CTA 模塊。 插入一些您選擇的內容。

關聯

也添加到按鈕的鏈接。 這樣做將允許按鈕顯示在設計中。

• 按鈕鏈接網址：#

背景顏色

接下來更改模塊的背景顏色。

• 背景顏色：#ffffff

文字設置

移至設計選項卡並更改常規文本設置。

• 文本對齊：居中
• 文字顏色：深色

標題文字設置

也更改標題文本設置。

• 標題標題級別：H3
• 標題字體：Spectral
• 標題文字顏色：#000000
• 標題文字大小：2vw（桌面）、4vw（平板電腦）、6vw（手機）

正文設置

隨著正文文本設置。

• 正文字體：Fira Sans
• 正文字體重量：輕
• 正文顏色：#000000
• 正文大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 車身線高：1.8em

按鈕設置

不要忘記為 CTA 模塊的按鈕設置樣式。

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

• 按鈕邊框半徑：50vw
• 按鈕字體：Fira Sans

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

間距

然後，轉到間距設置並添加一些自定義的頂部和底部填充。

• 頂部填充：8vw
• 底部填充：8vw

邊界

也為模塊添加一些圓角。

• 圓角：1vw（所有角）

盒子陰影

通過添加一個微妙的框陰影來完成模塊的設計。

• 框陰影水平位置：10px
• 框陰影模糊強度：50px
• 陰影顏色：rgba(0,0,0,0.08)

CSS 類

現在，為了使滾動粘性效果起作用，我們需要在本教程的末尾添加幾行 CSS 代碼。 為此，我們將向 CTA 模塊添加一個 CSS 類。

• CSS 類：sticky-cta

將圖像模塊添加到第 1 列

上傳圖片

在第 1 列中我們需要的下一個也是最後一個模塊，它是一個圖像模塊。 上傳您選擇的 PNG 圖像。

結盟

接下來更改圖像對齊方式。

• 圖像對齊：居中

漿紗

確保你也在模塊上強制全角。

• 強制全角：是

間距

通過轉到間距設置並跨不同屏幕尺寸添加一些自定義間距值來完成模塊的設置。

• 最高利潤率：-5vw（平板電腦和手機）
• 下邊距：-12vw（台式機），5vw（平板電腦和手機）
• 左填充：3vw（桌面）、10vw（平板電腦）、25vw（手機）
• 右填充：3vw（桌面）、10vw（平板電腦）、25vw（手機）

克隆兩個模塊三次並放置在剩餘的列中

完成第 1 列中的兩個模塊後，您可以將它們克隆 3 次，並將重複項放置在該行的其餘列中。

更改圖像

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

更改 CTA 內容和按鈕背景顏色

更改 CTA 內容以及按鈕背景顏色。

• CTA 模塊 #2：#89ffb4
• CTA 模塊 #3：#ff89f1
• CTA 模塊 #4：#ffd389

將 CSS 類添加到第 1、2 和 3 列中的圖像模塊

現在，為了確保粘性效果也適用於圖像，我們需要在第 1、2 和 3 列的圖像模塊中添加一個 CSS 類。

• CSS 類：粘性圖像

添加第 2 行

列結構

剩下要做的就是添加 CSS 代碼。 為此，添加一個新行。

使用 CSS 代碼添加代碼模塊

將代碼模塊添加到該行，插入下面的 CSS 代碼，就大功告成了！

<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}

.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>

預覽

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

桌面

平板電腦和手機

最後的想法

在這篇文章中，我們向您展示瞭如何將模塊固定在其列容器中。 使用該技術可以產生一些令人驚嘆的滾動效果，讓您可以強調頁面上的各種號召性用語。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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