23 АВГУСТА 2023

Zero Block во всплывающем окне — новый блок T1093 в библиотеке

Блок позволяет превратить любой Zero Block в попап. В библиотеке модификатор можно найти под номером Т1093 «Popup: Zero Block в попапе» в категории «Другое».

Когда пригодится блок-модификатор

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

Как пользоваться блоком-модификатором Т1093?

Добавьте на страницу Zero Block и подготовьте дизайн блока, который будет всплывать.

Добавьте на страницу блок-модификатор Т1093 из категории «Другое».

В этом блоке во вкладке Контент задайте id нулевого блока из первого шага. Там же задайте ссылку на попап.

Подумайте, какой элемент на странице будет использоваться в качестве триггера для открытия попап. Это может быть кнопка или текст в любом блоке. Задайте этому элементу ссылку на попап из пункта 3.

Если вы хотите, чтобы попап открывался сразу после загрузки страницы, поставьте галочку в соответствующем чекбоксе в Настройках блока. Там же можно настроить внешний вид всплывающего окна: выравнивание, размытие фона, детали анимации и многое другое.

Настройки блока Т1093 «Popup: Zero Block в попапе» из категории «Другое»

Подробнее о блоке читайте в Справочном центре.

Подсказки по работе с блоком

Если вы создаете меню с помощью блока, то в настройках блока Т1093 можно:

задать позиционирование. Самый распространенный сценарий — задать выравнивание по верху;
убрать крестик, по клику на который меню закрывается, либо задать для него цвет;
если цвет затемнения или эффект размытия вам не нужен, удалите значения из этих полей.

Если вы создаёте попап:

задайте темный цвет фона в настройках блока Т1093;
цвет крестика сделайте светлым, чтобы он не сливался с фоном;
ширину и высоту попапа вы можете регулировать внутри используемого зеро-блока.

Примеры использования блока

Показываем несколько пошаговых инструкций, как добавить меню на сайт с помощью блока Т1093. Вы также можете добавить показанный пример в свой проект, используя id шаблона.

Полноэкранное меню

Как повторить анимацию
Перейдите в Настройки блока Т1093 и задайте следующие параметры:

Анимация появления – Появление справа
Анимация появления в мобильной версии – Появление сверху
Временная функция анимации – Quart: Ease In Out
Скорость появления анимации, сек – 0,6

Вы можете скопировать шаблон страницы с этой анимацией к себе в проект, используя Template ID 38393462. Не забудьте изменить id всплывающего блока в Т1093 на вкладке «Контент». Подробнее о Template ID читайте в справочном центре.

Меню на половину экрана с блюром

Как повторить анимацию
Перейдите в Настройки блока Т1093 и задайте следующие параметры:

Размытие фона – 10px
Анимация появления – Появление сверху
Временная функция анимации – Quart: Ease In Out
Скорость появления анимации, сек – 0,5

Вы можете скопировать шаблон страницы с этой анимацией к себе в проект, используя Template ID 38515322. Не забудьте изменить id всплывающего блока в Т1093 на вкладке «Контент». Подробнее о Template ID читайте в справочном центре.

Меню второго уровня

Как повторить анимацию
Перейдите в Настройки блока Т1093 и задайте следующие параметры:

Popup: цвет фона – #000000
Popup: непрозрачность фона – 40%
Анимация появления – Появление сверху
Временная функция анимации – Quart: Ease In Out
Скорость появления анимации, сек – 0,6
Z-index – 9998 (значение должно быть меньше, чем у основного меню)

Вы можете скопировать шаблон страницы с этой анимацией к себе в проект, используя Template ID 38524326. Не забудьте изменить id всплывающего блока в Т1093 на вкладке «Контент». Подробнее о Template ID читайте в справочном центре.