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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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