Холст

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

Холст

Видео: Холст

YouTube
RuTube
VK Video
Vimeo

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

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

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

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

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

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

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

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

Горячие клавиши для более удобного отображения элементов на Холсте показать/скрыть контуры элементов:Shift + Oпоказать/скрыть отступы элементов:Shift + Lпоказать/скрыть скрытые элементы:Shift + Hпоказать/скрыть пустые элементы:Shift + Eпоказать/скрыть указатели элементов:Shift + Uпоказать/скрыть метки элементов:Shift + E

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

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

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

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

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

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

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

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

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

Компьютер (Desktop)

Планшет — 991px и меньше (Tablet — 991px and down)

Мобильный телефон в горизонтальном режиме — 767px и меньше (Mobile landscape — 767px and down)

Мобильный телефон в портретном режиме — 478px и меньше (Mobile portrait — 478px and down)

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

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

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

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

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

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

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