Как добавить липкие кнопки на сайт WordPress

Последнее обновление Июл 12, 2021

Содержание

Добавьте липкие кнопки на сайт WordPress

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

Кнопки с залипанием действий будут действовать как плавающий виджет. Эти кнопки будут фиксироваться, даже если пользователь прокручивает вверх или вниз. Он будет отлично смотреться на веб-сайте и сделает его удобнее для пользователей. Добавление липких кнопок помогает улучшить конверсию и взаимодействие с посетителями.

Начиная

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

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

WP Sticky – один из самых эффективных плагинов для добавления липких элементов на ваш сайт. Это аккуратный небольшой плагин, который позволяет добавлять неограниченное количество липких элементов, совместимых со всеми темами, плагинами и компоновщиками страниц, и всю процедуру можно выполнить буквально за несколько минут. Он подчеркивает простоту процесса, поэтому вся процедура состоит из:

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

И это почти все – выбранный элемент теперь прикрепляется к вашему сайту. Включено довольно много настроек, поэтому вы можете поиграть с непрозрачностью липкого элемента, выбрать эффект «Fade-in» или «Slide down», установить диапазон прокрутки и т.д. Кроме того, вы можете установить различные предпочтения в соответствии с требованиями ваш веб-сайт в идеале – вы можете добавить ограничение по определенному критерию, что означает, что элемент не будет отображаться как липкий на выбранном:

Страницы
Сообщения
Категории
Теги
Или типы сообщений

Конечно, вы можете настроить его повсюду или предотвратить его на одном из упомянутых, чтобы получить полный контроль над плагином. Беспокоитесь о том, как они будут отображаться на разных устройствах? Это также можно настроить на вкладке «Устройства», где вы сможете выбрать точный размер экрана, на котором ваши элементы будут отображаться как липкие. Вы можете выбрать практически любой элемент, который вам нравится, будь то липкий заголовок, липкое меню, виджет, навигация, видео… все можно настроить за несколько минут, и вы можете создать столько, сколько вам нужно. Эффективно, элегантно и максимально просто.

Кроме того, есть и другие инструменты, которые помогут вам в создании липких элементов на вашем сайте. При этом установите и активируйте плагин Smart Floating Action Buttons – Buttonizer. В следующем разделе мы увидим, как использовать этот плагин.

Добавьте липкие кнопки на сайт WordPress

После установки плагина перейдите в меню «Buttonizer» на панели управления. У этого плагина нет страницы настроек серверной части. Вместо этого он предоставляет интерфейс, так что вы можете сразу увидеть влияние изменений.

Плагин предоставляет более 25 действий при нажатии. Предположим, из списка вы хотите добавить адрес электронной почты, телефона и Google Map к своим липким кнопкам на веб-сайте.

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

Поскольку эта кнопка предназначена для «номера телефона», нам необходимо настроить ее. Щелкните значок «Настройки» рядом с «ТЕЛЕФОН». Откроется панель параметров для настройки кнопки.

В раскрывающемся списке “Действие кнопки” выберите “Вызвать действие (номер телефона)”. Добавьте номер телефона в текстовое поле.

Затем я хочу установить для этой кнопки значок телефона. Сделать это можно из разделов СТИЛЬ >> ЗНАЧОК. Под значком «ЗНАЧОК» нажмите «ВЫБРАТЬ ЗНАЧОК», откроется всплывающее окно, в котором вы выберете значок из библиотеки Font Awesome.

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

Наконец, мы хотим установить положение для липких кнопок. Для этого щелкните значок «Настройки» рядом с «НОВОЙ ГРУППой».

В разделе «Положение» вы можете получить параметры для установки положения для кнопок. Я хочу, чтобы он был справа и по центру. Итак, я установил «0%» под «ГОРИЗОНТАЛЬНО» и среднюю часть под «ВЕРТИКАЛЬНОЕ».

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

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

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

Статьи по Теме

Источник записи: artisansweb.net