Конструктор онбординга без кода предлагает два уровня макета:

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

Макет экрана

Настроить экран можно двумя способами:

• С помощью настроек стиля экрана
• С помощью контейнеров

Настройки стиля экрана

Чтобы уменьшить или увеличить расстояние между элементами и краем экрана:

1. Выберите экран в левой панели.
2. Перейдите на вкладку Styles справа.
3. Задайте верхний, нижний и горизонтальные отступы в разделе Padding.

Контейнеры

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

Чтобы добавить контейнер:

1. Нажмите Add в верхнем левом углу.
2. Перейдите в Containers и выберите нужный:

• Columns: Разбивает экран на вертикальные секции для контента бок о бок (например, две колонки с текстом или макет «изображение + текст»).
• Rows: Выстраивает элементы в одну горизонтальную полосу с равными отступами.
• Carousel: Позволяет пользователям листать серию карточек.
• Popup: Отображает контент в центрированном оверлее поверх страницы.

3. Создайте нужные элементы, затем перетащите их в контейнер из левого меню.

Макет элемента

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

1. Выберите элемент в левой панели.
2. Перейдите в Styles в правом меню.
3. В разделе Container задайте:

• Offset: Сдвигает элемент по горизонтали или вертикали.
• Position: Задаёт точку привязки элемента:
  • In content: Обычный поток документа.
  • Attached: Фиксированная позиция — элемент остаётся видимым в области просмотра (например, кнопка, прикреплённая к низу экрана).
  • Attached on scroll: Становится фиксированным после прокрутки до него (поведение sticky).
• Padding: Определяет внутреннее пространство между содержимым элемента и его границей.
• Background: Применяет сплошной цвет за элементом. Убедитесь, что фон элемента соответствует фону экрана (например, используйте серый или чёрный для онбордингов с преимущественно тёмными экранами).
• Roundness: Определяет радиус скругления углов элемента.
• Border: Добавляет обводку вокруг элемента и задаёт её толщину.
• Border Color: Задаёт цвет границы элемента.
• Add shadows: Добавляет одиночную тень с настраиваемым смещением, размытием/распространением и цветом.

Настройка фона экрана

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

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

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

Для медиафайлов соблюдайте требования к поддерживаемым форматам и размерам.