Текстовый блок и Текстовая ссылка

Текстовый блок (Text)

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

Видео: Как создать блок с текстом

Стили Текстового блока

Текстовый блок имеет предустановленные стили шрифта: размер — 16px, цвет — черный, тип шрифта наследуется от родительского элемента или Холста, по умолчанию — Arial.

Текстовый блок можно стилизовать с помощью параметров на вкладке Дизайнправой панели.

Для форматирования Текста используются следующие параметры:

Шрифт (Font)

Толщина шрифта (Font weight)

Размер шрифта (Font size)

Цвет шрифта (Font color)

Интерлиньяж (Line-height)

Межсимвольное расстояние (Letter-spacing)

Выравнивание текста (Text Align)

Обводка (Text Stroke)

Тени (Text Shadows)

Дополнительные параметры (More Type Options): Оформление (Decoration), Прописные буквы (Capitalize), Перенос при переполнении (Overflow Wrap), Прерывание (Breaking). Эти параметры можно открыть, нажав на три точки.

Стилизовать можно не только весь текст, но и его часть, выделив ее мышкой. Выделив текст в Текстовом блоке, вы увидите на правой панели опции для его стилизации — Встроенный текст (Inline text). Здесь дополнительно к вышеуказанным параметрам можно установить Диактрику (Diacritics) — верхний или нижний индекс.

Также выделенную часть текста можно сделать ссылкой на страницу сайта или внешний ресурс, указав ссылку в поле Вставить ссылку (Insert link) . При нажатии трех точек справа от ссылки вы можете выбрать в качестве ссылки страницу вашего сайта, а также установить параметр открытия ссылки в новом окне.

Подробнее о стилизации текста —Типографика.

Настройки Текстового блока

Во вкладке Настройки (Settings) правой панели можно выбрать тег для Текстового блока: заголовок h1-h6, параграф p или цитата blockquote. По умолчанию тег Текстового блока - div.

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

Также вы можете редактировать текст прямо в настройках — в поле Текст отображается содержимое текстового блока.

Текстовая Ссылка (Text Link)

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

Стили Текстовой ссылки

По умолчанию Текстовая ссылка имеет стили:

размер шрифта — 16px, цвет — синий, с подчеркиванием, тип шрифта наследуется от родительского элемента или Холста, по умолчанию — Arial

курсор — Указатель (Pointer) (при наведении указывает на возможность клика)

Это стандартное оформление ссылки, но вы можете его изменить в настройках стилей на правой панели.

Рекомендуется настроить стили Текстовой ссылки для разных состояний — по наведению, активная или в фокусе (на вкладке Дизайн ), а также для состояния Посещенный (Visited) (на вкладке Настройки → UI состояние ). Это сделает взаимодействие с сайтом более удобным для пользователя.

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

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

Вы можете добавить и настроить действие для Текстовой ссылки на вкладке Настройки правой панели. Для этого нажмите + в блоке Действие .

По умолчанию добавляется действие по триггеру При клике .

Вы можете настроить:

Триггер действия (Action trigger) — когда будет происходить действие. Возможны два варианта: При клике и При наведении .

Действие (Action) — действие, которое будет происходить при наведении или клике по Текстовой ссылке.

При клике доступны также следующие действия:

Переход по ссылке (Go to link) — в поле Ссылка (Link) введите ссылку, по которой будет осуществляться переход при клике. Можно задать параметр открытия ссылки в новой вкладке.

Переход на страницу (Go to page) — выберите в выпадающем списке страницу проекта, на которую будет осуществляться переход при клике. Можно задать параметр открытия страницы в новой вкладке.

Переход по якорю (Go to anchor) — по кнопке Выбрать элемент (Select element) укажите элемент-якорь на странице (например, секцию), на который будет осуществляться переход при клике. Также можно задать скорость прокрутки до элемента в миллисекундах.

Отправить e-mail (Send mail) — в поле Email введите адрес электронной почты, на которую придет письмо пользователя. При клике на Текстовую ссылку с настройкой Отправить e-mail у пользователя будет открываться приложение для отправки почты.

Телефон (Phone) — в поле Телефон (Phone) введите номер телефона, набор которого будет осуществляться у пользователя при клике. Данное действие доступно на мобильных устройствах.

Показать элемент (Show element) — по кнопке Выбрать элемент (Select element) укажите элемент, который будет показан при клике. Также для него можно выбрать из списка настройку Отображение (Display): Auto, Block, Flex, Inline-block, Inline-flex.

Скрыть элемент (Hide element) — по кнопке Выбрать элемент (Select element) укажите элемент, который будет скрыт при клике.

Переключить элемент (Toggle element) — по кнопке Выбрать элемент (Select element) укажите элемент, который будет переключать свое текущее состояние отображения на значение Отображение (Display), выбранное из списка, и обратно.

При наведении (Hover) доступны следующие действия:

Показать элемент (Show element)

Скрыть элемент (Hide element)

Переключить элемент (Toggle element)