Кнопка вверх для сайта wordpress: Кнопка вверх для сайта wordpress

Как установить кнопку «вверх» — плагин Scroll to Top

Здравствуйте читатели моего блога! После смены темы моего сайта я обратил внимание что испарилась кнопка «наверх».

Я почему-то предполагал что сей атрибут есть в любой теме, оказывается я ошибался.

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

Поэтому я озаботился установкой кнопкой «Вверх» на сайт.

Содержание статьи

• Настройка плагина Scroll to Top
• Устанавливаем новые координаты кнопки

Настройка плагина Scroll to Top

Проштудировав интернет, оказалось, что есть несколько вариантов решения данной проблемы:

1. Установка кнопки с помощью кода
2. Установка плагина Scroll to Top

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

После того как скачали плагин, установите его, ничего сложного в этом нет, все стандартно, тем кто не знает как устанавливать плагины в WordPress милости прошу сюда. После установки и активации плагина Scroll to Top, в нашей админке в разделе настройка появляется одноименное меню:

Установка плагина Scroll to Top

Заходим в меню и настраиваем по пунктам

1. Если нас не устраивает стандартное изображение кнопки идущее с плагином, прописываем путь к своей картинке
2. Скорость пролистывания вверх, можно оставить пустым (настройки по умолчанию)
3. Номер строки после которой должна появляться кнопка, можно оставить пустым

Вот в принципе и все настройки для данного плагина. Но после установки плагина я столкнулся с одним неприятным моментом. У меня на сайте установлена всплывающая форма подписки, при активации которой происходит наложение кнопки «верх» на всплывающее окно. Чтобы это исправить надо изменить координаты появления кнопки, и как мне не хотелось пришлось лезть в код плагина.

Устанавливаем новые координаты кнопки

Как я сделал у себя, возможно это и не самый правильный вариант, но у меня все получилось и работает. Для того чтобы изменить местоположение кнопки «Вверх» идем меню Плагины -> Редактор далее в выпадающем меню выбираем наш плагин Scroll to Top и не забываем подтвердить нажав Выбрать

Выбираем плагин для редактирования кода

В тексте кода находим такой текст (примерно на 1/3 от начала кода):

controlattrs: {offsetx:20, offsety:70}

и соответственно меняем координаты вывода по X — offsetx и Y — offsety (по умолчанию стоит x=5, y=5) После всех манипуляций кнопка выглядит красиво и находится на своем месте.

Кнопка вверх

Я надеюсь что моя статья помогла Вам сделать кнопку «Вверх» на сайте с помощью плагина Scroll to Top.

P.S. Список самых необходимых плагинов для WordPress, большинство из которых установлены на моем сайте можно найти в моем посте здесь.

---

Жду Ваших комментариев. Подписывайтесь на обновления блога. Буду благодарен, если Вы поделитесь этим постом в социальных сетях!

Дмитрий Леонов | leonov-do.ru

 

Поделиться в социальных сетях

Как добавить кнопку «Вверх» в Elementor

Используя Elementor Popup Builder , вы можете создавать свои собственные кнопки возврата наверх. В нашем подробном руководстве вы найдете всю необходимую информацию. Создание всплывающего контейнера, настройка триггеров и добавление эффекта прокрутки — все это шаги, которые мы проведем вас шаг за шагом.

Настройте кнопку «Вернуться к началу» в Elementor

Для начала используйте Elementor , чтобы создать новое всплывающее окно и добавить в него кнопку возврата наверх. Шаблоны Elementor -> Шаблоны Elementor во всплывающих окнах панели управления WordPress.

Нажав «Добавить новое всплывающее окно», вы попадете в окно всплывающих окон Elementor, где вы можете внести изменения в любые существующие всплывающие окна или создать совершенно новое.

Добавьте новое всплывающее окно, нажав кнопку «Добавить новое всплывающее окно». В новом поле вы сможете выбрать тип шаблона и имя для вашего нового дизайна. Создайте новое всплывающее окно, и тип шаблона будет выбран заранее. При желании вы можете назвать шаблон как хотите. Мы предпочли простую кнопку «Наверх». Нажмите кнопку «Создать шаблон» после внесения этих двух изменений.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Как только вы откроете редактор Elementor, вам будет представлена ​​библиотека готовых всплывающих окон. Вы можете использовать эти предустановленные всплывающие окна, однако они в основном предназначены для случаев, когда вам нужна форма подписки, уведомление о политике использования файлов cookie или любое другое типичное всплывающее окно. Воспользуйтесь кнопкой X, чтобы закрыть это окно, пока наша кнопка возврата к началу не будет завершена.

Настройка всплывающего контейнера

Когда вы выйдете из окна библиотеки Elementor, вы вернетесь в редактор Elementor и к начальной точке для всплывающих окон с настройками по умолчанию. Теперь нажмите на значок шестеренки, чтобы отобразить настройки всплывающего окна.

Теперь внесите эти изменения на вкладке « Макет ».

• Ширина: 100 пикселей.
• Высота: соответствует содержимому.
• Положение по горизонтали: справа.
• Положение по вертикали: снизу.
• Кнопка «Скрыть наложение» и «Выход».

Теперь измените следующее на вкладке « Стиль ».

• Цвет фона: прозрачный.
• Тень коробки: вернуться к значениям по умолчанию.

Просто включите «Предотвратить закрытие по клавише ESC» в настройках вкладки «Дополнительно». Это только в том случае, если посетитель случайно коснется кнопки ESC при прокрутке страницы вниз. Если это произойдет, мы хотим предотвратить исчезновение кнопки.

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

Добавление кнопки «Вернуться наверх»

Здесь мы будем использовать виджет значка для установки в качестве кнопки. Вы также можете использовать виджет кнопки, если хотите.

Перетащите виджет значка и поместите его в указанное место.

Теперь у вас есть огромная коллекция иконок на выбор. Выберите нужный и добавьте якорную ссылку. Необходимо указать идентификатор области в верхней части страницы, которая будет использоваться в качестве якорной ссылки для действия нажатия кнопки «Вернуться вверх». просто добавьте виджет «Привязка меню» вверху ваших страниц и сообщений с правильным идентификатором.

Теперь добавьте анимацию входа для нашей задней иконки.

И теперь вы можете опубликовать эту страницу.

Условия и триггеры

Теперь, когда мы завершили этапы проектирования и разработки, нам нужно решить, где и когда отображать нашу кнопку возврата наверх. Условия или место показа всплывающего окна будут первым окном настроек, которое появится после нажатия кнопки «Опубликовать». Вам доступны различные альтернативы:

• Всплывающее окно «Весь сайт» будет отображаться на всех типах сообщений вашего сайта, включая архивы. Это наша предпочтительная конфигурация.

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

• Одна страница – отображает всплывающее окно на всех отдельных страницах, сообщениях или других типах сообщений, включая авторов и страницы 404, или только на выбранном типе сообщений. Например, если вы просто хотите, чтобы кнопка «Наверх» появлялась в ваших записях в блоге.

• WooCommerce — Если ваш веб-сайт представляет собой магазин и работает на WooCommerce, Elementor предоставит вам отдельную возможность регулировать видимость всплывающих окон для всего магазина или 10 различных вариантов.

Установите свое условие или несколько условий, если вам требуется более расширенный контроль над видимостью всплывающих окон, а затем нажмите «Далее». Триггеры — это следующий элемент, который вам нужно настроить, это то, какое действие или действия должны предпринять ваши посетители, чтобы всплывающее окно появилось. Доступны различные альтернативы, которые вы можете комбинировать с расширенными правилами, чтобы создать оптимальную ситуацию для вашего сайта. Однако в нашем случае мы хотим, чтобы все было как можно проще, и единственный требуемый триггер — это триггер On Scroll.

Наша конфигурация – 50 процентов с направлением вниз – подразумевает, что всплывающее окно будет появляться, когда пользователи прокручивают до 50 процентов длины страницы. Это все, что нам нужно на данный момент. Вы можете пропустить Расширенные правила и просто нажать Сохранить & Закрыть в этом окне. Дайте Elementor несколько секунд, чтобы опубликовать новое всплывающее окно, которое будет служить кнопкой возврата наверх.

Никаких изменений не требуется для продвижения правил.

Добавление эффекта прокрутки

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

html {
  scroll-behavior: smooth !important;
}

Заключительное слово

Несмотря на то, что большинство популярных тем WordPress имеют первоначальную функциональность, могут возникнуть ситуации, когда вы захотите использовать что-то еще. Как и выше, мы создали веб-сайт для наших клиентов, используя простую ванильную тему и Elementor Pro Page Builder. В этом случае вы можете использовать это решение для улучшения UX вашего веб-сайта, добавив приятную кнопку возврата наверх, над которой у вас есть полный контроль. Эту кнопку можно добавить на весь сайт или на отдельные его разделы. Вы можете настроить его и повторно использовать на любом веб-сайте, созданном с помощью конструктора страниц Elementor Pro.

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

Как добавить кнопки в сообщения или страницы WordPress (даже если вы не знаете, как программировать)

Контент Themeisle бесплатный. Когда вы покупаете по реферальным ссылкам на нашем сайте, мы получаем комиссию. Узнать больше

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

.

Если вы не умеете программировать, WordPress фактически не предлагает никакого способа добавления кнопок в ваши сообщения или страницы по умолчанию. Не волнуйтесь, еще не все потеряно.

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

Что вообще происходит с кнопками WordPress?

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