How to use site styles and styled elements in Studio Two
Updated: 6 hours ago
Open the Site Styles panel on the left side of the Studio Two editor. There you manage colors, fonts, text styles and styled elements (buttons, lines and containers). Changing a styled element updates every element on the site that uses that style.
Before you start
You need access to a site in the Studio Two editor, not the classic Studio Editor.
Decide on the site's palette and typography first. Styled elements reuse the colors and fonts saved in the panel.
Step by step
Open the Site Styles panel. Click the Site Styles icon on the left side of the editor. The panel holds tabs for Colors, Fonts, Text styles, Buttons, Lines and Containers.
Set colors and typography first. Use the Colors tab to build the site's palette. Use the Fonts and Text styles tabs to set size, spacing and color of the text. Styled elements draw on these choices.
Find the styled element tab. Scroll through the tabs or click the Arrow icon in the panel. Select Buttons, Lines or Containers.
Customize a button. Click the button style, then choose Button or Text from the dropdown. Under Button you can set the state (Regular, Hover or Disabled), fill, borders, corners, shadow, spacing and alignment. Under Text you can set the text style, font, size, color, padding, style, case and shadow.
Customize a line or container. For a line, set the Fill color and the width in px under Style. For a container, set fill, borders, corners, shadow and a background effect, and use the slider to adjust the effect.
Add a new style in the panel. In the Buttons, Lines or Containers tab, click the Add icon and enter a name. Then set up the design with the available options.
Save a design from the canvas. Select an element you have already customized and click Custom Style on the action bar. Click Save beside Custom Style, then choose Update style to apply the design to an existing style, or Create new style and enter a name.
Rename or delete custom styles. Hover over a style in its tab and click the More Actions icon. Choose Rename to enter a new name, or Delete. If the style is in use, pick a replacement style from the dropdown.
Add styled elements while you build. The site's styled elements are always in the Add Elements panel under Site styles. Adding them from there applies the theme as you work.
Good to know
Editing a styled element automatically updates every element on the site that uses it.
Default styled elements cannot be deleted, because apps and new elements use the primary designs by default. You can still change how they look.
Colors and fonts used in a custom styled element are added to the Site Styles panel.
You can add custom CSS to button and line styles.
Font weight is not available for every font.
Wix's feature list also includes custom CSS for the whole site, while the developer documentation still lists custom CSS as not supported. Test it on your site before you rely on it.
parnii note
Set the palette and text styles before you build out button, line and container styles, since new colors and fonts from custom designs are added to the Site Styles panel. Check where a style is used before you change a default, because the update applies site-wide.
FAQ
Where do I find site styles in the Studio Two editor?
Click the Site Styles icon on the left side of the editor. The panel includes tabs for colors, fonts, text styles, buttons, lines and containers.
Can I delete the default buttons, lines or containers in Studio Two?
No, default styled elements cannot be deleted. Apps and new elements use the primary designs automatically. You can change their look. Custom styles can be deleted.
How do I save a button I customized on the canvas as a style?
Select the element, click Custom Style on the action bar, then click Save. Choose Update style to overwrite an existing style, or Create new style to name a new one.
Sources
Part of our Wix Studio Two series (Studio 2). Last checked: 06 November 2026.
