Редактор Wix: настройка дизайна кнопок

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

Нажмите на иконку Дизайн

на кнопке, чтобы начать настройку.

Скриншот кнопки после выбора. Иконка «Дизайн» выделена.

Примечание:

Доступные состояния кнопки зависят от выбранного типа кнопки.

Настройка дизайна кнопки

Доступно множество вариантов настройки. В зависимости от типа кнопки вы можете настроить фон, текст и иконку. Выбирайте цвета, заливки, углы, тени и многое другое.

Настройте каждое состояние кнопки индивидуально, чтобы создать привлекательные эффекты при навигации посетителей по сайту. Используйте яркие, отчетливые цвета для состояний «По умолчанию», «При наведении» и «Активно» для каждой кнопки, чтобы повысить взаимодействие и выделить каждую из них.

В чем разница между состояниями кнопки?

Скриншот нескольких различных типов кнопок.

Примечание:

Доступные параметры настройки зависят от того, что вы решили отображать на кнопке (текст, иконку или и то, и другое).

Чтобы настроить дизайн кнопки:

Перейдите в редактор.
Выберите тип кнопки, который вы хотите настроить, из предложенных ниже вариантов:

Настройка кнопки с текстом и иконкой

Нажмите на кнопку, которую хотите настроить.
Нажмите на иконку Дизайн .
Выберите действие:
- Выберите другой дизайн кнопки из доступных вариантов.
- Нажмите Настроить дизайн, чтобы отрегулировать следующее:
  - Заливка фона: выберите цвет, градиент или изображение для фона кнопки.
  - Текст: настройте шрифт, форматирование и интервал текста кнопки. Вы также можете нажать Тени, чтобы добавить тень к тексту.
  - Границы: выберите цвет или градиент для границ и установите толщину в пикс. Вы можете применить один и тот же дизайн ко всем сторонам или нажать на иконку Разблокировать , чтобы настроить их отдельно.
  - Углы: сделайте углы более закругленными или квадратными, изменив радиус в пикс. Вы можете установить одинаковый радиус для всех углов или нажать на иконку Разблокировать , чтобы настроить их отдельно.
  - Тени: добавьте внутреннюю или внешнюю тень, или несколько слоев тени, задав цвет, угол, расстояние, размер и т. д.
  - Макет: выберите, что показывать на кнопке (текст, иконку или и то, и другое), а также способ их расположения и выравнивания.
  - Иконка: настройте цвет, размер и угол иконки на кнопке.

Настройка кнопки-иконки

Нажмите на кнопку, которую хотите настроить.
Нажмите на иконку Дизайн .
Выберите действие:
- Выберите другой дизайн кнопки из доступных вариантов.
- Нажмите Настроить дизайн, чтобы отрегулировать следующее:
  - Заливка фона: выберите цвет, градиент или изображение для фона кнопки.
  - Текст: настройте шрифт, форматирование и интервал текста кнопки. Вы также можете нажать Тени, чтобы добавить тень к тексту.
  - Границы: выберите цвет или градиент для границ и установите толщину в пикс. Вы можете применить один и тот же дизайн ко всем сторонам или нажать на иконку Разблокировать , чтобы настроить их отдельно.
  - Углы: сделайте углы более закругленными или квадратными, изменив радиус в пикс. Вы можете установить одинаковый радиус для всех углов или нажать на иконку Разблокировать , чтобы настроить их отдельно.
  - Тени: добавьте внутреннюю или внешнюю тень, или несколько слоев тени, задав цвет, угол, расстояние, размер и т. д.
  - Макет: выберите, что показывать на кнопке (текст, иконку или и то, и другое), а также способ их расположения и выравнивания.
  - Иконка: настройте цвет, размер и угол иконки на кнопке.

Подробнее о настройке других типов кнопок:

Глоссарий по дизайну

Параметры дизайна кнопки

Вариант	Пояснение	Как использовать
Заливка фона	Добавляйте различные заливки, такие как цвета, изображения, узоры и градиенты, чтобы создавать красивые и красочные эффекты на кнопке.	Нажмите на поле цвета для каждого слоя и выберите тип заливки, затем перетащите ползунок, чтобы изменить прозрачность слоя заливки. Измените порядок слоев заливки, перетаскивая их вверх и вниз по списку.
Границы	Настройте границы кнопки, чтобы выделить ее. Настройте все стороны кнопки вместе или каждую сторону отдельно, нажимая на иконки блокировки и разблокировки.	Нажмите на поле Ширина и введите значение в пикселях или используйте ползунок. Нажмите на выпадающее меню Стиль и выберите стиль границ. Нажмите на поле цвета Заполнить, чтобы выбрать цвет границ, затем используйте ползунок для настройки прозрачности.
Углы	Измените углы кнопки, чтобы сделать их более закругленными или квадратными. Измените размер всех углов вместе или настройте каждый угол отдельно, нажимая на иконки блокировки и разблокировки.	Нажмите на поле пикселей в углу и введите число пикселей, которое вы хотите применить к нему.
Тени	Добавьте слои тени для кнопки и настройте их цвет, размер и другие параметры.	Нажмите на поле цвета для каждого слоя тени и настройте цвет, тип, угол, размер, расстояние и размытие. Затем перетащите ползунок, чтобы изменить прозрачность тени. Измените порядок слоев тени, перетаскивая их вверх и вниз по списку. При использовании кнопки «Загрузить»: Нажмите на переключатель, чтобы включить тени. Используйте ползунки для редактирования угла, расстояния, размера и размытия. Затем используйте ползунок и поле цвета, чтобы изменить прозрачность и цвет.
Макет	Измените макет кнопки.	Нажмите на выпадающее меню Выберите, что показывать и выберите, хотите ли вы отображать текст, иконку или и то, и другое. Выберите выравнивание, положение и интервал для текста и/или иконки (если применимо). Установите отступы вокруг текста и/или иконки.

Параметры форматирования текста

Вариант	Пояснение	Как использовать
Показать текст	Показать или скрыть текст на кнопке.	Нажмите на переключатель, чтобы показать или скрыть текст на кнопке.
Стиль (сайта)	Выберите стиль для текста кнопки.	Выберите стиль текста в выпадающем меню.
Шрифты	Выберите шрифт для текста кнопки.	Нажмите на выпадающее меню и выберите шрифт.
Размер шрифта	Измените размер текста на кнопке.	Перетащите ползунок, чтобы увеличить или уменьшить размер шрифта, или введите значение.
Форматирование текста	Примените форматирование к тексту.	Форматируйте текст с помощью следующих параметров: жирный шрифт, курсив, подчеркивание, зачеркивание, цвета, регистр, а также направление и выравнивание текста.
Межсимвольный интервал	Измените интервал между символами текста.	Перетащите ползунок, чтобы увеличить или уменьшить интервал, или введите значение.
Тени	Создайте тени для текста. Можно добавить несколько теней.	Нажмите Добавить тень, чтобы добавить новую. Нажмите на иконку Настроить тень, чтобы изменить ее дизайн.

Параметры дизайна иконки

Вариант	Пояснение	Как использовать
Показать иконку	Показать или скрыть иконку на кнопке.	Нажмите на переключатель, чтобы показать или скрыть иконку на кнопке.
Размер	Измените размер иконки.	Перетащите ползунок, чтобы увеличить или уменьшить размер иконки, или введите значение.
Цвет	Измените цвет иконки.	Нажмите на поле цвета и выберите цвет.
Поворот	Настройте угол поворота иконки.	Перетащите маркер, чтобы настроить поворот иконки, или введите значение в градусах в текстовое поле.