---
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 Container**.

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. На панели **Layers** выберите кнопку **Terms of Use**. Откройте вкладку **Interactions** — действие **Open URL** уже привязано. Нажмите на него и введите нужный URL.
3. Повторите то же самое для кнопки **Privacy Policy**, указав URL вашей политики конфиденциальности.
4. Кнопку **Restore Purchases** оставьте без изменений — её действие настроено заранее.

:::tip
Если какой-то элемент расположен слишком высоко или низко, или вы хотите добавить отступы, отрегулируйте его margin и padding.
:::

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

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