Добавление и перемещение элементов

Добавление элементов на Холст

Добавить элементы на страницу можно с помощью панели Элементов (Elements) на Панели Навигатора.

На панели Элементов находится список всех доступных элементов и виджетов, разделенных на группы:

• Основные (Basic) — элементы, используемые для создания структуры сайта и группировки других элементов.

• Типографика (Typography) — элементы для отображения текста.

• Виджеты (Widgets) — комплексные элементы, выполняющие определенные функции, а также элементы для добавления изображений.

• Формы (Forms) — элементы для создания форм.

Добавить элемент на холст можно следующими способами:

1 способ: перетаскивание элемента

Для этого зажмите мышкой элемент на панели Элементов и перетащите в нужное место холста.

!!! Подсказки при перетаскивании элемента:

!!!

2 способ: клик по названию элемента на панели Элементов

Для этого выберите на Холсте или на вкладке Слои (Layers) элемент, в который хотите вставить новый элемент. Он будет обозначен на Холсте синей обводкой и меткой с названием наверху, а также выделен на вкладке Слои.

Далее кликните по названию добавляемого элемента на панели Элементов. Новый элемент автоматически добавится в активный элемент. При наличии в активном элементе других дочерних элементов новый элемент будет добавлен последним.

Если в активный элемент нельзя вставить новый элемент, выводится сообщение об ошибке. Например, вы не можете вставить другие элементы в Image.

---

Перемещение элементов

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

1 способ: перетаскивание элементов на Холсте

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

!!! Подсказки при перетаскивании элемента:

!!!

2 способ: перетаскивание элементов на вкладке Слои

Вы можете перетаскивать элементы выше или ниже или вкладывать их в другие элементы на Вкладке Слои. Для этого выберите элемент, зажмите левую кнопку мыши и перетащите элемент в нужное место.

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

Пример:

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

3 способ: перемещение с помощью стрелок

Выбрав элемент на холсте, вы увидите, что сверху справа у него появились управляющие стрелки. Нажимая на эти стрелки, вы можете перемещать элементы внутри родительского блока. Если элементы расположены в блоке рядом, то будут доступны стрелки влево-вправо. Если они расположены друг под другом — вверх-вниз.

Некоторые элементы нельзя перетащить в другое место — это закрепленные элементы. Это могут быть элементы виджета, которые нельзя перемещать за его пределы, например, пункты Меню или Блоклиста. При попытке переместить такой элемент выводится сообщение об ошибке.

---

Структура и вложенность элементов

Чтобы увидеть вложенность элементов, кликните на синюю плашку с названием текущего элемента на холсте. После этого появятся серые плашки с названиями его родительских элементов двух уровней. Например, при клике на плашке Div Block, вы увидите, что он вложен в Container, а тот — в Section. Это удобно для быстрой навигации на холсте и понимания структуры страницы.

При наведении курсора на плашку родительского элемента она подсвечивается желтым цветом.

Чтобы скрыть серые плашки у родительских элементов, повторно кликните на синюю плашку текущего элемента.