In Google Web Designer gibt es einen großen zentralen Bereich. Dort können Sie Projekte erstellen und den entsprechenden Code bearbeiten. Dieser Bereich ist von einer Symbolleiste, einer Leiste mit Tooloptionen, einer Zeitachse und mehreren Steuerfeldern umgeben, mit denen Sie beispielsweise Elemente ändern oder Komponenten und Ereignisse hinzufügen können.
Das Dokument
In der Mitte der Web Designer-Oberfläche sehen Sie das aktuelle Dokument.
Zwei verschiedene Dokumentansichten stehen zur Verfügung:
- In der Designansicht werden die Bilder, der Text und andere Elemente Ihres Dokuments optisch so dargestellt, wie sie in einem Browser erscheinen. Der weiße Anzeigebereich stellt den sichtbaren Bereich der Anzeige oder Webseite dar.
- In der Codeansicht ist der Dokumentcode mit entsprechender Farbcodierung und Formatierung zu sehen.
Sie können die Designansicht und die Codeansicht in den Einstellungen anpassen.
1. Symbolleiste 2. Leiste mit Tooloptionen 3. Zeitachse 4. Steuerfelder 5. Ansichtsleiste
Ansichtsleiste
Auf der Ansichtsleiste können Sie zwischen der Designansicht und der Codeansicht wechseln. Außerdem können Sie sich eine Vorschau Ihres Dokuments in einem Browser ansehen und Ihre Anzeige veröffentlichen.
Tools
Die Symbolleiste enthält die Tools zur Erstellung und Bearbeitung von Elementen im Anzeigebereich. Hierzu gehören Tools für die Erstellung von Texten und einfachen Seitenelementen, Farbauswahltools und 3D-Tools.
| Tool | Beschreibung |
|---|---|
Auswahltool |
Objekte auswählen und im Anzeigebereich platzieren |
Bewegungspfadtool |
Kurvenförmige Bewegungspfade für animierte Elemente zeichnen Nicht verfügbar für AMPHTML- und Bildanzeigen |
3D-Objektdrehungstool |
Objekte in drei Dimensionen drehen |
3D-Objektverschiebungstool |
Objekte in drei Dimensionen verschieben |
Elementtool |
Beliebige HTML-Tags erstellen. Dies geschieht durch Anklicken und Ziehen in den Anzeigebereich. |
| Stift-, Oval-, Rechteck- und Linientool |
SVG-Zeichnungen erstellen, unter anderem grundlegende Formen mit den Formtools sowie Bézierkurven mit dem Stifttool |
Texttool |
Text hinzufügen oder bearbeiten |
Rechteck-, Oval- und Polygonmaske |
Einem Element eine „clip-path“-Maske hinzufügen |
Tools „Rechteckiger Hintergrund“, „Ovaler Hintergrund“, „Polygon-Hintergrund“ |
Ein div-Element mit einem Hintergrundfilter hinzufügen. Nur für Bild- und Videodokumente verfügbar |
Füll-, Strich- und Farbverlaufstool |
Die Farbe von Elementen in Ihrem Projekt ändern, darunter auch Füllung, Strichstärke und Farbverlauf |
Pipette |
Wählen Sie eine Farbe aus einem Element im Anzeigebereich aus. |
3D-Anzeigebereich-Rotation |
Die 3D-Ansicht des Projekts ändern |
Handtool |
Die Ansicht des Anzeigebereichs ändern |
Zoomtool |
Das Creative größer oder kleiner zoomen |
 Füllfarbe und Strichfarbe |
Ändern Sie die aktive Füll- und Strichfarbe (Rand) |
Tooloptionen
Die Leiste mit den Tooloptionen am oberen Bildschirmrand enthält Optionen für das aktuell ausgewählte Tool. Ist beispielsweise das Texttool ausgewählt, zeigt diese Leiste die Optionen für Schriftart und Textlayout.
Zeitachse
Auf der Zeitachse können Sie Animationen mithilfe von Keyframes erstellen. Im Schnellmodus wird die Animation szenenweise erstellt. Im erweiterten Modus können Sie jedes Element separat animieren.
Steuerfelder
Der Bereich Steuerfelder enthält die Steuerfelder für Farbe, Eigenschaften, Text, Komponenten, CSS, CSS-Effekte, responsives Layout, Ereignisse, dynamisches Layout, Bibliothek, Anzeigenvalidierung und Gliederungseditor. Sie können die Steuerfelder neu anordnen, kombinieren, schließen und ihre Größe anpassen. Weitere Informationen zum Anordnen von Steuerfeldern
Dokument-Tabs
Wenn mehrere Dokumente geöffnet sind, werden ihre Dateinamen auf separaten Tabs angezeigt. Sie können zwischen den Dokumenten wechseln, indem Sie auf einen Tab klicken oder Strg + Tabulatortaste drücken, um zum nächsten Dokument zu springen. Mit Umschalttaste + Strg + Tabulatortaste gelangen Sie zum vorherigen Dokument.
Wenn die Dokument-Tabs nicht alle in das Fenster passen, haben Sie die Möglichkeit, eine Liste aller geöffneten Dokumente in einem Pop-up-Menü aufzurufen. Klicken Sie dazu rechts neben den Tabs auf das Dreipunkt-Menü 