如何使用 Divi 的粘性選項創建粘性標題
已發表: 2020-09-09我們在設置網站時使用 Divi Theme Builder 的方式加快了我們的工作流程並使一切變得更容易。 儘管我們能夠從 Divi Theme Builder 出現的第一天起創建自定義標題，但一直要求做一件事，即無需使用額外代碼即可創建粘性標題。 使用 Divi 的新粘性選項，創建粘性標題變得比以往任何時候都容易。 Divi 提供的粘性設置將毫不費力地幫助您將任何設計元素變為粘性並將自定義樣式分配到粘性狀態，從而帶來無限的設計和用戶體驗可能性。
在本教程中，我們將向您展示如何創建包含以下內容的粘性標題：
- 我們正在創建的標題有一個頂部標題欄 + 一個菜單欄
- 當您經過它時，我們會將包含菜單欄的部分變為粘性，一旦您返回頂部，標題欄就會再次出現
- 一旦該部分變為粘性，我們將更改粘性部分（及其元素）的設計樣式
讓我們開始吧！
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載全局標題模板
要使用免費的全局標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
1. 在新的標題模板中構建標題元素結構
創建新的全局標題模板
轉到 Divi Theme Builder 並開始構建新的全局或自定義標題。
部分 #1 設置
漸變背景
進入模板編輯器後，我們將首先構建標題的元素結構。 在本教程的第二部分，我們將專注於應用不同的粘性設置來完成我們的粘性標題設計。 在模板編輯器中，您會注意到一個部分。 打開該部分並應用漸變背景。
- 顏色 1：#ffba60
- 顏色 2：#ffd6a0
- 梯度方向：90度
- 起始位置：50%
- 結束位置：50%
間距
接下來刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
為了創建我們的頂部標題欄，我們將使用以下列結構向我們的部分添加一個新行：
漿紗
在不添加任何模塊的情況下，打開行設置並修改大小設置如下：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：95%
- 最大寬度：2580px
間距
也添加一些自定義的頂部和底部填充。
- 頂部填充：15px
- 底部填充：15px
主要元素 CSS
並且為了確保列在較小的屏幕尺寸上保持彼此相鄰，我們將向高級選項卡中行的主要元素添加一行 CSS 代碼。
display: flex;
將社交媒體關注模塊添加到第 1 列
添加選擇的社交網絡
是時候添加模塊了，從第 1 列中的社交媒體關注模塊開始。添加您選擇的社交網絡及其相應的鏈接。
刪除每個社交網絡的背景顏色
繼續單獨刪除社交網絡的每一種背景顏色。
圖標設置
然後，返回常規模塊設置並更改設計選項卡中的圖標顏色。
- 圖標顏色：#26333a
間距
也添加一些上邊距。
- 上邊距：5px
將按鈕模塊添加到第 2 列
添加副本
在第 2 列中，我們唯一需要的模塊是按鈕模塊。 添加一些您選擇的副本。
添加鏈接
接下來加個鏈接。
按鈕對齊
然後，轉到設計選項卡並更改按鈕對齊方式。
- 按鈕對齊：右
按鈕設置
我們也在設計按鈕的樣式。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：14px
- 按鈕文字顏色：#26333a
- 按鈕邊框寬度：2px
- 按鈕邊框顏色：#26333a
- 按鈕邊框半徑：0px
- 按鈕字母間距：4px
- 按鈕字體粗細：粗體
- 按鈕字體樣式：大寫
- 顯示按鈕：是
間距
我們將通過向間距設置添加一些頂部和底部填充來完成模塊設置。
- 頂部填充：10px
- 底部填充：10px
添加第 2 節
漸變背景
在上一個正下方添加另一個常規部分。 本節將專門介紹我們的菜單，並將在本教程的第二部分變為粘性。 添加該部分後，應用漸變背景。
- 顏色 1：#ffffff
- 顏色 2：#f7f7f7
- 漸變類型：線性
- 梯度方向：90度
- 起始位置：25%
- 結束位置：25%
間距
轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
繼續使用以下列結構向該部分添加新行：
漿紗
移至行的設計選項卡並按如下方式更改大小設置：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 最大寬度：2580px
間距
接下來刪除所有默認的頂部和底部填充。
- 頂部填充：10px
- 底部填充：10px
將菜單模塊添加到列
選擇菜單
然後，將菜單模塊添加到行的列並選擇您選擇的動態菜單。
上傳標誌
接下來上傳徽標。
刪除背景顏色
然後，刪除模塊的默認白色背景色。
菜單文字設置
轉到設計選項卡並設置菜單文本設置的樣式。
- 菜單字體粗細：粗體
- 菜單文字顏色：#002d4c
- 菜單文字大小：15px
- 菜單字母間距：4px
- 文本對齊：右
下拉菜單文本設置
然後，對下拉菜單設置進行一些更改。
- 下拉菜單背景顏色：#ffffff
- 下拉菜單行顏色：#002d4c
圖標設置
隨著圖標設置。
- 購物車圖標顏色：#002d4c
- 搜索圖標顏色：#002d4c
- 漢堡菜單圖標顏色：#002d4c
漿紗
並通過向尺寸設置添加徽標最大高度來完成模塊設置。
- 標誌最大高度：60px
2. 應用自定義粘性效果
將第 2 部分變為粘性
現在我們已經創建了標題的元素結構，是時候將我們的第二部分變成粘性並改變它的設計風格及其處於粘性狀態的元素。 打開第二部分的設置並轉到高級選項卡。 在那裡，轉到滾動效果設置並應用以下粘性選項：
- 粘滯位置：粘在頂部
- 粘性頂部偏移：0px
- 底部粘性限制：無
- 從周圍的粘性元素偏移：是
- 過渡默認和粘性樣式：是
在粘性狀態下更改部分的漸變背景
現在我們的部分已經變成了粘性，我們的部分、行和模塊設置中將出現一個附加選項； 粘性選項。 當您單擊此圖標時，您將能夠為處於粘性狀態時選擇的元素創建替代樣式。 我們將結合這些粘性設計設置中的幾個來自定義滾動時粘性標題的外觀和感覺。 首先轉到第二部分的背景設置並應用以下粘性漸變背景：
- 顏色 1：#26333a
- 顏色 2：#1e272f
在粘性狀態下拉伸行
接下來，我們將打開包含菜單模塊的行，並在粘性狀態下修改寬度。
- 寬度：95%
在粘性狀態下刪除行填充
我們也刪除了我們行的粘性頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
在粘性狀態下更改菜單文本顏色
接下來，我們將更改處於粘性狀態的菜單文本顏色。
- 菜單文字顏色：#ffbd68
在粘性狀態下更改菜單圖標顏色
隨著圖標顏色。
- 購物車圖標顏色：#ffffff
- 搜索圖標顏色：#ffffff
- 漢堡菜單圖標顏色：#ffffff
去除粘性狀態下的徽標高度
最後但並非最不重要的一點是，我們將在粘性狀態下將徽標最大高度更改為零。 一旦啟用了該部分的粘性設置，這將從我們的標題中完全刪除徽標。 就是這樣！ 完成標題設計並在您的網站上預覽後，請確保保存所有 Divi Theme Builder 更改。
- 標誌最大高度：0px
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的主題生成器和粘性選項創建粘性標題。 一旦包含我們菜單的部分變為粘性，我們也會應用自定義樣式。 新的 Divi 粘性選項使這些選項成為可能，這些選項為您提供無數的可能性來改善用戶體驗和您創建的設計。 您還可以免費下載全局標題模板！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。