---
title: "Создание пейволов с новым Paywall Builder"
description: "Освойте Paywall Builder от Adapty для создания высококонверсионных предложений встроенных покупок."
---

Представляем наш **новый Paywall Builder**, совместимый с Adapty SDK v3.0 и выше!

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

## Ключевые возможности нового Paywall Builder \{#key-features-of-the-new-paywall-builder\}

- **Расширенный выбор шаблонов**: выбирайте из широкого набора профессионально разработанных шаблонов, чтобы быстро начать создание пейвола. Шаблоны предлагают разнообразные стили и макеты для различных потребностей и предпочтений.
- **Повышенная гибкость**: больше свободы благодаря возможности использовать слои дизайна и новые элементы — карусели, карточки, списки продуктов и футеры. Эти улучшения дают вам творческую свободу для создания пейвола любого типа.
- **Обновлённые существующие элементы**: существующие элементы значительно улучшены и предлагают больше опций и возможностей для воплощения ваших идей пейвола в жизнь.
- **Масштабируемость**: если вы управляете несколькими приложениями, [перенесите](migrate-paywalls) конфигурацию визуального пейвола одним кликом вместо того, чтобы строить с нуля.

:::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](adapty-paywall-builder-legacy).
:::

## Структура пейвола \{#structure-of-a-paywall\}

В новом Adapty Paywall Builder пейвол состоит из следующих компонентов:

- [**Layout**](paywall-layout-and-products): базовый слой пейвола, задающий цвет фона и определяющий отображение продуктов и расположение верхних кнопок.
- [**Hero Image**](paywall-head-picture): главное изображение пейвола.
- **Основная область**: здесь вы можете размещать различные элементы — блок продуктов, карусели, изображения, карточки, тексты, кнопки и списки.
- **Футер**: аналогично основной области, но это контейнер, который всегда закреплён в нижней части пейвола поверх основной области. Вы можете добавить столько элементов, сколько нужно — они будут расположены сверху вниз внутри футера в том же порядке, что показан на левой панели.
- [**Элементы**](adapty-paywall-builder#paywall-elements): строительные блоки, размещаемые в основной области или футере для создания пейвола. Они располагаются в том порядке, в котором отображаются на левой панели, сверху вниз. Элементы можно вкладывать друг в друга, объединять в карточки или отображать в карусели.

## Как начать создавать пейвол с новым Paywall Builder \{#how-to-start-designing-a-paywall-with-new-paywall-builder\}

:::warning
Новый Paywall Builder доступен только для iOS и Android и требует Adapty SDK v3.0 или выше. Убедитесь, что вы <InlineTooltip tooltip="обновились до Adapty SDK v3.0 или выше">[iOS](migration-to-ios-sdk-v3), [Android](migration-to-android-sdk-v3), [Flutter](migration-to-flutter-sdk-v3), [React Native](migration-to-react-native-sdk-v3) и [Unity](migration-to-unity-sdk-v3) — гайды по миграции</InlineTooltip>, чтобы новые пейволы работали корректно!
:::

Чтобы воспользоваться Adapty Paywall Builder:

1. Откройте раздел [**Paywalls**](https://app.adapty.io/paywalls) в главном меню Adapty.

2. Откройте существующий пейвол или [создайте новый](create-paywall).

3. Перейдите на вкладку **Builder & Generator**.

4. Добавьте продукты к пейволу, если ещё не сделали этого. В противном случае нажмите **Build no-code paywall**.

5. Выберите шаблон и нажмите **Choose** или [перенесите пейвол](migrate-paywalls) из другого приложения.

6. Нажмите **Choose**, чтобы подтвердить выбор.

7. [Добавьте](#paywall-elements) и [настройте](#customization-options) элементы пейвола.

:::important
Чтобы пейвол отображался, необходимо включить переключатель **Show on device** в Paywall Builder.
:::

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

## Перенос legacy-пейволов \{#migrate-your-legacy-paywalls\}

В настоящее время в Adapty параллельно работают две версии Paywall Builder:

- **Новая версия**: расположена на вкладке **Builder & Generator** в разделе Paywalls дашборда Adapty. Это наиболее актуальная и гибкая версия, предоставляющая множество дизайнерских возможностей для создания идеальных пейволов.

:::note
Пейволы, созданные в этой версии, требуют Adapty SDK v3.0 или выше.
:::

- **Legacy-версия**: расположена на вкладке **Legacy Builder** в разделе Paywalls дашборда Adapty. Эта версия устарела и должна использоваться только для поддержки версий приложения с установленным SDK ниже v.3.х.х. Мы не рекомендуем использовать её для новых пейволов, так как она скоро будет выведена из эксплуатации.

Миграция пейвола из legacy Paywall Builder в новый означает, что в вкладке **Builder & Generator** будет создана новая версия вашего пейвола.

Эта версия будет доступна для редактирования в новом Paywall Builder и будет отображаться в приложениях с установленным Adapty SDK v3.0 или выше. См. <InlineTooltip tooltip="Гайд по миграции на Adapty SDK v.3.x">[iOS](migration-to-ios-sdk-v3), [Android](migration-to-android-sdk-v3), [Flutter](migration-to-flutter-sdk-v3), [React Native](migration-to-react-native-sdk-v3) и [Unity](migration-to-unity-sdk-v3) — гайды по миграции</InlineTooltip> для подробной информации об обновлении Adapty SDK.

Существующая версия вашего пейвола останется на вкладке Legacy Builder. Вы по-прежнему сможете редактировать её с помощью legacy Paywall Builder, и она будет отображаться в приложениях с установленным Adapty SDK версии 2.x и ниже.

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

Чтобы перенести пейвол в новый Paywall Builder:

1. Откройте пейвол, который хотите перенести.
2. Перейдите на вкладку **Builder & Generator**.
3. Нажмите **Migrate paywall**.

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

4. После завершения миграции проверьте результат и убедитесь, что пейвол выглядит так, как должен. Если нет — исправьте его.
5. Нажмите кнопку **Save**.
6. Если есть какие-либо проблемы, они будут выделены красным цветом и сразу же видны. Исправьте их и снова сохраните пейвол.

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

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

## Элементы пейвола \{#paywall-elements\}

Элементы, которые вы добавляете в пейвол, отображаются на левой панели окна Paywall. Порядок элементов на этой панели соответствует их порядку на пейволе.

**Элементы пейвола** в Adapty делятся на простые и составные:

- **Простые элементы**: отдельные объекты, которые не могут содержать другие элементы. Примеры: текст, изображения, кнопки.

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

- **Составные элементы**: могут содержать другие элементы или иметь собственную структуру. Примеры:
  - [Списки продуктов](paywall-product-block) с продуктами
  - [Карусели](paywall-carousel) с дочерними элементами
  - [Карточки](paywall-card) с дочерними элементами
  - Списки с элементами списка
  - Блоки ссылок со ссылками внутри

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

**Дополнительные возможности**, которые можно подключить:

1. [Предопределённые тег-переменные для информации о продукте](paywall-builder-tag-variables)
2. [Кастомные теги](custom-tags-in-paywall-builder)
3. [Кастомные шрифты](using-custom-fonts-in-paywall-builder)
4. [Локализация](add-paywall-locale-in-adapty-paywall-builder)

После настройки вы можете [добавить пейволы в плейсменты](add-audience-paywall-ab-test), чтобы отображать их в мобильном приложении. Подробнее об отображении пейволов см. в статьях для конкретных платформ:
- [iOS](ios-quickstart-paywalls)
- [Android](android-quickstart-paywalls)
- [React Native](react-native-quickstart-paywalls)
- [Flutter](flutter-quickstart-paywalls)
- [Unity](unity-quickstart-paywalls)

## Параметры настройки \{#customization-options\}

Каждый элемент можно настроить гибко:

- Вкладка **Style**: настройте размер, внешний вид, цвет или изображение фона, рамку и прозрачность элемента. Для некоторых элементов, например каруселей, доступны дополнительные параметры — управление страницами и настройки слайд-шоу.
- Вкладка **Layout**: задайте положение элемента и его дочерних элементов с помощью offset (смещение элемента без изменения его размера или размера родителя) или padding (смещение элемента с возможным изменением размера родителя под дочерний элемент).
- Вкладка **Contents**: настройте содержимое составных элементов.

## Нам важна ваша обратная связь \{#we-value-your-feedback\}

Ваши отзывы бесценны для нас. Если вы столкнулись с какими-либо проблемами или у вас есть предложения по улучшению, пожалуйста, свяжитесь с нами. Мы всегда готовы помочь и сделать ваш опыт работы с новым Paywall Builder ещё лучше.

📧 **Свяжитесь с нами**: [Поддержка Adapty](mailto:support@adapty.io)

Создавайте с новым Paywall Builder и выведите свою стратегию монетизации на новый уровень с нашими улучшенными инструментами и функциями!