Текстовый блок и Текстовая ссылка
Текстовый блок — это элемент, который используется для текстового контента.
Текстовый блок имеет предустановленные стили шрифта: размер — 14px, цвет — черный, тип шрифта наследуется от родительского элемента или Холста, по умолчанию — 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 (Прерывание).
Стилизовать можно не только весь текст, но и его часть, выделив ее мышкой. Выделив текст в Текстовом блоке, вы увидите на правой панели опции для его стилизации. Здесь дополнительно к вышеуказанным параметрам можно установить Диактрику (Diacritics) — верхний или нижний индекс.
Также выделенную часть текста можно сделать ссылкой на страницу сайта или внешний ресурс, указав ссылку в поле Вставить ссылку (Insert link). При нажатии трех точек справа от ссылки вы можете выбрать в качестве ссылки страницу вашего сайта, а также установить параметр открытия ссылки в новом окне.
Подробнее о стилизации текста — Типографика.
Во вкладке Настройки (Settings) правой панели можно выбрать тег для Текстового блока: заголовок Н1, Н2 и так далее до Н6. По умолчанию тег Текстового блока - div.
Установка нужных тегов для текста разного типа поможет браузеру, программам чтения с экрана и поисковым системам понять, как организован текст на странице и определить его структуру. Это может быть важно для поисковой оптимизации.
Текстовая Ссылка используется, когда текстовый элемент будет содержать только ссылку, например, при создании текста привязки.
По умолчанию Текстовая ссылка имеет стили:
- размер — 14px, цвет — синий, с подчеркиванием, тип шрифта наследуется от родительского элемента или Холста, по умолчанию — Arial
- курсор — Pointer (при наведении указывает на возможность клика)
Это стандартное оформление ссылки, но вы можете его изменить в настройках стилей на правой панели.
Рекомендуется настроить стили Текстовой ссылки для разных состояний — по наведению, активная или в фокусе, а также для состояния Посещенная (Visited). Это сделает взаимодействие с сайтом более удобным для пользователя.
Для Текстовой ссылки обычно используются действия по клику, но возможно также настроить действия по наведению на Текстовую ссылку.
По умолчанию для Текстовой ссылки добавлено действие по клику. Вы можете изменить или настроить действие на вкладке Логика (Logic) правой панели.
Для этого кликните на иконку слева от названия действия.
В настройке действий доступны параметры:
- Запуск действия (Action trigger) — определяет, когда будет происходить действие. Возможны два варианта: Клик и Наведение.
- Действие (Action) — определяет действие, которое будет происходить при наведении или клике по Текстовой ссылке.
При клике доступны следующие действия:
- Переход по ссылке (Go to link) — в поле Ссылка (Link) введите ссылку, по которой будет осуществляться переход при клике. Можно задать параметр открытия ссылки в новой вкладке.
- Переход на страницу (Go to page) — выберите в выпадающем списке страницу проекта, на которую будет осуществляться переход при клике. Можно задать параметр открытия страницы в новой вкладке.
- Переход по якорю (Go to anchor) — по кнопке Выбрать элемент (Select element) укажите элемент-якорь на странице (например, секцию), на который будет осуществляться переход при клике.
- Отправить электронное письмо (Send mail) — в поле Email введите адрес электронной почты, на которую придет письмо пользователя. При клике на Текстовую ссылку с настройкой Отправить электронное письмо у пользователя будет открываться приложение для отправки почты.
- Телефон (Phone) — в поле Телефон (Phone) введите номер телефона, набор которого будет осуществляться у пользователя при клике. Данное действие доступно на мобильных устройствах.
- Показать элемент (Show element) — по кнопке Выбрать элемент (Select element) укажите элемент, который будет показан при клике. Также для него можно выбрать из списка настройку Display.
- Скрыть элемент (Hide element) — по кнопке Выбрать элемент (Select element) укажите элемент, который будет скрыт при клике.
- Переключать элемент (Toggle element) — по кнопке Выбрать элемент (Select element) укажите элемент, который будет переключать свое текущее состояние отображения на значение Display, выбранное из списка, и обратно.
Проверить, как срабатывают действия при клике, можно на опубликованном сайте.
При наведении (Hover) доступны следующие действия:
- Показать элемент (Show element)
- Скрыть элемент (Hide element)
- Переключать элемент (Toggle element)