Pages 2.0 | Configure Brand Style Options

Pages 2.0 refers to the new version of Happeo Pages, released on April 2, 2025. All Happeo accounts created from this date onward use the new page editor by default.

🎯 Who this article is for: Admins and users with the branding permission who manage the visual setup of pages.

💼 Package requirements: Brand Style Options are available in the Starter, Growth, and Enterprise packages.

⚠️ Important: Brand Styles is an exclusive Pages 2.0 feature. Please refer to this article for Legacy Pages.

1. Overview

When setting up your branding, you can configure multiple approved visual styles for page sections and widgets. Instead of every section or widget looking identical, your editors can choose from a set of options you've pre-approved — keeping pages visually dynamic while everything stays connected to your Brand Style.

This gives your organization the right balance between design control and flexibility. You stay in control of what's available, editors have room to build engaging pages, and your brand governance holds at scale. Style Options works as part of the broader Brand Styles system. If you haven't set up a Brand Style yet, start there before continuing with this article.

🔎 Learn how to set up your Brand Style in our dedicated article.

2. Use cases

• Giving distributed teams a consistent but flexible toolkit: When an organization runs multiple page groups across teams, each team has different visual needs but must stay on-brand. Style Options lets you define a set of approved section and widget styles for editors to choose from, so every page group can feel tailored to its content without stepping outside the Brand Style.
• Building visually engaging pages without manual workarounds: When a team wants pages that mix light and dark section backgrounds to create visual hierarchy, manually overriding each section disconnects it from the Brand Style and creates cleanup work every time branding changes. Style Options lets editors select the right look from a dropdown, keeping everything on-brand and connected.
• Scaling content creation without losing brand control: As more people start building pages, small visual inconsistencies accumulate across page groups. By pairing Style Options with Brand Style Locking, you can ensure editors only ever choose from approved styles — no manual overrides, no disconnected elements, and brand updates that roll out cleanly across all content.

3. Before you begin

Before setting up Style Options, make sure the following are in place:

• You must be an admin or have the branding permission to configure Style Options.
• You need at least one Brand Style already created. Style Options are configured within an existing Brand Style. You cannot set them up independently. See Create and Manage Brand Styles to get started.
• Style Options are available for sections and individual widgets only. They do not apply to the hero or navigation.
• Style Options can be used with locked or unlocked Brand Styles, but the experience differs for editors depending on which you choose. See Lock a Brand Style to find out if locking is the right setup for your organization.

4. How to set up Style Options

For sections

Normal sections and collapsible sections are set up independently, so you can define different style options for each.

1. Go to Admin Settings and select Branding.
2. Open the Pages 2.0 tab and select the Brand Style you want to configure.
3. Under Element styles, select Sections.
4. Choose either the Normal section or Collapsible section tab depending on which you want to configure first.
5. Select + to add a new style option. Give it a clear, descriptive name (for example, "Light background" or "Dark green").
6. Set the background color and padding for that option.
7. Select Save.
8. Repeat to add additional style options as needed.

🗒 Note: Each section type has a Global Section Style that acts as the default — any new section added to a page will display it automatically, unless an editor selects a different option. To change what the default looks like, update the Global Section Style directly. The Global Section Style cannot be removed, as it is always the default for that section type.

For widgets

Widget style options work through a two-level structure. The Global Widget Style is the baseline applied to all widgets by default. On top of that, you can configure additional style options for individual widget types.

1. Go to Admin Settings and select Branding.
2. Open the Pages 2.0 tab and select the Brand Style you want to configure.
3. Under Element styles, select Widgets.
4. Select the individual widget type you want to configure (for example, Text).
5. Toggle on Override widget style at the top of the panel.
6. Select + to add a new style option. Give it a clear, descriptive name (for example, "White" or "Light green").
7. Set the background color, padding, border, rounding, and shadow for that option.
8. Select Save.
9. Repeat to add additional style options for this widget type, or navigate back to configure other widget types.
10. To make a style option the default for that widget type, select the three-dot menu next to it and choose Set as default.

🗒 Note: If no style options are configured for a specific widget type, that widget inherits the global widget style. You only need to configure options for the widget types where you want to offer variation.

5. How editors experience Style Options in Pages

Once you've set up style options, editors can access them directly from within the Pages 2.0 editor. To find the style options for a section or widget, select the element, select the cog icon, and go to the Style tab. A dropdown will appear showing all available style options for that element.

What editors see in that dropdown depends on whether the Brand Style is locked or unlocked.

• Locked brand style: If the Brand Style is locked and style options are configured, editors can select from the approved options in the dropdown. Granular styling controls are not available. All options remain connected to the Brand Style, so any updates you make in the Brand Style settings apply across all content using them.
• Unlocked brand style: If the Brand Style is unlocked, editors see the same dropdown of approved options but also have access to a (Customize) option. Selecting (Customize) reveals granular styling controls for that element. 
  • ⚠️ Important: Selecting it alone, even without making any further changes, creates a style override and disconnects that element from the Brand Style. Future Brand Style updates will not apply to that element unless the override is manually reset.

🗒 Note: Style options are applied at the individual page level. Each page can use different style options within the same Brand Style, giving editors flexibility while keeping everything within your approved range.

6. How to manage your style options

Once your style options are set up, you can update defaults, remove options, and manage per-widget overrides at any time from Admin Settings. Knowing how these changes affect pages already using your Brand Style helps you keep your content consistent without unexpected visual changes across your organization. 

🔎 For full guidance, see Manage Your Brand Style Options.

6. Best practices

Style Options are most effective when set up with a clear plan. These tips will help you get the most out of them while keeping your Brand Style easy to manage over time.

• Pair Style Options with Brand Style Locking: This is the recommended setup for most organizations. When a Brand Style is locked and style options are configured, editors choose from your approved options only — no manual overrides, no disconnected elements, and brand updates that apply consistently across all content. See Lock a Brand Style for more detail.
• Give style options descriptive names: Since Brand Style previews look visually similar to one another, clear names make it easier for both you and your editors to identify the right style at a glance.
• Test before rolling out: There is no change log for Brand Style updates, and changes apply immediately once saved. If you're updating a Brand Style that's already in use, duplicate it first and test against a test page group before applying changes to the live Brand Style.
• Keep your options purposeful: A small set of well-considered style options is easier to govern than a long list. Fewer options also make decisions easier for editors, reducing the need to customize a section or widget style from the page editor directly, if the Brand style is unlocked.

7. Frequently asked questions

Can I restrict which editors can apply certain style options? 

No. All editors working on a page or a page group with a Brand Style applied have access to all style options configured for that Brand Style. If you want to limit styling choices, the most effective approach is to keep your style options purposeful and pair Style Options with Brand Style Locking.

Can I duplicate a style option? 

No. Style options cannot be duplicated. If you want a similar option, you'll need to create a new one manually with the same configuration.

Is there a limit to how many style options I can create? 

There is no hard limit, but it's worth being intentional about how many you create. A large number of options makes the editor experience harder to navigate and increases the governance overhead of keeping them current.

What's the difference between a style option and a page-level manual override? 

A style option is an approved variant you define for a Brand Style. It stays connected to the Brand Style, so updates apply automatically across all content using it. A page-level manual override is a change an editor makes directly in the Pages 2.0 editor. It disconnects the element from the Brand Style, meaning future updates won't apply to it unless the override is reset at the page level.

🔎 See Create and Manage Brand Styles — “How to reset to your default Brand Style” for guidance.

Can each Brand Style have its own set of style options? 

Yes. Style options are configured within each Brand Style individually. This means different Brand Styles can have entirely different section and widget options, which is useful if different teams or departments use different Brand Styles across your organization.

What happens to style options if I move a page to a page group with a different Brand Style? 

The page inherits the new page group's Brand Style immediately. Connected elements adopt the new Brand Style's defaults. Overridden elements retain their customized styling and do not automatically reset to the new Brand Style's defaults.

Feedback

Got any feedback for us regarding Pages 2.0 Help Center content? Please fill out this form.