Як додати кнопки виклику до дії в WordPress (без коду)

Ви хочете додати дзвінки до кнопок дій у своїх публікаціях або на сторінках WordPress?


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

Наприклад, ви можете використовувати кнопку заклику до дії для навігації користувачів на транзакційну сторінку, як-от сторінка цін, сторінка продукту, сторінка послуг та інші на вашому веб-сайті.

Ви також можете використовувати кнопки заклику до дії для просування спеціальних пропозицій, нових товарів або партнерських посилань, які вказують на веб-сайти партнерів.

У цій статті ми покажемо вам, як легко додавати красиві дзвінки до кнопок дій у WordPress, не записуючи жодного коду.

Додавання кнопок у WordPress крок за кроком

Примітка: Ця стаття призначена для додавання спеціальних дзвінків до кнопок дій у WordPress. Якщо ви хочете додати кнопки соціальних ресурсів, перегляньте наш посібник про те, як додати кнопки соціальних ресурсів у WordPress.

Додавання кнопок у публікації та сторінки WordPress (крок за кроком)

WordPress дозволяє легко додавати кнопки із вбудованим блоком “Кнопка”.

Це нова функція, представлена ​​в WordPress 5.0, а також новий редактор блоків Gutenberg WordPress.

У цій статті ми покажемо вам три різні способи додавання дзвінків до кнопок дій у публікаціях та сторінках блогу WordPress. Ви можете вибрати рішення, яке найкраще відповідає вашим потребам.

Сміливо використовуйте наведений нижче вміст, щоб легко переміщатися по цій статті.

:

    Відеоурок

    Підписуйтесь на WPBeginner

    Якщо вам не сподобається відео чи потрібні додаткові інструкції, продовжуйте читати.

    Додавання кнопок у дописи / сторінки WordPress за допомогою редактора за замовчуванням

    Цей спосіб простіший і рекомендований більшості користувачів. Він використовує вбудований блок кнопки в новому редакторі WordPress. Якщо ви все ще використовуєте старіший класичний редактор, то можете перейти до наступного розділу.

    Спочатку потрібно створити нову публікацію або відредагувати існуючу, куди потрібно додати кнопку.

    На екрані редагування публікації натисніть на значок “+”, щоб додати новий блок і виберіть блок кнопки в розділі “елементи макета”..

    Додайте блок кнопок у редакторі блоків WordPress

    Далі ви зможете побачити блок кнопок, доданий до редактора вмісту

    Блок кнопок додано до редактора WordPress Post

    Просто натисніть на область “Додати текст…” та введіть текст кнопки.

    Після цього вам потрібно вставити URL-адресу сторінки, на яку потрібно зв’язати, у поле “Вставити URL-адресу або набрати для пошуку” під кнопкою.

    Після завершення натисніть на кнопку Застосувати.

    Введіть текст і посилання кнопки в WordPress

    Якщо ви хочете відобразити кнопку в центрі, ви можете натиснути на значок Вирівняти центр на панелі інструментів блоку вище.

    Вирівняйте центр своєї кнопки в редакторі блоків WordPress

    Далі ви можете налаштувати стиль кнопки, змінити колір тла та змінити текст тексту на панелі налаштувань блоку з правого боку.

    Виберіть стиль кнопки в налаштуваннях блоку WordPress

    Можна вибрати три стилі кнопок: за замовчуванням, контур та квадрат. Ви можете спробувати кожен, натиснувши на них і вибрати той, який найкраще виглядає.

    Розділ Налаштування кольору включає п’ять варіантів кольорів як для фону кнопки, так і для тексту кнопки. Не тільки це, але ви також можете використовувати власний колір на ваш вибір, натиснувши опцію Custom Color.

    Виберіть спеціальний колір вашої кнопки WordPress

    Після того, як ви будете задоволені дизайном кнопок, ви можете зберегти свою публікацію або опублікувати, щоб побачити попередній перегляд.

    Ось як це виглядало на нашому демо-сайті.

    Попередній перегляд кнопки WordPress

    Бонус: Якщо ви хочете побачити, наскільки добре працюють ваші кнопки, тоді вам слід скористатися MonsterInsights. У ньому є вбудоване відстеження подій для партнерських посилань, вихідних посилань та спеціальних подій, тож ви можете бачити, наскільки добре працюють ваші кнопки. Більш детально див. Важливі маркетингові показники, які потрібно відстежувати в WordPress.

    Створення кнопки WordPress в класичному редакторі

    Хоча редактор блоків Гутенберга швидший і простіший, багато користувачів все ще віддають перевагу старому редактору класичного WordPress. Якщо ви один з них, то вам потрібно знайти альтернативне рішення, щоб додати кнопки на вашому сайті WordPress.

    В основному доступні три варіанти додавання кнопок у WordPress Classic Editor.

    1. Кнопка Додати в WordPress з кодом HTML / CSS.
    2. Додайте кнопку в WordPress за допомогою плагіна для короткого коду кнопки WordPress.
    3. Додайте кнопку в WordPress, не використовуючи шорткоди.

    З трьох варіантів перший – метод кодування. Вам потрібно буде написати HTML / CSS-код і додати на свій веб-сайт, де вам потрібна кнопка. Це не для початківців.

    Другий варіант – це найбільш часто використовуваний метод. Це тому, що більшість плагінів WordPress надають штрихкоди для додавання кнопок.

    Третій варіант є найкращим, оскільки він дозволяє легко додавати кнопки до своїх публікацій та сторінок, не запам’ятовуючи короткий код.

    Давайте розглянемо, як додати кнопки в WordPress, не використовуючи шорткоди.

    Перше, що вам потрібно зробити, це встановити та активувати плагін Forget About Shortcode Buttons. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

    Після активації плагіна створіть нову публікацію або відредагуйте існуючу. У редакторі ви побачите нову кнопку у візуальному редакторі з написом кнопки Вставити.

    Вставити значок кнопки в класичний редактор WordPress

    Щоб вставити нову кнопку у свій пост, потрібно натиснути кнопку Вставити. Це відкриє спливаюче вікно, де ви можете створити свою нову кнопку.

    Введіть текст та URL-адресу кнопки в класичний редактор

    Спочатку потрібно додати текст кнопки та URL-адресу кнопки. Додаючи текст кнопки, ви можете побачити попередній попередній перегляд у вікні нижче.

    Далі ви можете додати тег, що не працює нижче, і відкрити його на новій вкладці, натиснувши на параметри прапорця нижче.

    Після цього ви можете вибрати піктограму для своєї кнопки. Якщо ви натиснете на вкладку Піктограми, ви зможете побачити піктограми, які ви можете додати перед текстом або після нього у ваших кнопках..

    Додайте значок до кнопки в класичному редакторі

    Ці значки насправді є шрифтами значків (дізнайтеся, як використовувати шрифти значків у редакторі WordPress Post).

    Далі ви можете вибрати колір тексту та колір тла для своєї кнопки, натиснувши на значок «Колір».

    Змінення кольору фону кнопки в класичному редакторі WordPress

    Після цього натисніть спадне меню, щоб вибрати стиль кнопки. Готові до використання вісім різних стилів кнопок.

    Виберіть стиль кнопки в класичному редакторі WordPress

    Аналогічно, ви також можете вибрати розмір кнопки від надмірного до надмірного.

    Після того, як ви задоволені зовнішнім виглядом, просто натисніть на кнопку Оновити.

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

    Ви також можете встановити вирівнювання кнопок, просто вибравши текст кнопки та використовуючи кнопки панелі інструментів у класичному редакторі.

    Центруйте вирівнювання кнопки в класичному редакторі

    Подвійне натискання на кнопку призведе до появи спливаючої кнопки Вставити кнопку, і ви можете заново змінити кнопку, якщо хочете.

    Після того, як ви будете задоволені його дизайном, ви можете опублікувати або оновити свою публікацію і побачити її в дії. Ось так з’явилася фантастична кнопка на нашому демонстраційному веб-сайті WordPress.

    Попередній перегляд кнопки - вбудований класичний редактор

    Додавання кнопки “Клацніть для дзвінка” в WordPress

    Окрім звичайних кнопок заклику до дії, ви також можете додавати на своєму веб-сайті кнопки “натискання на дзвінок”, щоб збільшити кількість потенційних клієнтів та переходів.

    Кнопка натискання на дзвінок – це певний тип кнопки заклику до дії, який дозволяє вашим користувачам телефонувати в вашу команду лише натисканням.

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

    Оскільки кількість користувачів смартфонів зростає, додавання кнопок для виклику зараз стає ще більш актуальним.

    Якщо у вас немає ділового телефону, ви можете розглянути можливість отримання віртуального номера телефону для бізнесу.

    З огляду на це, давайте поглянемо, як додати крок за кроком кнопок дзвінка в WordPress.

    Перше, що вам потрібно зробити, це встановити та активувати плагін WP Call Button. Детальні вказівки ви можете ознайомитись з нашим покроковим посібником про те, як встановити плагін WordPress.

    Після активації потрібно відвідати Налаштування »Кнопка виклику WP сторінки, щоб налаштувати параметри плагіна та створити кнопку натискання на дзвінок.

    Налаштування клейкої кнопки виклику в WordPress

    Спочатку ви побачите налаштування Клейкої кнопки виклику. Клейка кнопка виклику – це функція, оптимізована для перетворення, яка переміщує кнопку виклику разом з користувачами під час перегляду вашого сайту.

    Для початку можна активувати стан кнопки «Зателефонувати зараз». Просто натисніть на перемикач перемикача, щоб активувати це.

    Після цього потрібно ввести свій номер телефону. Кнопка виклику WP має поле смарт-номера телефону з кодом вашої країни. Просто виберіть свою країну та введіть номер свого підприємства.

    Якщо у вас немає номера компанії, ви можете отримати його від Nextiva. Це надійний бізнес-постачальник VoIP.

    Далі ви можете змінити текст кнопки виклику, вибрати положення кнопки виклику та колір.

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

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

    WordPress Натисніть на кнопку виклику

    Окрім клейких кнопок виклику, ви також можете додавати статичні кнопки дзвінків на ваші сторінки WordPress, повідомлення та бічні панелі за допомогою цього плагіна.

    Якщо ви використовуєте новий редактор блоку WordPress, то ви можете легко додати кнопку виклику зараз на своїх сторінках, використовуючи блок кнопки WP Call Call.

    Створіть нову сторінку або відредагуйте існуючу сторінку та додайте блок Кнопка WP-дзвінка у редактор сторінки.

    Додавання блоку кнопок виклику WP в WordPress

    Після цього ви можете налаштувати текст кнопки, колір кнопки, колір тексту, розмір шрифту та показати чи приховати піктограму телефону.

    Настроювання кнопки виклику в редакторі WordPress

    Після того, як ви будете задоволені його дизайном, ви можете опублікувати або оновити свою сторінку.

    Якщо ви використовуєте класичний редактор WordPress, тоді вам потрібно скористатися генератором кнопки статичного виклику, щоб отримати короткий код. Йти до Налаштування »Кнопка виклику WP і натисніть на меню кнопки статичного виклику вгорі.

    Статичні кнопки виклику в налаштуваннях WordPress

    Просто налаштуйте параметри кнопок та скопіюйте короткий код. Після цього ви можете використовувати короткий код у будь-якій публікації чи сторінці вашого веб-сайту.

    Плагін кнопки виклику WP також дозволяє додавати кнопку виклику на бічній панелі WordPress та інших областях, готових до віджетів.

    Просто перейдіть до Зовнішній вигляд »Широкі і перетягніть віджет кнопки виклику WP до області, готової до віджетів, де потрібно показати кнопку виклику.

    Віджет бічної панелі кнопки виклику WordPress

    Тепер ви можете додати заголовок, опис та налаштувати кнопку виклику з розділу Додаткові налаштування. Після завершення збережіть віджет.

    Це воно! Якщо ви хочете переглянути докладніший підручник, то ви можете перевірити наш покроковий посібник про те, як додати кнопку WordPress для додавання кнопки “дзвінок для виклику”..

    Порада про бонус для додавання спеціальних кнопок у WordPress

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

    У цьому випадку ми рекомендуємо використовувати плагін для конструктора сторінок WordPress, як перетягування, як Beaver Builder або Divi.

    Ці розробники сторінок допоможуть вам створити власні цільові сторінки із фантазійними кнопками заклику до дії саме так, як вам цього хочеться.

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

    Ми рекомендуємо використовувати MonsterInsights. У ньому є вбудоване відстеження подій для партнерських посилань, вихідних посилань та спеціальних подій, тож ви можете бачити, наскільки добре працюють ваші кнопки. Більш детально див. Важливі маркетингові показники, які потрібно відстежувати в WordPress.

    Ми сподіваємося, що ця стаття допомогла вам навчитися легко додавати кнопки в WordPress. Ви також можете побачити наш список найкращих плагінів WordPress та найкращих маркетингових послуг електронної пошти для малого бізнесу.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me