Кнопка и Кнопка Наверх
Кнопка служит призывом к действию (CTA) и может содержать ссылки на страницы, всплывающие формы и многое другое.
По умолчанию в Кнопке есть текстовый элемент, а также ей заданы некоторые параметры стилей:
- цвет фона;
- закругление углов;
- шрифт;
- внутренние отступы;
- курсор — Pointer (при наведении указывает на возможность клика).
Вы можете изменить эти стили и добавить новые по своему усмотрению в настройках стилей правой панели.
Размер Кнопки определяется текстом внутри нее (длина текста, размер шрифта, высота строки) и внутренними отступами. Можно также настроить размер Кнопки, изменив ее ширину и высоту на вкладке Стилей в разделе Размер.
Для стилизации Кнопки вы можете:
- изменить радиус закругления углов (в разделе Размер);
- изменить внутренние и внешние отступы (в разделе Размер);
- изменить шрифт, его размер и цвет (в разделе Текст);
- изменить цвет фона и границы (в разделах Фон и Границы);
- добавить тень (в разделе Эффекты).
Также в Кнопке можно использовать изображение (Картинку или Иконку) вместо текста или вместе с ним. Для этого изображение можно задать в настройках фона кнопки или добавить Картинку или Иконку внутрь самой кнопки.
Стили для разных состояний Кнопки
Кнопка — интерактивный элемент, поэтому рекомендуется установить другие стили для состояний при наведении курсора или клик на Кнопку. Для лучшего визуального эффекта можно изменить цвет фона Кнопки, добавить тень, трансформацию (например, сдвиг) или другие эффекты.
Для более плавного перехода одного стиля в другой используйте эффект Перехода (Transitions) для стилей всех состояний Кнопки.
На вкладке Логика (Logic) правой панели доступна настройка действия (Action), которое будет происходить при наведении или клике по Кнопке.
При добавлении действия нажатием "+" автоматически добавляется событие Клик — с переходом на страницу.
Выбрать другое действие можно, нажав на иконку слева от названия действия.
В настройке действий доступны:
- Запуск действия (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).
Кнопка Наверх при нажатии прокручивает страницу сайта наверх, к началу.
По умолчанию в Кнопке Наверх есть иконка со стрелкой и текст, а также ей заданы некоторые параметры стилей:
- цвет фона;
- закругление углов;
- шрифт;
- внутренние отступы;
- курсор — Pointer (при наведении указывает на возможность клика).
Подобно обычной кнопке, вы можете стилизовать Кнопку Наверх по своему усмотрению, а также установить стили для разных ее состояний, используя настройки стилей правой панели.
Также для Кнопки Наверх важно установить параметры Позиционирования (Position). Ее можно зафиксировать в правом нижнем углу страницы, установив для нее Position fixed и задав атрибуты позиционирования справа right и снизу bottom.
Дополнительно задайте для Кнопки Наверх Z-индекс, так её не будут перекрывать другие виджеты.
Во вкладке Настройки правой панели можно установить скорость прокрутки к началу страницы в миллисекундах. Доступны значения от 100 до 1000 миллисекунд.
