Центр поддержки Wix
    Главная
  1. Создание сайта
  2. Editor X
  3. Добавление элементов в Editor X
    4. Editor X: Добавление и настройка кнопок

Editor X: Добавление и настройка кнопок

8 мин. чтения
Editor X переходит на Wix Studio, нашу новую платформу для агентств и фрилансеров.Подробнее о Wix Studio
Кнопки — это отличный способ побудить посетителей выполнить нужные действия. В Editor X можно добавить кнопки, которые показывают текст, значок, или и то, и другое. Вы можете полностью настроить дизайн и макет кнопки и создать именно тот вид, который вам нужен.
Содержание:

Добавление кнопки

При добавлении новой кнопки вы можете выбрать дизайн из двух категорий:
  • Базовые кнопки: эти кнопки отображают только текст и имеют более «минималистичный» вид.
  • Кнопки с дизайном: на этих кнопках могут отображаться как текст, так и значки, а также предлагаются расширенные параметры настройки (например, фон изображения, цветовые градиенты и многое другое).

Чтобы добавить кнопку:

  1. Нажмите Добавить элементы в левом верхнем углу Editor X.
  2. Выберите Кнопка.
  3. Выберите дизайн и перетащите понравившуюся базовую кнопку или кнопку с дизайном на страницу.
Нужно вдохновение?
Посмотрите статьи по кнопкам:

Настройка базовых кнопок

После добавления базовой кнопки настройте ее текст и выберите, куда она ведет. После этого настройте дизайн — выберите другой цвет заливки, добавьте тень и настройте другие параметры, такие как интервал и форматирование текста.
Смотрите ниже, как настроить базовые кнопки:

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

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

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

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

При использовании кнопки загрузки:
  • Нажмите переключатель, чтобы включить.
  • Используйте ползунки для настройки угла, расстояния, размера и размытия. Затем используйте ползунок и поле палитры, чтобы отредактировать прозрачность и цвет.
Макет

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

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

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

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

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

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

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