Pop-up — вікно, що спливає на екрані відвідувача після якоїсь дії (наприклад, натискання на кнопку, клік на посилання або просто завантаження сторінки). Pop-up спливає поверх сайту, і поки відвідувач його ви не закриє, інших дій на сайті він зробити не зможе.

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

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



Важливо: ця опція доступна тільки для сайтів із платними підписками.

Додавання pop-up вікна

Щоб додати спливаюче вікно, в редакторі сайту відкрийте вкладку Pop-ups на панелі керування:

Натисніть на + Додати Pop-up унизу меню:

У відкритому вікні ви побачите всі доступні варіанти спливаючих блоків в галереї. Виберіть доречний і натисніть на нього, щоб додати на сайт:

Підказка: ви також можете обрати кастомний блок щоб створити pop-up з нуля.
Важливо: спливаючі вікна (попапи) не мають функції багатомовності, тому їх необхідно створювати окремо, а потім відображати конкретні попапи на конкретних сторінках мовних версій (або підключати до певних елементів на сторінках як дія при натисканні).

Керування списком Pop-ups

Відкрийте вкладку Pop-ups на панелі керування:

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

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

Примітка: під час створення копії вибраного спливаючого вікна продублюється лише вміст блоку, але не налаштування.

Крім натискання на хрестик в кутку блоку, користувач може закрити pop-up після натискання поза вікном або на ESC на клавіатурі. Щоб включити цю функцію, натисніть на «шестерню» біля потрібного спливаючого вікна в списку і включіть опцію Закривати pop-up за натиском поза вікном або клавіші Escape у вкладці Поведінка:

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

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

Зміна вигляду pop-up

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

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

Ви можете змінити ширину свого спливаючого вікна окремо. Для цього наведіть курсор на блок у режимі редагування та натисніть Налаштування pop-up:

Перейдіть до вкладки Вигляд і виберіть потрібну ширину вікна:

Ви також можете налаштувати колір та розмір іконки виходу у своєму спливаючому вікні:

Якщо ви хочете створити повноцінне модальне вікно, ви можете додати шапку до свого pop-up та обрати її колір фону:

Примітка: текст у шапці береться з назви вашого pop-up — тої, що ви бачите в редакторі.

Додавання анімації до спливаючого вікна

Анімація чудово підходить для декоративних цілей. Ви можете активувати динамічний вигляд елементів у налаштуваннях спливаючих вікон.

Щоб додати анімацію до спливаючого вікна, перейдіть до вкладки Анімація у Налаштуваннях pop-up і виберіть потрібний тип:

Не забудьте опублікувати сайт, щоб зміни вступили в силу.

Робота з декількома спливаючими вікнами

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

Для цього відкрийте меню Pop-ups і змініть порядок, перетягуючи вікна в необхідній послідовності:

Примітка: pop-up, який знаходиться в нижній частині списку, відкриється на сайті першим. Решта вікон, які знаходяться в списку вище, будуть чекати завершення показу попереднього pop-up.

У налаштуваннях для кожного pop-up ввімкніть опцію Почергове відображення у вкладці Поведінка:

Підказка: для подальшого налаштування тригерів появи pop-up на сайті зверніться до статті Налаштування тригерів для pop-up вікна.

Оновлено: 08/01/2024