---
title: "Главное изображение пейвола"
description: "Настройте пейвол с помощью главного изображения, чтобы повысить конверсию в Adapty."
---

Главное изображение (hero image) — это центральный элемент вашего пейвола: оно задаёт тон, определяет стиль и сразу привлекает внимание пользователей. Это изображение играет ключевую роль в формировании внешнего вида пейвола на платформах iOS и Android.

:::warning

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

:::

## Формат и размер главного изображения \{#hero-image-format-and-size\}

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

- **Форматы**: JPG и PNG.
- **Рекомендуемый размер**: файлы до 2 МБ для быстрой загрузки.
- **Композиция**: фотографии, где главный объект расположен по центру с достаточным пространством вокруг, как правило, хорошо передают нужный посыл.
- **Выразительные визуалы**: эмоциональные или яркие фотографии работают хорошо.
- **Использование графики**: идеально для добавления визуальной привлекательности; для текста оставляйте отдельные зоны.

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

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

## Варианты компоновки главного изображения \{#hero-picture-layout-options\}

**Наложенное главное изображение (overlay)** добавляет глубину и динамику вашему пейволу. Закреплённое как фоновое изображение внизу экрана, оно создаёт эффектный визуал: остальные элементы прокручиваются поверх него, а изображение остаётся неподвижным — это делает взаимодействие более engaging.

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

**Прозрачный макет (transparent)** предлагает смелое полноэкранное изображение, которое мгновенно захватывает внимание. Этот макет идеально подходит для демонстрации ограниченного набора продуктов или контента: изображение занимает весь экран и производит мощное, прямое впечатление без необходимости прокрутки.

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

:::note
Используйте прозрачный макет для минимального количества контента, так как он не предполагает прокрутки — это делает ваше сообщение чётким и выразительным.
:::

**Плоский макет (flat)** имитирует бесшовную лендинговую страницу, представляя все элементы в едином прокручиваемом слое. Пользователи получают плавный, цельный нарратив при прокрутке контента — это идеально для эффективной интеграции продуктов или историй в единый поток.

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

:::note
Плоский макет идеально подходит для сторителлинга или представления серии предложений — с его помощью можно создать compelling последовательность, которая захватит пользователей.
:::

## Маска главного изображения \{#hero-image-mask\}

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

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

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

## Как удалить главное изображение \{#how-to-remove-a-hero-image\}

Чтобы удалить главное изображение с пейвола:

1. Откройте элемент **Hero image**.

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

2. Установите его высоту равной нулю.