Тип и оформление окна
Вкладка «Контент» состоит из трёх частей: «Основное», стили окна и «Блоки». О блоках — в разделе Блоки.
Основное
- Название — внутреннее, на сайте не показывается.
- Тип — Popup, Toast или Banner (см. ниже).
- Устройство — для какого устройства вы сейчас настраиваете оформление: «Десктоп» или «Мобильные».
Предпросмотр в редакторе совпадает с реальным видом примерно на 90 %: для точной настройки ориентируйтесь на окно на сайте.
Три типа окон
Popup — модальное окно: фон затемняется, прокрутка страницы блокируется. Подходит для важных предложений и форм.
Toast — окно без затемнения и без блокировки прокрутки. Менее навязчиво: уведомления и напоминания.
Banner — контентный блок, встроенный в страницу сайта. У баннера три позиции: «Above site» (над сайтом), «Under the site» (под сайтом) и «In the helper» (в месте, где вы вставили хелпер вывода).
Для позиции «In the helper» вставьте в шаблон в нужное место код, подставив ID окна из его карточки:
{$wa->popup->output('ID_ПОП-АП')}Готовый код с вашим ID приложение показывает в поле «Output helper». Код оборачивается в проверку приложения так же, как и хелпер подключения.
Стили окна
Стили задаются отдельно для каждого устройства: переключайте поле «Устройство» и настраивайте десктоп и мобильную версию.
| Поле | Что задаёт |
|---|---|
| Вариант | Только для Popup и Toast на устройстве «Мобильные»: вариант оформления 1 или 2 |
| Анимация при открытии | Для Popup и Toast. Как окно появляется: fadeIn, bounceIn, slideInUp, zoomIn и другие; none — без анимации |
| Анимация закрытия | Для Popup и Toast. Как окно исчезает: fadeOut, zoomOut и другие; none — без анимации |
| Ширина, Высота | В px или %. Чтобы вернуть значение none, удалите число |
| Скругление углов | В px |
| Фон | Цвет фона для типа Popup |
| Цвет декоративной линии | Только для мобильных Popup и Toast с вариантом 1: цвет декоративной линии окна, которая видна на снимке ниже в верхней части окна |
| Цвет | Цвет окна |
| Позиция | Положение окна на сайте. Для Popup и Toast: по центру, сверху, снизу, слева, справа и четыре угла. Для Banner — три позиции из списка выше |
| Внешние отступы | Сверху, справа, снизу, слева (px). Для Popup и Toast |
| CSS | Дополнительные CSS-стили окна. Инструкция по селекторам — в приложении |
Цвета можно вводить кодом (например, #ffffff) или выбирать в палитре.
Мобильная версия
Окно, настроенное для десктопа, может выглядеть на телефоне иначе. Переключите «Устройство» на «Мобильные» и задайте размеры, позицию и стили. Какое окно на каком устройстве показывать, определяет условие «Показать на устройствах».
