Редактор Wix: добавление и настройка кнопки с иконкой
5 мин.
Кнопки-иконки — это интересный визуальный способ помочь посетителям ориентироваться на сайте. Чтобы они понимали, что делает кнопка, вы можете добавить информативную подсказку, которая появляется при наведении.
Настройте ссылку на кнопке с иконкой и выберите иконку для каждого состояния: «В покое» и «При наведении».
Подробнее о состояниях кнопок
Шаг 1 | Добавление кнопки с иконкой
Чтобы начать, выберите кнопку-иконку на панели «Добавить элементы» и перетащите ее на страницу. Доступно множество вариантов дизайна в зависимости от нужного действия и внешнего вида.
Чтобы добавить кнопку с иконкой на сайт:
- Перейдите в редактор.
- Нажмите Добавить элементы
в левой части редактора. - Нажмите Кнопка.
- Нажмите Кнопки-иконки.
- Нажмите на кнопку или перетащите ее, чтобы добавить на страницу.
Шаг 2 | Настройка текста и иконки кнопки
Выберите, что вы хотите отображать на кнопке. Можно добавить иконку, текст или и то, и другое.
Текст и иконки на кнопках должны содержать четкий призыв к действию и сообщать посетителям, куда будет выполнен прямой переход.
Чтобы настроить текст и иконку кнопки:
- Нажмите на кнопку-иконку.
- Нажмите Настройки.
- Нажмите Выберите, что отображать и выберите вариант из выпадающего списка:
- Текст и иконка: отображение текста и иконки на кнопке. Настройте следующие параметры товара:
- Что здесь написано?: введите текст, который вы хотите отобразить на кнопке.
- Выбрать иконку: нажмите на иконку Заменить
, чтобы выбрать новую иконку для кнопки. Вы можете выбрать бесплатные медиафайлы Wix или загрузить свои.
- Только иконка: отображение только иконки на кнопке. Настройте следующие параметры товара:
- Выбрать иконку: нажмите на иконку Заменить
- Какой Alt-текст?: введите Alt-текст с описанием иконки.
- Выбрать иконку: нажмите на иконку Заменить
- Только текст: отображение только текста на кнопке. Введите текст, который вы хотите отобразить на кнопке, в поле Что здесь написано?.
- Ничего: создание прозрачной кнопки без текста и иконки. Введите Alt-текст с описанием кнопки в поле Какой Alt-текст?.
- Текст и иконка: отображение текста и иконки на кнопке. Настройте следующие параметры товара:
Шаг 3 | Добавление ссылки на кнопку с иконкой
Добавьте ссылку на кнопку-иконку, чтобы направить посетителей сайта в нужное местоположение. Вы можете добавить ссылку на самые разные места, включая страницу сайта, внешний веб-адрес, документ или эл. почту.
Чтобы добавить ссылку на кнопку:
- Нажмите на кнопку-иконку.
- Нажмите на иконку Ссылка
. - Выберите тип ссылки слева.
- В зависимости от выбранного типа ссылки добавьте соответствующую информацию.
- Нажмите Готово.
Совет:
Подробнее о типах ссылок, которые можно добавить.
Шаг 4 | Настройка кнопки с иконкой
После добавления ссылки на кнопку-иконку настройте ее в соответствии со своими потребностями. Вы можете выбрать цвет фона, настроить текст и многое другое.
Чтобы настроить кнопку с иконкой:
- Нажмите на кнопку-иконку.
- Нажмите на иконку Дизайн
. - Выберите другой готовый дизайн или нажмите Настроить дизайн, чтобы изменить текущий.
- В разделе Настроить дизайн выберите состояние кнопки в выпадающем меню.
- В покое: как кнопка выглядит до того, как посетитель на нее нажмет.
- При наведении: как кнопка выглядит при наведении на нее курсора.
- Настройте дизайн на следующих вкладках:
- Заливка фона
: настройте заливку кнопки.
- Текст
: настройте дизайн текста кнопки.
- Границы
: измените ширину и дизайн границ.
- Углы
: настройте радиус углов кнопки.
- Тени
: добавьте и настройте эффект тени на кнопке.
- Макет
: выберите, что отображать на кнопке, и настройте выравнивание.
- Иконка
: измените внешний вид иконки на кнопке.
- Заливка фона
