Classes and selectors

Classes are sets of custom styles for elements or widgets. They are needed in order to simplify the process of styling the site.

To change the design of similar elements, you can assign styles to one of them and save the assigned styles as a class. Then you need to apply the saved class to other similar elements. You can apply to any number of classes with the desired styles to the element.

You can manage classes on the Styles tab in the right panel of the Design Editor.

System class contains the element’s default styles. This class is automatically assigned to the element when it is added on the Canvas. The name of the class matches the name of the widget or element and is displayed on the Styles tab in the Classes field.

The system class cannot be renamed or deleted but it can be duplicated. To duplicate the class, hover the mouse over the name of the class. There will appear a button with an arrow. Click it. Select Duplicate from the list.

The new class created by duplication will have the same styles as the original one but will be independent of it. This way you will create a custom class.

Custom classes are classes created to store custom element styles. Once you have created a class for an element, you can style it the way you want. Then assign this class to other elements in the project you want to have the similar styles.

You can assign multiple classes to an element, thereby defining sets of various styles. For example, you can create the button-big and button-small classes for buttons with size and typography styles, and the button-success and button-info classes for function buttons. You can combine classes, applying them to different buttons, to create the desired interface.

A custom class can be created in two ways:

Let's add an Image to the project and resize it. Let’s set the width and height to auto. This will change the element’s system styles. When you change any system style setting, a new custom class is automatically created. In our example, this is the image-2 class. The new class is displayed in the list next to the system class.

You can pre-create a class, and then save the necessary styles for it.

To add a custom class, click on the empty Classes field and enter the desired name. For example, let’s create the button-color class that will assign colors to the buttons.

To save the class, click «Create button-color» or Enter on your keyboard.

You can assign any class that has already been added to the project to the element. For example, you can set the background color of the blocklist. To do this, select an element on the canvas and do the following:

You can do the following with custom classes:

You can assign the class any name that describes its purpose as accurately and clearly as possible. For example, the border-radius class is used for rounding the corners of elements.

You copy the class with all the styles applied to it and then change some of the styles to modify the original class. For example, the newly created botton-color-contact class may define the color of the buttons that are used to collect user contact details.

With this feature you can both copy the class and replace it within the selected element.

This will delete the styles assigned to the selected element. However, other elements with this class will preserve the styles.

By deleting the class from the project, you will delete it from the elements that have been assigned that class. All custom styles will be deleted.

To apply any action to the created class, you need to:

To assign certain styles to a class or change the existing ones, click the class name in the list and configure the desired style settings. You can consistently define styles for all classes assigned to the element, switching between them in the list of classes.

Let’s say you need to change the background color of the request-buttons:

By changing one element, you will immediately change all the necessary elements. This simplifies the process of styling the site.

If you have already assigned multiple classes to the element, the styles of all those classes will be applied to it. If two or more classes have the same style setting with different values (for example, a class with the green background color and a class with the blue background color), then the class closest to the end of the list will take precedence.

For example, the button has round corners and background color. The following classes are applied to the element: button-color-green (assigns green background color), button-color-blue (assigns blue background color) and button-border (rounds corners).

Since the button-color classes define the same parameter, button-color-blue will take precedence as it is closer to the end of the list. Button-border is the only class for rounding corners, so it will be applied as well.

Each class with custom styles has a selector that is part of the CSS.

The name of the selector starts with a dot and contains the class name. For example, for the button-color class, the selector will be .button-color. It will appear in the Selectors field when you click on the class name in the list.

For example, if you want the color of the button to change on hover, create the .button-color:hover selector.

Selectors also help style site elements that appear on different devices: smartphone screens or desktops.

Let’s say you want the button to change its color on the mobile website. We have already assigned the blue color for the button appeared on 1280 px and above desktop. We have also created the button-color class that defines the style. There is the .button-color selector for that class, which  contains the blue color button style.

The styles of this selector will be automatically inherited by other breakpoints until we change the settings. Let's say we want the button to be red on the tablet (991 px or less).

Select the desired resolution in the Top bar of the Design Editor. The button-color class will be highlighted in the color of the selected breakpoint.

Let's assign it style options to create the appropriate selector. After the styles are set, another .button-color will appear in the list of selectors marked «for tablet».