Стилизация элементов через кастомный класс в конструкторе

Обратите внимание!

Данная статья не заменяет базовых знаний о CSS, а демонстрирует, как можно применять CSS в конструкторе страниц.

1. Добавление класса

Чтобы задать элементу индивидуальные стили, достаточно добавить ему класс.

1. Чтобы добавить класс, подведите курсор к нужному элементу и кликните по шестерёнке.
2. Укажите в поле «Теги» смысловой класс на английском языке, например, form-01__title, form-01__text, form-01__btn и т.д.
3. Сохраните настройки.

2. Создание блока стилей

Для вставки блока стилей необходимо:

1. Открыть список создаваемых элементов.
2. Выбрать пункт меню «Вставка».
3. Выбрать блок «CSS-код».

3. Список возможных селекторов

В данном примере использовался следующий перечень классов:

• form-01__title — используется в качестве заголовка
• form-01__text — текст, размещаемый под заголовком
• form-01__input — для полей
• form-01__btn — для кнопок

Это не означает, что вы обязаны действовать именно так, это всего лишь название элемента. Названия классов можно выбирать самостоятельно, но это ещё не всё.

Приведем примеры обращения к селекторам, которые следует применять для изменения стилевых свойств элемента:

1) Для заголовка

.ваш-класс-заголовка .f-header > p {

text-decoration: underline;

}

2) Для текста

.ваш-класс-текста .f-text > p {color: blue;

text-decoration: line-through;

}

3) Для поля

.ваш-класс-поля .field-content > input {

border-color: red;

}

4) Заголовок, расположенный рядом с полем

.ваш-класс-поля .field-content > .field-label{

color: green;
border: 1px solid blue;

}

5) Для кнопки

.ваш-класс-кнопки > button.f-btn {

text-transform: uppercase;
border-radius: 30px;
transition: all .3s;

}

6) Для кнопки при наведении

.ваш-класс-кнопки > button.f-btn:hover {

border-radius: 20px;

}

7) При нажатии на кнопку

.ваш-класс-кнопки > button.f-btn:active {

border-radius: 10px;

}

Приведем пример использования кода:

Результат работы описанного кода: