Настройка стилей и адаптивный дизайн

Структура готова — пора придать ей вид. В этой инструкции вы научитесь настраивать стили элементов и проверять вёрстку на разных экранах.

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

Кликните на любой элемент на канве — справа откроется панель с его CSS-свойствами. Свойства сгруппированы в раскрывающиеся секции (аккордеон). Некоторые группы появляются только в контексте: например, настройки Flexbox видны лишь когда у элемента задан display: flex.

Все изменения применяются мгновенно — вы сразу видите результат на канве.

Размеры и отступы

Группа Width & Height задаёт размеры элемента: ширину, высоту, а также минимальные и максимальные значения. Для каждого поля можно выбрать единицу измерения: px, %, rem, em, vw, vh или auto.

Группы Margin и Padding — это 4 поля (сверху, справа, снизу, слева) для внешних и внутренних отступов. Каждая сторона настраивается независимо.

Цвета и типографика

В группе Colors два цветовых поля с палитрой:

Color — цвет текста
Background Color — цвет фона

Группа Typography (доступна для текстовых элементов):

Font Size — размер шрифта
Font Weight — насыщенность (от thin 100 до bold 900)
Text Align — выравнивание (лево, центр, право, по ширине)
Line Height — межстрочный интервал
Letter Spacing — межбуквенный интервал
Text Transform — регистр (uppercase, lowercase, capitalize)

Layout: Flexbox и Grid

В группе Display & Layout выберите модель поведения элемента:

block — стандартный блочный элемент
flex — гибкий контейнер
grid — сетка
inline-block, none и другие

При выборе flex появятся дополнительные свойства: направление (flex-direction), выравнивание по осям (justify-content, align-items), перенос (flex-wrap) и отступы между элементами (gap).

При выборе grid — поля для настройки колонок (grid-template-columns), строк, отступов и выравнивания ячеек.

Flex Item и Grid Item. Если выделен дочерний элемент flex- или grid-контейнера, появятся свойства позиционирования внутри родителя: flex-grow, flex-shrink, align-self, order (для flex) или grid-column, grid-row (для grid).

Рамки и эффекты

Группа Border: ширина, стиль (solid, dashed, dotted…), цвет рамки и скругление углов (border-radius).

Группа Effects:

Box Shadow — тень блока (например: 0 4px 6px rgba(0,0,0,0.1))
Text Shadow — тень текста
Filter — CSS-фильтры (blur, brightness, grayscale и др.)

CSS-классы

Каждому элементу автоматически присваивается системный класс (например, block-a3f7d) — он отображается в правой панели только для чтения.

Ниже — поле «Дополнительные классы», куда можно вписать свои CSS-классы через пробел. Это удобно, если вы хотите задать стили через внешний CSS-файл или использовать CSS-фреймворк.

Viewport Switcher: проверка адаптива

Над канвой расположены три кнопки переключения экрана:

Desktop — полная ширина
Tablet — планшет
Mobile — смартфон

Переключайтесь между ними, чтобы сразу видеть, как вёрстка выглядит на разных устройствах. Это не эмуляция — канва физически сужается до соответствующей ширины.

Изображения

Выделите тег img на канве — в правой панели появится группа Изображение:

Нажмите «Выбрать изображение» (или дважды кликните по картинке на канве) — откроется встроенная библиотека изображений.
В библиотеке есть два фильтра: «Активные изображения» и «В корзине».
Кнопка «Загрузить» добавляет файл в библиотеку (форматы: JPEG, PNG, GIF, WebP). Размер и число загрузок зависят от тарифа: см. /tarify/.
На канву изображение вставляется только по кнопке «Вставить».
Для активных файлов доступны действия «Вставить» и «В корзину».
Для файлов в корзине доступны «Восстановить» и «Удалить» (безвозвратно).
Атрибуты width и height задаются в панели; alt и title заполняются вручную.

Далее: Сохранение, публикация и экспорт →