---
title: "Стилизация элементов"
description: "Настройте внешний вид элементов — заливку, границы, эффекты, типографику, состояния и стили проекта."
---

Вкладка **Design** на правой панели управляет внешним видом каждого элемента. Доступные свойства зависят от типа элемента, но большинство элементов имеют общие параметры стилизации.
## Размер и пространство \{#size-and-space\}

:::link
Основная статья: [Позиционирование элементов](manage-paywall-ui-elements)
:::
### Видимость \{#visibility\}

Переключатель **Visibility** определяет, отображается ли элемент на экране.
* Show **Show** (по умолчанию): элемент всегда виден.
* Conditional **Conditional**: элемент виден только при выполнении определённых условий. Подробнее см. в разделе [Условная видимость](onboarding-element-visibility).
* Hide **Hide**: элемент всегда скрыт. Используйте это, чтобы временно убрать элемент из флоу без его удаления.
### Размер \{#sizing\}

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

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

### Отступы \{#spacing\}

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

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

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

:::note
У текстовых элементов есть только margin. У экранов — только padding. Оба параметра доступны для контейнеров и других элементов с дочерним содержимым.
:::
## Заливка \{#fill\}

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

Используйте это свойство, чтобы задать главное изображение / видео для всего экрана.
* **Solid color** Solid color. Используйте палитру цветов, введите hex-значение или задайте [цветовой стиль проекта](#color-styles). Настройте **прозрачность**, чтобы сделать фон полупрозрачным.
* **Gradient** Gradient. Добавьте градиентную заливку с двумя и более цветовыми точками. Перетаскивайте точки для настройки перехода, а угол градиента задаёт его направление.

* **Image** Image или **Video** Video. Установите [изображение / видео](custom-media) в качестве фона элемента.
## Граница \{#border\}

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

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

* **Color**: используйте палитру цветов, введите hex-значение или назначьте [глобальный цветовой стиль](#color-styles). Отрегулируйте **opacity**, чтобы сделать границу полупрозрачной.
* **Width**: толщина границы в пикселях.

## Углы \{#corners\}

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

* **Radius slider**: задаёт одинаковый радиус для всех четырёх углов
* **Per-corner toggle** Per Corner: включите, чтобы задать отдельный радиус для каждого угла
## Эффекты \{#effects\}

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

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

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

## Анимация \{#animation\}

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

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

### Предпросмотр анимации \{#preview-the-animation\}

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

- Нажмите кнопку **Toggle animations** Toggle animations над превью устройства. Она включает или отключает анимации на экране — после включения они воспроизводятся непрерывно, пока вы не нажмёте снова. Кнопка появляется только тогда, когда на активном экране есть хотя бы одна анимация.
- Откройте [контекстное меню](paywall-layout-and-products#screen-actions) экрана (значок с тремя точками рядом со слоем экрана) и выберите **Play Animation**.
## Внешний вид \{#appearance\}

* **Opacity**: от 0% (прозрачный) до 100% (непрозрачный)
* **Rotation**: введите значение в градусах для поворота элемента
## Свойства типографики (текстовые элементы) \{#typography-properties-text-elements\}

Для текстовых элементов отображается раздел **Typography** со следующими настройками:
### Шрифт \{#font\}

:::link
См. также: [Пользовательские шрифты](using-custom-fonts-in-paywall-builder)
:::

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

* **Styles**: содержит сохранённые [текстовые стили](#text-styles) вашего проекта. Выберите стиль, чтобы применить все его настройки типографики сразу.
* **Fonts**: содержит все доступные семейства шрифтов. Используйте поиск или прокрутку, чтобы найти нужный.
### Размер и насыщенность \{#size-and-weight\}

* **Weight**: Выберите насыщенность шрифта из выпадающего списка
* **Size**: Выберите размер из выпадающего списка или введите произвольное значение
### Цвет \{#color\}

Нажмите на образец цвета, чтобы открыть палитру. Введите HEX-значение, выберите цвет вручную или воспользуйтесь [переиспользуемыми стилями](#reusable-styles). Регулируйте ползунок прозрачности, чтобы сделать текст полупрозрачным.
### Выравнивание \{#alignment\}

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

* **По горизонтали**: По левому краю Align left, По центру Align center, или По правому краю Align right
* **По вертикали**: По верхнему краю Align top, По середине Align middle, или По нижнему краю Align bottom
### Оформление \{#decoration\}

* **None** None: Без оформления (по умолчанию)
* **Underline** Underline: Добавляет подчёркивание текста
* **Strikethrough** Strikethrough: Добавляет зачёркивание текста
### Усечение \{#truncation\}

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

:::note
Когда вы выбираете текстовый элемент, над ним на холсте появляется **встроенная панель инструментов**. Она даёт быстрый доступ к шрифту, начертанию, размеру и выравниванию — без прокрутки правой панели.
:::

## Настройки состояний (интерактивные элементы) \{#state-specific-settings-interactive-elements\}

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

Каждое состояние может переопределять любое визуальное свойство — заливку, границу, цвет типографики, прозрачность и другие.
### Выбираемые состояния \{#selectable-states\}

:::link
Основная статья: [Выбираемые элементы](flow-selectable-elements)
:::

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

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

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

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

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

### Другие элементы с управлением состоянием \{#other-state-bearing-elements\}

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

- **[Шаги индикатора прогресса](builder-loaders-and-progress-bars#step-states)** — три состояния для каждого шага: **Completed**, **Current** и **Upcoming**.
- **[Точки карусели](builder-containers#dots)** — два варианта цвета: **Color** для неактивных точек и **Active Color** для точки текущего слайда.
## Повторно используемые стили \{#reusable-styles\}

Панель **Styles** Styles в левом сайдбаре позволяет задавать повторно используемые стили, которые применяются ко всему флоу. Доступны два типа стилей: текстовые стили и стили цветов. Для поддержки тёмной темы необходимо использовать именно стили цветов.
### Стили текста \{#text-styles\}

:::link
Основная статья: [Текстовый контент](onboarding-text)
:::

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

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

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

### Цветовые стили \{#color-styles\}

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

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

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

:::link
Основная статья: [Тёмная тема](paywall-dark-mode)
:::

При необходимости для каждого цветового стиля можно добавить два варианта — один для светлой темы Light mode и один для тёмной темы Dark mode. SDK автоматически применяет нужный вариант в зависимости от текущей цветовой схемы устройства.
Для предпросмотра тёмной темы в Paywall Builder используйте **переключатель темы** Dark mode на [нижней панели инструментов](builder-ui#view-controls-bottom-toolbar).