如何使用 Divi 使透明標題在滾動時具有粘性
已發表: 2020-09-23在為您的網站設置全局標題時，有很多方法可以實現。 一種更微妙的方法是透明標題。 透明的標題放置在頁面的主要部分的頂部，這可以產生專注於最小但清晰方法的漂亮設計。 如果您決定使用透明標題但需要滾動時使用粘性標題，那麼您會喜歡本教程。 使用 Divi 的內置粘性選項，我們將向您展示如何在滾動時從透明標題變為不同樣式的粘性標題。 透明和粘性之間的過渡毫不費力！ 您也可以免費下載 JSON 文件。
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載全局標題模板
要使用免費的全局標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
1. 在新的標題模板中構建標題元素結構
創建新的全局標題模板
首先轉到Divi Theme Builder。 在那裡，開始構建新的全局或自定義標頭。
部分 #1 設置
背景顏色
進入模板編輯器後，您會注意到一個部分。 本節將專門介紹您可以在這篇文章的預覽中註意到的頂部標題欄。 打開該部分的設置並添加黑色背景色。
- 背景顏色：#000000
間距
轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
繼續使用以下列結構添加新行：
將文本模塊添加到列
添加內容
將文本模塊添加到行的列並輸入您選擇的一些副本。
文字設置
轉到模塊的設計選項卡並相應地更改文本設置：
- 文字字體：Oswald
- 文本字體樣式：大寫
- 文字顏色：#ffffff
- 字體大小：
- 桌面：19px
- 平板電腦：18px
- 電話：16px
- 文本對齊：居中
添加第 2 節
間距
在第一部分的正下方，添加另一個常規部分。 本節將專門介紹我們將在滾動時變為粘性的透明菜單。 打開部分設置並刪除設計選項卡中的所有默認頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
繼續使用以下列結構添加新行：
透明背景色
打開行設置並對行應用完全透明的背景色。
- 背景顏色：rgba(255,255,255,0)
漿紗
移至行的設計選項卡並修改大小設置。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：100%
- 最大寬度：100%
間距
接下來添加一些自定義的左右填充。
- 左填充：10%
- 右填充：10%
盒子陰影
然後，應用透明框陰影。 在本教程的後面，我們將在具有不同陰影顏色的粘性狀態下使用此框陰影。
- 框陰影模糊強度：50px
- 陰影顏色：rgba(0,0,0,0)
位置
為了確保該行出現在頁面內容的頂部，並具有透明背景，我們將在高級選項卡中為我們的行使用絕對位置。
- 位置：絕對
- 位置：左上角
第 2 列可見性
我們還在平板電腦和手機上隱藏了我們行的第二列，以便在較小的屏幕尺寸上有一個不太複雜的標題設計。
將菜單模塊添加到第 1 列
選擇菜單
現在我們的行設置已經到位，是時候添加模塊了，從第 1 列中的菜單模塊開始。選擇您選擇的菜單。
上傳標誌
接下來上傳徽標。
刪除背景顏色
也刪除模塊的背景顏色。
菜單文字設置
轉到模塊的設計選項卡並相應地更改菜單文本設置：
- 菜單字體：Oswald
- 菜單字體粗細：粗體
- 菜單字體樣式：大寫
- 菜單文字顏色：#efefef
- 菜單文字大小：18px
- 文本對齊：右
下拉菜單設置
也更改下拉菜單設置。
- 下拉菜單行顏色：rgba(0,0,0,0)
- 移動菜單背景顏色：rgba(0,0,0,0.95)
圖標設置
然後，在圖標設置中更改圖標顏色。
- 購物車圖標顏色：#ffffff
- 搜索圖標顏色：#ffffff
- 漢堡菜單圖標顏色：#ffffff
標誌設置
我們也通過更改圖像反轉過濾器來更改徽標設置中徽標的顏色。
- 圖像反轉：90%
漿紗
然後，我們將為徽標分配最大高度。
- 標誌最大高度：40px
間距
接下來，我們將在較小的屏幕尺寸上添加一些頂部和底部填充。
- 頂部填充：
- 平板電腦和手機：10px
- 底部填充：
- 平板電腦和手機：10px
將按鈕模塊添加到第 2 列
添加副本
在第 2 列中，我們唯一需要的模塊是按鈕模塊。 添加一些您選擇的副本。
按鈕對齊
轉到模塊的設計選項卡並更改按鈕對齊方式。
- 按鈕對齊：右
按鈕設置
接下來設置按鈕樣式。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：16px
- 按鈕文字顏色：#ffffff
- 按鈕背景顏色：#ed4441
- 按鈕邊框顏色：#ed4441
- 按鈕邊框半徑：0px
- 按鈕字母間距：4px
- 按鈕字體：Oswald
- 按鈕字體粗細：粗體
- 按鈕字體樣式：大寫
- 顯示按鈕圖標：是
- 按鈕圖標顏色：#1a1a1a
間距
並通過添加一些自定義間距值來完成模塊設置。
- 上邊距：-70px
- 頂部填充：25px
- 底部填充：25px
2. 應用自定義粘性效果
將第 2 部分變為粘性
現在我們已經設置了標題的基礎，是時候應用粘性效果了！ 為此，首先打開第二部分的設置並將以下粘性設置應用到高級選項卡：
- 粘滯位置：粘在頂部
- 粘性頂部偏移：0px
- 底部粘性限制：無
- 從周圍的粘性元素偏移：是
- 過渡默認和粘性樣式：是
粘性行背景顏色
現在啟用了粘性選項，我們可以對部分內的所有元素進行粘性設計更改。 我們將首先打開包含菜單的行並應用白色粘性背景色。
- 背景顏色：#FFFFFF
粘性行間距
接下來，我們將修改行的粘性間距值。
- 頂部填充：0px
- 底部填充：0px
粘性行框陰影
我們也在粘性狀態下更改框陰影顏色。
- 陰影顏色：rgba(0,0,0,0.08)
粘性行定位
然後，我們將在粘性狀態下將行定位恢復為相對。
- 職位：相對
- 偏移原點：左上角
粘性菜單文本設置
接下來，我們將更改粘性菜單文本顏色。
- 菜單文字顏色：#000000
粘性菜單下拉設置
隨著菜單下拉設置中的移動菜單背景顏色。
- 移動菜單背景顏色：#ffffff
粘性菜單圖標顏色
更改粘性狀態下的圖標顏色。
- 購物車圖標顏色：#000000
- 搜索圖標顏色：#000000
- 漢堡菜單圖標顏色：#000000
粘性徽標過濾器
然後，移除處於粘性狀態的徽標圖像反轉過濾器。
- 圖像反轉：0%
粘滯按鈕間距
並通過在粘性時移除按鈕的負上邊距來完成教程。
- 上邊距：0px
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何將 Divi 的 Theme Builder 與新的粘性選項結合起來。 更具體地說，我們向您展示瞭如何在滾動時從透明標題變為不同樣式的粘性標題。 這種方法允許您將頁面設計與菜單合併，同時在滾動時仍保持漂亮的粘性標題。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。