Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки

Кнопки #1823

Кнопки можно использовать на страницах сайта, например, в описаниях услуг или товаров . Они сразу бросаются в глаза и в большинстве случаев побуждают посетителя совершить действие через данную кнопку.

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

Шаг 1

Зайдите в панель управления сайта. В меню “Данные сайта” выберите раздел “Кнопки”.

phpCgswBS

Если меню отсутствует на рабочей панели, то зайдите во вкладку “Настройки” и перейдите в меню “Данные сайта”

phpv6C7mh

Шаг 2

Откроется страница-модуль “Кнопки”. В данном модуле хранятся все созданные изображения для кнопок (Кнопки).

Для создания кнопки кликните по “+Создать кнопку”.

phpNmalKB

Шаг 3

Откроется окно “Генератор кнопок”. Оно имеет следующий вид.

phpqLtxx7

Шаг 3.1

Введите текст, который будет отображаться на кнопке (прим. Заказать, Прайс-лист, Контакты). Затем нажмите по появившейся кнопке "Применить". Изменения вступят в силу.

phpIMglGQ

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

Для выбора готового стиля достаточно кликнуть по понравившейся кнопке в разделе “Применить готовый стиль”.

Затем нажмитеСохранить”.

phpnl5dkS

Шаг 3.2

Для создания собственного стиля кнопки выберите цвет кнопки в меню “Выбор цвета”.

phpMp92CJ

Шаг 3.3

Выберите подходящий размер и тип шрифта.

phpLxkevV

Шаг 4

Если Вам необходимо создать более детальный дизайн кнопки, кликните по вкладке ”Дополнительные настройки”.

Откроются такие инструменты как:

  • Цвет текста;
  • Цвет кнопки;
  • Тень от текста;
  • Тень от кнопки;
  • Отступы;
  • Рамка;
  • Скругление углов;
  • Внутреннее размытие.

phpx4zwju

Шаг 4.1 Цвет текста

Кликните по кнопке с текущим цветом шрифта, откроется окно выбора цвета. Выберите из палитры нужный цвет и кликнитеОк”.

phpFbmpOB

Шаг 4.2 Цвет кнопки

В меню “Цвет кнопки” в “Дополнительных настройках” можно выбрать количество цветов и способ заливки:

  • Одноцветная;
  • Два цвета;
  • Градиент (из 2-х цветов).

phpCuiLbS

При выборе “Два цвета” появится кнопка со вторым цветом. Кнопка будет выглядеть следующим образом.

phpqWGvol

При выборе “Градиент (из 2-х цветов)” кнопка будет иметь следующий вид.

phpCkJ3mz

Шаг 4.3 Тени

Для того, чтобы включить эффект тени для текста или кнопки, кликните по галочке с соответствующим эффектом.

phpul22AG

Окно примет следующий вид. В настройках тени можно выбрать:

  • Цвет (выбор цвета тени);
  • Угол (выбор угла освещения, под которым образуется тень). Для того чтобы изменения вступили в силу, кликните "Применить". ;
  • Непрозрачность (в процентах);
  • Размер тени (выбор размера тени);
  • Сдвиг тени (выбор отдаленности тени от объекта).

phpmzfkEx

Соответственно и кнопка примет имеющиеся параметры тени.

php3yKm3R

Шаг 4.4 Отступы

В меню “Отступы” можно настроить размеры кнопки, а именно ширину и высоту.

  • Сверху / Снизу - вертикальные отступы от текста;
  • Слева / Справа - горизонтальные отступы от текста.

php9h6bl5

4.5 Рамка

В меню “Рамка” можно настроить цвет и толщину рамки.

phpqVM3oF

4.6 Скругление углов

В меню “Скругление углов” можно выбрать радиус скругления углов кнопки.

phpJgWia3 phpmUr4gu

4.7 Внутреннее размытие

Для добавления эффекта размытия, внутри кнопки кликните по галочке “Внутреннее размытие”. Окно примет следующий вид.

Вы можете выбрать цвет и размер слоя размытия.

phpXboo80

Соответственно кнопка будет принимать заданные параметры внутреннего размытия.

phpWcyLFx

Шаг 5

После настройки стиля кнопки кликните по кнопке “Сохранить”.

Изображение кнопки сохранено в системе управления!

Обратите внимание!