按钮设计预设配置指南

Last updated on Jun 24, 2026 02:13

＃＃介绍

号召性用语 (CTA) 按钮对于推动用户参与、潜在客户开发和转化至关重要。 PolyCMS 集成了灵活而强大的按钮设计预设系统，允许内容创建者和管理员使用预先配置的协调设计系统即时设置按钮样式，而无需编写任何自定义 CSS 或 HTML 代码。

本指南详细介绍了标准的预构建预设、其灵活的 JSON 模式结构，以及如何直接在块编辑器中加载、管理和创建自定义预设。

预先构建的设计预设

PolyCMS 预先植入了 9 个生产级的高级按钮预设，旨在实现所有布局主题的高转化率和视觉一致性：

预设名称	描述	关键美学	目标用例
初级固体（蓝色）	干净、现代的实心蓝色块。	实心“#3b82f6”背景，白色文本，6px半径。	默认高优先级操作。
次要大纲（蓝色）	极简边框按钮。	透明背景、“#3b82f6”边框和文本。	次要或低优先级 CTA。
SaaS（开始免费试用）	建立信任的深靛蓝药丸。	深靛蓝‘#4f46e5’bg，圆形药丸形状。	软件注册和免费试用。
电子商务（立即购买）	高转换橙色按钮。	充满活力的橙色“#f97316”背景，大胆的重量。	即时购买、结帐。
潜在客户发掘（下载 PDF）	以行动为导向的青色药丸按钮。	青色“#0d9488”背景，全圆角。	铅磁铁，资源下载。
高级版（书籍演示）	豪华金边深色按钮。	深黑色“#111827”背景，金色“#fbbf24”文本。	高额机票预订、咨询。
深色最小（黑色）	现代企业单色按钮。	深黑色“#111827”背景，白色文本。	现代投资组合，代理行动。
案例研究（阅读故事）	最小轮廓灰色按钮。	纯白色背景，浅色“#e5e7eb”边框。	内联博客导航、文章。
危险/警报（红色）	破坏性动作或警告按钮。	纯红色“#ef4444”背景，白色文本。	帐户删除，关键操作。

数据库架构和 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.预设管理器面板

当您选择或添加按钮块时，右侧边栏设置窗格会加载“ButtonSettings.vue”配置表单。在此面板中，预设管理器 (PresetManager.vue) 提供：

当前活动设计的预览窗口。
直接滑块和颜色选择器覆盖默认参数。
**“加载预设”**动作启动器。

2.加载设计风格

单击“加载预设”按钮会触发“PresetLoadModal.vue”弹出窗口：

搜索和过滤：按名称搜索预设或按分层文件夹浏览（例如系统默认值、自定义代理模板）。
即时预览：悬停或选择样式会显示按钮的实时渲染。
应用样式：确认您的选择会立即更新块编辑器中按钮的 JSON 负载，实时重构视觉呈现。

结论和最佳实践

为了保持整个网站的高视觉质量：

限制颜色扩散：对主要注册 CTA 使用单一主要预设，对辅助链接使用大纲预设。
系统范围：将经过验证的设计保存为系统预设，以便其他作者可以在不同页面上重复使用一致的按钮布局。