Холст

Холст располагается в центре страницы Редактора дизайна, занимая большую часть экрана. Это основная рабочая область, на которой создается страница сайта и размещаются все элементы, отображающиеся на сайте.

Холст

Видео: Холст

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

VK Видео | YouTube

Вы можете добавлять элементы на Холст из панели Элементов (Elements) по клику на название элемента или перетащив его на Холст. Подробнее о добавлении элементов на страницу — Добавление и перетаскивание элементов.

Выбор элементов на холсте

Вы можете выбрать элемент на Холсте следующими способами:

  • клик: выделяется самый верхний родительский элемент, на который наведен курсор

  • двойной клик: выделяется дочерний элемент самого верхнего родителя и так далее вниз по иерархии при последующих кликах

  • Ctrl + клик: «глубокое» выделение — выделяется непосредственно элемент, на который наведен курсор (самый нижний в иерархии)

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

Выбран элемент Image

Горячие клавиши для более удобного отображения элементов на Холсте

  • показать/скрыть контуры элементов: Shift + O
  • показать/скрыть отступы элементов: Shift + L
  • показать/скрыть скрытые элементы: Shift + H
  • показать/скрыть пустые элементы: Shift + E
  • показать/скрыть указатели элементов: Shift + U
  • показать/скрыть метки элементов: Shift + E

Хлебные крошки

Внизу хоста можно увидеть “Хлебные крошки” (bread crumbs) — путь в иерархии элементов до выделенного элемента. Их также можно отключить или включить по клавишам Shift + B.

«Хлебные крошки»

«Хлебные крошки» можно использовать для перехода на родительский элемент или другие элементы выше по иерархии с помощью клика по ним.

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

У элемента reviews-img родительский элемент — reviews-item

Просмотр страницы в режимах отображения для разных устройств

В верхней части Холста вы можете переключаться между режимами отображения страницы для устройств с разной шириной экранов. По умолчанию стоит режим Компьютер (Desktop).

Режим Компьютер

Доступны следующие режимы отображения (Breakpoints):

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

Также могут быть добавлены дополнительные Breakpoints (подробнее — Верхняя панель).

Для переключения режима отображения наведите курсор мыши на верхнюю панель Холста и выберите нужный режим, передвигая курсор по панели, а затем кликнув на выбранную опцию. Для удобства разные режимы подсвечиваются разными цветами.

Режим Планшет

Режим Смартфон в горизонтальной ориентации

Режим Смартфон в вертикальной ориентации

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

Масштаб отображения холста можно менять в Верхней панели. Подробнее — Верхняя панель.