Style panel overview
Learn how to use the Style panel to design your site.
The Style panel, located in the Designer, provides a comprehensive set of styling controls that let you customize every element on your site. Whether you want to change an element’s layout, background color, or typography — you can do it all in the Style panel.
In addition to styling individual elements, you can save styles as classes to reuse consistent sets of styles on elements throughout your site. You can also customize layouts for different device sizes in the Style panel with breakpoints (also known as media queries).
In this lesson, you’ll learn about the following parts of the Style panel:
Classes
While you could style each element on your site individually in the Style panel, manual changes to elements can be tedious and time-consuming. Enter: classes.
Classes save styling information you can apply to as many elements as you want — throughout your entire site. The moment you begin styling an element in the Style panel, a class is automatically created and applied to the selected element. You can also create and rename your classes manually.
You can also create combo classes that inherit the style values of an original class and any additional styles you apply to that combo class. Learn more about classes and combo classes.
Selector field
At the top of the Style panel, the element type indicates the element you’re currently styling (e.g., an image, a div block, a form, etc.). Below the element type is the Selector field, which displays every tag, class, and combo class you’ve applied to that element. You can rename existing classes and create new classes or combo classes in this field.
How to create and rename classes in the Selector field
When you begin styling an element, it’s automatically assigned a class name based on the element type (e.g., when you apply styles to a paragraph element without manually creating a class, the paragraph will automatically receive a class called “Paragraph”). You can rename the automatically assigned class — or any other class — by double-clicking the class name in the Selector field and entering a new name.
To create a new class, enter the class name in the Selector field.
How to delete classes
You can remove a class from an element in the Selector field. Note that this class can still be reused for styling other elements at any time, and won’t be removed from the Style selectors panel or your site. You can only fully delete classes from your site in the Style selectors panel when they aren’t connected to an element.
States menu
To change the way an element looks and behaves in a specific state, such as hover or focused, choose a state in the Selector field > States dropdown menu. Learn more about styling states.
Inheritance menu
The Inheritance menu sits just above the Selector field. Click it to show the parent and ancestor elements of the selected element — all the way back to the global tag (e.g., the Body (All pages) tag). You can also select and update the style of any class from the Inheritance menu.
The Inheritance menu also shows the base class for combo classes. When a state is selected, it indicates which state you’re applying the styling to. Learn more about inheritance and applied styles indicators.
Affected elements
The Affected elements indicator appears just below the Selector field and displays a count of the number of times the class or tag in the Selector field has been used on the current page and across the site. You can click the text to toggle outlines around all of the elements that share that class or tag.
Style sections
Each section in the Style panel controls a different set of CSS properties (i.e., styles). You can change different styles in each of the following sections and preview your changes on the canvas:
You can expand and collapse each section, expand all sections, collapse all sections, or expand one section at a time in Focus mode.
To enable Focus mode:
- Click the “three dots” icon at the top of the Style panel
- Click Focus mode to check that option
- Click any section in the Style panel you’d like to open (e.g., spacing, backgrounds, etc.)
To disable Focus mode:
- Click the “three dots” icon at the top of the Style panel
- Click Focus mode to uncheck that option
Pro tip: Press Alt/Option + S on your keyboard to expand or collapse all Style panel properties sections. Press Alt/Option + Shift + S to toggle Focus mode on and off.
Keep in mind that if you select or deselect Focus mode, your choice will persist. For example, if you enable Focus mode and refresh the Designer or open it in another browser or tab, Focus mode remains enabled. Focus mode does not persist across sites — i.e., if you enable Focus mode on one site and then open a different site in the Designer, Focus mode will be disabled on that site.
Layout
When you add an element to the canvas, its default display option determines its appearance. The Layout section includes the block, flex, grid, or none display options by default. Click the “arrow” icon to open the Display options dropdown, which includes the inline-block, inline-flex, inline-grid, and inline display options. Learn more about display settings.
Spacing
Spacing lets you define an element’s spacing — the breathing room outside or inside an element’s boundary. Margins are the space outside an element’s border while Padding is the space inside an element, between its content and its border.
You can add spacing to the top, bottom, left, and right of an element in the Spacing section. You can apply the spacing values to one side, 2 complementary sides, or all 4 sides. Learn more about spacing.
Size
By default, an element either fills the width of its parent element or takes the size of the content within it. You can customize various width, height, aspect ratio, overflow, and fit settings in the Size section.
Note: Some size settings may be disabled for container elements.
Learn more about size settings.
Position
You can set element position (i.e., static, relative, absolute, fixed, or sticky), float settings, and clear settings in the Position section. Learn more about position, float, and clear settings.
Typography
The Typography section provides settings to control the appearance of text on your site.
When you adjust any Typography style on an element, the changes apply to all text elements within the selected element and its child elements. Learn more about typography settings and best practices.
Backgrounds
In the Backgrounds section, you can add a background image, gradient, or color to any element (except media elements), and can adjust its clipping. You can also change the size, position, and tile display of any background image. Learn more about background settings.
Borders
Borders define the radius of an element’s edges or create outlines on one or more sides of an element's boundary. In the Borders section, you can define the radius size, style, width, and color for element borders. Learn more about border settings.
Effects
You can set various effects on an element in the Effects section. These include: blending, opacity, box shadows, 2D & 3D transforms, transitions, filters, backdrop filters, and cursor. You can also apply effects to specific states (e.g., hover, focused, etc.). Learn more about effects.
Custom properties
In the Custom properties section, you can add custom CSS to incorporate CSS properties and values that aren’t natively supported in the other sections of the Style panel. Learn more about custom properties.
Inheritance and applied styles indicators
When you collapse a section in the Style panel, colored dots appear next to the section name if there are any local or inherited styles applied to any property within that section. When you expand a section in the Style panel, colored labels appear on any property names that have local or inherited styles.
These color indicators identify the source of styling — whether the style is applied to the selected element, the current class, or inherited from a base class, parent element, global tag, or larger viewport.
You can add more styles, override inherited styles, or remove any of these styles. You can also edit inherited styles by selecting the source from the Inheritance menu.
Orange indicators
An orange indicator means the current style is applied to an ancestor of the selected element — that is, the selected element’s style is inherited from a tag, a base class, a higher breakpoint, or from a text style on a parent element. You can click the orange indicator to show where the style was inherited.
You can either override the inherited styles, indicated by the orange style icon, or go to the class or tag and edit the style there. You can access all the classes and tags that style the current element from the Inheritance menu.
From this menu, you can select and temporarily style a class or tags. For example, with a H1 heading selected, you can open the Inheritance menu and select the All H1 Headings tag.
Blue indicators
If the style indicator is blue, it means the element’s style comes from the current class, tag, or breakpoint. The indicator will also turn blue when you override an inherited (orange) style. Click any blue indicator and then click Reset to reset and remove the local style.
Pink indicators
Pink style indicators mean that the style is applied to the currently selected element on the current breakpoint. For example, Grid child settings apply only to the selected element, and these styles aren’t saved in a class. Pink indicators may also appear when styling a Quick Stack.
The indicator also turns pink when you override an inherited (orange) style on smaller breakpoints. Click any pink indicator label and then click Reset to reset and remove it.
Pro tip: Use the shortcut key Option + Click (on mac) or Alt + Click (on Windows) to reset styles.
Go forth and make your designs shine with Style panel settings!