Добавление и стилизация текста и списков в Flow Builder

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

Настройка текстовых стилей

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

При добавлении текстового элемента вы можете выбрать один из настроенных здесь стилей.

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

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

3. Введите название и настройте типографику — гарнитуру, начертание, выравнивание и другие параметры.

   Пользовательские шрифты ведут себя иначе, чем встроенные. Прочитайте гайд — некоторые настройки к ним не применяются, и каждый вариант шрифта требует отдельного файла.

   

4. Нажмите Create.

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

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

1. Нажмите + в верхнем левом углу. Выберите Text. Выберите один из стилей текста, которые были предварительно настроены или заданы вами.

2. Нажмите на новый элемент и отредактируйте его содержимое в разделе Content на панели Design справа.
3. При необходимости настройте свойства типографики на панели Design. Или выделите текст в превью, чтобы открыть тултип для быстрой стилизации.
4. По желанию на панелях Design и Interaction можно применить любые другие настройки, доступные для компонентов в флоу. Подробнее см. в разделе Стили и внешний вид.

Изменение стиля для отдельных частей текста

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

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

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

Добавить старую цену

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

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

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

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

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

   Элемент Old Price должен находиться внутри карточки продукта — цена берётся из продукта этой карточки. Вне карточки продукта в билдере отображается заглушка «Old price» вместо реальной цены.

3. На панели Design в разделе Price задайте значение Multiplier. Adapty умножает цену продукта на это число. Например, при множителе по умолчанию 2, продукт за $12.99 покажет зачёркнутую цену $25.98.

   

4. При необходимости настройте свойства типографики. Элемент поддерживает те же стили, что и обычный текст.

Свойства типографики

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

• Font family: Выберите гарнитуру — встроенный шрифт или пользовательский.

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

• Weight: Задайте насыщенность шрифта.

• Size: Установите размер шрифта в пикселях.
• Color: Установите цвет текста.
• Line height: Задайте межстрочный интервал или оставьте значение Auto.
• Alignment: Задайте горизонтальное (по левому краю, по центру, по правому краю) и вертикальное (сверху, по середине, снизу) выравнивание.
• Decoration: Примените подчёркивание или зачёркивание.
• Truncate: Ограничьте количество отображаемых строк. Текст, выходящий за это ограничение, будет обрезан. Удобно, когда длина содержимого варьируется из-за динамических переменных или локализации.

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

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

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

Встроенная ссылка

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

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

Действие «Открыть URL»

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

1. Добавьте Button — или используйте пресет Links: готовая строка с кнопками Restore / Terms of Service / Privacy Policy.

   

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

3. Укажите адрес назначения для действия Open URL.

   Пустое действие Open URL блокирует предпросмотр и публикацию.

   

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

Условный текст меняет содержимое текстового элемента в зависимости от условия. Например, заголовок может показывать одно сообщение при выборе годового плана и другое — при выборе месячного. Условный текст работает так же, как условная видимость, но вместо показа или скрытия элемента меняет его содержимое.

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

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

3. Составьте условие if. Выберите свойство на вкладке Custom, Products или Elements, задайте оператор и введите значение для сравнения. Подробнее о типах свойств см. в разделе Условная видимость.
4. В поле then введите текст, который будет отображаться при выполнении условия. Форматирование rich text работает так же, как для обычного текста. Чтобы вставить переменную, нажмите { } Add variable.
5. В поле else введите резервный текст, который будет отображаться, если ни одно из условий не выполнено.
6. (Необязательно) Нажмите + Add else/if, чтобы добавить дополнительные условия, каждое со своим текстом.

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

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

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