Як додати липкі кнопки на веб-сайті WordPress

Останнє оновлення Жов 17, 2021

Зміст

Ви хочете додати липкі кнопки на свій сайт 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

Джерело запису: artisansweb.net