Skip to content

How to Style Global Theme Buttons

Accessing Button Settings in Global Theme Styles

To configure your site-wide button styles, navigate to your page editor, click Edit, then select Theme to enter the Global Theme Style settings. From there, go to More Settings and select Buttons.

Understanding the Three Button Style Categories

The Generator theme organizes buttons into three categories:

Primary is the button style you'll use most throughout the site — typically the most prominent, high-contrast style (Generator's default is a black button with white text).

Secondary is typically an inverted variation of the primary. If your primary has a black background and white text, your secondary might use a transparent background with a black border and black text. These aren't strict rules — just a framework for thinking about style variation.

Highlight is your attention-grabbing call-to-action button. Its background color automatically inherits from the Highlight color set in your Global Theme Settings colors. Use this where you most want to direct user attention.

Configuring Button Sizes

Inside the Size settings, you can define styles for Small, Regular, and Large button sizes. For each size, set the font size and padding — padding controls the button's height and width.

Setting Button Styles and Publishing

For each category (Primary, Secondary, Highlight), configure the background color, text color, and any other style properties you want as your site-wide defaults. When finished, click Publish Theme to push all global style changes across every template on your site.

Using Presets in the Button Module

When editing a page, click the + icon and search for Custom Button to add Generator's button module. Once placed, open the Styles tab (every Generator module has a Content tab and a Styles tab).

To inherit your global theme button styles, click Presets within the Styles tab. From here you can assign the button a style of Primary, Secondary, or Highlight — and it will automatically reflect whatever you configured in the global theme settings.

If you need a one-off style that doesn't match any preset (e.g., a green button for a specific section), you can override styles directly at the module level without affecting the global defaults.

This lesson covered how to configure the three core button style categories — Primary, Secondary, and Highlight — inside the Generator theme's Global Theme Settings, and how to apply those styles to individual button modules using the Presets feature. The key action was setting global defaults and publishing them so styles propagate site-wide, while retaining the flexibility to override at the module level. The next lesson will likely continue with another global theme element or module-level styling topic.