如何使用 Divi 創建粘性部分標題

您設計頁面的方式直接反映了您的品牌。 這就是為什麼在您的設計頭腦風暴的某個時刻，您可能希望找到獨特的設計元素並將其添加到您的網站，這將有助於在所有頁面中生成一個模式。 突出您網站身份的一種獨特方式是使用粘性部分標題。 這些粘性部分標題將通過貼在訪問者瀏覽器的頂部來跟踪訪問者的導航行為。 在本教程中，我們將向您展示如何使用 Divi 的粘性選項創建粘性部分標題。 一旦您的訪問者滾動，粘性部分標題將不那麼突出，但足夠可見，以便他們識別他們所在的部分。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

1. 創建截面設計

添加新部分

間距

首先向您正在處理的頁面添加一個新部分。 打開部分設置並應用一些頂部和底部填充。

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

添加第 1 行

列結構

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

漿紗

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

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

將文本模塊添加到列

添加 H2 內容

現在，將文本模塊添加到行的列並插入您選擇的一些 H2 內容。

H2 文本設置

轉到模塊的設計選項卡並按如下方式修改 H2 文本設置：

• 標題 2 字體：Poppins
• 標題 2 字體粗細：半粗體
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：
  • 台式機：20vw
  • 平板電腦和手機：28vw

添加第 2 行

列結構

使用以下列結構在前一行的正下方添加另一行：

漿紗

打開行設置並相應地更改大小設置：

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

將文本模塊添加到第 2 列

添加內容

然後，使用您選擇的一些描述性內容將第一個文本模塊添加到第 2 列。

文字設置

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

• 文字字體： Poppins
• 文字顏色：#000000
• 字體大小：
  • 台式機：2vw
  • 平板電腦：4vw
  • 電話：5vw
• 文字字母間距：-0.1vw
• 文本行高：1.6em

漿紗

也可以修改不同屏幕尺寸的尺寸設置。

• 寬度：
  • 台式機：70%
  • 平板電腦和手機：90%
• 模塊對齊：居中

將圖像模塊添加到第 2 列

上傳圖片

進入下一個模塊，即圖像模塊。 上傳您選擇的圖像。

漿紗

移至模塊的設計選項卡並強製圖像全角。

• 強制全角：是

間距

也添加一些上邊距。

• 上邊距：100px

將按鈕模塊添加到第 2 列

添加副本

接下來，我們有一個按鈕模塊。 添加一些您選擇的副本。

按鈕設置

相應地更改模塊的按鈕設置：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：
  • 台式機：1.5vw
  • 平板電腦：2.5vw
  • 電話：3.5vw
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#f6223e
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px

• 按鈕字體： Poppins
• 顯示按鈕圖標：是
• 按鈕圖標位置：左
• 僅在懸停按鈕時顯示圖標：否

間距

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

• 頂部填充：
  • 台式機和平板電腦：3%
  • 電話：5%
• 底部填充：
  • 台式機和平板電腦：3%
  • 電話：5%
• 左填充：
  • 台式機：5vw
  • 平板電腦：8vw
  • 電話：12vw
• 右填充：
  • 台式機：5vw
  • 平板電腦：8vw
  • 電話：12vw

將文本模塊添加到第 2 列

添加項目符號列表內容

我們將添加到此列的下一個也是最後一個模塊是另一個文本模塊。 將您選擇的列表項添加到內容框中。

文字設置

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

• 文字字體： Poppins
• 文字顏色：#000000
• 字體大小：
  • 台式機：2vw
  • 平板電腦：4vw
  • 電話：5vw
• 文字字母間距：-0.1vw
• 文本行高：1.6em

有序列表文本設置

也對有序列表文本設置進行一些更改。

• 有序列表文本顏色：#ff2340
• 有序列表行高：1.6em
• 有序列表樣式類型：upper-roman
• 有序列表樣式位置：外部

添加黑色文本顏色以單獨列出內容框中的項目

然後，我們將導航到內容框並手動為每個列表項添加黑色文本顏色，將這些項變回黑色。

漿紗

接下來，我們將更改不同屏幕尺寸的尺寸設置。

• 寬度：
  • 台式機：70%
  • 平板電腦和手機：90%
• 模塊對齊：居中

間距

我們還將對模塊的間距設置應用一些自定義邊距和填充值。

• 上邊距：50px
• 左填充：5%
• 右填充：5%

2. 對章節標題應用粘性效果

向行添加粘性效果

現在我們已經為我們的設計奠定了基礎，是時候實現您在這篇文章的預覽中看到的效果了。 為此，我們將通過打開行設置，轉到高級選項卡並應用以下設置來將整個第一行設為粘性：

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

修改行 Z 索引

為了確保粘滯行保持在我們設計中的第二行下方，我們將為粘滯行分配 az 索引“1”。 滾動時，您會看到粘性行及其文本模塊位於第二行的模塊下方。

• Z指數：1

添加第 2 列混合模式（第 2 行）

但是，正如您在這篇文章的預覽中所注意到的，粘性部分標題始終可見。 為了達到這種效果，我們將在第二行的第二列添加一個混合模塊。 這將有助於混合粘性行和第二行中的模塊，同時仍然保持粘性行的低 z 索引。

• 混合模式：相乘

更改粘性 H2 文本設置

我們也將在第 1 行的文本模塊中應用一些粘性樣式。 首先在粘性狀態下更改 H2 文本顏色並應用自定義文本陰影。

• 粘性 H2 文本顏色：#ffffff
• 標題 2 文本陰影：第二個選項（請參閱下面的打印屏幕）
• 標題 2 文本陰影顏色：
  • 默認值：rgba(0,0,0,0)
  • 粘性：rgba(0,0,0,0.08)

更改粘性文本模塊間距

我們還將在間距設置中使用一些負粘性左邊距來更改模塊的位置

• 粘性左邊距：-35%

增加文本模塊過渡持續時間

為了確保平穩過渡，我們將在高級選項卡中增加過渡持續時間。

• 轉換持續時間：500ms

3. 重用部分

克隆部分

現在我們有一個完整的部分，包括粘性部分標題，我們可以通過克隆它來重複使用整個部分，次數不限。

更改標題內容

確保更改第一行中的標題內容。

將文本大小與字符長度匹配

根據您的新 H2 標題有多少字符，您可能需要調整標題 2 的文本大小。

更改所有其他內容和圖像

當然，您還需要更改重複部分中的所有其他內容。 就是這樣！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的粘性選項發揮創意。 更具體地說，我們向您展示瞭如何創建粘性部分標題，在您創建的整個設計中跟隨訪問者。 這種效果為您的設計提供了額外的維度和無縫過渡。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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