Блок-ссылка

Блок-ссылка (Link Block) позволяет превратить любой элемент или блок (например, изображение или баннер) в ссылку.

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

Добавление элементов в Блок-ссылку

Любой элемент, за исключением других ссылок (текстовая ссылка, кнопка), можно перетащить в Блок-ссылку из панели Элементов (Elements), либо переместив в нее элемент, который уже находится на Холсте.

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

Стили Блок-ссылки

Стилизация Блок-ссылки такая же гибкая, как и у Div-блока.

По умолчанию Блок-ссылке уже заданы некоторые параметры стилей:

• режим отображения — Inline-flex
• шрифт — 16px, цвет синий
• курсор — Указатель (Pointer) (при наведении указывает на возможность клика)

Вы можете изменить эти стили и добавить новые по своему усмотрению в настройках стилей правой панели.

Стили состояния наведения для Блок-ссылки

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

Для более плавного перехода одного стиля в другой используйте эффект Перехода (Transitions) для стилей всех состояний Блок-ссылки.

Настройки действий для Блок-ссылки

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

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

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

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

• Триггер действия (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)

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