Блок-ссылка
Блок-ссылка (Link Block) позволяет превратить любой элемент или блок (например, изображение или баннер) в ссылку.
Блок-ссылки похожи на Div-блоки в том смысле, что их можно использовать для структуры и компоновки, но область внутри Блок-ссылки становится ссылкой. Они часто используется для создания списков товаров или услуг, которые ссылаются на другие страницы.
Добавление элементов в Блок-ссылку
Любой элемент, за исключением других ссылок (текстовая ссылка, кнопка), можно перетащить в Блок-ссылку из панели Элементов (Elements), либо переместив в нее элемент, который уже находится на Холсте.
Другие ссылки не могут быть вложены в Блок-ссылку, но вы можете вставить в него текстовый блок и оформить его так, чтобы он выглядел как кнопка.
Стилизация Блок-ссылки такая же гибкая, как и у Div-блока.
По умолчанию Блок-ссылке уже заданы некоторые параметры стилей:
- режим отображения — Inline-flex
- шрифт — 16px, цвет синий
- цвет границы — синий
- курсор — Pointer (при наведении указывает на возможность клика)
Вы можете изменить эти стили и добавить новые по своему усмотрению в настройках стилей правой панели.
Стили состояния наведения для Блок-ссылки
Блок-ссылка — интерактивный элемент, поэтому рекомендуется установить другие стили для состояния при наведении курсора на Блок-ссылку, чтобы показать пользователям, что он доступен для клика. Например, можно добавить тень или другие эффекты.
Для более плавного перехода одного стиля в другой используйте эффект Перехода (Transitions) для стилей всех состояний Блок-ссылки.
Для Блок-ссылки обычно используются действия по клику, но возможно также настроить действия по наведению на Блок-ссылку.
По умолчанию для Блок-ссылки добавлено действие по клику. Вы можете изменить или настроить действие на вкладке Логика (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)