Як додати кнопку в редакторі WordPress [інструкція].

Чому блок кнопок WordPress такий важливий?

Навігація на сайті важлива для відвідувачів і клієнтів. Ми хочемо перенаправляти їх з однієї підсторінки на іншу. Провести їх через весь процес покупки. Ось чому важливо правильно вставити важливі посилання у вміст сторінки.

В основному у нас є 2 варіанти. Використовувати стандартне посилання або кнопку. Думки про те, коли використовувати перший і другий варіант, різні. Зазвичай на одній сторінці є кілька можливих дій. Нам потрібно переконатися, яка з них є первинною, а яка - вторинною. Ми рекомендуємо використовувати кнопку тільки для першочергової дії. Так ви досягнете більшої видимості цієї основної дії. Ви сфокусуєте увагу відвідувачів на цій дії. Ми також можемо назвати її кнопкою із закликом до дії. Не створюйте занадто багато кнопок на одній підсторінці.

Які основні функції кнопок?

• Кнопки можуть привернути увагу відвідувачів - заклик до дії
• Вони відокремлюють вміст сторінки або допису та роблять його більш читабельним
• Допомогти зорієнтуватися на сторінці. Багато відвідувачів лише візуально сканують сторінку очима
• Переміщайте відвідувачів на інші сторінки за допомогою гіперпосилань

Існує багато параметрів, які визначають успіх кнопки. Важливими є, наприклад, розмір, розташування або колір кнопки. Необхідно дотримуватися стандартних принципів UI та UX. Зелений колір використовується для кнопок з позитивною дією, наприклад, купити щось. Червоний колір - для негативної дії, наприклад, відписатися від розсилки. Правильно оформлені таким чином кнопки безпосередньо впливають на дії відвідувачів.

Кнопка додавання на будь-яку сторінку або публікацію в WordPress

Ситуація до WordPress 5

Додавання кнопок було досить складним процесом до того, як був винайдений редактор блоків WordPress. Тому що ця функція не була природним чином реалізована в WordPress. Ви могли використовувати тему з конструктором сторінок або сторонній плагін. У цьому випадку кнопки створюються за допомогою шорткодів.

У наших старих темах WordPress ви можете додати кнопку за допомогою шорткодів у візуальному редакторі. Після натискання на Вставити шорткод -> Кнопка ви можете встановити різні налаштування у модальному вікні. Текст, колір тексту, колір кнопки, url, вирівнювання і так далі. Завдяки цим розширеним налаштуванням ви можете додати кнопку досить легко і швидко без будь-якого програмування.

Як використовувати блок кнопок в редакторі WordPress?

Завдяки WordPress 5 з'явився другий спосіб. Набагато простіший. У візуальному редакторі WordPress з'явилося багато корисних блоків. Щоб створити кнопку на сайті, тепер ви можете використовувати блок WordPress Button в редакторі.

Покрокова інструкція з додавання кнопки в редакторі WordPress

1. Спочатку потрібно вирішити, де ви хочете вставити кнопку
2. Кнопковий блок можна додати різними способами:
- натиснувши на "+" у верхній панелі або будь-де в редакторі блоків, де ви вибрали блок "Кнопка

- Ви також можете знайти будь-який блок за допомогою рядка пошуку, просто напишіть "кнопка"

- набравши "/", що дає доступ до всіх доступних блоків

3. Створений блок кнопок можна налаштувати далі

Додайте текст кнопки та URL-адресу

Як тільки кнопка WordPress Block створена, ви можете вводити текст всередині неї. Пам'ятайте, що для кнопки заклику до дії краще використовувати короткий текст з чітким змістом. Ви можете зробити текст жирним, курсивом або підкресленим. Всі ці зміни можна зробити, натиснувши на панелі інструментів. Ви також можете вирівняти кнопку збоку або по центру.

Кнопка зазвичай вказує на іншу сторінку або зовнішній веб-сайт. З цієї причини прямо під нею є поле для додавання URL-адреси. Перевага полягає в тому, що додавання URL-адреси не вимагає виділення тексту.

Зміна кольору кнопки

Новий редактор дозволяє змінювати блок кнопок WordPress за кілька секунд. Просто скористайтеся налаштуваннями на бічній панелі праворуч. Ви можете змінити колір фону кнопки або колір тексту всередині кнопки. Існують основні попередньо визначені кольори або ви можете вибрати свій власний. Всі зміни видно одразу, щоб переконатися, що комбінація кольорів є правильною.

Чудовою особливістю є те, що якщо ви виберете неправильні комбінації, наприклад, сірий фон і білий колір тексту, редактор блоків WordPress попередить вас про те, що кнопка не буде читабельною на вашому сайті.

Знайдіть свій власний стиль кнопок

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

Кнопка редагування з власним CSS

Ще більшої кастомізації можна досягти за допомогою кастомних класів CSS. Таким чином, ви можете додати власні CSS-стилі та стилізувати кнопку в редакторі WordPress саме так, як ви бажаєте.

Як бачимо, є набагато простіший спосіб, ніж використання шорткоду кнопки. Блок кнопок WordPress можна використовувати в будь-якій темі, сумісній з редактором блоків WordPress. Дізнайтеся більше про нашу нову тему WordPress Citadela. Вона спеціально розроблена для WordPress Block Editor.

Додатковий наконечник в кінці

Не забувайте відстежувати успіх вашого блоку кнопок WordPress і самої кнопки. Якщо ви використовуєте Google Analytics, ви можете створити унікальну URL-адресу. Щоб відстежувати кліки відвідувачів, ви можете додати Параметр Google UTM. URL можна створити за допомогою конструктора URL. Додавання параметрів дозволяє визначити джерело відвідування. Це дуже корисно, якщо ви хочете знати, звідки відвідувачі прийшли на вашу сторінку покупок.

З якою найбільшою проблемою ви зараз стикаєтеся з блоком кнопок WordPress? Давайте обговоримо це в коментарях нижче. Поділіться своїм досвідом використання кнопок на сайті.