Введение в Редактор дизайна
Навигация по Редактору дизайна

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

13min

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



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

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

Document image

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

  • Опции переключения в режим конструктора (Builder) или в режим предварительного просмотра (Preview).
Document image




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

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

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

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

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


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

  • 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. Позволяет установить размеры экрана, при которых расположение элементов на холсте будет меняться. Это дает возможность сделать несколько вариантов отображения сайта, обеспечив таким образом его адаптивность для различных устройств. Подробнее - Адаптация под разные устройства.
Document image


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

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

Можно также добавить дополнительные Breakpoints:

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

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

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

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

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

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

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


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

Document image