Кнопка Наверх в Elementor
Привет, друзья! В данной статье мы рассмотрим добавление кнопки “Наверх” (back to top button), которая возвращает пользователя в начало страницы, если она (страница) очень длинная. Данная кнопка актуальна для всех сайтов. Кнопка возврата в начало страницы в Elementor делается как при помощи плагинов, так и без них, используя стандартный функционал Элементора, в частности встроенный Popup builder. К сожалению, до этого мы не рассматривали подробно работу с конструктором попапов, хотя эта тема очень интересная и нужная в современных реалиях, но мы обещаем написать исчерпывающую статью на тему popup Elementor в ближайшее время.
Очень коротко расскажем что такое попап (pop-up). Pop-up – это всплывающее окно, который отображается поверх страницы сайта в браузере. Попап может появляться как без согласия пользователя, например в качестве окон с рекламой, или же открываться по определенному событию, будь то клик по кнопке или ссылке, или же при попытке закрыть веб-страницу. Триггером (с англ. trigger — «спусковой крючок»), а проще причиной открытия попапа, может быть что угодно и Elementor поддерживает большое их количество. Пользователи не очень любят всплывающие окна, которые появляются без их ведома, поэтому будьте аккуратны при их использовании, так как по статистике, сайты с такими окнами пользователи сразу закрывают.
Мы будем делать такую кнопку при помощи самого Элементора, а использование плагинов мы рассмотрим позже в другой статье.
Для начала сделаем кнопку при помощи Элементора, не используя для этого специализированные плагины.
Прежде чем продолжить чтение, советуем Вам ознакомиться с нашей статьей про якорные ссылки в Elementor, так как там представлена информация, которая очень нам пригодиться.
Мы будем использовать конструктор всплывающих окон, любезно предоставленный разработчиками Элементора.
Создаем кнопку Наверх
Зайдем в раздел Шаблоны => Попапы в консоли WordPress.
Откроется страница с шаблонами всех попапов. Вверху этой страницы кликаем на кнопку “Добавить новый” и в открывшемся окне вводим название шаблона нового всплывающего окна, после чего нажимаем “Создать шаблон”.
Вас автоматически перебросит в стандартный редактор Elementor для создания попапа. Не будем выбирать никаких встроенных шаблонов. Вот что у нас получится.
Добавим секцию и вставим в нее виджет Иконка. Выберем из библиотеки иконок значок “Chevron Up”.
Далее отредактируем сам popup, чтобы он стал похож на кнопку “Наверх”. Заходим в настройки попапа и устанавливаем минимальную ширину.
Затем меняем позицию popup, чтобы он переместился в правый нижний угол экрана. Для этого используем в настройках раздел “Позиция”.
Далее убираем перекрытие фона и скрываем “крестик” для закрытия попапа
По умолчанию попап можно закрыть еще и кнопкой Esc на клавиатуре. Чтобы отключить такой функционал, зайдем в расширенные настройки popup и отключим закрытие по кнопке Esc.
Далее, настроим отображение попапа на всем сайте (для примера). Для этого заходим в настройки отображения и указываем нужные настройки.
Нажимаем кнопку “Следующая для перехода в раздел “Тригеры” и активируем настройку отображения попапа при прокрутке страницы на 50% вниз.
Кликаем на кнопку “Следующая”, пропускаем расширенные настройки и жмем кнопку “Сохранить и выйти”.
Теперь, кнопка прокрутки будет появлять при скролле страницы вниз на 50%.
Настраиваем переход в начало страницы
Итак, первая половина дела сделана. Добавили кнопку “Наверх”, но по клику на нее пока не происходит переход в начало страницы.
Для этого создадим якорь при помощи соответствующего виджета Elementor и добавим его в самый верх страницы. Если у вас пробелы в работе с якорями, рекомендуем почитать нашу статью “Якорные ссылки в Elementor”. Дадим имя якорю back_to_up_btn (без знака #)
Затем возвращаемся к нашему попапу и в настройках иконки “Chevron Up” в поле “Ссылка” прописываем имя нашего якоря со знаком #. Сохраняем изменения и наслаждаемся результатом).
Последним этапом можете стилизовать кнопку на ваш вкус).
Вот и все! Кнопка возврата в начало страницы готова. Большое спасибо за внимание! Ставим лайки, если статья помогла вам)
0