Стили кнопок
Как оформить основную, второстепенную и дополнительную кнопки — форму, обводку и отступы — выбрать готовый набор и связать настройки с цветами и шрифтами сайта.
Кнопки на сайте оформляются глобально: одна настройка применяется ко всем кнопкам выбранного типа — в блоках, формах и других элементах интерфейса. Здесь задаётся форма кнопки (контур, скругление, отступы); цвета — в Цвета и цветовые темы, шрифт надписи — в Шрифты сайта (раздел «Кнопки») или на экране каждого типа кнопки.
Обзор панели «Стили сайта» — в Стили сайта: обзор.
Перед началом
- Откройте редактор:
ваш-id.photosquare.ru/config. - В главном меню выберите Стили → Кнопки или нажмите иконку кисти над превью и перейдите в раздел кнопок.
- Для удобства откройте страницу с кнопкой — изменения видны в превью (см. Превью сайта в редакторе).
[изображение: экран «Кнопки» — превью трёх типов, пункт «Все наборы кнопок», ссылки «Основная», «Второстепенная», «Дополнительная»]
Три типа кнопок
В Photosquare три глобальных стиля:
- Основная — главный призыв к действию (заказ, связаться, купить).
- Второстепенная — важное, но менее акцентное действие (подробнее, смотреть каталог).
- Дополнительная — лёгкий, минимальный акцент (вспомогательная ссылка, необязательное действие).
У каждого типа свои настройки формы и отступов. Большинство системных кнопок по умолчанию используют основной стиль; в блоках можно выбрать любой из трёх (см. ниже).
Наборы кнопок
Быстрый старт — готовый набор, который задаёт согласованный вид всех трёх типов сразу.
- На экране Кнопки нажмите превью вверху или пункт Все наборы кнопок.
- Выберите понравившийся набор — превью обновится сразу.
- При необходимости доработайте отдельные типы вручную.
[изображение: «Наборы кнопок» — карточки с превью primary / secondary / tertiary]
Настройка типа кнопки
На экране Кнопки нажмите Основная, Второстепенная или Дополнительная. Вверху панели — вкладки для переключения между типами без возврата назад.
Доступные параметры:
| Параметр | Назначение |
| Шрифт | Семейство, начертание, размер надписи на кнопке (те же настройки, что в Шрифты → Кнопки) |
| Форма | Заливка или без заливки; контур: квадрат, скруглённый, капсула, овал, подчёркивание, лепесток или произвольные углы |
| Обводка | Толщина рамки (0–10 px) для контурных кнопок |
| Отступ | Внутренние отступы по вертикали и горизонтали |
Цвет фона и текста кнопки задаётся не здесь, а в цветовых темах — см. Цвета и цветовые темы (параметры кнопок в редакторе темы).
[изображение: «Основная кнопка» — превью, настройки шрифта, форма, обводка, отступ]
Кнопка в блоке и форме
Глобальные стили задают вид кнопки; текст и ссылку меняют в самом блоке.
- Блок кнопки — на вкладке «Дизайн» выберите Стиль кнопки: основная, второстепенная или дополнительная. Подробнее: Блок кнопки.
- Блок формы — стиль кнопки «Отправить» и её текст настраиваются в параметрах формы; оформление берётся из глобальных стилей выбранного типа. См. Формы на сайте.
Из диалога блока кнопки можно перейти к глобальным стилям — ссылка Редактировать стили кнопок.
Сохранение
Изменения формы кнопок (наборы, форма, обводка, отступы) и правки шрифта на экране типа кнопки сначала видны в превью. Чтобы применить их на опубликованном сайте, нажмите Сохранить на панели над превью. Изменения цветов кнопок сохраняются вместе с правками в разделе Цвета — при том же нажатии Сохранить, если вы меняли и кнопки, и цвета за одну сессию.