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

Перепишите заголовок одним промптом.

Попросите AI Editor переписать текст, упомянуть бесплатный пробный период или сократить все текстовые элементы экрана за один раз.

Explore the AI Editor›

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

Панель Styles содержит преднастроенные текстовые стили для распространённых заголовков и функций. У каждого стиля есть следующие настройки:

• Семейство шрифтов
• Начертание
• Размер
• Межстрочный интервал
• Межбуквенный интервал

Чтобы изменить стиль, нажмите на него, измените настройки и нажмите Save.

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

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

1. Откройте панель Styles .
2. В шапке панели нажмите Create style.

3. Установите Type в значение Text, введите название и настройте параметры типографики.

   

4. Нажмите Create.

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

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

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

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

Изменение стиля для части текста

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

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

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

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

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

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

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

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

   

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

   Important

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

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

   

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

   

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

Текстовые элементы имеют следующие настройки типографики:

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

  Warning

  На разных устройствах могут быть установлены разные шрифты, или один и тот же шрифт может отображаться по-разному. Если шрифт отсутствует на устройстве, система использует шрифт по умолчанию (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.

   Important

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

   

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

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

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

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

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

Чтобы перевести условный текст, откройте панель Localizations, где каждая ветка отображается в отдельной строке.

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

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

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