Как добавить пользовательскую полосу прокрутки к любому элементу в WordPress

У вас длинная боковая панель, которая нарушает макет WordPress на некоторых страницах? Недавно один из наших пользователей попросил нас найти решение....

У вас длинная боковая панель, которая нарушает макет WordPress на некоторых страницах? Недавно один из наших пользователей попросил нас найти решение. Поскольку пользователь не хотел удалять ни один из виджетов, мы предложили добавить фиксированную высоту и полосу прокрутки ко всем длинным виджетам, что решило проблему. В этой статье мы покажем вам, как добавить пользовательскую полосу прокрутки к любому элементу в WordPress.

Если вам не понравилось видео или нужны дополнительные инструкции, то продолжайте читать дальше.

Первое, что вам нужно сделать, это установить и активировать плагин Custom Scrollbar. После активации просто перейдите по ссылке Внешний вид » Полосы прокрутки настроить плагин.

Настройки пользовательских полос прокрутки

Для начала вам нужно задать имя для вашей полосы прокрутки. Плагин позволяет добавлять несколько полос прокрутки, поэтому добавление имени поможет вам найти вашу пользовательскую полосу прокрутки в области администратора.

Следующий пункт в настройках — Target Element Selector (Выбор целевого элемента). Это класс или ID веб-элемента, на который вы хотите нацелиться. Вы можете узнать id или класс любого элемента, щелкнув правой кнопкой мыши на элементе в браузере Chrome и выбрав в меню пункт inspect element.

Использование инструмента inspect element для поиска ID элемента или класса CSS

Как вы можете видеть на скриншоте, элемент, на который мы хотим нацелиться, находится в стороне с CSS классом bwp_gallery.

После ввода целевого селектора вы можете выбрать высоту и ширину области пользовательской полосы прокрутки. Вы также можете выбрать позицию и тему для полосы прокрутки.

Как только вы закончите, просто нажмите на кнопку сохранения изменений, чтобы сохранить настройки.

Вот и все, теперь вы можете посетить свой сайт и увидеть пользовательскую полосу прокрутки в действии. Вы можете повторить процесс для создания еще одной пользовательской полосы прокрутки, нажав на кнопку Добавить.

Добавление еще одной пользовательской полосы прокрутки

Надеемся, что эта статья помогла вам добавить пользовательские полосы прокрутки к любому элементу на вашем сайте WordPress. Вы также можете посмотреть наш список из 25 самых полезных виджетов WordPress для вашего сайта.

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий