如何使用 Divi 在 Scroll 上更改粘性徽標
已發表: 2020-10-07自從 Divi 粘性選項問世以來，我們的 Divi 工具箱中添加了無窮無盡的交互設計可能性。 除了能夠在滾動時將標題變為粘性之外，您還可以更改處於粘性狀態的元素的樣式。 這使您可以在標題變粘時突出顯示標題，並在人們閱讀您的頁面和帖子時創造另一種用戶體驗。
社區中經常被問到的問題之一是如何更改處於粘性狀態的 Divi 徽標。 在本教程中，我們將向您展示一種快速簡便的方法。 我們將通過構建全局標題開始本教程，然後我們將應用粘性效果，在教程的第三部分，我們將向您展示如何更改滾動時的粘性徽標。 如果您已經熟悉 Divi 的粘性選項和全局標題可能性，請隨時跳到本教程的第三部分，查看在滾動時更改粘性徽標所需的幾個步驟。
讓我們開始吧！
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載全局標題模板
要使用免費的全局標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
1. 在新的標題模板中構建標題元素結構
創建新的全局標題模板
首先轉到 Divi Theme Builder 並構建一個新的全局或自定義標題。
部分設置
背景顏色
進入模板編輯器後，您會注意到一個部分。 打開該部分的設置並應用背景顏色。
- 背景顏色：#556de0
間距
轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
盒子陰影
也添加一個框陰影。
- 框陰影模糊強度：50px
- 陰影顏色：rgba(0,0,0,0.15)
添加新行
列結構
繼續使用以下列結構向該部分添加新行：
漿紗
在不添加模塊的情況下，打開行設置並修改行的大小設置，如下所示：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
- 寬度：
- 台式機：80%
- 平板電腦和手機：100%
- 最大寬度：2580px
間距
接下來刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
第 1 列間距
然後，打開第 1 列設置並應用一些頂部和底部填充。
- 頂部填充：15px
- 底部填充：15px
第 2 列背景顏色
移至第二列的設置並添加背景顏色。
- 背景顏色：#6eba01
將菜單模塊添加到第 1 列
選擇菜單
現在一般的行和列設置已經到位，是時候添加模塊了，從第 1 列中的菜單模塊開始。
刪除背景顏色
刪除模塊的默認白色背景色。
菜單文字設置
轉到模塊的設計選項卡並相應地更改菜單文本設置：
- 菜單字體：蒙特塞拉特
- 菜單字體粗細：粗體
- 菜單文字顏色：#ffffff
- 菜單文字大小：16px
- 文本對齊：右
下拉菜單設置
然後，對下拉菜單設置進行一些更改。
- 下拉菜單背景顏色：#556de0
- 下拉菜單行顏色：rgba(0,45,76,0)
- 移動菜單背景顏色：#556de0
- 移動菜單文本顏色：#ffffff
圖標設置
接下來更改圖標顏色。
- 購物車圖標顏色：#ffffff
- 搜索圖標顏色：#ffffff
- 漢堡菜單圖標顏色：#ffffff
間距
並應用一些響應間距值。
- 最高保證金：
- 平板電腦和手機：10px
- 底部邊距：
- 平板電腦和手機：10px
- 左邊距：
- 平板電腦和手機：5%
- 右邊距：5%
將按鈕模塊添加到第 2 列
添加副本
在第 2 列中，我們唯一需要的模塊是按鈕模塊。 添加一些您選擇的副本。
按鈕對齊
轉到模塊的設計選項卡並更改模塊對齊方式。
- 按鈕對齊：居中
按鈕設置
接下來設置按鈕樣式。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：17px
- 按鈕文字顏色：#ffffff
- 按鈕邊框寬度：0px
- 按鈕字母間距：1px
- 按鈕字體：蒙特塞拉特
- 按鈕字體樣式：大寫
間距
並應用一些響應間距值。
- 最高保證金：
- 桌面：30px
- 平板電腦和手機：20px
- 底部邊距：
- 桌面：30px
- 平板電腦和手機：20px
2. 應用自定義粘性效果
使部分具有粘性
現在我們已經準備好所有元素，是時候添加粘性效果並更改我們的粘性標誌了。 首先再次打開部分設置。 轉到高級選項卡並應用以下粘性位置設置：
- 粘滯位置：粘在頂部
- 底部粘性限制：無
- 從周圍的粘性元素偏移：是
- 過渡默認和粘性樣式：是
粘性部分背景顏色
現在該部分已變為粘性，我們可以對父元素和子元素應用一些粘性樣式。 首先轉到該部分的背景設置並在粘性狀態下應用白色背景色。
- 背景顏色：#FFFFFF
粘性行大小
接下來在粘性狀態下修改行的寬度。
- 寬度：100%
粘性列 1 間距
然後，我們將在粘性狀態下移除第 1 列的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
粘性列 2 背景顏色
我們也將更改粘性列 2 的背景顏色。
- 背景顏色：#556de0
粘性菜單文本顏色
繼續打開菜單模塊並應用粘性菜單文本顏色。
- 菜單文字顏色：#556de0
粘性菜單下拉設置
在粘性狀態下也更改一些下拉菜單顏色。
- 下拉菜單背景顏色：#ffffff
- 移動菜單背景顏色：#ffffff
- 移動菜單文本顏色：#556de0
粘性菜單圖標設置
隨著粘性圖標顏色。
- 購物車圖標顏色：#556de0
- 搜索圖標顏色：#556de0
- 漢堡菜單圖標顏色：#556de0
粘性菜單間距
然後，轉到間距設置並應用一些粘性左邊距。
- 左邊距：5%
粘滯按鈕間距
最後但並非最不重要的是，在間距設置中修改按鈕模塊的粘性邊距值。
- 上邊距：15px
- 下邊距：15px
3. 在粘性狀態下更改徽標
將兩個圖標上傳到媒體庫
剩下要做的就是將我們兩個不同的徽標添加到菜單模塊中。 一個徽標將在靜態下應用，另一個在粘性狀態下應用。 將兩個徽標上傳到您的媒體庫。
選擇靜態標誌
然後，打開菜單模塊並在徽標設置中選擇靜態徽標圖像文件。
以像素為單位應用最大徽標寬度和高度
轉到模塊的設計選項卡並應用一些徽標最大寬度和高度。 這些值將幫助我們保持靜態和粘性徽標的大小相同。
- 標誌最大寬度：100px
- 標誌最大高度：60px
複製粘性徽標 URL
現在，返回您的媒體庫並複制粘性徽標的 URL。
在粘性狀態下添加粘性 URL（菜單徽標主元素）
要更改處於粘性狀態的徽標，我們將導航到菜單模塊的高級選項卡並向下滾動到菜單徽標 CSS 框。 在那裡，我們將啟用 CSS 框上的粘性選項並添加一行 CSS 代碼，並將粘性徽標的 URL 放在括號之間。 就是這樣！
content: url(addlinkhere);
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的粘性選項更改滾動時的粘性徽標。 這種方法允許您在標題中使用兩個不同的徽標，而無需使用單獨的菜單。 我們首先向您展示瞭如何構建全局標題，然後我們將我們的部分變為粘性並更改粘性樣式。 我們已經通過在教程的第三部分向您展示如何更改滾動時的粘性徽標來完成本教程。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。