The Styling System Overview

The styling system controls how the website looks: colors, fonts, spacing, buttons, section layouts, images, cards, shadows, borders, and responsive behavior.

The important thing to understand is that styling does not live in just one place. There are broad website styles, page styles, product styles, section styles, and custom styling (also called CSS). The system is created so that these layers work together.

The Simple Mental Model

The styling system works like a stack of layers. A broad layer can set the default look for many things, while a narrower layer can adjust a specific environment or section.

• Website Global Styles set the foundation for the whole website.
• Specific Page/Product Styles control the styles of one page.
• Pages Sections and Products Sections Styles control each individual section on pages and product pages.

Important: If a setting feels like it should affect the whole site, look in Website Global Styles first. If it should affect only one page, look in that specific page. If it should affect only one section, use the section’s own styling controls.

The Logic Behind It

The default styles live under the website global styles and set the base for the whole website. Like many styling based options pages, it allows you to “set and forget” the styling in one place.

If you want for example to have more control over certain pages, you would modify their styling on those pages themselves.

And if you want to get even more specific, you can modify individual sections on pages to make them completely unique.

The global styles also allow you to modify individual sections, but with the distinction that you will set them site-wide. So for example, if you set the CTA (Call to Action) section styling under the global styles, it will apply to all CTA sections. This is where overwriting them per section level becomes useful – you simply edit the page where you want to modify the CTA and set the style there.

Styling Settings Locations

To give you a better idea where the styling settings can be found, the best way is to think about them as layers:

The General Environment

This is the base layer and contains all global default styles.

Additionally, the General Environment allows you to configure the styling of both the Home and Product environments by applying these default styles to them.

Furthermore, each individual section can also be styled from the General Environment through its respective configuration area, which will also inherit the default styles.

In this context, “defaults” refers to the styles that all newly created pages and product pages inherit automatically. If you want all pages and product pages to share the same styling, you can configure it here without needing to make any changes in the Home or Product environments.

Home and Products Environments

This is the page/product specific layer and will always overwrite the base layer (the general styling).

It has all of the pages and product pages specific styling. To overwrite the defaults of the general environment, you simply go to the page you want to edit and open the editor.

Here the styling settings live under the Styles tab and apply to the page.

The sections styling can be found only if you actually add a section first. It can be found as the last “button” under the sections. Clicking it opens a tab system that allows you to make edits.

Info: The Home Environment applies to the home page and all page types. It got its name from the homepage because it was originally intended only for that page. Later, it was extended to other page types, but the name stuck.

Possibilities of Environments

Each environment comes with their own unique styles and possibilities.

General Environment Styles

Website Global Styles are the foundation. They are where you define the overall visual language of the site before adjusting individual pages or sections.

This is where you usually decide the big design rules:

• Colors and theme: page background, secondary background, brand primary color, brand secondary color, accent colors, card backgrounds, and border colors.
• Typography: main font, heading font, body text color, muted text color, link colors, heading sizes, heading weights, heading line heights, and heading margins.
• Layout and spacing: default section spacing, container spacing, maximum content width, grid gaps, border width, border radius, and image shape defaults.
• Buttons: default button font, padding, shape, colors, hover colors, border styles, and primary, secondary, tertiary, or action button styles.
• Shop styling: rating colors, price colors, discount colors, and other commerce-focused visual details.
• Effects and motion: shadows, transition speed, image borders, element borders, and motion preference settings.

Note: If your website feels visually inconsistent, the cause is often not one section. It is usually a missing or inconsistent global style, such as different button colors, heading sizes, spacing values, or border radii.

Home Environment Styles

The Home environment (that also applies to page types) is where you build and style the front page and page types.

The styling here is useful for pages you want to turn into landing pages or sales pages that differ from the traditional product pages.

Pages and Home styles commonly control:

• Section text alignment.
• Section heading, kicker, subheading, and description styling.
• Default page-section button alignment and button spacing.
• Repeater item text styles.
• Icon sizes and small repeated element styling.
• General button behavior for page sections.

Individual Home sections can then add their own controls. A Hero section might let you change the layout, background, overlay, heading size, image placement, logos, and buttons. An Image Text section might focus on the grid gap, image width, image border radius, and content spacing.

Product Environment Styles

The Products environment controls product-page styling. Product pages often need more consistency than the Home page because many product pages share the same patterns.

Nevertheless, you can create products that “stand out” from the others by adding unique styles to them.

Product styling commonly controls:

• Product-section text alignment and spacing.
• Product content spacing.
• Product section headings, kickers, subheadings, descriptions, and small headings.
• Product button style, alignment, margin, hover states, and call-to-action text styling.
• Product-specific sections such as selling points, awards, extra descriptions, product traits, benefits, process, comparison table, FAQ, CTA, and extra options.

Product styling has the same basic idea as Home styling: broad product styles set defaults, while product section controls refine specific areas.

Important: Home styles and Product styles are separate environments. Changing a product section style will not automatically restyle the Home page. Changing a Home section style will not automatically restyle product pages.

Section-Specific Styling

Section-specific styling is where you control the actual parts of a section. These controls are designed around the section’s structure.

This can come in handy if you start to use the same sections throughout a page – currently possible only on the Home Environment. But even on product pages, having the option to highlighting a part of a product feature can be useful.

For example, a Hero section may expose styling for:

• Section background and overlay.
• Outer spacing, container width, and padding.
• Column layout, gaps, and alignment.
• Kicker, heading, value proposition, and other text elements.
• Buttons and button hover styles.
• Logos, side logos, images, image positioning, and image sizing.

A simpler section may expose fewer controls. For example, an Image Text section may focus on grid gap, item alignment, image width, image object fit, and image border radius.

Remember: Different sections expose different controls because different sections contain different pieces. A control appears when the section has something meaningful for that control to style.

Responsive Styling

Many styling controls can be changed per viewport. This means you can style Desktop, Tablet, Mobile, and Small Mobile differently.

For example, a heading can be large on desktop, smaller on mobile, and use a different line height on small screens. A section can have wide spacing on desktop and tighter spacing on mobile.

• Desktop is the base style.
• Tablet applies to medium screens.
• Mobile applies to phone-sized screens.
• Small Mobile applies to very narrow screens.

Warning: Do not judge a style change only on desktop. A section that looks good on a large screen can still need different spacing, heading size, image sizing, or button layout on mobile.

The Styling Controls

As it is common for customization setting pages, our system comes with the usual fields like an input field for custom values, drop-down field for fixed options and the range slider for easy and convenient choice.

What makes our system a bit different is the mode switch: some controls have modes and these modes decide how the value is written.

• Custom lets you type a CSS value manually, such as a CSS variable or exact value.
• Range is useful for fixed numeric values, such as a specific pixel or rem size.
• Clamp is useful for fluid values that scale between a minimum and maximum size.

Clamp Mode

While Range mode and Custom mode are fairly self-explanatory, Clamp mode requires a bit more explanation.

The CSS clamp() function is commonly used to create responsive values that automatically scale based on the viewport size. Our Clamp mode simplifies this by allowing you to define just two values:

• Minimum value – used for smaller screens
• Maximum value – used for larger screens

Once these values are set, the system automatically scales them across a wide range of screen sizes, from 320px mobile devices up to 1440px desktop screens.

This is powerful because you only need to configure the value once. Traditionally, you might need to define separate font sizes for desktop, tablet, and mobile devices to ensure text remains readable and proportionate across all screen sizes.

With Clamp mode, simply set:

• the minimum value for mobile screens
• the maximum value for desktop screens

The system will smoothly adjust the value between the minimum and maximum settings, ensuring your typography and spacing scale naturally across all devices. This is also why the screen size options are grayed out when using Clamp mode – they are no longer needed.

Of course, if you prefer not to use Clamp mode, you can switch to Range or Custom mode and define the values manually for each screen size.

About rem

You may have noticed that the values use rem units instead of pixels (px).

If you’re familiar with pixels, the conversion is straightforward: 1rem = 10px

For example:

• 32px → 3.2rem
• 18px → 1.8rem
• 50px → 5rem

We use rem because it is generally a more flexible and accessible unit than pixels. It allows designs to scale better across different devices and user settings while maintaining consistent proportions.

Presets and System Styles

Some controls are presets. A preset is a named option that can apply several design decisions at once.

For example, a section may have a layout preset, a heading mode, or a button style mode. A button may use the system button style, or it may be customized locally. A heading may use the global heading system, or it may have its own local values.

Presets are useful because they keep the site consistent. Local custom values are useful when a specific section needs to break from the default design.

Note: If you want a button or heading to match the rest of the site, use the system style when available. If you want it to be intentionally different, use local custom controls.

Custom CSS

The styling system also includes a Custom CSS area. This is for cases where the normal controls do not cover the exact change you need.

Custom CSS usually has two modes:

• Append: keep the generated CSS and add your custom CSS after it.
• Override: replace the generated CSS for that styling scope with your custom CSS.

Warning: Override mode is powerful and easy to misuse. If you choose Override, the generated CSS from the normal controls is ignored for that scope. Use Append unless you are sure you want to replace the generated styling.

How Repeated Sections Stay Separate

Home and product pages can contain repeated section types. For example, one page might use more than one Image Text section, or more than one CTA-style section.

The styling system handles this by giving active styled elements stable internal targets. That allows one section instance to have local styling without accidentally restyling every similar section on the page.

The main takeaway is this: if you style one specific section instance, the system tries to keep that styling attached to that instance.

Remember: Broad styles are still broad. If you edit a page-wide button style, many section buttons may change. If you edit a local section setting, only that section’s styling scope should change.

How Saving Works

When you save styling changes, the builder stores both the selected field values and the generated CSS. WordPress then writes CSS files for the correct area of the site.

• General website styles are saved into general frontend CSS files.
• Home page styles are saved into frontend CSS files for the front page.
• Product page styles are saved into frontend CSS files for product pages.
• Section CSS is loaded with the matching section output.

The live preview updates while you work, but the saved frontend depends on the saved styling output. If something looks correct in the builder but not on the website, save the changes and check whether the correct frontend CSS has been refreshed.

A Good Beginner Workflow

If you are styling a site from scratch, use this order:

1. Set Website Global Styles first: colors, fonts, headings, spacing, buttons, border radius, and shadows.
2. Set Pages and Home defaults next: general section text, page button alignment, repeated text patterns, and page-section spacing.
3. Set Product defaults: product text, product buttons, product content spacing, product section patterns, and commerce colors.
4. Style key sections individually: Hero, CTA, Image Text, FAQ, product benefits, comparison table, or any section that needs a distinct look.
5. Check responsive styling on Desktop, Tablet, Mobile, and Small Mobile.
6. Use Custom CSS only for changes that cannot be made with the normal controls.
7. Save and review the real frontend.

Pro tip: If you are not sure where a style belongs, ask: “Should this change apply everywhere, only to pages, only to product pages, or only to this one section?” The answer usually tells you where to make the change.

Common Styling Mistakes

Most styling confusion comes from changing the right kind of value in the wrong layer.

• Styling too narrow first: changing many local sections before setting global colors, fonts, and buttons.
• Using the wrong environment: editing Product styles while expecting the Home page to change, or editing Home styles while expecting product pages to change.
• Forgetting broad controls: changing a page-wide button, heading, or alignment control and being surprised when many sections update.
• Overusing Custom CSS: writing manual CSS for changes that already have builder controls.
• Using Override mode accidentally: replacing generated CSS when Append would have been enough.
• Only checking desktop: forgetting that mobile may need different spacing, sizes, or layout.
• Fighting the system style: setting local custom values everywhere instead of improving the global system values.

Mistake: Do not use local section styling to repair a global design problem. If every section needs the same correction, fix the global style instead.

When a Change Does Not Look Right

If a styling change does not appear where you expect, check these things:

• Environment: are you editing General, Home, or Products?
• Layer: are you editing a broad setting or a local section setting?
• Responsive viewport: did you change Desktop while viewing Mobile, or Mobile while viewing Desktop?
• Preset mode: is the section using a system style or a custom local style?
• Custom CSS: is custom CSS overriding the normal generated style?
• Save state: did you save after the preview looked correct?
• Frontend cache: is the public website still showing older CSS?

Note: If the builder preview and frontend disagree, first save, refresh, and check the correct environment. If the issue remains, it may be a selector, cache, or generated CSS problem.

The Most Important Rule

The styling system is easiest when you respect the layers. Global styles create the design language. Home and Product styles adapt that language to their environments. Section styles handle specific layout and design needs. Custom CSS fills the small gaps.

When you work in that order, the site stays more consistent, styling is easier to maintain, and future section changes are less likely to break the design.