/ Попап вікна в WordPress

25 Червня, 2020 1461
Категорії: Статті

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

В трійку наших лідерів по зручності та універсальності входять наступні плагіни:

Навігація по статті:

Popup Maker

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

В самому шаблоні є заголовок та поле для внесення будь-якої інформації – від тексту та картинок до шорткодів інших плагінів чи білдерів. В плагіні ми можемо налаштувати місце виведення попапу. Вибір в цьому плані дуже великий. Це може бути як: окрема сторінка, обраний список сторінок, всі записи, перелік ID записів, тощо. Окремо у wordpress є функція виведення спливаючого вікна на мобільних та планшетах.

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

1 - Попап вікна в WordPress

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

2 - Попап вікна в WordPress

Найбільш часто попап вікна використовуються для реалізації спливаючих контактних форм. За допомогою цього плагіну легко створити нове попап вікно та додати в нього шорткод контактної форми. Крім того, в редакторі популярного плагіну контактних форм Contact form 7 з’являється вкладка налаштування появи Popup після надсилання контактних даних (сповіщення).

3 - Попап вікна в WordPress
4 - Попап вікна в WordPress
5 - Попап вікна в WordPress

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

6 - Попап вікна в WordPress
7 - Попап вікна в WordPress
8 - Попап вікна в WordPress

Розробник пропонує преміум-підписку, з якою у вас з’являється доступ до понад десятка корисних доповнень до плагіну. Але всі основні і важливі функції плагіну працюють і без неї.

9 - Попап вікна в WordPress

Popup Builder

Плагін Popup Builder зручний та інтуїтивно зрозумілий у використанні. Після його встановлення в меню адмінпанелі з’явиться окремий розділ для створення та налаштування спливаючих вікон при вході на сайт. Безкоштовно доступно 4 типа вікон, чого може бути достатньо для більшості задач. В платному варіанті плагіну відкривається доступ більш ніж до двох десятків додаткових варіантів.

10 - Попап вікна в WordPress
11 - Попап вікна в WordPress
12 - Попап вікна в WordPress

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

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

13 - Попап вікна в WordPress

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

14 - Попап вікна в WordPress
15 - Попап вікна в WordPress

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

16 - Попап вікна в WordPress

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

Popups

Ще один безкоштовний плагін по створенню попап вікон так і називається – Popups. Простий у користуванні плагін, в якому весь вміст ви вносите одразу в стандартному візуальному редакторі wordpress. При цьому, можливе використання шорткодів та інших елементів, чи додаткового html коду.

17 - Попап вікна в WordPress

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

18 - Попап вікна в WordPress

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

19 - Попап вікна в WordPress

У випадку, якщо попап має з’являтись при кліку на кнопку, потрібно залишити відображення на всіх сторінках, а запуск змінити на ручний та використовувати шорткод, що формується після збереження створеної вами форми.

20 - Попап вікна в WordPress

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

21 - Попап вікна в WordPress
22 - Попап вікна в WordPress

Розробники плагіну принципово переробили його та випустили окремим продуктом. Оновлена назва wordpress popup plugin, який існує незалежно від попередньої версії. Всі можливості Popups містяться й тут, але оформлені з акцентом на візуалізацію всього процесу і з розбитими по вкладкам налаштуваннями. Комусь це може здатись зручнішим, тож при бажанні можна спробувати.

23 - Попап вікна в WordPress
24 - Попап вікна в WordPress

Висновки

Реалізувати спливаюче вікно в wordpress досить просто та швидко. Безкоштовні та функціональні плагіни дуже допомагають в цій справі. Розглядати платні варіанти Popup плагінів варто лише за умови, якщо вам дійсно необхідні певні додаткові функції, яких ви не знайшли в безкоштовних версіях.

хочу обговорити проект