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

[Adapty Paywall Builder](adapty-paywall-builder-legacy) упрощает создание пейволов — специальных экранов в приложении, где пользователи могут совершать покупки. Этот инструмент не требует технических знаний или дизайнерских навыков. Вы легко настраиваете внешний вид пейволов, тексты на них и расположение кнопок. Кроме того, можно вносить изменения в реальном времени, пока приложение работает, — без прохождения ревью в App Store или Google Play.

Adapty также позволяет дополнительно оптимизировать пейволы с помощью [A/B-тестов](ab-tests). В сочетании с Paywall Builder это даёт возможность проверять разные варианты пейволов и находить наиболее эффективные дизайн и тексты. Хотите увеличить продажи, продвигать контент или открыть доступ к эксклюзивным функциям — Paywall Builder предлагает удобное решение для любой из этих задач.

В этом разделе рассматривается настройка макета и продуктов пейвола.

:::warning

Этот раздел описывает устаревший Paywall Builder, совместимый с Adapty SDK v2.x и более ранними версиями. Информацию о новом Paywall Builder, совместимом с Adapty SDK v3.x и выше, см. в разделе [Макет пейвола в новом Paywall Builder](paywall-layout-and-products).

:::

### Макет \{#layout\}

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

#### Главное изображение и его размер \{#main-image-and-sizing\}

**Главное изображение** — центральный элемент дизайна пейвола, который задаёт его общий вид и настроение. Оно призвано привлекать внимание пользователей и побуждать их к действию. Вот несколько рекомендаций по выбору и загрузке главного изображения:

- Фото должно быть в формате PNG или JPEG, размером менее 2 МБ.
- Фотографии с главным объектом по центру и свободным пространством вокруг него обычно хорошо передают суть.
- Эмоциональные и яркие фото работают хорошо.
- Графика тоже подходит, но без текстовых надписей — для текстов в пейволе есть отдельное место.

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

Вы можете управлять размером главного изображения, задавая его пропорции относительно всего экрана пейвола. Это помогает добиться нужного визуального баланса и эффекта. Размер изображения задаётся в процентах от общей площади экрана.

#### Тип маски для изображения \{#mask-type-for-the-image\}

Тип маски определяет форму главного изображения, позволяя применять к нему различные визуальные эффекты. Доступны следующие типы масок:

- Прямоугольник
- Скруглённый прямоугольник
- Круг
- Лист

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

Степень скругления маски изображения можно регулировать с помощью числовых значений (недоступно для типа «Круг»).

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

Цвет фона задаёт общее настроение пейвола. Выберите цвет, соответствующий фирменному стилю вашего бренда или гармонирующий с изображением. Фон служит холстом, который усиливает визуальную привлекательность пейвола. Можно выбрать как однотонный цвет, так и градиент.

  <img src="/assets/shared/img/cc48986-Export-1693233802152.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/959d3e4-CleanShot_2024-01-12_at_18.47.472x.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

:::note
Изменение настроек шрифта в разделе «Макет» влияет на все остальные текстовые элементы пейвола (если они не были настроены отдельно ранее).

Как загрузить собственный шрифт — читайте [здесь](using-custom-fonts-in-paywall-builder).
:::

#### Жёсткий и мягкий пейволы \{#hard-and-soft-paywalls\}

Одно из ключевых решений на вкладке «Макет» — включить кнопку закрытия (мягкий пейвол) или убрать её (жёсткий пейвол). Переключив опцию **Hard paywall**, вы сразу увидите в превью, как кнопка закрытия появляется или исчезает.

Для мягких пейволов можно настроить вид и поведение кнопки закрытия.

#### Кнопка закрытия: стиль, расположение и анимация появления \{#close-button-its-style-placement-and-fade-in-animation\}

Наличие кнопки закрытия позволяет пользователям скрыть пейвол и продолжить работу с приложением.

Для мягких пейволов вы можете задать вид кнопки закрытия и скорость её появления:

1. Отключите переключатель **Hard paywall**.
2. В развернувшейся секции выберите вид и расположение кнопки. Превью справа мгновенно обновится.

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

- **Close icon type:** выберите иконку для кнопки закрытия или **Custom text** для текстовой кнопки.
- **Icon placement:** расположите кнопку закрытия в левом верхнем углу, по центру или в правом верхнем углу экрана.
- **Color and opacity:** управляйте цветом и прозрачностью содержимого и фона кнопки закрытия. Вы можете лучше вписать кнопку в дизайн пейвола, подобрав цвета или полностью убрав фон кнопки.

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

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

4. В развернувшейся секции укажите задержку (в миллисекундах) перед началом появления кнопки закрытия, а также продолжительность анимации её появления.

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

Весь процесс показан на видео:

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

#### Предпросмотр на разных устройствах \{#device-compatibility-preview\}

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

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

### Продукты \{#products\}

На вкладке продуктов в Paywall Builder Adapty вы можете создать и настроить визуально привлекательный раздел с продуктами, которые увидят пользователи. Здесь настраиваются различные аспекты внешнего вида продуктов и их текстового описания. Рассмотрим доступные параметры.

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

#### 1. Макет раздела продуктов \{#1-product-section-layout\}

Вы можете выбрать, как раздел продуктов будет представлен пользователям: горизонтальный список или вертикальный. Этот выбор определяет расположение продуктов на экране.

#### 2. Главный продукт \{#2-main-product\}

Выделение конкретного продукта привлекает к нему внимание. В настройках главного продукта вы выбираете тот, который будет выделен специальной рамкой и предвыбран в разделе продуктов. Это особенно полезно для продвижения рекомендуемого товара или специального предложения. Вы также можете добавить к этому продукту текст бейджа для дополнительного контекста или подчёркивания его уникальности — подробнее см. ниже.

#### 3. Кастомизация продуктов \{#3-products-customization\}

Рассмотрим, как можно настроить каждый продукт на пейволе:

  <img src="/assets/shared/img/26d435d-CleanShot_2024-01-12_at_19.14.092x.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

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

(3) Для каждого текстового элемента можно управлять начертанием шрифта — жирный, курсив или обычный, — а также загружать собственные шрифты (подробнее [здесь](using-custom-fonts-in-paywall-builder)):

  <img src="/assets/shared/img/06a0a51-CleanShot_2024-01-12_at_19.19.102x.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

(4) Но, пожалуй, самое важное — вы можете описывать продукты текстом и тонко настраивать атрибуты: размер, цвет и начертание. Дополнительный заголовок и подзаголовок помогут раскрыть детали — например, позволят пользователям легко сравнить цены между продуктами. Такой уровень контроля позволяет создать визуально привлекательный и информативный раздел продуктов в пейволе.

:::note
Использование тег-переменных

Каждое текстовое поле в блоке продуктов поддерживает [тег-переменные](paywall-builder-tag-variables), например `<PROD_TITLE/>` для названия продукта. Настоятельно рекомендуем использовать их для упрощения локализации.
:::

(5) Если пейвол может отображаться пользователям, имеющим право на получение предложения, настройте текст предложения для каждого ожидаемого типа. Разумеется, для него тоже можно задать цвет и размер. Если пользователь окажется подходящим кандидатом — соответствующий текст предложения будет показан в виде подзаголовка карточки продукта.

:::warning
Текст по умолчанию для предложений

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

Подробнее о предложениях — [здесь](offers).
:::

#### Стили продуктов: синхронизированные или раздельные \{#product-styles-synced-or-separate\}

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

Отключить синхронизацию стилей для продукта можно в правом верхнем углу его карточки. После этого все изменения внешнего вида будут применяться только к этому продукту:

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

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

Синхронизация стилей не затрагивает тексты — они всегда задаются отдельно для каждого продукта.

#### Предпросмотр продуктов на пейволе \{#preview-products-on-your-paywall\}

Завершив настройку внешнего вида продуктов, стоит проверить результат в превью перед тестированием на устройстве. Полезные настройки для этого находятся под иконкой «глаза» в правом верхнем углу:

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

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

:::warning
В превью используются значения-заглушки для тег-переменных

**Помните**: если вы используете тег-переменные для продуктов, в превью отображаются только фиксированные значения-заглушки. Это касается как цен и названий продуктов, так и предложений. Реальные значения будут получены из App Store и Google Play и показаны только на устройстве.
:::