header-logo
Узнайте как использовать Wix для создания своего сайта и бизнеса.
Создавайте и управляйте своим сайтом, используя интуитивно понятные функции Wix.
Управляйте подписками, планами и счетами.
Управляйте своим бизнесом и общайтесь с пользователями.
Узнайте, как приобрести, подключить или перенести домен на свой сайт.
Получите инструменты для развития вашего бизнеса и присутствия в интернете.
Повышайте свою видимость с помощью инструментов SEO и маркетинга.
Получайте расширенные функции, которые помогут вам работать более эффективно.
Находите решения, узнавайте об известных неполадках или свяжитесь с нами.
placeholder-preview-image
Совершенствуйте навыки с помощью наших курсов и учебных статей.
Получайте рекомендации по веб-дизайну, маркетингу и многому другому.
Узнайте, как увеличить органический трафик из поисковых систем.
Создайте собственный сайт на нашей полнофункциональной платформе.
Найдите подходящего специалиста, который поможет вам достичь целей.
placeholder-preview-image
  1. Главная
  2. Создание сайта
  3. Редактор Wix
  4. Добавление и настройка элементов
  5. Кнопки
  6. Настройка дизайна кнопок

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

8 мин.
Добавьте на сайт красивые кнопки, которые помогут посетителям перемещаться по разделам и страницам сайта.
Нажмите значок Дизайн на кнопке, чтобы настроить ее.
                                    
Содержание:

Настройка разных состояний кнопки

Вы можете отдельно настроить состояния каждой кнопки на сайте. Это позволяет создавать потрясающие эффекты, которые видят посетители при навигации по сайту.
Например, вы можете выбрать один цвет для одного состояния и другой — для режима наведения или нажатия. Таким образом кнопка будет выделяться, и посетители поймут, что они могут взаимодействовать с ней.
Важно:
Эффекты при наведении (нажатии) на кнопки-значки в настоящее время не поддерживаются на iOS. Это означает, что люди, которые заходят на ваш сайт с устройства iOS, не увидят эффект кнопки при наведении, если нажмут на нее.

Дизайн кнопки

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

Выберите, что вы хотите сделать:

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

Словарь терминов по дизайну кнопки

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

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

Меняет макет кнопки.
  • Нажмите на раскрывающееся меню Выберите, что показать и выберите, что будет отображаться на кнопке: текст, значок или и то и другое.
  • Выберите выравнивание, положение и расстояние между текстом и значком (при необходимости).
  • Задайте отступы вокруг текста и/или значка.

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

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

Параметры значка

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

Была ли статья полезна?

|
В этой статье
  • Настройка разных состояний кнопки
  • Дизайн кнопки
  • Словарь терминов по дизайну кнопки
  • Параметры настройки дизайна
  • Параметры форматирования текста
  • Параметры значка

Была ли статья полезна?

|