Перейти к содержанию

Настройка параметров шаблона In-App сообщения

Эти настройки применяются ко всему шаблону In-App сообщения сразу, а не к отдельному блоку. Сначала откройте или создайте шаблон во встроенном редакторе (Контент → In-App сообщения), затем используйте Настройки и Настройки In-App, как описано ниже.

Настройка стилей для всего шаблона

Anchor link to

Настройки шаблона управляют стилями для всего In-App сообщения: размер и фон документа, внешний вид всплывающего окна и стили по умолчанию для блоков.

Откройте вкладку Настройки на правой панели.

Свернутые разделы настроек от «Документ» до «Разделитель» на правой панели

Начните с общего вида, затем размера, а после — настроек по умолчанию для новых блоков:

  1. Задайте Цветовую схему и Типографику, чтобы цвета и шрифты были единообразными во всем шаблоне.
  2. Задайте Документ и Всплывающее окно для определения размера, полей, фона и того, как сообщение располагается на затемненном фоне.
  3. Используйте разделы настроек по умолчанию, только если вы хотите, чтобы новые блоки автоматически соответствовали шаблону.

На холсте измените отдельный блок, если эта часть должна выглядеть иначе. Настройки по умолчанию применяются везде, где они не переопределены отдельным блоком. Чтобы очистить переопределения стилей в шаблоне и вернуться к настройкам по умолчанию, используйте Сбросить пользовательские стили в меню ⋮ на верхней панели. См. Создание In-App сообщений во встроенном редакторе.

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

Anchor link to

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

Документ

Anchor link to

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

Чтобы изменить ширину всплывающего окна на телефоне, используйте эти два поля в разделе Документ.

Макс. ширина (px) — это максимальная допустимая ширина всплывающего окна в пикселях. На большом экране всплывающее окно не будет превышать это значение.

Боковые поля (px) находится прямо под Внутренними отступами. Оно задает пустое пространство слева и справа от всплывающего окна. Одно значение применяется к обеим сторонам. Измените это поле, если хотите, чтобы всплывающее окно выглядело шире или уже:

  • Увеличьте значение, чтобы оставить больше пустого пространства и сделать всплывающее окно уже.
  • Уменьшите значение, чтобы сделать всплывающее окно шире.
  • Если ввести отрицательное число, редактор будет считать его равным 0.
Открытые настройки документа с максимальной шириной, внутренними отступами, боковыми полями 0 px и подсказкой об эффективной ширине

Новые шаблоны начинаются с боковых полей в 0 px, поэтому всплывающее окно заполняет всю ширину экрана.

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

Всплывающее окно

Anchor link to

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

Настройки всплывающего окна с радиусом скругления углов и цветом наложения в панели настроек

Цветовая схема и типографика

Anchor link to

В Цветовой схеме задайте именованные цветовые роли (заголовок, акцент, ссылки, фон, границы и т.д.). Эти роли обновляют цвета во всем шаблоне одновременно. Существующие блоки сохраняют цвета, которые вы уже задали для них.

В Типографике задайте семейство шрифтов и размеры по умолчанию для текста в шаблоне.

Вариант для темного режима

Anchor link to

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

  1. В Цветовой схеме включите Вариант для темного режима.
  2. Задайте отдельные цвета для темного режима.
  3. Используйте иконку солнца/луны на верхней панели, чтобы проверять светлый и темный режимы во время редактирования.

Этот переключатель на холсте — не то же самое, что панель Предпросмотр, доступная только для чтения. Пока вы не зададите свои собственные темные цвета, переключатель может выводить их автоматически. См. Создание In-App сообщений во встроенном редакторе.

Раздел «Цветовая схема» с включенным вариантом для темного режима и ролями цветов для темного режима в настройках

Стандартные настройки блоков и макетов

Anchor link to

Используйте эти разделы, чтобы новый контент соответствовал шаблону, пока вы не стилизуете блок на холсте:

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

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

Настройка внешнего вида In-App сообщения на устройстве

Anchor link to

Настройки In-App управляют тем, как сообщение появляется и ведет себя на устройстве: положение, анимация, жесты свайпа и кнопка закрытия. Положение, анимация и свайп применяются на iOS и Android Native. Стиль кнопки закрытия отличается. Он хранится в этом шаблоне и отображается на каждой платформе, где показывается сообщение.

Нажмите Настройки In-App на верхней панели.

Кнопка «Настройки In-App» в верхней панели редактора между кнопками «Отменить», «Повторить» и «Сохранить»

Положение на экране

Anchor link to

Выберите На весь экран, Сверху, По центру или Снизу.

Для полноэкранного сообщения также задайте Макс. ширину в Документе, как описано в разделе Документ.

Настройки In-App: опции «Положение на экране» — «На весь экран», «Сверху», «По центру», «Снизу»

Анимация

Anchor link to
  • Анимация появления / Анимация закрытия: Нет, Затухание, Слева, Справа, Вверх или Вниз. Выберите По умолчанию, чтобы использовать то же движение открытия/закрытия, которое ваше приложение уже использует для In-App сообщений.
  • Длительность анимации (мс): от 100 до 3000 миллисекунд. Оставьте поле пустым, чтобы сохранить обычное время вашего приложения.
Настройки In-App: поля «Анимация появления», «Анимация закрытия» и «Длительность анимации»

Свайп для закрытия

Anchor link to

Включите любую комбинацию: Влево, Вправо, Вверх и Вниз.

Настройки In-App: опции «Свайп для закрытия» — «Влево», «Вправо», «Вверх» и «Вниз»

Кнопка закрытия

Anchor link to

Включите или выключите Показывать кнопку закрытия.

Когда она включена, задайте:

  • Положение: Справа вверху, Слева вверху, Справа внизу или Слева внизу.
  • Фон: цвет или Прозрачный.
  • Радиус скругления углов: скругляет углы фона кнопки закрытия. Доступно, только если Фон — это цвет (а не Прозрачный). Задайте 0–16 px. 16 px создает круг (по умолчанию). 0 px создает квадрат.
  • Цвет иконки: цвет иконки закрытия.
  • Отступ: пространство вокруг кнопки закрытия с каждой стороны (Сверху, Справа, Снизу, Слева).
Настройки In-App: «Показывать кнопку закрытия» с опциями «Положение», «Фон», «Радиус скругления углов», «Цвет иконки» и «Отступ»

В отличие от положения, анимации и свайпа, стиль кнопки закрытия хранится в этом шаблоне и отображается на каждой платформе, где показывается сообщение, а не только на iOS и Android Native.

  1. Нажмите Применить, чтобы сохранить ваши выборы в Настройках In-App, или Отмена, чтобы их отменить.
  2. Откройте Предпросмотр из меню ⋮ на верхней панели, чтобы проверить положение, анимацию и кнопку закрытия перед сохранением.
  3. Нажмите Сохранить на верхней панели, чтобы сохранить шаблон.