Руководство по настройке предустановок дизайна кнопок

Введение

Кнопки призыва к действию (CTA) имеют решающее значение для вовлечения пользователей, привлечения потенциальных клиентов и конверсий. PolyCMS объединяет гибкую и надежную систему предустановок дизайна кнопок, которая позволяет создателям контента и администраторам мгновенно стилизовать кнопки, используя предварительно настроенные, гармонизированные системы дизайна, без написания какого-либо специального кода CSS или HTML.

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

Предварительно созданные пресеты дизайна

PolyCMS поставляется с 9 предустановленными премиальными пресетами кнопок промышленного уровня, предназначенными для высокой конверсии и визуальной согласованности во всех темах макета:

Архитектура базы данных и схема JSON

Под капотом пресеты хранятся в базе данных под именем «polycms_presets» и организованы иерархически с помощью таблицы «polycms_preset_categories».

Каждый набор настроек содержит настраиваемую полезную нагрузку JSON, которая определяет точные интервалы, цветовые схемы, типографику, границы, выравнивание и интерактивное поведение при наведении:

{
  "style": "custom",
  "alignment": "center",
  "target": "_self",
  "label": "Action Button",
  "bg_type": "solid",
  "bg_color": "#4f46e5",
  "text_color": "#ffffff",
  "border_color": "#4f46e5",
  "hover_bg_type": "solid",
  "hover_bg_color": "#4338ca",
  "hover_text_color": "#ffffff",
  "hover_border_color": "#4338ca",
  "border_radius": "9999px",
  "inner_padding_top": 14,
  "inner_padding_right": 36,
  "inner_padding_bottom": 14,
  "inner_padding_left": 36,
  "font_size": "1rem",
  "font_weight": "600"
}

Свойства интервала и оформления

• Padding (inner_padding_*): объявляется в пикселях (px) для точного контроля над пространством внутреннего текстового буфера.

• Типографика (font_size, font_weight): поддерживает стандартные шкалы размеров (0,875rem, 1rem) и сопоставления веса CSS (600, 700).

• Границы (border_radius): настраивает стиль углов от острых краев (0px) и классических блоков (4px, 6px) до полностью закругленных таблеток (9999px).

Интеграция редактора (модальный режим загрузки предустановок и менеджер предустановок)

При редактировании контента в панели администратора Редактор блоков включает в себя целостную систему предустановленного взаимодействия:

1. Панель управления пресетами

Когда вы выбираете или добавляете блок Button, на панели настроек правой боковой панели загружается форма конфигурации ButtonSettings.vue. Непосредственно на этой панели Менеджер предустановок («PresetManager.vue») предоставляет:

• Окно предварительного просмотра текущего активного дизайна.

• Прямые ползунки и палитры цветов для переопределения параметров по умолчанию.

• Средство запуска действий ** «Загрузить предустановку»**.

2. Загрузка стиля дизайна

Нажатие кнопки ** «Загрузить предустановку»** вызывает всплывающее окно «PresetLoadModal.vue»:

• Поиск и фильтр: поиск пресетов по имени или просмотр по иерархическим папкам (например, системные шаблоны по умолчанию, пользовательские шаблоны агентств).

• Мгновенный просмотр: при наведении или выборе стиля отображается интерактивная визуализация кнопки.

• Применить стиль: при подтверждении выбора данные JSON кнопки мгновенно обновляются в редакторе блоков, что приводит к рефакторингу визуального представления в режиме реального времени.

Заключение и лучшие практики

Чтобы поддерживать высокое визуальное качество на вашем веб-сайте:

• Ограничить цветовое расширение: используйте один основной пресет для основных призывов к действию при регистрации и контурные пресеты для второстепенных ссылок.

• Обзор системы: сохраняйте проверенные дизайны как Системные настройки, чтобы другие авторы могли повторно использовать одинаковые макеты кнопок на разных страницах.