您想在 wordpress 中添加自定義滾動條嗎?
更改滾動條的外觀可以幫助您的網站脫穎而出,特別是在您創建自定義 WordPress 主題時。它還可以吸引訪問者對滾動條的注意力,并鼓勵他們探索更多內容。
在本文中,我們將向您展示如何在 WordPress 中輕松添加自定義滾動條。
為什么在 WordPress 中添加自定義滾動條?
2018 年,WC3 起草了一項提案,允許網站所有者使用 css 自定義滾動條的外觀。
如今,許多現代瀏覽器都支持自定義滾動條。
考慮到這一點,您可能需要更改滾動條以更好地適合您網站的配色方案或品牌。許多網站還使用自定義滾動條來吸引訪問者的注意力,這可以增加您的綜合瀏覽量并降低跳出率。
但是,請記住,每個瀏覽器處理自定義滾動條的方式都不同。許多瀏覽器僅部分支持自定義,而有些瀏覽器根本不會顯示您的自定義樣式。
這意味著使用不同的瀏覽器和設備測試您的網站非常重要,以了解滾動條在盡可能多的瀏覽器上的外觀。
話雖如此,我們來看看如何在 WordPress 中添加自定義滾動條。只需使用下面的快速鏈接跳轉到您要使用的方法:
- 方法 1:使用插件在 WordPress 中添加自定義滾動條(簡單)
- 方法 2:使用 CSS 在 WordPress 中添加自定義滾動條顏色
方法 1:使用插件在 WordPress 中添加自定義滾動條(簡單)
自定義滾動條的最簡單方法是使用Advanced Scrollbar。這個免費的插件可以讓您更改滾動條的寬度、顏色、滾動速度等,而無需編寫一行代碼。
您需要做的第一件事是安裝并激活高級滾動條插件。有關更多詳細信息,請參閱我們有關如何安裝 WordPress 插件的分步指南。
激活后,轉到“設置”?“高級滾動條設置”。
在這里,您可以更改滾動條的配色方案和導軌背景顏色。
在下圖中,我們創建了一個藍色滾動條。
您還可以通過在“鼠標滾動步數”字段中輸入新數字來更改鼠標滾動步數。
較低的數字將使您的網站滾動速度更慢,而較高的數字將使網站滾動速度更快。
您還可以選擇是否要自動隱藏滾動條,以便它僅在訪問者滾動時顯示。
如果您創建了更加豐富多彩的滾動條并擔心它可能會分散您對其余內容的注意力,這可能會很有用。
默認情況下,滾動條將出現在瀏覽器窗口的右側。如果您愿意,可以使用“導軌對齊”設置將其移動到左側。
當您對滾動條的設置感到滿意時,請不要忘記單擊“保存更改”來存儲您的設置。
您現在可以訪問您的WordPress 網站來查看自定義滾動條的運行情況。
方法 2:使用 CSS 在 WordPress 中添加自定義滾動條顏色
如果您想對滾動條進行更高級的更改,那么另一個選擇是使用 CSS。
此方法允許您自定義滾動條的每個部分,但它僅適用于使用 webkit 的桌面瀏覽器。這意味著您的更改不會顯示在所有瀏覽器上,包括移動瀏覽器。
要使用 CSS 自定義滾動條,請轉到外觀 ? 自定義。
在 WordPress 定制器中,單擊“其他 CSS”。
您現在可以將代碼添加到出現的小編輯器中。
以下是更改滾動條外觀的代碼示例:
我們希望本文能幫助您了解如何在 WordPress 中添加自定義滾動條。您可能還想查看我們關于如何在 WordPress 中創建登陸頁面的指南,或者查看我們的專家精選的最佳拖放頁面構建器。