---
title: "Создание базового экрана пейвола"
description: "Пошаговый гайд по созданию стандартного экрана пейвола в Flow Builder."
---

Это самый распространённый шаблон пейвола. Используйте его как отдельный экран или размещайте в конце многоэкранного [флоу](adapty-flow-builder).
Стандартный экран пейвола содержит заголовок, описание ценности, список функций, список продуктов, кнопку покупки и ссылки в футере для восстановления покупок, условий использования и политики конфиденциальности.
## Перед началом работы \{#before-you-start\}

- [Создайте продукты](create-product) в дашборде Adapty.
- [Подключите Adapty к App Store и Google Play](integrate-payments).
## 1. Настройте переиспользуемые стили \{#1-set-up-reusable-styles\}

Переиспользуемые стили позволяют применять одинаковую типографику и цвета на всех экранах в один клик. Каждый новый флоу поставляется с набором стандартных текстовых стилей (H1, Body, Button Label и т. д.) — настройте их под свой дизайн, прежде чем начнёте добавлять элементы. Добавьте цветовые стили для фирменных цветов, которые будете использовать на протяжении всего экрана.

Подробные инструкции см. в разделе [Стилизация элементов — Переиспользуемые стили](builder-styling#reusable-styles).

Чтобы настроить стили:
1. На левой панели откройте панель **Styles** Styles.
2. На вкладке **Text** нажмите на существующий стиль, чтобы изменить шрифт, начертание, размер и цвет. Новые стили добавляйте только если стандартных не хватает.

3. На вкладке **Colors** нажмите **Plus Create style** и добавьте цвета, которые планируете использовать на экране повторно.

## 2. Настройте макет экрана \{#set-up-the-screen-layout\}

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

Полный список свойств экрана см. в разделе [Экраны и слои — Настройки экрана](paywall-layout-and-products#screen-settings).

Чтобы настроить экран:
1. Нажмите на пустую область холста, чтобы выбрать экран. Правая панель переключится на настройки экрана.
2. В разделе **System UI** отключите **Safe area**, чтобы контент распространялся до краёв экрана.
3. В разделе **Layout** выберите направление **Vertical** Vertical и распределение **Space evenly**.

4. В разделе **Fill** выберите тип фона — сплошной цвет, градиент или изображение. В этом примере используется **Gradient** Gradient с двумя цветовыми точками.

## 3. Добавьте кнопку закрытия \{#add-the-close-button\}

Кнопка закрытия скрывает пейвол. Пресет **Close** уже настроен — дополнительная настройка действия не требуется.

1. На канвасе нажмите **+**.
2. Выберите **Buttons** > **Close**.

## 4. Добавьте заголовок и разместите его рядом с кнопкой закрытия \{#add-the-title-and-pair-it-with-the-close-button\}

H1 располагается рядом с кнопкой закрытия в верхней части экрана. Чтобы выровнять их по горизонтали, оберните оба элемента в горизонтальный стек.

Чтобы добавить заголовок:

1. Нажмите **+** > **Text** > **H1**.
2. Выберите H1, откройте вкладку **Design** на правой панели и отредактируйте текст в поле **Content**.

Чтобы сгруппировать заголовок с кнопкой закрытия:
1. На панели **Layers** нажмите на троеточие Context menu рядом со слоем кнопки закрытия и выберите **Wrap** > **Wrap in Horizontal Stack**.

2. Перетащите слой H1 в новый горизонтальный стек.

Чтобы выровнять оба элемента:
1. Измените размер кнопки закрытия и размер шрифта заголовка H1, чтобы они комфортно располагались на одной строке.
2. Выделив горизонтальный стек, настройте выравнивание и распределение в правой панели, чтобы элементы правильно выстроились.

## 5. Добавьте описание ценности \{#add-the-value-description\}

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

1. Нажмите **+** > **Text** > **Body**.
2. Выделив элемент body, отредактируйте текст в поле **Content** на вкладке **Design**.

## 6. Добавьте список возможностей \{#add-the-feature-list\}

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

Полный набор пресетов списков см. в разделе [Элементы — List](builder-elements#list).

Чтобы добавить список возможностей:

1. Нажмите **+** > **List** и выберите пресет списка. Icon List — самый распространённый вариант для пейволов.
2. Выделите каждую строку и отредактируйте заголовок и описание в поле **Content**.
3. Чтобы добавить или удалить строки, выделите список и воспользуйтесь элементами управления строками на панели **Layers**.

## 7. Добавьте список продуктов \{#add-the-product-list\}

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

Подробнее об управлении продуктами — в разделе [Настройка покупок](paywall-product-block).

Чтобы добавить и настроить продукты:
1. Нажмите **+** > **Products** и выберите пресет макета. Vertical List — наиболее распространённый вариант.
2. Выберите каждую карточку продукта на холсте и укажите продукт в выпадающем списке на вкладке **Design**. В списке отображаются все продукты, настроенные в дашборде Adapty.
3. Чтобы изменить выбранный по умолчанию продукт, выберите нужную карточку и включите **Set as default product** на вкладке **Design**.
4. Чтобы настроить значок скидки, раскройте карточку продукта в панели **Layers**, выберите слой значка и отредактируйте его текст в поле **Content**. Скройте значок на остальных карточках, нажав на иконку глаза Show рядом с каждым слоем значка.

## 8. Добавьте кнопку покупки \{#add-the-purchase-button\}

Кнопка покупки запускает встроенную покупку для выбранного пользователем продукта. Переменная `products.selectedProduct` всегда указывает на текущий выбранный на экране продукт.

Чтобы добавить кнопку покупки:

1. Нажмите **+** > **Buttons** и выберите пресет кнопки.
2. Выделите кнопку и откройте вкладку **Interactions** на правой панели.
3. Нажмите **Add trigger** > **On tap**, затем нажмите **Add action**.
4. Установите **Action** в значение **Purchase**, а **Product** — в `products.selectedProduct`.

## 9. Добавьте ссылки в футер \{#add-footer-links\}

Футер содержит ссылки на условия использования и политику конфиденциальности (обязательные требования сторов), а также кнопку восстановления предыдущих покупок.

Чтобы добавить ссылки в футер:

1. Нажмите **+** > **Buttons** > **Links**. Это добавит строку с кнопками Restore Purchases, Terms of Use и Privacy Policy.
2. Выберите ссылку **Terms of Use**. На вкладке **Interactions** уже привязано действие **Open URL** — вставьте URL ваших условий использования в поле URL.
3. Повторите то же самое для ссылки **Privacy Policy**, указав URL вашей политики конфиденциальности.
4. Оставьте ссылку **Restore Purchases** без изменений — её действие уже настроено заранее.
:::tip
Если какой-либо элемент расположен слишком высоко или низко, или вы хотите добавить больше пространства в любом месте, отрегулируйте отступы и поля элемента.
:::

## Следующие шаги \{#next-steps\}

- [Сохраните и опубликуйте флоу](builder-save-publish).
- [Добавьте флоу в плейсмент](create-placement), чтобы начать показывать его пользователям.