Модуль Кнопка наверх добавляет на сайт кнопку, с помощью которой посетитель может быстро вернуться в начало страницы.
Обычно такая кнопка полезна на длинных страницах: в статьях, каталогах, карточках товаров и других разделах, где пользователю приходится много прокручивать страницу вниз.
Как работает модуль
После включения модуля на сайте появляется отдельная кнопка возврата наверх. Она закрепляется в нижней части экрана и остается доступной во время прокрутки страницы.
Вы можете настроить внешний вид кнопки, выбрать сторону экрана, задать отступы и указать, на каких устройствах она должна отображаться.
Настройки в кастомайзере
Все настройки находятся в кастомайзере Внешний вид > Настроить в разделе Модули > Кнопка наверх.
Включение модуля
Включает или отключает модуль. Если настройка выключена, кнопка на сайте не выводится.
Иконка
Позволяет выбрать иконку из встроенных в тему, которая будет отображаться внутри кнопки.
Положение кнопки
Определяет, с какой стороны экрана будет показана кнопка наверх, слева или справа.
Показ на устройствах
Позволяет выбрать, на каких устройствах будет отображаться кнопка. Например, кнопку можно оставить на компьютерах и планшетах, но скрыть на мобильных устройствах.
Работает от ширины экрана. Мобильные до 768px, планшет от 768px, ПК от 1024px.
Дизайн
Цвета кнопки — фоновый цвет у кнопки наверх.
Цвет иконки — цвет значка внутри кнопки.
Тень кнопки — настройка тени вокруг кнопки, позволяет сделать более заметной, если цвет кнопки и фона одинаковый.
Размер кнопки
Настройки Ширина кнопки и Высота кнопки задают размер кнопки.
Для этих настроек можно указать разные значения для устройств ПК, Планшет и Мобильный.
Скругление углов
Задает форму кнопки. Например, можно сделать кнопку квадратной, слегка скругленной или полностью круглой.
Отступы
Настройки отступов определяют, на каком расстоянии кнопка будет находиться от краев экрана:
- Отступ сбоку — расстояние от левого или правого края экрана.
- Отступ снизу — расстояние от нижнего края экрана.
Если выбрано положение Справа, боковой отступ применяется справа. Если выбрано положение Слева, отступ применяется слева.
Для этих настроек можно задать отдельные значения для устройств ПК, Планшет и Мобильный.
CSS-переменные
Подробнее о работе с CSS-переменными и о том, где их можно переопределить, читайте в этой статье. Обычно достаточно настроек кастомайзера, но при необходимости вы всегда можете изменить нужные CSS-переменные вручную.
--wpbox-scrolltop-bg: var(--wpbox-site-bg, #fff); /* Цвет фона кнопки */
--wpbox-scrolltop-icon-color: var(--wpbox-text-color, inherit); /* Цвет иконки */
--wpbox-scrolltop-width: 3rem; /* Ширина кнопки */
--wpbox-scrolltop-height: 3rem; /* Высота кнопки */
--wpbox-scrolltop-border-radius: .25rem; /* Скругление углов */
--wpbox-scrolltop-box-shadow: 0 3px 30px -5px rgba(0, 0, 0, .18); /* Тень кнопки */
--wpbox-scrolltop-offset-x: 1rem; /* Отступ сбоку */
--wpbox-scrolltop-offset-y: 1rem; /* Отступ снизу */
--wpbox-scrolltop-z: ; /* z-index кнопки */
--wpbox-scrolltop-transition: ; /* Анимация появления */
--wpbox-scrolltop-opacity: ; /* Прозрачность */