Экран редактора состоит из трёх зон:

верхняя панель (сверху), боковая панель (слева) и холст (по центру).

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

Слева направо: кнопка в виде логотипа для перехода в рабочее пространство, переключатель ширины экрана, контрол «Масштаб», кнопка «Просмотр» и кнопка «Опубликовать».

• Переключатель ширины экрана — три иконки: десктоп (с указанием ширины в пикселях, например «1200»), планшет, телефон. Позволяет переключаться между версиями макета для разных устройств.

• Масштаб — выпадающее меню с текущим значением (например «100%») и пунктами: «Увеличить» (⌘+), «Уменьшить» (⌘−), «Масштаб 100%» (⌘2), «Масштаб в размер окна» (⌘1). Меняет только масштаб просмотра холста в редакторе, не влияет на реальный размер сайта.

• Просмотр — открывает сайт в отдельном режиме предпросмотра, где вы можете взаимодействовать со своим сайтом и тестировать его поведение.

• Опубликовать — синяя кнопка справа, публикует текущую версию сайта.

Боковая панель - слева

Вертикальная панель иконок слева, через которую происходит переключение между основными разделами редактора:

Страницы - список и настройки страниц сайта

Слои - структура элементов текущей страницы

Стили сайта - глобальные цвета, шрифты, стили

Коллекции - управление динамическим контентом

Аналитика - статистика посещений сайта

Настройки сайта - домены, SEO, общие параметры проекта

Внизу боковой панели расположен отдельный блок поддержки:

Поддержка - напишите нам о проблеме или можете оставить обратную связь о продукте

Помощь - справочные материалы

Холст

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

Панель свойств - справа

Справа от холста появляется панель свойств — но только когда на холсте что-то выделено (сам раздел, контейнер, текст, изображение и т.д.). Пока ничего не выбрано, эта область пустая.

Содержимое панели контекстное — меняется в зависимости от того, что выделено:

• Раздел / контейнер — отступы, фон (цвет или изображение), радиус скругления углов, тень, тип расположения дочерних элементов.

• Текст — шрифт, размер, начертание, межстрочный интервал, цвет, выравнивание.

Панель свойств при выделенном блоке (разделе / контейнере)

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