---
title: "Макет пейвола"
description: "Создавайте макеты пейволов и управляйте продуктами в Adapty для повышения конверсии."
---

После выбора шаблона для пейвола в Paywall Builder вы можете настроить его внешний вид в соответствии со стилем вашего бренда. Настройки макета предоставляют широкий набор инструментов для изменения компоновки, фона и общего вида пейвола. Рассмотрим эти настройки подробнее: параметры макета управляют основными аспектами пейвола, включая шаблон, цвет фона, шрифты по умолчанию, процесс покупки, компоновку контента и кнопки вверху экрана.

:::warning

В этом разделе описывается новый Paywall Builder, который работает с iOS, Android и React Native SDK версии 3.0 и выше, а также Flutter и Unity SDK версии 3.3.0 и выше. Информацию о legacy Paywall Builder, совместимом с Adapty SDK v2.x и более ранними версиями, см. в разделе [Макет пейвола в Legacy Paywall Builder](paywall-layout-and-products-legacy#layout).

:::

## Процесс покупки \{#purchase-flow\}

Выберите, как пользователи будут совершать покупки. Доступны два варианта:

- **Продукты в виде списка + кнопка покупки**: пользователь сначала выбирает продукт, затем нажимает кнопку покупки.

  <img src="/assets/shared/img/a816501-PB_products_list.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

- **Продукты в виде кнопок покупки**: каждый продукт является кнопкой, и покупка начинается при нажатии на неё.

  <img src="/assets/shared/img/4114858-PB_products_buttons.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Цвет фона \{#background-color\}

Чтобы сохранить визуальную целостность, задайте фон пейвола по умолчанию. Используйте поле **Background color** в **Layout settings**. Нажмите на цветной квадрат, чтобы открыть окно настройки, где можно выбрать однородный цвет или градиент в отдельных вкладках.

  <img src="/assets/shared/img/8a095a9-PB_background_color.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Настройки шрифтов пейвола \{#font-settings-of-your-paywall\}

Важно, чтобы пейвол визуально соответствовал остальному приложению — и шрифт играет здесь ключевую роль. Вы можете использовать системный шрифт (SF Pro для iOS, Roboto для Android), выбрать один из доступных общих шрифтов или загрузить собственный:

  <img src="/assets/shared/img/a306fd5-PB_default_font.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Настройки шрифтов в **Layout settings** применяются ко всем компонентам пейвола по умолчанию. Вы можете переопределить их для отдельных элементов, например текстовых блоков или списков, при редактировании этих элементов. Если вы измените шрифт по умолчанию в **Layout settings**, это не затронет элементы с индивидуально заданными шрифтами. Как загрузить кастомный шрифт — читайте [здесь](using-custom-fonts-in-paywall-builder).

## Компоновка контента \{#content-layout\}

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

- **Default child margin**: отступ вокруг каждого дочернего элемента.
- **Spacing**: расстояние между элементами внутри макета.
- **Max width**: максимальная ширина элементов для оптимизации отображения на iPad. Для аккуратного, сбалансированного макета рекомендуется значение 600pt.

:::warning
Параметр Max width доступен начиная с Adapty SDK v3.7.0 и выше.
:::

  <img src="/assets/shared/img/content-layout.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Чтобы настроить макет для конкретного элемента — например, задать максимальную ширину для футера — перейдите в раздел **Layout** в настройках **App Icon, Header, Feature List, Products** или **Footer**.

## Кнопки вверху экрана \{#top-buttons\}

Добавьте до 2 кнопок в верхнюю часть пейвола, чтобы дать пользователям возможность, например, закрыть его. Настройте их внешний вид и поведение:

1. Включите переключатель **Top Button** или **Top Button 2**.
2. Выберите внешний вид и расположение кнопки. Предварительный просмотр обновится мгновенно.

  <img src="/assets/shared/img/960ea1d-PB_Layout_button.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

| Параметр кнопки | Описание                                                                                                                                                                                                                                                                                                                                                                                     |
|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Action | <p>Выберите действие, которое должен выполнить пейвол при нажатии на эту кнопку. Для стандартных действий пейвол сгенерирует стандартное событие, которое можно обработать стандартным способом в коде мобильного приложения.</p><p>Если вы выберете кастомное действие, его нужно будет обработать по `CustomActionID` в коде мобильного приложения.</p> |
| Style | Выберите, как будет выглядеть кнопка — в виде иконки или текста. Если выбрана иконка, укажите её тип.                                                                                                                                                                                                                                                                                           |

3. Чтобы отложить появление кнопки, настройте ползунок **Show after delay**.

  <img src="/assets/shared/img/9f9a159-PB_delay_slider.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>