23 АВГУСТА 2023

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

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

Когда пригодится блок-модификатор
Вам нужен попап, а базовые решения в библиотеке не подходят. Например, вы хотите сделать динамическое меню, нестандартную подсказку по клику, маркетинговый попап и многое другое. Смотрите подробный видеогид по работе с блоком.
Как пользоваться блоком-модификатором Т1093?
1
Добавьте на страницу Zero Block и подготовьте дизайн блока, который будет всплывать.
2
Добавьте на страницу блок-модификатор Т1093 из категории «Другое».
3
В этом блоке во вкладке Контент задайте id нулевого блока из первого шага. Там же задайте ссылку на попап.
4
Подумайте, какой элемент на странице будет использоваться в качестве триггера для открытия попап. Это может быть кнопка или текст в любом блоке. Задайте этому элементу ссылку на попап из пункта 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 читайте в справочном центре.

Читайте также

Появились поиск, сортировка и массовые действия со страницами.

Создайте курс для широкой аудитории или опубликуйте лекции для сотрудников с помощью новой функции.
Made on
Tilda