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 has a gray background.

If you change a system class, the new styles will be applied to all the elements that are assigned the said class. For example, if you change the styles of the button class, then the changes will be applied to all the buttons used in the project.
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.
The custom class will be highlighted in the color of the breakpoint it is created for.
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:
- Automatic class creation when changing the element styles
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.

The changes will affect only the custom class, the system class will remain with the default styles.
- Manual class creation
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.
Use Latin letters in the class name. Do not start the name with a number. Spaces are not allowed.
We recommend you choosing class names using the BEM methodology.

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

Done! The class will appear in the element’s class list. Now you can assign styles to it.
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:
- click the Classes field;
- start typing the name of the desired background-color class. Below, you will find the list of project classes that match the one you are looking for;

- click the required class, it will be assigned to the element and appear in the list of its classes.
The same class can be assigned to multiple various elements.
You can do the following with custom classes:
- Rename;
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.
Use Latin letters in the class name. Do not start the name with a number. Spaces are not allowed.
- Duplicate;
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.
- Dublicate and replace;
With this feature you can both copy the class and replace it within the selected element.
- Delete from the element;
This will delete the styles assigned to the selected element. However, other elements with this class will preserve the styles.
- Delete from the project.
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:
- hover the mouse over the name of the class;
- click the drop-down menu button;
- select the desired action from the list.

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.
Changing the styles of the class that is assigned to several project elements automatically affects the styles of all these elements. You can change the styles of the class using any element, to which it has been assigned. The changes made will automatically be applied to the rest of the elements.
Let’s say you need to change the background color of the request-buttons:
- Select one of the buttons on the Canvas. In the Classes field, add a new class or select the already created button-color class.

- Assign the class the desired background color, e.g. green.

- Assign the resulting button-color class to other similar elements in the project.
Done! The desired background will be applied to all the request-buttons on the website.
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 selector allows assigning unique styles to the element used with different breakpoints and states within the same class.
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.

If no class is selected, the Selectors field will not appear.
Selectors can be used to style elements in different states: on hover, active, in focus.
For example, if you want the color of the button to change on hover, create the .button-color:hover selector.
- Click the button-color class, next to its name click «+», and select Hover state

- Create the .button-color:hover selector. Assign it the color you want. Now the background color will change on hover.
- To style the element in different states, select different selectors from the list.

If you want to style more element in different states, add selectors as described above.

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».

This way you can understand if there are styles unique to a particular breakpoint within the same class.