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

Используйте панель Настройки всплывающего окна, чтобы настроить стиль и расположение макета контента веб-всплывающего окна. Вкладки страниц и кнопка + Добавить страницу находятся в верхней части панели. См. Работа с несколькими страницами.

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

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

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

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

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

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

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

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

Видео

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

Макет медиа

Некоторые макеты также добавляют раздел Переменные шаблона с настройками размещения для медиаблока. Установите Ширина изображения (доля ширины всплывающего окна в процентах) и Позиция изображения (Слева или Справа), когда в макете медиа находится рядом с текстом.

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

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

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

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

Цвета

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

Темный режим

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

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

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

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

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

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

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

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

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