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

Размер и пространство

Видимость

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

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

Размер

У каждого элемента есть настройки Width и Height с тремя режимами:

• Fill: растянуть, чтобы занять всё доступное пространство внутри родителя
• Hug: сжать до размера содержимого элемента
• Fixed: задать точное значение размеров в пикселях

Отступы

Раздел Spacing отображает блочную модель с двумя слоями:

• Margin: Пространство между элементом и его соседями. Не выходит за границы родительского контейнера, независимо от заданного значения.
• Padding: Пространство между границей элемента и его содержимым.

Задайте значение для каждой стороны отдельно.

Заливка

Раздел Fill управляет фоном элемента. Доступны четыре типа заливки: сплошной цвет, градиент, изображение и видео.

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

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

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

Граница

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

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

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

Углы

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

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

Эффекты

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

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

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

Анимация

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

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

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

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

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

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

Внешний вид

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

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

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

Шрифт

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

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

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

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

Цвет

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

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

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

• По горизонтали: По левому краю Align left, По центру Align center, или По правому краю Align right
• По вертикали: По верхнему краю Align top, По середине Align middle, или По нижнему краю Align bottom

Оформление

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

Усечение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стили текста

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

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

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

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

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

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

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

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

Тёмная тема

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