С помощью этого виджета вы можете добавлять и редактировать тексты. Чтобы создать новый текст, используйте шорткат T или нажмите + (W) в левой панели, а затем выберите Text.

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

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

Стили текста

Стили помогают сделать процесс редактирования текстов проще и быстрее. Чтобы открыть список стилей, кликните дважды на текстовый виджет, выберите Typography в его атрибутах, а затем нажмите No style (или название любого уже созданного вами стиля) в верхней части панели. Вы можете использовать любой из дефолтных стилей или добавить собственный. Чтобы создать новый стиль, нажмите + в нижней части панели, выберите все нужные вам параметры и нажмите Save. Чтобы отредактировать стиль, кликните дважды по его названию или нажмите на три точки рядом с ним, а затем выберите Edit.

Чтобы ваш проект лучше индексировался в поисковых системах, вы можете присвоить HTML-теги, — <h1>, <h2>, <h3> или <h4>, — любому текстовому стилю. Эта разметка сохранится в финальном коде проекта. По умолчанию, выбирая стили H1 и H2, вы оборачиваете текст в соответствующие HTML-теги: <h1>…</h1> и <h2>…</h2>. Для всех остальных стилей используются теги <p>…</p>.

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

Чтобы ориентироваться в стилях было проще, нажмите на три точки в нижней части панели и выберите нужный фильтр: показать все стили (Show all styles), показать только использованные стили (Show only used) или только неиспользованные (Show only unused). Здесь вы также можете удалить все неиспользованные стили одновременно (Delete all unused).

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

• для macOS:
  Cmd + C/Cmd + Shift + V (Cmd + С/Cmd + Option + Shift + V для Safari)
• для Windows:
  Ctrl + C/Ctrl + Shift + V (Ctrl + С/Ctrl + Option + Shift + V для Safari)
  
  

Чтобы скопировать стиль из другого виджета, используйте шорткаты Cmd + Opt + C/V для macOS и Alt + Shift + Ctrl + C/V для Windows. Узнать больше о шорткатах, которые помогают в работе с текстовыми виджетами, вы можете здесь: Шорткаты. 

Глобальные стили

Если вы делаете стиль глобальным, он появляется во всех проектах в вашем аккаунте: и старых, и новых. Чтобы создать такой стиль, переключитесь на вкладку Global в настройках стиля, нажмите + и создайте новый стиль. 

Стили во вкладке Project доступны только внутри того проекта, в котором они и были созданы.

Шрифты

Для того, чтобы использовать шрифты Adobe Fonts (Typekit), Webtype, Google Fonts или type.today, выберите Typography («Типографика») в меню настроек виджета. Затем кликните на название шрифта и выберите вкладку Custom («Кастомные шрифты») в открывшемся окне. Далее перейдите в библиотеку шрифтов (Library).

 

На платных планах вы можете загружать шрифты в TTF, OTF, WOFF или WOFF2-формате. Выберите Upload («Загрузить») во вкладке Custom. Далее введите название шрифта, выберите нужное начертание и загрузите файл.

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

Если вы используете большое количество шрифтов, вам может быть полезна опция фильтрации. Чтобы открыть ее, нажмите на три точки в правом верхнем углу панели шрифтов. Здесь вы можете удалить все неиспользованные шрифты одновременно (Delete all unused), а также выбрать, какие шрифты будут отображаться в атрибутах текстового виджета: все добавленные шрифты, только используемые или только неиспользуемые.

Выравнивание

Нажмите Align («Выровнять»), чтобы определить расположение текста внутри виджета. Кроме четырех базовых типов выравнивания (по левому или правому краю, по центру, по ширине), вы можете выбрать направление текста справа налево (RTL).

Также есть две опции для выбора высоты самого текстового виджета:

• Auto height — высота виджета будет меняться автоматически в зависимости от длины вводимого текста.
• Fixed size — высота виджета остается фиксированной. При этом вы можете выбрать, где должен располагаться текст относительно виджета: в верхней или нижней его части.

Расширенные настройки типографики (Advanced typography)

Кликните дважды на текстовый виджет и выберите Advanced Typography («Расширенные настройки типографики») в атрибутах. 

Transform

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

Decoration

Добавьте верхнее и нижнее подчеркивание или сделайте перечеркнутый текст.  

Features

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

List

Включите эту опцию, чтобы превратить текст в нумерованный или ненумерованный список. 

Стили для списков работают точно так же, как и текстовые стили: вы можете делать их глобальными и менять их положение, перетаскивая их с места на место. По умолчанию, списки наследуют последний использованный вами текстовый стиль. Также вы можете создавать собственные стили. Для этого, нажмите на ‘Same as text’ в настройках списка (опция Advanced Typography) и нажмите +. После этого автоматически откроются параметры нового стиля. Здесь вы можете настроить шрифт и выбрать ширину колонки. 

Опция Align определяет положение строки в пунктах списка. Если она активирована, все строки будут начинаться там же, где и первая строка. Если она выключена, все строки (кроме первой) будут выровнены по буллетам. 

Чтобы заменить буллеты на другие символы, нажмите Marker в настройках стиля и выберите нужный символ. Обратите внимание: отобразятся только те глифы, которые существуют для выбранного вами шрифта. 

Изменить положение буллетов (или глифов), а также отступов пунктов списка, вы можете, изменив параметры опции Baseline shift.  

Outline

Добавьте обводку к тексту: настройте ее толщину и цвет. 

Box color

Настройте фоновый цвет для текстового виджета. 

Selection color

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

Неразрывный пробел и мягкий перенос

Неразрывный пробел (&nbsp;) не позволяет осуществлять перенос слов на другую строку: обычно этот символ используют для лучшей читабельности текста. Добавить неразрывный пробел в ваш текст вы можете при помощи опции Insert или используя эти шорткаты:

• для macOS: Alt + Space;

• для Windows: Ctrl + Shift + Space.
  
  

Мягкий перенос (&shy;), наоборот, создает принудительный перенос внутри слова или строки. Вставить этот символ в текст вы можете также при помощи опции Insert или шортката Shift + Enter для macOS и Windows.

Ссылка

Ссылками могут быть как одно или несколько слов внутри текста, так и весь виджет целиком.

 

Для того, чтобы добавить ссылку, выделите текст и нажмите на иконку Link в меню справа. 

Выберите нужный вам тип ссылки:

• Website URL. Ссылка на  другой сайт. 
• Jump to Page. Ссылка на внутреннюю страницу проекта. Введите номер страницы или ее URL. Если вы меняете порядок страниц, такие ссылки обновляются автоматически.
• Email. Создает новое email-сообщение с указанным адресом.
• Phone Number.  Клик по такой ссылке запускает звонок на мобильных устройствах. В номере может быть не больше 15 цифр без пробелов, дефисов и разделителей: +[код страны][код области][номер] — в соответствии с рекомендациями E.164.
• Anchor. Ссылка к конкретной позиции на странице. Кликните там, где хотите установить якорь, или укажите нужную высоту в пикселях, например 748 px. Якорь должен находиться на той же странице, что и ссылка.
• Scroll to Top. Возвращает пользователей к верхней границе страницы.
• Go Back. Ведет на предыдущую страницу проекта.

 

Нажмите на стрелку, чтобы активировать ссылку.

 

После этого вы увидите переключатель Open in tab (Открыть в новой вкладке) и возможность задать стиль ссылки: выберите любой стиль из уже существующих или создайте новый, нажав на кнопку +.

Для того, чтобы настроить Current Link Style, откройте панель ссылок, выберите Edit Style из выпадающего меню и перейдите во вкладку Current.