Styling an Element with a Custom Class

Please note!
This article does not replace basic knowledge of CSS. But it gives an idea of how you can apply CSS in a page builder.

To add custom styling to an element, a class is needed to be added to it.

1. In order to add a class, hover over the desired element and click on the gear icon.
2. Enter a semantic class in English in the tags field, for example: form-01__title, form-01__text, form-01__btn, etc.
3. Save the settings.

In order to add a style block, you need to:

1. Go to the list of created elements
2. Select the “Insert” menu item
3. Select the “CSS code” block

In our example, we used the following list of classes:

• form-01__title - for the title
• form-01__text - for the text under the title
• form-01__input - for fields
• form-01__btn - for buttons

This does not mean that you have to do exactly the same, it is just the name of the element. You can choose the name of the classes yourself, but that's not all.

Let's look at examples of using selectors that you need to refer to when you want to change the styling properties of an element:

1) For the title
.your-title-class .f-header> p {
 text-decoration: underline;
}

2) For the text
.your-text-class .f-text> p {color: blue;
 text-decoration: line-through;
}

3) For the field
.your-field-class .field-content > input {
border-color: red;
}

4) For the title next to the field
.your-field-class .field-content > .field-label {
 color: green;
 border: 1px solid blue;
}

5) For the button
.your-button-class > button.f-btn {
 text-transform: uppercase;
 border-radius: 30px;
 transition: all .3s;
}

6) For the button on hover
.your-button-class > button.f-btn:hover {
 border-radius: 20px;
}

7) For the button when the button is pressed
.your-button-class> button.f-btn:active {
 border-radius: 10px;
}

Let's look at an example of using the code:

The result of applying the described code: