Der Gliederungseditor enthält eine Baumansicht der Elemente und Clips in Ihrem Dokument. Sie können den Gliederungseditor über das Menü Fenster ein- und ausblenden.
Einige Funktionen der Elemente, die im Gliederungseditor aufgelistet werden, sind identisch mit denen der Elemente im Anzeigebereich. Beispielsweise können Sie Elemente im Gliederungseditor durch Anklicken auswählen oder mit der rechten Maustaste auf ein Element klicken, um ein Pop-up-Menü mit Befehlen dafür aufzurufen. Bei bestimmten Komponenten wird ein Dialogfeld zum Bearbeiten angezeigt, wenn Sie auf sie doppelklicken.
Anordnung
Bei HTML5-Anzeigen und HTML-Dokumenten mit Seiten werden die Elemente vom Gliederungseditor unter den einzelnen Seiten im Dokument angeordnet. Wenn der Gruppenbearbeitungsmodus aktiviert ist, sehen Sie nur die Elemente in der entsprechenden Gruppe.
Standardmäßig sind die Elemente im Gliederungseditor in derselben Reihenfolge wie die Ebenen auf der Zeitachse im erweiterten Modus aufgeführt. Sie können über die Einstellungen der Designansicht zur DOM-Reihenfolge wechseln.
Element maximieren oder minimieren: Wenn Sie im Gliederungseditor auf den Pfeil neben einem Element klicken, werden verschachtelte Elemente ein- oder ausgeblendet.
Alle verschachtelten Elemente maximieren oder minimieren: Wenn Sie alle Elemente maximieren oder minimieren möchten, die unter einem Element aufgeführt sind, klicken Sie doppelt auf den Pfeil daneben. Alternativ können Sie auch unter Windows die Strg-Taste bzw. auf einem Mac die ⌘-Taste oder Wahltaste gedrückt halten, während Sie auf den Pfeil klicken.
Elemente neu anordnen: Ziehen Sie ein Element an die gewünschte Position im Eintrag. An der Stelle, an die das Element verschoben wird, erscheint eine gelbe Linie. Sie können ein untergeordnetes Element auch in ein anderes übergeordnetes Element ziehen.
Elemente verschachteln: Sie haben die Möglichkeit, ein Element in einem anderen Element zu verschachteln, indem Sie es in das neue übergeordnete Element ziehen. Um das übergeordnete Element herum wird ein gelbes Kästchen angezeigt.
Auswahl
Ihre Auswahl ist im Anzeigebereich, in der Zeitachse im erweiterten Modus und im Gliederungseditor sichtbar. Wenn Sie also ein Element in einem der Bereiche auswählen, wird es auch in den anderen Bereichen ausgewählt. Google Web Designer wechselt, wenn nötig, zu anderen Ebenen innerhalb von verschachtelten Elementen bzw. zu anderen Seiten. Das Label des aktuellen übergeordneten Elements wird gelb dargestellt.
Element auswählen: Ein Element lässt sich auswählen, indem Sie darauf klicken.
Mehrere Elemente auswählen: Sie können mehrere Elemente auswählen, sofern sie zum selben übergeordneten Element gehören.
- Halten Sie unter Windows die Strg-Taste bzw. auf einem Mac die ⌘-Taste gedrückt, während Sie auf die Elemente klicken, die Sie auswählen möchten.
- Um einen ganzen Bereich mit Elementen auszuwählen, klicken Sie auf das erste Element und halten Sie die Umschalttaste gedrückt, wenn Sie auf das letzte Element klicken.
Auswahl eines Elements aufheben: Halten Sie die Strg-Taste (Windows) bzw. ⌘-Taste (Mac) gedrückt, während Sie auf das Element klicken, das Sie aus der Auswahl entfernen möchten.
Untergeordnete Bestandteile eines Elements anzeigen: Klicken Sie doppelt auf ein Element, um dieses als übergeordnetes Element zu öffnen. Es ist auch möglich, vorhandene untergeordnete Elemente zu bearbeiten oder neue Elemente unter dem übergeordneten Element zu verschachteln. Wenn das Element eine Komponente mit einem Bearbeitungsdialogfeld ist, wird durch einen Doppelklick stattdessen dieses Dialogfeld geöffnet.
Elementtyp und -status
Jedes Element im Gliederungseditor hat ein Symbol, das den Elementtyp angibt. Außerdem sind die ID, der Name und, falls verfügbar, der Textinhalt des Elements zu sehen. Im Gliederungseditor werden darüber hinaus die folgenden Statussymbole angezeigt:
- Ein Rautensymbol weist darauf hin, dass ein Element eine dynamische Datenbindung aufweist.
- Für Anleitungsebenen wird ein Symbol angezeigt, das Sie anklicken können, um die Anleitungsebene wieder in ein normales Element umzuwandeln.
- Ausgeblendete und gesperrte Elemente haben Statussymbole. Sie können darauf klicken, um das entsprechende Element einzublenden oder zu entsperren. Bewegen Sie den Mauszeiger auf ein sichtbares oder entsperrtes Element, um Symbole anzeigen zu lassen, mit denen Sie das Element ausblenden oder sperren können.
Symbole für die einzelnen Elementtypen
Seiten
| Primäre Seite | |
| Seite |
Elemente
| Gruppe | |
| Div | |
| Bild | |
| amp-img (Bild in einem AMP-Dokument) | |
| Videoelement | |
| Textcontainer | |
| Nummerierte Liste | |
| Aufzählung | |
| Link |
Formen
| Pfad (mit Stifttool gezeichnet) | |
| Rechteck | |
| Oval | |
| Linie |
Komponenten
| Komponente „Geste“ | |
| Komponente „Bildschaltfläche“ | |
| Komponente „Parallaxe“ | |
| Komponente „Interaktionsfläche“ | |
| Komponente „Für Anruf/SMS-Versand tippen“ | |
| Komponente „60°-Galerie“ | |
| Komponente „Karussell-Galerie“ | |
| Komponente „Galerienavigation“ | |
| Komponente „Swipe-Galerie“ | |
| Komponente „Übergangsgalerie“ | |
| Komponente „amp-carousel“ | |
| Komponente „Audio“ | |
| Komponente „Video“ | |
| Komponente „YouTube“ | |
| Komponente „3D-Modellansicht“ | |
| Komponente „Bildeffekt“ | |
| Komponente „Partikeleffekte“ | |
| Komponente „Sprite Sheet“ | |
| Komponente „3D-Animation“ | |
| Komponente „Schaltfläche“ | |
| Komponente „Kästchen“ | |
| Komponente „Drop-down-Liste“ | |
| Komponente „Label“ | |
| Komponente „Zahleneingabe“ | |
| Komponente „Optionsfeld“ | |
| Komponente „Schieberegler“ | |
| Komponente „Textfeld“ | |
| Komponente „Zum Kalender hinzufügen“ | |
| Komponente „Date Swap“ | |
| Komponente „Karte“ | |
| Komponente „Street View“ | |
| Komponente „iFrame“ | |
| Komponente „Bewertungen“ |
Hintergrundelemente
| Form „Rechteckiger Hintergrund“ | |
| Form „Ovaler Hintergrund“ | |
| Form „Polygon-Hintergrund“ |
Clips
| Audioclip | |
| Videoclip oder Bildclip |
Statussymbole
| Hat eine dynamische Bindung oder Variantenbindung | |
| Anleitungsebene | |
| Ausgeblendet/angezeigt (angezeigt, wenn der Mauszeigers darauf bewegt wird) | |
| Gesperrt/entsperrt (angezeigt, wenn der Mauszeigers darauf bewegt wird) |
Filter
Die Liste der Elemente im Gliederungseditor lässt sich filtern. Wenn ein Element über einen Filter gefunden wird, werden das übergeordnete Element und andere Vorgängerelemente ebenfalls angezeigt. Dadurch sehen Sie, wo sich das Element in der Dokumentstruktur befindet.
Wenn Sie Elemente filtern möchten, klicken Sie zuerst im Gliederungseditor oben in den Bereich neben der Lupe . Geben Sie dann einen Teil einer Element-ID, des Werts der Eigenschaft „Name“ oder eines Tag- bzw. Gruppennamens ein. Textelemente können auch nach ihrem Textinhalt gefiltert werden. Wenn Sie den Namen eines Assets eingeben, werden Komponenten angezeigt, die das Asset enthalten.
Sie können auch nach Elementtyp filtern.
Elementtyp-Filter
Der Gliederungseditor enthält Filter, mit denen sich ganz bestimmte Elementtypen anzeigen lassen, wie z. B. Text oder Form. Klicken Sie im Steuerfeld oben auf die Symbole für Elementtypen, die im Gliederungseditor dargestellt werden sollen. Wenn mehrere Elementtyp-Filter aktiv sind, werden jene Elemente angezeigt, die mit mindestens einem der aktiven Filter übereinstimmen.
Symbole von Elementtyp-Filtern
| Bilder und Videos anzeigen | |
| Komponenten anzeigen | |
| Text anzeigen | |
| Formen anzeigen |