---
title: "Текст в онбординге"
description: "Добавляйте и стилизуйте заголовки, подзаголовки, абзацы и списки в конструкторе онбордингов Adapty, настраивайте текст для создания фирменного пользовательского опыта."
---

Текстовые элементы помогают выстраивать понятный, персонализированный диалог с пользователями. Добавляйте заголовки, абзацы или списки одним кликом, стилизуйте их в духе вашего бренда и используйте [динамические переменные](onboarding-variables) для персонализации контента.

## Добавление текста \{#add-text\}

На экраны онбординга можно добавлять различные текстовые элементы. Для этого:
1. Нажмите **Add** в верхнем левом углу.
2. Перейдите в раздел **Typography** и выберите нужный тип:
- **Title** — крупный заголовок экрана, который сразу привлекает внимание.
- **Subtitle** — короткая поддерживающая строка, раскрывающая суть заголовка.
- **Text** — основной текст для описания функций, пояснений или вдохновляющих фраз.
- **Rich text** — текст со смешанным форматированием для FAQ, пользовательских соглашений или любого контента, где нужны ссылки и выделение.
3. Кликните по новому элементу, чтобы отредактировать его содержимое.
4. (Опционально) Выделите любую часть текста, чтобы открыть всплывающую панель быстрой настройки — жирное начертание, курсив, ссылки, цвет текста или сброс стилей.

Чтобы отредактировать уже существующий текстовый элемент, просто кликните по нему и вносите изменения в режиме WYSIWYG.

:::tip
Если один и тот же текстовый элемент нужен на нескольких экранах, его можно скопировать и вставить: выделите элемент, нажмите Ctrl+C (или ⌘+C на Mac), перейдите на другой экран, выберите элемент, после которого хотите вставить скопированный, и нажмите Ctrl+V (или ⌘+V на Mac).
:::

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

## Добавление списков \{#add-lists\}

Можно добавлять нумерованные и маркированные списки:
1. Нажмите **Add** в верхнем левом углу.
2. Перейдите в раздел **Typography** и выберите нужный тип:
- **Numbered list** — идеально подходит для пошаговых инструкций.
- **Bullet list** — выделяет преимущества или ключевые особенности без подразумеваемого порядка.
3. Перейдите на вкладку **Element** справа, чтобы отредактировать пункты списка или загрузить изображение в качестве маркера.

Чтобы отредактировать существующий элемент списка, кликните по нему и вносите изменения на вкладке **Element**.

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

## Добавление внешних ссылок \{#add-external-links\}

Чтобы добавить внешнюю ссылку:

1. Нажмите **Add** в верхнем левом углу.
2. В разделе **Typography** выберите **Title**, **Subtitle**, **Text** или **Rich text**.
3. Введите текст.
4. Выделите фрагмент текста, который хотите превратить в ссылку.
5. Нажмите на иконку **Link** в панели быстрой настройки над текстом.
6. Вставьте внешний URL.
7. Нажмите **✓**, чтобы применить ссылку.

:::info
В версиях Adapty SDK ниже 3.15.1 внешние ссылки в онбордингах открываются в браузере по умолчанию на устройстве пользователя.

Начиная с Adapty SDK v3.15.1, внешние ссылки по умолчанию открываются во встроенном браузере приложения — пользователь остаётся внутри вашего приложения, не переключаясь на другое. При необходимости можно [настроить это поведение](ios-present-onboardings#customize-how-links-open-in-onboardings).
:::

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

## Настройка текста и списков \{#text--list-customization\}

Помимо базовой [компоновки элементов](onboarding-layout#element-layout), можно настроить внешний вид текста и списков:

1. Выберите элемент слева.
2. Перейдите в раздел **Styles** в правом меню.
3. В зависимости от типа элемента доступны следующие параметры:
    - **Text**: цвет абзаца, шрифт, выравнивание и межстрочный интервал, цвет ссылок, шрифт и оформление.
    - **List**: цвет и шрифт текста и маркеров, ширина, высота и скругление изображения маркера.

:::tip
Чтобы ускорить работу:
- После настройки текстового элемента нажмите **Apply styles to all paragraphs** внизу, чтобы применить те же стили ко всем экранам онбординга сразу.
- Чтобы изменить шрифт для всех текстовых элементов на конкретном экране, выберите этот экран, затем перейдите в **Styles > Text** в правом меню.
:::

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

## Шрифты \{#fonts\}

В конструкторе онбордингов доступен широкий выбор шрифтов.

:::info
Загрузка пользовательских шрифтов пока недоступна.
:::

Шрифты можно задать глобально для всего онбординга или отдельно для каждого элемента:

- Чтобы задать основной шрифт для всего онбординга:
  1. Выберите любой экран слева.
  2. Перейдите на вкладку **Styles** и выберите **Font**.
  3. Все элементы на всех экранах унаследуют выбранный шрифт.
- Чтобы задать шрифт для отдельного элемента:
  1. Выберите элемент.
  2. Перейдите на вкладку **Styles** и выберите **Font**.
  3. Выбранный шрифт будет применён к этому элементу, даже если вы измените основной шрифт.

:::note
SF Pro использовать нельзя — он не подходит для кросс-платформенных приложений. Вместо него рекомендуем Inter: эти шрифты очень похожи визуально.
:::