Структурный редактор показывает схему всех элементов и клипов документа в виде дерева. Чтобы перейти в этот режим, выберите "Структурный редактор" в меню Окно.
В структурном редакторе для элементов доступны некоторые функции рабочей области. Например, можно нажать на элемент, чтобы выбрать его, или нажать на него правой кнопкой мыши, чтобы открыть контекстное меню с доступными для этого элемента командами. Также можно дважды нажать на компонент, чтобы открыть диалоговое окно редактирования (если оно доступно).
Организация
Для объявлений HTML5 и HTML-документов со страницами структурный редактор группирует элементы по страницам. В режиме редактирования группы видны только ее элементы.
По умолчанию структурный редактор показывает элементы в том же порядке, что слои в расширенном режиме временной шкалы. Изменить порядок отображения на DOM можно в настройках режима просмотра макета.
Чтобы развернуть или свернуть элемент, нажмите на стрелку рядом с ним в структурном редакторе.
Чтобы развернуть или свернуть все вложенные элементы, дважды нажмите на стрелку рядом с исходным элементом или нажмите на нее один раз, удерживая клавишу Ctrl (для Windows) или ⌘ или Alt (для macOS).
Чтобы изменить порядок элементов, перетащите их на нужное место в структуре. На месте, куда будет перемещен элемент, появится желтая линия. Также можно перетаскивать дочерние элементы в другие родительские.
Чтобы вложить один элемент в другой, перетащите нужный элемент в новый родительский. Вокруг нового родительского элемента появится желтая рамка.
Выделение
Выделение элементов в структурном редакторе и в расширенном режиме временной шкалы дублируется: если выделить элемент в одном месте, он также будет выделен в другом. При этом Google Web Designer переключается на необходимый вложенный уровень или страницу. Ярлык текущего родительского элемента выделяется желтым цветом.
Чтобы выбрать элемент, нажмите на него.
Чтобы выбрать несколько элементов, которые относятся к одному родительскому, выполните следующие действия:
- Нажимайте на нужные элементы, удерживая клавишу Ctrl (для Windows) или ⌘ (для macOS).
- Чтобы выбрать смежные элементы, нажмите на первый и, удерживая клавишу Shift, – на последний.
Чтобы отменить выбор элемента, нажмите на него, удерживая клавишу Ctrl (для Windows) или ⌘ (для macOS).
Чтобы открыть родительский элемент, дважды нажмите на него. В родительском элементе можно редактировать существующие дочерние или создавать новые вложенные элементы. Если элементом выступает компонент, при двойном нажатии на него откроется диалоговое окно редактирования (если оно доступно).
Тип и статус элемента
Рядом с каждым элементом в структурном редакторе показывается значок типа, а также идентификатор, название или текст (если доступно). Ниже приведены другие значки статуса, которые показываются в структурном редакторе.
- Значок бриллианта указывает, что у элемента есть динамическая привязка данных.
- У вспомогательных слоев есть значок, нажав на который можно преобразовать такой слой в обычный элемент.
- У скрытых и заблокированных элементов также есть значок статуса, нажав на который, можно показать или разблокировать элемент. Если навести указатель на видимый или разблокированный элемент, появятся значки, нажав на которые, можно скрыть или заблокировать такой элемент.
Значки типов элементов
Страницы
| Главная страница | |
| Страница |
Элементы
| Группа | |
| Div | |
| Изображение | |
| amp-img (изображение в документе AMP) | |
| Элемент "Видео" | |
| Текстовый блок | |
| Нумерованный список | |
| Маркированный список | |
| Ссылка |
Фигуры
| Путь (нарисованный с помощью инструмента "Перо") | |
| Прямоугольник | |
| Овал | |
| Линия |
Компоненты
| Жест | |
| Графическая кнопка | |
| Компонент "Параллакс" | |
| Интерактивная область | |
| Кнопка вызова/SMS | |
| Панорамная галерея | |
| Круговая галерея | |
| Навигация по галерее | |
| Перелистываемая галерея | |
| Галерея переходов | |
| amp-carousel | |
| Аудио | |
| Видео | |
| YouTube | |
| Просмотр 3D-моделей | |
| Эффект изображения | |
| Эффекты частиц | |
| Таблица спрайтов | |
| Эффект вращения | |
| Кнопка | |
| Флажок | |
| Раскрывающийся список | |
| Ярлык | |
| Поле для ввода чисел | |
| Переключатель | |
| Ползунок | |
| Текстовое поле | |
| Добавить в календарь | |
| Смена даты | |
| Карта | |
| Просмотр улиц | |
| Окно iFrame | |
| Рейтинг |
Элементы заставок
| Прямоугольная заставка | |
| Овальная заставка | |
| Многоугольная заставка |
Клипы
| Аудиоклип | |
| Видеоклип или изображение |
Значки статуса
| Динамическая привязка или привязка варианта | |
| Вспомогательный слой | |
| Скрыт/показан (видно при наведении) | |
| Заблокирован/разблокирован (видно при наведении) |
Фильтр
В структурном редакторе можно фильтровать отображаемые элементы. Чтобы вы могли увидеть место отфильтрованного элемента в структуре документа, также отображаются его родительский элемент и другие предки.
Чтобы отфильтровать элементы, в верхней части панели структурного редактора нажмите на область рядом со значком лупы и введите часть идентификатора или названия элемента, названия тега или группы. Текстовые элементы также фильтруются по содержимому. Если ввести название объекта, появятся компоненты, в которых он используется.
Кроме того, можно использовать фильтры по типам элементов.
Фильтры по типам элементов
В структурном редакторе есть фильтры, которые позволяют просматривать только элементы определенного типа (например, текст или фигуры). Для этого нужно нажать на значок необходимого типа в верхней части панели. Если применить несколько фильтров, будут отображаться элементы, которые соответствуют хотя бы одному из них.
Значки фильтров по типам элементов
| Показать изображения и видео | |
| Показать компоненты | |
| Показать текст | |
| Показать фигуры |