Die Web Designer-Oberfläche

Google Web Designer verfügt über einen großen zentralen Bereich, wo Sie Projekte erstellen und den entsprechenden Code bearbeiten können. Diese Fläche ist von einer Symbolleiste, einer Leiste mit Tooloptionen, einer Zeitachse und mehreren Steuerfeldern umgeben, mit denen Sie beispielsweise Elemente ändern sowie 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 Diese Funktion ist für AMPHTML-Anzeigen nicht verfügbar.

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 (T)
Text hinzufügen oder bearbeiten

Rechteck-, Oval- und Polygonmaske
Einem Element eine "clip-path"-Maske hinzufügen

Füll-, Strich- und Farbverlaufstool
Die Farbe von Elementen in Ihrem Projekt ändern, darunter auch Füllung, Strichstärke und Farbverlauf

3D-Anzeigebereich-Rotationstool
Die 3D-Ansicht des Projekts ändern

Handtool
Die Ansicht des Anzeigebereichs ändern

Zoomtool
Das Creative größer oder kleiner zoomen

Tool zur Anpassung der Darstellungsbereichsgröße
Die Größe des Darstellungsbereichs für den Entwurf anpassen Diese Funktion ist für AMPHTML-Anzeigen nicht verfügbar.

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

Schnellmodus
Erweiterter Modus

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, 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 + Tab drücken, um zum nächsten Dokument zu springen. Mit Umschalttaste + Strg + Tab 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ü . Wählen Sie ein Dokument aus, zu dem gewechselt werden soll, oder bewegen Sie den Mauszeiger auf den Dateinamen und klicken Sie auf das x, um es zu schließen.

War das hilfreich?
Wie können wir die Seite verbessern?