Button Design Presets Configuration Guide

Introduction

Call-to-Action (CTA) buttons are critical for driving user engagement, lead generation, and conversions. PolyCMS integrates a flexible and robust Button Design Presets system that allows content creators and administrators to instantly style buttons using pre-configured, harmonized design systems without writing any custom CSS or HTML code.

This guide details the standard pre-built presets, their flexible JSON schema structure, and how you can load, manage, and create custom presets directly within the Block Editor.

Pre-Built Design Presets

PolyCMS comes pre-seeded with 9 production-grade, premium button presets designed for high-conversion and visual consistency across all layout themes:

Database Architecture and JSON Schema

Under the hood, presets are stored in the database under polycms_presets and organized hierarchically using the polycms_preset_categories table.

Each preset contains a highly customizable JSON payload that specifies precise spacing, color schemes, typography, borders, alignments, and interactive hover behaviors:

{
  "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"
}

Spacing and Typography Properties

• Padding (inner_padding_*): Declared in pixels (px) for precise control over internal text buffer spaces.
• Typography (font_size, font_weight): Supports standard sizing scales (0.875rem, 1rem) and CSS weight mappings (600, 700).
• Borders (border_radius): Configures corner styling from sharp edges (0px) and classic blocks (4px, 6px) to fully rounded pills (9999px).

Editor Integration (Preset Load Modal & Preset Manager)

When editing content in the Admin Panel, the Block Editor embeds a cohesive preset interaction system:

1. The Preset Manager Panel

When you select or add a Button block, the right-sidebar settings pane loads the ButtonSettings.vue configuration form. Directly within this panel, the Preset Manager (PresetManager.vue) provides:

• A preview window of the currently active design.
• Direct sliders and colorpickers to override default parameters.
• A "Load Preset" action launcher.

2. Loading a Design Style

Clicking the "Load Preset" button triggers the PresetLoadModal.vue popup:

• Search & Filter: Search presets by name or browse by hierarchical folders (e.g. system default, custom agency templates).
• Instant Preview: Hovering or selecting a style displays a live rendering of the button.
• Apply Style: Confirming your selection instantly updates the button's JSON payload in the Block Editor, refactoring the visual presentation in real-time.

Conclusion & Best Practices

To maintain high visual quality across your website:

• Limit Color Spread: Use a single primary preset for major sign-up CTAs and outline presets for secondary links.
• System Scoping: Save verified designs as System Presets so other authors can reuse consistent button layouts on different pages.