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

Пропустите вкладку Design совсем.

Попросите AI Editor «придать пейволу тёмный, премиальный вид» — и он изменит стиль всех элементов сразу: заливки, углы, типографику и отступы.

Explore the AI Editor›

Видимость

Переключатель Visibility определяет, отображается ли элемент на экране.

• Show (по умолчанию): Элемент всегда виден.
• Conditional: Элемент виден только при выполнении определённых условий. Подробнее см. в разделе Условная видимость.
• Hide: Элемент всегда скрыт. Используйте это, чтобы временно убрать элемент из флоу, не удаляя его.

Заливка

Раздел Fill управляет фоном элемента. Заливка — это стек слоёв, каждый из которых может быть сплошным цветом, градиентом, изображением или видео. Нажмите рядом с Fill, чтобы добавить слой, нажмите на образец цвета слоя, чтобы задать его тип, перетащите слой, чтобы изменить его положение в стеке, и нажмите , чтобы удалить его. Слой в начале списка отрисовывается поверх остальных, поэтому полупрозрачный слой над изображением тонирует его.

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

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

• Image или Video . Установите изображение / видео в качестве фона элемента.

Граница

По умолчанию граница отключена. Нажмите рядом с Border на правой панели, чтобы добавить её. Чтобы убрать границу, нажмите рядом с заголовком Border.

Если граница добавлена, настройте:

• Color: используйте палитру цветов, введите hex-значение или назначьте глобальный цветовой стиль. Отрегулируйте opacity, чтобы сделать границу полупрозрачной.
• Width: толщина границы в пикселях.

Углы

Раздел Corners управляет радиусом скругления углов.

• Radius slider: задаёт одинаковый радиус для всех четырёх углов
• Per-corner toggle : включите, чтобы задать отдельный радиус для каждого угла

Эффекты

Нажмите кнопку плюса рядом с Effects, чтобы добавить один или несколько визуальных эффектов:

• Drop shadow: тень за элементом
• Inner shadow: тень внутри границ элемента
• Background blur: размытие фона
• Layer blur: размытие элемента и его дочерних объектов

На один элемент можно наложить несколько эффектов. Переключите видимость , чтобы временно отключить эффект.

Анимация

Нажмите кнопку рядом с Animation, чтобы добавить анимационный эффект. На данный момент доступна только анимация Pulse — элемент ритмично увеличивается и уменьшается, привлекая к себе внимание.

Настройте анимацию Pulse с помощью следующих параметров:

Параметр	Описание
Scale amount (%)	Насколько элемент увеличивается относительно исходного размера
Duration (ms)	Продолжительность одного цикла анимации
Delay between loops (ms)	Пауза между повторениями
Shadow color	Цвет пульсирующей тени
Shadow size (px)	Размер пульсирующей тени

Предпросмотр анимации

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

• Нажмите кнопку Toggle animations над превью устройства. Она включает или отключает анимации на экране — после включения они воспроизводятся непрерывно, пока вы не нажмёте снова. Кнопка появляется только тогда, когда на активном экране есть хотя бы одна анимация.
• Откройте контекстное меню экрана (значок с тремя точками рядом со слоем экрана) и выберите Play Animation.

Внешний вид

• Opacity: от 0% (прозрачный) до 100% (непрозрачный)
• Rotation: введите значение в градусах для поворота элемента

Свойства типографики (текстовые элементы)

Для текстовых элементов отображается раздел Typography со следующими настройками:

Шрифт

Нажмите на выпадающий список шрифтов , чтобы открыть выбор шрифта. В нём есть две вкладки:

• Styles: список сохранённых текстовых стилей вашего проекта. Выберите стиль, чтобы применить все его параметры типографики сразу.
• Fonts: список доступных семейств шрифтов. Используйте поиск или прокрутку, чтобы найти нужный. Встроенные шрифты могут отображаться по-разному на разных устройствах — для единообразного отображения загрузите кастомный шрифт.

Размер и насыщенность

• Weight: выберите насыщенность шрифта из выпадающего списка
• Size: выберите размер из выпадающего списка или введите произвольное значение

Цвет

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

Выравнивание

Две группы элементов управления выравниванием:

• По горизонтали: По левому краю , По центру , или По правому краю
• По вертикали: По верхнему краю , По середине , или По нижнему краю

Оформление

• None : Без оформления (по умолчанию)
• Underline : Добавляет подчёркивание текста
• Strikethrough : Добавляет зачёркивание текста

Усечение

Включите усечение, чтобы обрезать текст, превышающий значение Max Lines. Это удобно при поддержке нескольких языков: если переведённая строка длиннее оригинала, усечение не даст ей сломать вёрстку.

Настройки состояний (интерактивные элементы)

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

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

Выбираемые состояния

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

• Default: обычный вид элемента
• Selected: вид элемента, когда пользователь выбрал этот вариант. Переопределите такие свойства, как заливка, цвет границы и цвет текста, чтобы выделить активный выбор Чтобы задать стиль для неактивного состояния выбираемого элемента, добавьте третье состояние вручную. Откройте States settings и добавьте Disabled state.

Состояние Disabled зависит от условий. Выберите его и нажмите Set conditions , чтобы указать, при каких условиях элемент становится неактивным во время выполнения, — например, когда обязательное поле пустое.

Состояния полей ввода

Поля ввода поддерживают несколько состояний:

• Default: обычный вид без фокуса
• Active: поле в фокусе, готово к вводу
• Invalid: введённое значение не прошло валидацию
• Disabled: поле неактивно и недоступно для взаимодействия

Другие элементы с управлением состоянием

Некоторые элементы поддерживают стилизацию по состояниям, выходящую за рамки стандартной схемы Default / Selected / Disabled:

• Шаги индикатора прогресса — три состояния для каждого шага: Completed, Current и Upcoming.
• Точки карусели — два варианта цвета: Color для неактивных точек и Active Color для точки текущего слайда.

Переиспользуемые стили

Панель Styles в левом сайдбаре позволяет задавать переиспользуемые стили, которые применяются ко всему флоу. Доступны два типа стилей: текстовые стили и цветовые стили. Цветовые стили необходимо использовать для поддержки тёмной темы.

Стили текста

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

Чтобы создать стиль текста:

1. Откройте панель Styles и выберите вкладку Text.
2. Нажмите Create style.
3. Введите название и настройте параметры типографики.
4. Нажмите Create.

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

Цветовые стили

Цветовые стили — это именованные цвета, на которые можно ссылаться в любом месте флоу. У каждого цветового стиля есть название (например, «Primary text» или «Brand»), значение hex и счётчик использования, показывающий, сколько элементов на него ссылаются.

Чтобы создать цветовой стиль:

1. Откройте панель Styles и выберите вкладку Colors.
2. Нажмите Create style.
3. Введите название и выберите цвет. Когда вы обновляете цветовой стиль, все элементы, которые на него ссылаются, обновляются автоматически.

Тёмная тема

При необходимости для каждого цветового стиля можно добавить два варианта — один для светлой темы и один для тёмной темы . SDK автоматически применяет нужный вариант в зависимости от текущей цветовой схемы устройства. Для предпросмотра тёмной темы в Paywall Builder используйте переключатель темы на нижней панели инструментов.