Интерфейс редактора

Когда вы открываете конструктор, перед вами появляется рабочее пространство, разделённое на несколько зон.

Основные области

Холст (центральная область)

Это основная рабочая зона — здесь вы видите свою страницу и работаете с блоками. На холсте отображаются секции, внутри которых размещены блоки.

Вы можете:

• Перемещать холст — зажмите колёсико мыши или используйте прокрутку
• Масштабировать — зажмите Ctrl (или Cmd на Mac) и крутите колёсико мыши
• Выделять блоки — кликните на любой элемент, чтобы выбрать его

Левая панель — палитра блоков

На левой панели находятся все доступные блоки, которые можно добавить на страницу. Блоки разбиты на категории:

• Стандартные — текст, ссылка, кнопка, изображение, HTML-код, блок (div), видео
• Форма — поле ввода, галочка (чекбокс), текстовое поле (textarea)

Чтобы добавить блок — перетащите его из палитры на холст.

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

Когда вы выделяете блок на холсте, справа появляется панель с его настройками:

• Позиция и размер — точные координаты X и Y, ширина и высота
• Стили — цвет фона, скругление углов, прозрачность, рамка и другие визуальные свойства
• Содержимое — текст, ссылка, изображение или другой контент в зависимости от типа блока
• Действия — что происходит при клике (переход по ссылке, отправка формы)

Верхняя панель

В верхней части расположены:

• Переключатель устройств — переключение между десктопом, планшетом и мобильной версией
• Предпросмотр — просмотр страницы так, как её увидят посетители
• Сохранение — сохранение текущих изменений

Нижняя панель

В нижней части редактора отображается статус холста и элементы управления:

• Размеры холста — текущая ширина и высота в пикселях
• Отмена / Повтор (↩ ↪) — история изменений. Неактивны, пока нечего отменять. Подробнее: Отмена и повтор действий
• Масштаб — текущий процент и кнопки − / + / Сбросить

Навигация по холсту

Работа с блоками

• Выделить — кликните на блок
• Выбрать блок под верхним — Option (⌥) + клик циклически переключает между перекрывающимися блоками в одной точке
• Переместить — зажмите блок и перетащите в нужное место
• Изменить размер — потяните за маркеры на углах или сторонах выделенного блока
• Удалить — выделите блок и нажмите Delete или Backspace
• Заблокировать — заблокируйте блок, чтобы случайно не сдвинуть его

Умные направляющие (Smart Guides)

При перетаскивании блока редактор автоматически подсказывает, как выровнять его относительно соседей — как в Figma:

• Расстояния до соседей — пока блок движется, отображаются красные линии-индикаторы с расстоянием в пикселях до ближайших блоков и краёв секции по 4 направлениям.
• Зазоры между карточками в ряду — если рядом несколько блоков, видны все промежутки между ними. Розовым подсвечиваются зазоры из равномерной последовательности (= 24), красным — обычные.
• Магнитное выравнивание — блок «притягивается» к позиции, где промежутки слева и справа становятся одинаковыми. Если в ряду уже есть несколько карточек с равным шагом, новая встанет с тем же шагом автоматически.
• Привязка к колонкам сетки — края и центр блока примагничиваются к границам колонок секции.
• Привязка к центрам и краям — других блоков, контейнера и секции.

«Соседями» считаются блоки на одном уровне вложенности: если внутри карточки лежит текст, при перетаскивании самой карточки направляющие будут показываться до соседних карточек, а не до текста внутри них.

HUD выделенного блока

Под выделенным блоком отображается небольшая плашка с его размерами W × H. Во время перетаскивания и изменения размера в неё дополнительно выводятся текущие координаты X, Y — не нужно отрывать взгляд от холста, чтобы посмотреть значения в правой панели.