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

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

Верхняя панель — располагается в верхней части Редактора

Видео: Верхняя панель

https://vk.com/video-219751701_456239132

VK Видео | YouTube

Левая часть Верхней панели

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

Переход к Панели управления или к Настройкам проекта

  • Кнопка переименования проекта (Rename). По клику на текущее название проекта можно задать ему новое название.

Кнопка переименования проекта

Кнопка переключения в Режим клиента

Кнопка переключения в Режим дизайнера

Кнопка переключения в режим Предварительного просмотра

Центральная часть Верхней панели

В центре Верхней панели находятся:

  • Кнопка создания компонента (Create component). Позволяет создать компонент из элемента или группы элементов для последующего использования в проекте. Подробнее о компонентах — Компоненты.

Кнопка создания компонента

  • Опция масштаба (Zoom). Позволяет изменять масштаб отображения холста. Можно выбрать значение из предложенного списка или ввести свое значение в пределах от 25% до 200%.

  • Опция ширины холста (Canvas width).

Можно ввести свое значение или выбрать из предложенного списка следующие параметры экранов:

  • 1920px (Full HD)
  • 1440px (Laptop extra large)
  • 1366px (Laptop large)
  • 1280px (Laptop small)
  • 1024px (iPad Pro)
  • 768px (iPad)
  • 414px (iPhone 6/7/8 Plus)
  • 375px (iPhone X)
  • 320px (iPhone 5/SE)

  • Опция Breakpoints. Позволяет установить размеры экрана, при которых будут меняться стили элементов. Это дает возможность сделать несколько вариантов отображения сайта, обеспечив таким образом его адаптивность для различных устройств. Подробнее — Адаптация под разные устройства.

Доступны следующие Breakpoints:

  • Компьютер — Базовый breakpoint (Desktop — Base breakpoint)
  • Планшет — 991px и меньше (Tablet — 991px and down)
  • Мобильный телефон горизонтальный режим — 767px и меньше (Mobile landscape — 767px and down)
  • Мобильный телефон портретный режим — 478px и меньше (Mobile portrait — 478px and down)

Нажав кнопку Добавить большие брейкпоинты, можно также добавить дополнительные брейкпоинты:

  • 1280px и больше (1280px and up)
  • 1440px и больше (1440px and up)
  • 1920px и больше (1920px and up)

Добавление дополнительных брейкпоинтов

Правая часть Верхней панели

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

  • Кнопки Отменить (Undo) и Повторить (Redo).

Кнопка Отменить действие

Кнопка Повторить действие

  • Статус сохранения изменений (Сhanges saved/Unsaved changes). Показывает, сохранены или не сохранены последние изменения.

Статус сохранения изменений

  • Кнопка экспорт кода. Позволяет скопировать код текущей страницы для экспорта.

Кнопка экспорта кода

  • Кнопка публикации проекта (Publish project). Позволяет опубликовать проект в Интернете с предложенным адресом домена или выбрать для публикации свой домен.

Кнопка публикации проекта

При нажатии кнопки публикации проекта открывается всплывающее окно, в котором отображается статус опубликованных изменений. Чтобы все необходимые страницы сайта были опубликованы, нужно нажать кнопку Опубликовать (Publish) рядом с каждой страницей в списке неопубликованных изменений (Unpublished changes). При нажатии кнопки происходит переключение на соответствующую страницу.