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

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

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

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

https://vk.com/video-219751701_456239146

VK Видео | YouTube

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

Текстовый блок имеет предустановленные стили шрифта: размер — 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)