---
title: "Макет онбординга"
description: "Конструктор онбординга Adapty: контейнеры для макета, настройка отступов и стилей элементов."
---

Конструктор онбординга без кода предлагает два уровня макета:
- Макет экрана: глобальные отступы и сетка через контейнеры.
- Макет элемента: отступы, позиция, границы и тени для каждого элемента отдельно.

:::tip
Чтобы изменить порядок экранов или элементов, просто перетащите их в левой панели.
:::

## Макет экрана \{#screen-layout\}
Настроить экран можно двумя способами:
- [С помощью настроек стиля экрана](#screen-style-settings)
- [С помощью контейнеров](#containers)

### Настройки стиля экрана \{#screen-style-settings\}
Чтобы уменьшить или увеличить расстояние между элементами и краем экрана:
1. Выберите экран в левой панели.
2. Перейдите на вкладку **Styles** справа.
3. Задайте верхний, нижний и горизонтальные отступы в разделе **Padding**.

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

### Контейнеры \{#containers\}
Вам может понадобиться расположить текст и изображения рядом, добавить листаемые галереи или всплывающие модальные окна. Контейнеры упрощают это: с их помощью можно создавать колонки, строки, карусели и центрированные оверлеи.

Чтобы добавить контейнер:
1. Нажмите **Add** в верхнем левом углу.
2. Перейдите в **Containers** и выберите нужный:
- **Columns**: Разбивает экран на вертикальные секции для контента бок о бок (например, две колонки с текстом или макет «изображение + текст»).
- **Rows**: Выстраивает элементы в одну горизонтальную полосу с равными отступами.
- **Carousel**: Позволяет пользователям листать серию карточек.
- **Popup**: Отображает контент в центрированном оверлее поверх страницы.
3. Создайте нужные элементы, затем перетащите их в контейнер из левого меню.

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

## Макет элемента \{#element-layout\}
Чтобы настроить каждый элемент отдельно:
1. Выберите элемент в левой панели.
2. Перейдите в **Styles** в правом меню.
3. В разделе **Container** задайте:
- **Offset**: Сдвигает элемент по горизонтали или вертикали.
- **Position**: Задаёт точку привязки элемента:
  - **In content**: Обычный поток документа.
  - **Attached**: Фиксированная позиция — элемент остаётся видимым в области просмотра (например, кнопка, прикреплённая к низу экрана).
  - **Attached on scroll**: Становится фиксированным после прокрутки до него (поведение sticky).
- **Padding**: Определяет внутреннее пространство между содержимым элемента и его границей.
- **Background**: Применяет сплошной цвет за элементом. Убедитесь, что фон элемента соответствует [фону экрана](#screen-background-customization) (например, используйте серый или чёрный для онбордингов с преимущественно тёмными экранами).
- **Roundness**: Определяет радиус скругления углов элемента.
- **Border**: Добавляет обводку вокруг элемента и задаёт её толщину.
- **Border Color**: Задаёт цвет границы элемента.
- **Add shadows**: Добавляет одиночную тень с настраиваемым смещением, размытием/распространением и цветом.

:::note
Помимо этих базовых настроек макета, вы можете дополнительно настроить внешний вид конкретных элементов, таких как [медиа](onboarding-media#media-customization), [текст](onboarding-text#text--list-customization), [кнопки](onboarding-buttons#button-customization), [квизы](onboarding-quizzes#quiz-customization) и другие, используя вкладку **Styles** для соответствующего элемента.
:::

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

## Настройка фона экрана \{#screen-background-customization\}

Фон влияет не только на дизайн онбординга, но и на экран загрузки, пока онбординг полностью не загрузится.

Вы можете заполнить фон онбординга цветом или загрузить изображение/видео:

1. Выберите экран в левой панели.
2. Перейдите на вкладку **Styles** справа.
3. В разделе **Background** выберите цвет фона или нажмите на область загрузки, чтобы загрузить изображение/видео.

Для медиафайлов соблюдайте требования к [поддерживаемым форматам и размерам](onboarding-media#supported-formats-and-size).

:::tip
Для плавных переходов между экранами выбирайте цвет фона, соответствующий общему дизайну онбординга (например, используйте серый или чёрный для онбордингов с преимущественно тёмными экранами), или настройте [экран-заставку](ios-present-onboardings#add-smooth-transitions-between-the-splash-screen-and-onboarding).
:::