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

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

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

Макет

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

Главное изображение и его размер

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

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

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

Тип маски для изображения

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

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

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

Цвет фона

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

Настройки шрифта пейвола

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

Жёсткий и мягкий пейволы

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

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

Кнопка закрытия: стиль, расположение и анимация появления

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

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

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

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

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

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

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

Предпросмотр на разных устройствах

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

Продукты

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

1. Макет раздела продуктов

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

2. Главный продукт

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

3. Кастомизация продуктов

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

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

(3) Для каждого текстового элемента можно управлять начертанием шрифта — жирный, курсив или обычный, — а также загружать собственные шрифты (подробнее здесь):

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

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

Стили продуктов: синхронизированные или раздельные

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

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

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

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

Предпросмотр продуктов на пейволе

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

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