Стили страницы

Данная вкладка позволяет управлять стилями конкретной страницы, переназначая стили макета.

Поддерживается почти любой обычный CSS синтаксис. А также современный SCSS для удобства написания многоуровневых классов.

Пример простого стиля:

.text-red {
 color: red;
}

Есть три основные варианта создания стилей:

body

Здесь мы указываем стили, которые применяются ко всей странице.

body {
  background-color: #f0f0f0;
}

Однако учитывайте, что если вы используете наши готовые макеты, там на уровне выше body есть еще и другие блоки. Например div.page-root. И подобные глобальные стили могут быть не заметны. Итого более практичный пример:

.page-root {
  background-color: #f0f0f0;
}

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

Cвой класс - Рекомендуется

Вы можете создать собственные CSS классы, чтобы использовать их внутри контейнера, группы блоков или блока. Редактор поддерживает вставку класса практически в любой блок а также в исходный код обычного текста. В большинстве ситуаций рекомендуется именно создавать собственные названия классов и добавлять их в настройки нужного блока.

Например, если используете стиль .knopka - то в стилях кнопки укажите knopka (без точки)

.knopka {
   color: red;
}

Путь к объекту

Например вам понадобилось применить стиль для всех картинок внутри обычных текстовых блоков. Для этого вы можете формировать точные пути к нужным объектам через стандартный формат CSS (пробел). А также комбинировать несколько объектов в один стиль через запятую. Пример:

.core-text-desc img, .core-text-desc picture {
   border: 1px solid red;
}

Или то же самое в формате SCSS:

.core-text-desc {
   img, picture {
     border: 1px solid red;
   }
}

Генерация стилей через ИИ

Вы можете нажать под стилями кнопку "Генерировать CSS". Перед генерацией рекомендуется «проинспектировать» HTML разметку страницы и указывать нейросети конкретные элементы.

Для удобства каждый блок имеет уникальные классы с ID и типом блока. А также каждый компонент внутри блока имеет собственный класс с отдельным названием. Такие классы обычно находятся в начале списка.

Пример запроса

Ниже примитивный пример запроса

Результат:

// Устанавливаем светло-серый цвет фона для всей страницы
body {
  background-color: #f0f0f0; // Светло-серый цвет
}