Настройки веб-всплывающего окна

Используйте панель Настройки всплывающего окна, чтобы задать, как выглядит всплывающее окно и где оно появляется. Панель доступна и в веб-контенте, и в веб-формах.

Панель состоит из двух частей:

Общие настройки: внешний вид и расположение всего всплывающего окна.
Текущая страница: медиа и размер для редактируемой страницы.

Вкладки страниц и кнопка + Добавить страницу находятся в верхней части панели. См. Несколько страниц.

Изображения и видео

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

Если макет включает один или несколько медиаблоков, откройте Текущая страница. Каждый медиаблок имеет предварительный просмотр и элементы управления.

Нажмите Изменить изображение, чтобы выбрать файл из Медиахранилища вашего проекта, или вставьте или отредактируйте URL изображения напрямую.
Установите, как изображение заполняет свою рамку, с помощью Вписать (Естественный, Заполнить или По размеру). Вписать не отображается для фонового изображения, которое всегда покрывает свою область.
При желании смягчите изображение с помощью Размытие (от 0 до 20 пикселей).
Только для фоновых медиа используйте Затемнение (от 0 до 100%), чтобы добавить темный слой, чтобы текст поверх изображения оставался читаемым.

Изображение для темной темы

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

При включенной темной теме каждый блок изображения добавляет строку Изображение для темной темы.

Нажмите Изменить изображение или установите URL изображения (темная тема), чтобы выбрать другое изображение для темного режима (например, логотип с темными чернилами).
Оставьте поле пустым, чтобы в обеих схемах отображался светлый URL изображения.

Изображение для темной темы применяется везде, где отображается изображение этого блока, включая фоновое изображение или постер видео.

Видео

Используйте видео вместо изображения в медиаблоке.

Установите Медиа в Видео.
Введите URL видео: прямую ссылку на видеофайл. Видео принимает только внешний URL. Вы не можете загрузить видео в Медиахранилище. Экспортируйте его как MP4 (видео H.264, аудио AAC) с включенным “быстрым стартом” (иногда называемым “веб-оптимизированным”), чтобы браузер мог начать воспроизведение до полной загрузки файла. Если URL не загружается, посетители увидят только постер.
Зациклить включено по умолчанию, поэтому видео воспроизводится непрерывно. Отключите его, чтобы остановить после одного воспроизведения.
Включите Показывать элементы управления, чтобы отобразить встроенные в браузер элементы управления воспроизведением, паузой и громкостью. Видео всегда начинается без звука. Без этой опции у посетителей не будет возможности включить звук.
При желании установите URL постера: изображение, которое отображается во время загрузки видео. Рекомендуется. В старом скрипте всплывающих окон, который не поддерживает видео, постер — это единственное, что отображается. Если оставить поле пустым, посетитель ничего не увидит там, где должно быть видео.

Макет медиа

Некоторые макеты добавляют раздел Переменные шаблона с настройками размещения для медиаблока. Раздел появляется только тогда, когда текущий макет имеет подобные настройки.

Когда в макете медиа находится рядом с текстом, установите:

Ширина изображения: доля ширины всплывающего окна в процентах.
Позиция изображения: Слева или Справа.

В макете нижней панели раздел предлагает Ширина кнопок вместо элементов управления изображением.

Размер и стиль всплывающего окна

Задайте размер всплывающего окна, скругление его углов, тень и то, как оно появляется.

В разделе Текущая страница → РАЗМЕР оставьте Ширина и Высота пустыми для всплывающего окна, которое подстраивается под свой контент, или установите фиксированный размер в пикселях. Во всплывающем окне с несколькими страницами каждая страница имеет свой собственный размер.
Включите Полная высота, когда страница должна заполнять доступную высоту.
В Общих настройках установите Радиус скругления углов и Тень для скругления углов и тени всплывающего окна.
Выберите Анимация: как появляется всплывающее окно (По умолчанию, Нет, Появление или Сдвиг).

При включенной темной теме Тень следует переключателю схем солнце/луна. Тень, настроенная для светлой страницы, часто невидима на темной, поэтому для них обычно требуются разные значения.

Чтобы редактировать тень для темной палитры отдельно от светлой:

Установите переключатель солнце/луна в положение Темная.
Отредактируйте Тень.

Если оставить темную тень без изменений, в обеих схемах используется значение Тень для светлой темы.

Цвета

Задайте цвета всплывающего окна: фон, акцентный цвет кнопок и цвет текста.

Нажмите Цвета, чтобы развернуть цветовую палитру всплывающего окна.
Установите Фон и Акцент (кнопки) для фона всплывающего окна и акцентного цвета, применяемого к кнопкам.
Установите Текст и Вторичный текст для основного текста и для вторичного текста, такого как подписи и заголовки.
Если в макете есть текст поверх фонового изображения, установите Текст поверх изображения для этого текста. В веб-форме этого цвета нет.

Темный режим

Темный режим дает всплывающему окну вторую палитру для посетителей, у которых устройство настроено на темную цветовую схему.

В Цветах включите Включить темную тему. Если эта опция отключена, всплывающее окно всегда будет отображаться с использованием светлой палитры, указанной выше, для каждого посетителя.
Используйте переключатель солнце/луна над полями цветов, чтобы выбрать, какую палитру вы редактируете. Холст перерисовывается в этой схеме.
Нажмите Авто из светлой, чтобы (пере)создать темную палитру из текущих светлых цветов. Фоны и поверхности становятся темными, а текст — светлым. Акцент и Текст поверх изображения переносятся без изменений. После этого отредактируйте любое из пяти полей для точной настройки.

Отключение Включить темную тему сохраняет темную палитру. Повторное включение восстанавливает ваши изменения, а не генерирует их заново.

Тот же переключатель солнце/луна появляется рядом с Закрыть предпросмотр (Esc), когда вы открываете Предпросмотр на всплывающем окне с включенной темной темой. Вы можете проверить обе палитры и в полноразмерном предпросмотре.

Браузер посетителя решает, какую палитру он увидит, основываясь на настройке темного режима на уровне ОС. На самом всплывающем окне нет переключателя темного/светлого режима. Сайт может принудительно установить одну схему для всех, независимо от настроек ОС. См. webPopups.colorScheme в документации Web SDK.

Темная тема также влияет на изображения, тень и наложение на этой панели. Каждое из них следует тому же переключателю схем солнце/луна после включения.

Размещение и наложение

Выберите, где на странице появляется всплывающее окно и затемняется ли страница позади него.

В РАЗМЕЩЕНИИ выберите, где всплывающее окно будет привязано на странице, используя сетку Позиция 3×3.
Установите Отступ от края на расстояние в пикселях от выбранного края.
В НАЛОЖЕНИИ включите Затемнять страницу позади, чтобы затемнить остальную часть страницы, пока отображается всплывающее окно, в обеих схемах. Отключение этой опции полностью убирает затемнение, включая любые значения для темной схемы, установленные ниже.
Установите Цвет и Непрозрачность для наложения (непрозрачность от 0 до 1).

При включенной темной теме Цвет и Непрозрачность также следуют переключателю схем солнце/луна. Установите переключатель в положение Темная, чтобы задать затемнению свой цвет и интенсивность для темной палитры. Пока вы не отредактируете их там, темная схема будет отображать те же Цвет и Непрозрачность, что и светлая.

Темная
Светлая