> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Додавання спливаючого вікна (pop-up)

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

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

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

${youtube}[Додавання і налаштування pop-up](h79iPFdHpog)

||| ${color}[#f97700](Важливо:) ця опція доступна тільки для сайтів із платними підписками.

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

1. Щоб додати спливаюче вікно, в редакторі сайту відкрийте вкладку **Pop-ups** на панелі керування: 
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-100_cmhqsj.png)
2. Натисніть на **+ Додати Pop-up** унизу меню:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-101_15uvomb.png)
3. У відкритому вікні ви побачите всі доступні варіанти спливаючих блоків в галереї. Виберіть доречний і натисніть на нього, щоб додати на сайт:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-100_uo1awy.jpg)
| ${color}[#1aa900](Підказка:) ви також можете обрати [кастомний блок](https://help.weblium.com/uk/article/dodavannya-kastomnogo-bloku-2t4j88/) щоб створити pop-up з нуля.
||| ${color}[#F97700](Важливо:) спливаючі вікна (попапи) не мають функції багатомовності, тому їх необхідно створювати окремо, а потім відображати конкретні попапи на конкретних сторінках мовних версій (або підключати до певних елементів на сторінках як дія при натисканні).

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

1. Відкрийте вкладку **Pop-ups** на панелі керування: 
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-102_57nkmi.png)
Тут ви можете побачити список усіх спливаючих вікон, доданих на ваш сайт. Вони сортуються за датою створення — у верхній частині списку розташовані спливаючі вікна, створені в першу чергу.

2. Ви можете перейменувати, продублювати або видалити спливаюче вікно зі свого вебсайту, натиснувши на три крапки біля нього:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-103_1t0jqgo.png)
|| ${color}[#ffa800](Примітка:) під час створення копії вибраного спливаючого вікна продублюється лише вміст блоку, але не налаштування.

3. Крім натискання на хрестик в кутку блоку, користувач може закрити pop-up після натискання поза вікном або на ESC на клавіатурі. Щоб включити цю функцію, натисніть на «шестерню» біля потрібного спливаючого вікна в списку і включіть опцію **Закривати pop-up за натиском поза вікном або клавіші Escape** у вкладці **Поведінка**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/group-132_18e5mxp.png)
4. Щоб перейти в режим редагування, клацніть на потрібному спливаючому вікні у списку.

|| ${color}[#ffa800](Примітка:) щоб вийти з режиму редагування спливаючого вікна, натисніть на будь-яку сторінку в меню сторінок або створіть нове спливаюче вікно.

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

Усі спливаючі вікна в галереї повністю адаптивні і легко піддаються редагуванню. Це означає, що ви зможете [додати потрібні елементи](https://help.weblium.com/uk/article/dodavannya-elementiv-1ebqukm/), змінюючи структуру блоку самостійно.

Pop-up працюють за таким же принципом, як інші блоки в галереї: ви можете налаштувати їхній дизайн, фон, анімацію, додати зображення, відео тощо. Стаття про [Зміну дизайну блоку](https://help.weblium.com/uk/article/zmina-dizajnu-bloku-1tpp5tl/) допоможе вам перейти до редагування спливаючого вікна.

1. Ви можете змінити ширину свого спливаючого вікна окремо. Для цього наведіть курсор на блок у режимі редагування та натисніть **Налаштування pop-up**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-100_l2572x.png)
2. Перейдіть до вкладки **Вигляд** і виберіть потрібну ширину вікна:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-100-1_ai1n8f.png)
3. Ви також можете налаштувати колір та розмір іконки виходу у своєму спливаючому вікні:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-100-1_1yqgvqk.jpg)
4. Якщо ви хочете створити повноцінне модальне вікно, ви можете додати шапку до свого pop-up та обрати її колір фону:
 ![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-100-2_jcwo7b.jpg)
|| ${color}[#ffa800](Примітка:) текст у шапці береться з назви вашого pop-up — тої, що ви бачите в редакторі.

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

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

1. Щоб додати анімацію до спливаючого вікна, перейдіть до вкладки **Анімація** у **Налаштуваннях pop-up** і виберіть потрібний тип:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-100-2_15zdd0j.png)
Не забудьте [опублікувати сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), щоб зміни вступили в силу.

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

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

1. Для цього відкрийте меню **Pop-ups** і змініть порядок, перетягуючи вікна в необхідній послідовності:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/zapis-ekrana-2022-05-10-v-0614_d7hi2m.gif)
|| ${color}[#ffa800](Примітка:) pop-up, який знаходиться в нижній частині списку, відкриється на сайті першим. Решта вікон, які знаходяться в списку вище, будуть чекати завершення показу попереднього pop-up.

2. У налаштуваннях для кожного pop-up ввімкніть опцію **Почергове відображення** у вкладці **Поведінка**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/group-130_emoavt.png)
| ${color}[#1aa900](Підказка:) для подальшого налаштування тригерів появи pop-up на сайті зверніться до статті [Налаштування тригерів для pop-up вікна](https://help.weblium.com/uk/article/nalashtuvannya-trigeriv-dlya-pop-up-vikna-1eau77g/).