Поиск
Close this search box.
Поиск
Close this search box.

25 марта, 2022

Кнопка Наверх в Elementor

Кнопка Наверх в Elementor

Привет, друзья! В данной статье мы рассмотрим добавление кнопки “Наверх” (back to top button), которая возвращает пользователя в начало страницы, если она (страница) очень длинная. Данная кнопка актуальна для всех сайтов. Кнопка возврата в начало страницы в Elementor делается как при помощи плагинов, так и без них, используя стандартный функционал Элементора, в частности встроенный Popup builder. К сожалению, до этого мы не рассматривали подробно работу с конструктором попапов, хотя эта тема очень интересная и нужная в современных реалиях, но мы обещаем написать исчерпывающую статью на тему popup Elementor в ближайшее время.

Очень коротко расскажем что такое попап (pop-up). Pop-up – это всплывающее окно, который отображается поверх страницы сайта в браузере. Попап может появляться как без согласия пользователя, например в качестве окон с рекламой, или же открываться по определенному событию, будь то клик по кнопке или ссылке, или же при попытке закрыть веб-страницу. Триггером (с англ. trigger — «спусковой крючок»), а проще причиной открытия попапа, может быть что угодно и Elementor поддерживает большое их количество. Пользователи не очень любят всплывающие окна, которые появляются без их ведома, поэтому будьте аккуратны при их использовании, так как по статистике, сайты с такими окнами пользователи сразу закрывают.

Мы будем делать такую кнопку при помощи самого Элементора, а использование плагинов мы рассмотрим позже в другой статье.

Для начала сделаем кнопку при помощи Элементора, не используя для этого специализированные плагины.

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

Мы будем использовать конструктор всплывающих окон, любезно предоставленный разработчиками Элементора.

Создаем кнопку Наверх

Зайдем в раздел Шаблоны => Попапы в консоли WordPress.

Кнопка Наверх в Elementor

Откроется страница с шаблонами всех попапов. Вверху этой страницы кликаем на кнопку “Добавить новый” и в открывшемся окне вводим название шаблона нового всплывающего окна, после чего нажимаем “Создать шаблон”.

sozdaem knopku naverh 002
Создаем кнопку наверх Elementor

Вас автоматически перебросит в стандартный редактор Elementor для создания попапа. Не будем выбирать никаких встроенных шаблонов. Вот что у нас получится.

sozdaem knopku naverh 004

Добавим секцию и вставим в нее виджет Иконка. Выберем из библиотеки иконок значок “Chevron Up”.

sozdaem knopku naverh 005
sozdaem knopku naverh 006
sozdaem knopku naverh 007

Далее отредактируем сам popup, чтобы он стал похож на кнопку “Наверх”. Заходим в настройки попапа и устанавливаем минимальную ширину.

sozdaem knopku naverh 008

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

sozdaem knopku naverh 009

Далее убираем перекрытие фона и скрываем “крестик” для закрытия попапа

sozdaem knopku naverh 010

По умолчанию попап можно закрыть еще и кнопкой Esc на клавиатуре. Чтобы отключить такой функционал, зайдем в расширенные настройки popup и отключим закрытие по кнопке Esc.

sozdaem knopku naverh 011
Отключаем закрытие попапа по клику на Esc

Далее, настроим отображение попапа на всем сайте (для примера). Для этого заходим в настройки отображения и указываем нужные настройки.

sozdaem knopku naverh 015
sozdaem knopku naverh 016

Нажимаем кнопку “Следующая для перехода в раздел “Тригеры” и активируем настройку отображения попапа при прокрутке страницы на 50% вниз.

sozdaem knopku naverh 017

Кликаем на кнопку “Следующая”, пропускаем расширенные настройки и жмем кнопку “Сохранить и выйти”.

Теперь, кнопка прокрутки будет появлять при скролле страницы вниз на 50%.

Настраиваем переход в начало страницы

Итак, первая половина дела сделана. Добавили кнопку “Наверх”, но по клику на нее пока не происходит переход в начало страницы.

Для этого создадим якорь при помощи соответствующего виджета Elementor и добавим его в самый верх страницы. Если у вас пробелы в работе с якорями, рекомендуем почитать нашу статью “Якорные ссылки в Elementor”. Дадим имя якорю back_to_up_btn (без знака #)

sozdaem knopku naverh 012
sozdaem knopku naverh 013

Затем возвращаемся к нашему попапу и в настройках иконки “Chevron Up” в поле “Ссылка” прописываем имя нашего якоря со знаком #. Сохраняем изменения и наслаждаемся результатом).

Последним этапом можете стилизовать кнопку на ваш вкус).

Вот и все! Кнопка возврата в начало страницы готова. Большое спасибо за внимание! Ставим лайки, если статья помогла вам)

Уникальные тексты и изображения
с помощью
Искусственного Интеллекта
на русском языке.

Перейдите в Telegram и возьмите бесплатный пакет символов для тестирования сервиса
10 000 символов бесплатно!

0

Интересные статьи

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.