ConvertSite
Style

Component stylesets

Component Style Sets (labeled Styleset in the inspector) save a component's appearance — its style states, breakpoints, and CSS properties — as a reusable set you apply to any component of the same kind. Use them to keep every button, heading, and input consistent across a site or across your whole workspace.

Where component style sets live

Select a component, open the inspector's Style tab, and use the Styleset section. The section filters stylesets to the selected component kind, sorts built-in stylesets before custom ones, and shows the current styleset name. When no styleset is selected it shows a Connect prompt for that component kind; when no matching stylesets exist it shows "No stylesets available."

Apply a styleset

Choose a styleset from the list in the Styleset section to apply it to the selected component. Selecting one switches the component to that styleset.

Create a styleset

Create a new styleset from the Create new styleset entry in the styleset selector, or from the bottom of the Style inspector when the component has style overrides.

  1. Open Create new styleset.

  2. Enter a Name for the styleset.

  3. Leave Available across workspace off to keep it site-local, or turn it on to share it across the workspace.

  4. Click Create.

Creating a styleset generates a new styleset, copies the selected styleset's elements, incorporates the component's existing style overrides, assigns the component to the new styleset, and clears the overrides it absorbed.

Edit a styleset

Open a styleset to edit its name, quick styles, and individual style properties grouped by element. Edit mode includes a Back control, a detach control, Revert changes for built-in stylesets, Delete variant for deletable custom stylesets, and workspace availability controls.

Style each state separately: Default, Hover, Focus, Active, Visited, Disabled, Checked, Placeholder, and Error.

Set values per breakpoint: Desktop, TabletPortrait, and MobilePortrait. Breakpoint values inherit from broader breakpoints — Desktop values can fall back to Tablet, and Desktop or Tablet values can fall back to Mobile.

Scope a styleset to a site or the workspace

New stylesets are site-local by default. Turn on Available across workspace to use a styleset on all sites in your workspace; turn it off to limit it to the current site. A workspace-wide styleset shows "This styleset is available across the workspace."

A styleset you make available across the workspace cannot be changed back to site-local. Attempting to change it fails with "You are not allowed to change workspace stylesets."

Detach, revert, or delete a styleset

  • Detach merges the styleset's effective styles into the component's local overrides and removes the styleset connection, leaving the component styled as it appears.

  • Revert changes (built-in stylesets only) removes the persisted customization and restores the built-in definition.

  • Delete styleset (custom, site-local stylesets only) detaches every component using it while keeping their effective styles as overrides, then removes the styleset. Confirm the deletion; any component properties connected to the styleset are detached.

Component and editor restrictions

Some components do not expose normal styleset controls. Page and Sheet have no normal styleset controls, CarouselItem is forced to the Properties tab, Columns hides the Style tab, and Chart cannot add or remove styleset properties in the edit view.

In the Document editor, styleset UI appears only for Heading, Text, Divider, Icon, and Formula, and there is no style-state selector.

  • UI Elements: overview of the elements and how styling works.

  • Style variables: reusable design values you can connect to component style properties.

Was this helpful?
Was this helpful?