Текст в онбординге

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

Добавление текста

На экраны онбординга можно добавлять различные текстовые элементы. Для этого:

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

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

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

onboarding-text.gif

Добавление списков

Можно добавлять нумерованные и маркированные списки:

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

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

onboarding-list.png

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

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

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

Начиная с Adapty SDK v3.15.1, внешние ссылки по умолчанию открываются во встроенном браузере приложения — пользователь остаётся внутри вашего приложения, не переключаясь на другое. При необходимости можно настроить это поведение.

onboarding-url.gif

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

Помимо базовой компоновки элементов, можно настроить внешний вид текста и списков:

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

Чтобы ускорить работу:

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

Шрифты

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

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

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

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

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