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

Добавляйте заголовки, абзацы или списки одним кликом, стилизуйте их в соответствии с вашим брендом и используйте [динамические переменные](onboarding-variables) для персонализации контента под каждого пользователя.
## Настройка текстовых стилей \{#set-up-text-styles\}

Панель **Styles** содержит готовые текстовые стили: H1, H2, H3, Button Label, Body, Caption и Small Label. Нажмите на любой стиль, чтобы отредактировать шрифт, начертание, размер, выравнивание, оформление и другие параметры.

При [добавлении текстового элемента](#add-text) вы можете выбрать один из настроенных здесь стилей.

:::important
Изменения стиля применяются ко всем текстовым элементам, которые его используют, на всех экранах.
:::

Чтобы создать новый стиль:

1. Нажмите Palette, чтобы открыть панель **Styles**.
2. На вкладке **Text** нажмите **Create style**.

3. Введите название и настройте типографику — гарнитуру, начертание, выравнивание и [другие параметры](#typography-properties).

    :::warning
   [Пользовательские шрифты](using-custom-fonts-in-flow-builder) ведут себя иначе, чем встроенные. Прочитайте гайд — некоторые настройки к ним не применяются, и каждый вариант шрифта требует отдельного файла.    
   :::

   

4. Нажмите **Create**.
## Добавление текста \{#add-text\}

Чтобы добавить текстовый элемент:
1. Нажмите **+** в верхнем левом углу. Выберите **Text**. Выберите один из [стилей текста](#set-up-text-styles), которые были предварительно настроены или заданы вами.

2. Нажмите на новый элемент и отредактируйте его содержимое в разделе **Content** на панели **Design** справа.
3. При необходимости настройте [свойства типографики](#typography-properties) на панели **Design**. Или выделите текст в превью, чтобы открыть тултип для быстрой стилизации.
4. По желанию на панелях **Design** и **Interaction** можно применить любые другие настройки, доступные для компонентов в флоу. Подробнее см. в разделе [Стили и внешний вид](builder-styling).
:::tip
Если вам нужно использовать один и тот же текстовый элемент на нескольких экранах, скопируйте и вставьте его: выделите элемент, нажмите Ctrl+C (или ⌘+C на Mac), перейдите на другой экран и нажмите Ctrl+V (или ⌘+V на Mac), чтобы вставить.
:::

### Изменение стиля для отдельных частей текста \{#change-styling-for-parts-of-text\}

:::warning
Форматирование **Bold** и **Italic** не влияет на текст, использующий [пользовательские шрифты](using-custom-fonts-in-flow-builder). Чтобы применить варианты пользовательского шрифта, загрузите каждый вариант как отдельный файл шрифта и выберите его в выпадающем списке **Font family**.
:::

Чтобы изменить стиль только для отдельных частей текстового элемента:

1. Выделите часть текстового элемента в разделе **Content**.
2. В появившемся тултипе измените цвет текста, примените жирное начертание, подчёркивание, курсив или зачёркивание, либо добавьте URL.

Предпросмотр обновляется мгновенно.

## Добавить старую цену \{#add-an-old-price\}

Элемент «Старая цена» показывает завышенную цену «до скидки» рядом с реальной ценой продукта, чтобы размер скидки был сразу виден. Он отображает цену продукта, умноженную на выбранный вами коэффициент, и автоматически перечёркивает её.

Содержимое элемента редактировать не нужно. Значение вычисляется из цены продукта в сторе в режиме реального времени, поэтому валюта всегда совпадает с реальной ценой.

Чтобы добавить старую цену:

1. Нажмите **+** в верхнем левом углу. Выберите **Text**, затем выберите **Old Price**.

2. На панели **Layers** перетащите элемент внутрь карточки продукта. Элемент также работает внутри карточек продуктов, сохранённых как переиспользуемые компоненты.

   :::important
   Элемент Old Price должен находиться внутри карточки продукта — цена берётся из продукта этой карточки. Вне карточки продукта в билдере отображается заглушка «Old price» вместо реальной цены.
   :::
3. На панели **Design** в разделе **Price** задайте значение **Multiplier**. Adapty умножает цену продукта на это число. Например, при множителе по умолчанию 2, продукт за $12.99 покажет зачёркнутую цену $25.98.

   

4. При необходимости настройте [свойства типографики](#typography-properties). Элемент поддерживает те же стили, что и обычный текст.

:::tip
Чтобы зачеркнуть реальную цену другого продукта — например, цену месячного плана на карточке годового — составьте строку с ценой из текстовых элементов и переменных. См. [Зачёркнутая цена со значком скидки](strikethrough-price).
:::
## Свойства типографики \{#typography-properties\}

Все текстовые элементы и стили текста используют одинаковый набор параметров типографики:

- **Font family**: Выберите гарнитуру — встроенный шрифт или [пользовательский](using-custom-fonts-in-flow-builder).

    :::warning
    На разных устройствах набор шрифтов различается, и один и тот же шрифт может отображаться по-разному. Если нужный шрифт отсутствует на устройстве, система использует шрифт по умолчанию (SF Pro / Roboto). Чтобы шрифт отображался одинаково на всех устройствах, загрузите [пользовательский шрифт](using-custom-fonts-in-flow-builder). 
    :::

- **Weight**: Задайте насыщенность шрифта.
:::warning
    Настройки **Weight**, **Bold** и **Italic** не применяются к [пользовательским шрифтам](using-custom-fonts-in-flow-builder) — ни через панель **Styles**, ни через раздел типографики в панели **Design**, ни через встроенную панель инструментов, ни через всплывающую подсказку форматирования текстовых фрагментов. Чтобы использовать разные начертания пользовательского шрифта, загрузите каждое начертание как отдельный файл и выберите нужный в выпадающем меню **Font**.
    :::
- **Size**: Установите размер шрифта в пикселях.
- **Color**: Установите цвет текста.
- **Line height**: Задайте межстрочный интервал или оставьте значение **Auto**.
- **Alignment**: Задайте горизонтальное (по левому краю, по центру, по правому краю) и вертикальное (сверху, по середине, снизу) выравнивание.
- **Decoration**: Примените подчёркивание или зачёркивание.
- **Truncate**: Ограничьте количество отображаемых строк. Текст, выходящий за это ограничение, будет обрезан. Удобно, когда длина содержимого варьируется из-за динамических переменных или локализации.
## Добавление ссылок \{#add-links\}

Флоу поддерживают два способа превратить текст в кликабельную ссылку. Выбор зависит от того, какую роль играет текст:

- **Инлайн-ссылка** — для URL внутри обычного текста, например, ссылки «Узнать больше» в абзаце. Всегда открывается во встроенном браузере.
- **Действие Open URL** — для отдельных элементов-кнопок, например, кнопки «Условия использования». Может открываться как во встроенном, так и во внешнем браузере.
### Встроенная ссылка \{#inline-link\}

Чтобы сделать часть текстового элемента ссылкой:

1. Выделите текст в разделе **Content**.
2. В панели форматирования нажмите на иконку ссылки.
3. Вставьте нужный URL в появившееся поле.

### Действие «Открыть URL» \{#open-url-action\}

:::link
Основная статья: [Действия](onboarding-actions#open-url)
:::

Чтобы превратить кнопку целиком в ссылку:

1. Добавьте [Button](builder-elements#buttons) — или используйте пресет **Links**: готовая строка с кнопками Restore / Terms of Service / Privacy Policy.

    

2. Выберите кнопку на панели **Layers** и откройте вкладку **Interactions** в правой панели.

3. Укажите адрес назначения для действия [**Open URL**](onboarding-actions#open-url).

    :::important
    Пустое действие Open URL [блокирует предпросмотр и публикацию](builder-save-publish#troubleshooting).
    :::

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

Условный текст меняет содержимое текстового элемента в зависимости от условия. Например, заголовок может показывать одно сообщение при выборе годового плана и другое — при выборе месячного. Условный текст работает так же, как [условная видимость](onboarding-element-visibility), но вместо показа или скрытия элемента меняет его содержимое.

Чтобы настроить условный текст:

1. Выберите текстовый элемент на холсте.
2. На панели **Design** в разделе **Content** выберите **Conditional**.

3. Составьте условие **if**. Выберите свойство на вкладке **Custom**, **Products** или **Elements**, задайте оператор и введите значение для сравнения. Подробнее о типах свойств см. в разделе [Условная видимость](onboarding-element-visibility).
4. В поле **then** введите текст, который будет отображаться при выполнении условия. Форматирование rich text работает так же, как для [обычного текста](#change-styling-for-parts-of-text). Чтобы вставить [переменную](onboarding-variables), нажмите **{ } Add variable**.
5. В поле **else** введите резервный текст, который будет отображаться, если ни одно из условий не выполнено.
6. (Необязательно) Нажмите **+ Add else/if**, чтобы добавить дополнительные условия, каждое со своим текстом.
:::tip
Чтобы изменить условный текст для другого языка, переключите активную локаль в нижней части редактора. Сначала добавьте языки в панели **Localizations** — см. [Добавить локаль во Flow Builder](add-paywall-locale-in-adapty-paywall-builder).
:::

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

:::note
Элементы списка — это контейнеры, состоящие из отдельных компонентов-элементов. Для простых маркированных или нумерованных списков в тексте используйте текстовый элемент и применяйте нужное форматирование через панель **Design**.
:::

1. Нажмите **+** в верхнем левом углу. Выберите **List** и выберите один из шаблонов списка.

2. Перейдите на панель **Design** справа, чтобы редактировать элементы списка или загрузить изображение в качестве маркера.