Die Web Designer-Oberfläche

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

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, 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ü . 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?

Benötigen Sie weitere Hilfe?

Anmelden, um weitere Supportoptionen zu erhalten und das Problem schnell zu beheben

Suche
Suche löschen
Suche schließen
Google-Apps
Hauptmenü
Suchen in der Hilfe
true
5050422
false