Overview of Style panel

The Style panel, situated within the Designer tool, offers a wide array of styling controls to enable you to personalize every component on your website. You have the flexibility to modify an element’s layout, background color, or typography using the comprehensive set of controls provided in the Style panel.

Aside from individual element styling, you have the option to save styles as classes, allowing you to apply consistent sets of styles to elements across your website. Moreover, you can tailor layouts for different device sizes in the Style panel by utilizing breakpoints, also known as media queries.

This guide will acquaint you with the various components of the Style panel:

1. Classes
2. Selector field
3. States menu
4. Style sections
5. Inheritance and applied styles indicators

Classes

While it’s possible to style each element on your website individually using the Style panel, manually tweaking elements can be arduous and time-consuming. This is where classes come in handy.

Classes store styling information that can be applied to numerous elements throughout your website. As soon as you start styling an element in the Style panel, a class is automatically generated and assigned to the selected element. Additionally, you have the option to manually create and rename your classes.

You can even create combo classes that inherit style values from an original class and any additional styles you implement on that combo class. Find out more about classes and combo classes.

Selector field

Located at the top of the Style panel, the element type indicates the element you are currently styling (e.g., an image, a div block, a form, etc.). Beneath the element type lies the Selector field, showcasing all tags, classes, and combo classes applied to that element. Renaming existing classes and establishing new classes or combo classes can be done directly in this field.

Creating and renaming classes in the Selector field

Upon initiating styling for an element, it is automatically assigned a class name based on the element type (e.g., when applying styles to a paragraph element without creating a class manually, a class named “Paragraph” is assigned to it automatically). By double-clicking the class name in the Selector field, you can rename the class or create a new one.

To introduce a new class, input the desired class name into the Selector field.

Deleting classes

You have the option to remove a class from an element in the Selector field. It’s important to note that while this class can be reused for styling other elements at any point, it will not be deleted from the Style selectors panel or your website. Complete deletion of classes from your website can only be carried out in the Style selectors panel when they are no longer associated with any element.

States menu

To alter the appearance and behavior of an element in a specific state, such as hover or focused, you can select a state from the Selector field > States dropdown menu. More insights on styling states can be found here.

Inheritance menu

The Inheritance menu is positioned slightly above the Selector field. Clicking on it reveals the parent and ancestor elements of the selected element, all the way back to the global tag (e.g., the Body (All pages) tag). From the Inheritance menu, you can also select and update the style of any class.

The Inheritance menu also presents the base class for combo classes. When a state is selected, the menu indicates the state to which the styling is applied. Delve deeper into inheritance and applied styles indicators.

Affected elements

The Affected elements indicator is displayed just below the Selector field and indicates the number of times the class or tag in the Selector field has been utilized on the current page and throughout the website. By clicking on the text, you can toggle outlines around all elements sharing that class or tag.

Style sections

Each section in the Style panel manages a distinct set of CSS properties (i.e., styles). You have the freedom to adjust different styles within the following sections and preview your modifications on the canvas:

• Layout
• Spacing
• Size
• Position
• Typography
• Backgrounds
• Borders
• Effects
• Custom properties

You can expand, collapse, or toggle sections individually or all at once in Focus mode. 

To activate Focus mode: 

1. Click on the “three dots” icon at the top of the Style panel
2. Check the Focus mode option
3. Select a section in the Style panel to expand it (e.g., spacing, backgrounds, etc.)

To disable Focus mode: 

1. Click on the “three dots” icon at the top of the Style panel
2. Uncheck the Focus mode option

Pro tip: Use 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 the selection or deselection of Focus mode remains throughout your session. For instance, if you enable Focus mode and refresh the Designer tool or access it in another browser or tab, Focus mode will persist. However, the Focus mode setting does not carry over to different websites. If you activate Focus mode on one site and switch to a different site in the Designer tool, Focus mode will be disabled on the new site.

Layout

Upon adding an element to the canvas, its default display option influences its appearance. The Layout section offers default display options such as block, flex, grid, or none. By clicking the “arrow” icon, you can access the Display options dropdown, which includes alternatives like inline-block, inline-flex, inline-grid, and inline. Learn more about display settings in this section.

Spacing

Spacing allows you to define an element’s spacing, which refers to the breathing room outside or inside an element’s boundary. While Margins determine the space outside an element’s border, Padding defines the space inside an element, between its content and border. 

You can specify spacing for the top, bottom, left, and right sides of an element in the Spacing section. The spacing values can be applied individually to one side, two complementary sides, or all four sides. Further insights on spacing can be found here.

Size

By default, an element either stretches to the width of its parent element or adapts to the size of the content within it. The Size section offers customization options for width, height, aspectratio, overflow, and fit settings.

Note: Certain size options may be restricted for container elements. 

Explore the various size settings available in this section for more details.

Position

In the Position section, you can configure element position (e.g., static, relative, absolute, fixed, or sticky), along with float and clear settings. Gain a deeper understanding of position, float, and clear settings in this section.

Typography

Within the Typography section, you’ll find settings that govern the appearance and style.to command the display of text on your webpage.

If you modify any Typography design on an element, the adjustments will be applied to all text elements within that element and its descendant elements. Discover more about typography configurations and recommended methods.

Appearances

Within the Appearances category, you have the ability to incorporate a background image, gradient, or color to any element (excluding media elements), and can modify its clipping property. Additionally, you can alter the dimensions, placement, and pattern display of any background image. Find out more about background configurations.

Edges

Edges establish the curvature of an element’s boundaries or establish outlines on one or multiple sides of an element’s perimeter. In the Edges category, you can set the curvature extent, fashion, thickness, and shade for element edges. Explore further into edge configurations.

Impacts

Within the Impacts section, you can assign various effects to an element. These include: fusion, translucency, box shadows, 2D & 3D transformations, shifts, filters, scenery filters, and cursor. Moreover, you can apply effects to specific states (e.g., hover, focused, etc.). Learn more about effects.

Custom attributes

Within the Custom attributes category, you can inject custom CSS to integrate CSS attributes and values that are not naturally supported in other sections of the Style panel. Get familiar with custom attributes.

Heritage and implemented styles markers

Upon collapsing a category in the Style panel, tinted dots will emerge next to the category name if there are any local or inherited styles implemented to any attribute within that category. When expanding a category in the Style panel, tinted tags will be visible on any attribute names that possess local or inherited styles.

These tinted markers denote the origin of styling — whether the style is implemented on the chosen element, the current class, or imparted from a core class, parent element, global tag, or enlarged viewport.

You can incorporate additional styles, supersede inherited styles, or eradicate any of these styles. You can also alter inherited styles by choosing the source from the Heritage dropdown.

Orange markers

An orange marker indicates that the current style is inherited from an antecedent of the selected element — meaning, the selected element’s style is inherited from a tag, a core class, a higher breakpoint, or from a text style on a parent element. Click on the orange marker to unveil where the style was inherited from.

You can either supersede the inherited styles, denoted by the orange style marker, or navigate to the class or tag and edit the style there. Access all classes and tags that style the current element from the Heritage dropdown.

From this dropdown, you can choose and momentarily style a class or tags. For instance, with a H1 heading selected, you can open the Heritage dropdown and pick the All H1 Headings tag.

Blue markers

If the style marker is blue, it signifies that the element’s style originates from the current class, tag, or breakpoint. The marker will also switch to blue when you revise an inherited (orange) style. Tap on any blue marker and then select Reset to revert and eliminate the local style.

Pink markers

Pink style markers indicate that the style is implemented to the currently selected element on the existing breakpoint. For example, Grid child settings are exclusively applied to the selected element, and these styles are not saved within a class. Pink markers might also show up when styling a Quick Stack.

The marker will also turn pink when you override an inherited (orange) style on smaller breakpoints. Click on any pink marker label and then select Reset to revert and erase it.

Professional hint: Utilize the shortcut combination Option + Click (on mac) or Alt + Click (on Windows) to reset styles.

Proceed and let your designs sparkle with Style panel configurations!