Hilfe für Anfänger und Fortgeschrittene
Ihnen stehen Videoanleitungen, Hilfeforen und Blogposts für Anfänger und Fortgeschrittene zur Verfügung, mit denen Sie Ihre Kenntnisse erweitern können. Unten erhalten Sie schnelle Antworten auf Ihre Fragen sowie ausführliche Anleitungen.
-
Die Galeriekomponenten
Hier können Sie die erweiterten Funktionen der Galeriekomponenten in Google Web Designer kennenlernen. Sie erfahren dabei, wie Sie eine Standardbanneranzeige im Format 300 x 250 optimieren.
- Erweiterter Modus
- UI
-
Zoom für erweiterte Zeitachse
User Experience Engineer Natalie zeigt, wie man in der Zeitleiste im erweiterten Modus heran- und herauszoomt.
- Erweiterter Modus
- Videoanleitung
-
Die Web Designer-Oberfläche
Hier erhalten Sie Informationen zur Benutzeroberfläche von Google Web Designer. Sie erfahren beispielsweise, welche Tools verfügbar sind und wo Sie sie finden.
- Übersicht
- UI
-
Tipps für Google Web Designer – Teil 1
Ihnen steht die leistungsfähige Stylesheet-Sprache CSS3 zur Verfügung, um 3D-Inhalte zu erstellen und zu bearbeiten. Sie können Objekte und 2D-Designs auf beliebigen Achsen drehen und sich einen visuellen Eindruck von Transformationen und Verschiebungen in drei Dimensionen verschaffen.
- 3D
- Blog
-
Stile über das CSS-Steuerfeld ändern
Im CSS-Steuerfeld wird der Stil für jedes ausgewählte Element angezeigt. Dort können Sie auch den Stil für die Klasse bearbeiten, Inline-Styles hinzufügen und neue Stile erstellen.
- Hilfeartikel
- CSS-Stile
-
Assets über die Bibliothek verwalten
Die Bilder, Audiodateien und Videodateien, die Sie in einem Dokument verwenden, werden zusammen als Assets bezeichnet. Assets werden beim Importieren in Ihr Dokument erstellt und in der Bibliothek gespeichert, sodass Sie sie als Vorschau aufrufen und wiederverwenden können.
- Hilfeartikel
- Bibliothek
-
Auswahl mehrerer Keyframes und Miniaturansichten
User Experience Engineer Natalie gibt einen kurzen Überblick zur Auswahl mehrerer Keyframes im erweiterten Modus und mehrerer Miniaturansichten im Schnellmodus.
- Erweiterter Modus
- Videoanleitung
-
Fünf spannende Funktionen
Werfen Sie einen Blick auf die folgenden fünf Funktionen und Workflows, die Ihnen die Arbeit mit Google Web Designer erleichtern: Gruppen, Muster, BYOC, die Veröffentlichung auf Drive und fließende Layouts.
- Übersicht
-
Versionshinweise
Hier finden Sie Informationen zur aktuellen Version und zu neuen Funktionen.
- Hilfeartikel
- Technische Informationen
-
Systemvoraussetzungen
Ihr Gerät muss die Systemvoraussetzungen erfüllen.
- Hilfeartikel
- Technische Informationen
-
Die Anzeigenumgebung
Google Web Designer unterstützt eine Reihe von Anzeigenumgebungen, darunter Google Ads, Display & Video 360 und Google AdMob. Sie können mit nur einem Klick zwischen diesen Umgebungen wechseln.
- Hilfeartikel
- Inhalte erstellen und ändern
- Anzeigenumgebung
-
Das Text-Tool
Mit diesem Tool können Sie Text hinzufügen und formatieren. Google Fonts und die automatische Textanpassung ermöglichen dabei den richtigen Feinschliff.
- Hilfeartikel
- Inhalte erstellen und ändern
- Neue Elemente hinzufügen
-
Tool für Formen und Schrift verwenden
Sie können SVG-Linien und -Formen zeichnen, von einfach bis komplex.
- Hilfeartikel
- Inhalte erstellen und ändern
- Neue Elemente hinzufügen
-
3D-Tools verwenden
Mit Google Web Designer lassen sich Elemente in drei Dimensionen verschieben und drehen. Sie können Ihre Ansicht ändern, um Elemente aus beliebigen Positionen zu betrachten.
- Hilfeartikel
- Anzeigen erstellen
- Elemente verschieben und ihre Größe anpassen
-
Farbverläufe verwenden
Ein Farbverlauf ist eine mehrfarbige Füllung, bei der jede Farbe nach und nach in die nächste übergeht. Farbverläufe können sowohl für Ränder als auch für die Füllung von HTML-, Canvas- und SVG-Elementen verwendet werden.
- Hilfeartikel
- Inhalte erstellen und ändern
- Farben
- Farbverläufe
-
Elemente gruppieren und zusammenfassen
Wenn Sie verschiedene Elemente gruppieren und zusammenfassen, können Sie sie als einzelnes Objekt bearbeiten.
- Hilfeartikel
- Inhalte erstellen und ändern
- Elemente zusammenfassen
- Elemente gruppieren
-
Responsives Layout – Übersicht
Beim responsiven Webdesign werden für Anzeigen flexible statt feste Layouts verwendet. Sie erstellen also eine einzige Anzeige, deren Elemente sich an die Ausrichtung und Größe des jeweiligen Bildschirms anpassen, anstatt mehrere ähnliche Anzeigen entwerfen zu müssen.
- Hilfeartikel
- Responsiv
-
Größe des Darstellungsbereichs ändern
Beim Erstellen eines responsiven Layouts ist es hilfreich, wenn man sieht, wie das fertige Dokument bei verschiedenen Bildschirmgrößen aussehen wird.
- Hilfeartikel
- Responsiv
- Darstellungsbereich
-
Animationen
Zum Erstellen von Animationen in Google Web Designer bestimmen Sie Keyframes zu gewissen Zeitpunkten. Legen Sie für jeden Keyframe die CSS-Eigenschaften des animierten Elements fest. Das Element ändert sich dann schrittweise und nimmt während des Übergangs vom vorherigen Keyframe die gewünschten Eigenschaften an.
- Hilfeartikel
- Animation
- Interaktivität
-
Animationen im Schnellmodus
Im Schnellmodus bauen Sie die Animation Szene für Szene auf. Hierbei verwenden Sie eine neue Ansicht der ganzen Seite, passen die zu animierenden Elemente an und ändern bei Bedarf die Übergangszeiten und Easings.
- Hilfeartikel
- Animation
- Interaktivität
-
Animationen im erweiterten Modus
Im erweiterten Modus wird jedes Element als separate Ebene auf der Animationszeitachse angezeigt. Mit Ebenen können Sie die Position jedes einzelnen Elements im Elementstapel ändern, Elemente ausblenden oder Elemente sperren – und arbeiten daher wesentlich effizienter.
- Hilfeartikel
- Animation
- Erweiterter Modus
-
Easing-Funktionen
Mit Easing-Funktionen können Sie die Beschleunigung und Verzögerung bei Animationsübergängen ändern.
- Hilfeartikel
- Animation
- Interaktivität
- Easing
-
Animationen verschachteln
Oft wird für die gesamte Seite eine Zeitachse verwendet, in der sich dann jedes Element der Seite befindet. Für jedes übergeordnete Element gibt es außerdem eine eigene Animationszeitachse. Dadurch können Sie komplexe Animationen erstellen, indem Sie eine Animation in eine andere verschachteln.
- Hilfeartikel
- Animation
- Interaktivität
- Verschachtelung
-
Animationen als Schleife wiedergeben
Wenn Sie eine Animation als Schleife wiedergeben möchten, haben Sie zwei Möglichkeiten. Entweder, Sie lassen jede Ebene separat als Schleife laufen, oder Sie verwenden Ereignisse, um in komplexeren Animationen alle Ebenen gemeinsam abzuspielen.
- Schleife
- Interaktivität
- Animation
- Hilfeartikel
-
Bewegungspfade
Mithilfe von Bewegungspfaden können Sie Objekte animieren, die sich an Kurven und komplexen Formen entlangbewegen.
- Hilfeartikel
- Animation
- Interaktivität
- Bewegung
-
Animationen im erweiterten Modus erstellen
Im erweiterten Modus können Sie jedes Element animieren, indem Sie auf der Zeitachse Keyframes erstellen. Die Zeitachse ist eine schematische Darstellung der Animationen und die Keyframes geben Beginn und Ende der Animationen an.
- Hilfeartikel
- Animation
- Interaktivität
- Erweiterter Modus
-
Animation in der Vorschau ansehen und Scrubbing durchführen
Mit der Vorschau und dem Scrubbing können Sie Ihre Animationen während der Bearbeitung ansehen und optimieren.
- Hilfeartikel
- Ebenen
- Erweiterter Modus
- Animation
- Interaktivität
-
Komponenten
Komponenten sind vorkonfigurierte Module, mit denen Sie Anzeigen und HTML-Dokumenten bestimmte Funktionen hinzufügen können.
- Hilfeartikel
- Übersicht
- Komponenten
-
Komponente "360°-Galerie"
Sie haben die Möglichkeit, aus mehreren Bildern ein sich drehendes Objekt zu erstellen. Das letzte Bild schließt den Kreis zum ersten Bild, das heißt, der Nutzer kann das Objekt nahtlos in jede Richtung drehen.
- Galerie
- Hilfeartikel
- Komponenten
-
Komponente "Karussell-Galerie"
Damit können Sie eine karussellähnliche Galerie erstellen, in der sich mehrere Bilder hin- und herwischen lassen. Mithilfe der Komponenteneigenschaften können Sie verschiedene 3D-Effekte und Arten von Karussells erstellen.
- Hilfeartikel
- Galerie
- Komponenten
-
Komponente "Galerienavigation"
Sie können einen separat positionierbaren Navigationsbereich in eine Swipe-Galerie, eine Karussell-Galerie oder eine 360°-Galerie einfügen.
- Hilfeartikel
- Galerie
- Komponenten
-
Komponente "Swipe-Galerie"
Damit können Sie eine einfache Galerie erstellen, in der Nutzer anhand von Wischgesten vor- und zurückblättern können, um sich verschiedene Bilder- oder Gruppensets anzusehen.
- Hilfeartikel
- Galerie
- Komponenten
-
Komponente "Zum Kalender hinzufügen"
Sie haben die Möglichkeit, Terminerinnerungen zu erstellen, die Nutzer in ihren Kalendern speichern können.
- Hilfeartikel
- Kalender
- Komponenten
-
Komponente "Bewegung"
Damit können Sie Nutzerinteraktion mit Ihrer Anzeige erfassen.
- Hilfeartikel
- Komponenten
- Bewegung
-
Komponente "Bildschaltfläche"
Sie können eine optisch reagierende Schaltfläche erzeugen, ohne eine ereignisbasierte Animation dafür erstellen zu müssen.
- Hilfeartikel
- Schaltfläche
- Komponenten
-
Komponente "Interaktionsfläche"
Bei dieser Komponente können Sie über einen beliebigen Bereich des Bildschirms ein transparentes Element legen, das auf Berührungen oder Mausklicks des Nutzers reagiert.
- Interaktionsfläche
- Komponenten
-
Komponente "Für Anruf/SMS-Versand tippen"
Damit geben Sie Nutzern die Möglichkeit, über eine mobile Anzeige auf unterstützten Smartphones eine von Ihnen festgelegte Nummer anzurufen bzw. eine SMS an diese Nummer zu senden.
- Hilfeartikel
- Komponenten
- Anruf/Text
-
Komponente "Karten"
Sie haben die Möglichkeit, Ihrem Projekt eine konfigurierbare Karte mit Suchfunktion hinzuzufügen. Darauf können der Standort des Nutzers und bestimmte andere standortbasierte Informationen angezeigt werden.
- Hilfeartikel
- Karten
- Komponenten
-
Komponente "Street View"
Sie können Ihrem Projekt Google Street View-Bilder hinzuzufügen, mit denen der Nutzer dann interagieren kann.
- Hilfeartikel
- Komponenten
- Street View
-
Komponente "Audio"
Sie haben die Möglichkeit, eine Audiodatei in Ihrer Anzeige zu verwenden.
- Hilfeartikel
- Komponenten
- Audio
-
Komponente "Video"
Hiermit können Sie Ihrer Anzeige ganz einfach ein Video hinzufügen.
- Hilfeartikel
- Komponenten
-
Komponente "YouTube"
Sie können Ihrer Anzeige ein YouTube-Video hinzufügen. Außerdem lassen sich Player und Wiedergabe anpassen.
- Hilfeartikel
- Komponenten
- YouTube
-
Komponente "iFrame"
Sie können in Ihrem Projekt externe URL-Elemente laden, wie etwa externe HTML-Seiten.
- iFrame
- Komponenten
- Hilfeartikel
-
Komponente "Sprite Sheet"
Damit können Sie Sprite-Animationen hinzufügen, bei denen einzelne Sprite-Bilder nacheinander als Frames angezeigt werden, oder mehrere Bilder in einem Sprite Sheet platzieren, um die Anzahl einzelner Bilddateien zu reduzieren.
- Hilfeartikel
- Komponenten
- Sprite Sheet
-
Komponenten-APIs
Eine Liste der für die einzelne Komponenten verfügbaren Eigenschaften, Ereignisse und Methoden, mit denen Sie benutzerdefinierten Code schreiben können.
- Hilfeartikel
- Vorschau
-
Ereignisse
Mit Ereignissen können Sie festlegen, welche Aktionen durch Nutzerbewegungen, Zeitachsen-Keyframes oder andere Vorgänge in einer Anzeige oder einem HTML-Dokument ausgelöst werden.
- Hilfeartikel
- Ereignisse
-
Benutzerdefinierte Aktionen erstellen
Sie können mithilfe von JavaScript eigene benutzerdefinierte Aktionen erstellen. Nachdem eine benutzerdefinierte Aktion definiert wurde, lässt sie sich in Creatives wiederverwenden.
- Hilfeartikel
- Ereignisse
-
Banneranzeige erstellen
Banneranzeigen sind einfache Anzeigen, die in eine Anzeigenfläche bestimmter Größe auf einer Webseite oder in einer App passen.
- Hilfeartikel
- Banneranzeigen
- Anzeigen erstellen
-
Expandable-Anzeige erstellen
Ein Expandable-Creative ist eine Anzeige, die am Anfang die Größe eines Standardbanners hat und dann vergrößert wird. So steht mehr Platz zur Verfügung, um die Aufmerksamkeit des Nutzers zu erregen.
- Hilfeartikel
- Ereignisse
- Expandable-Anzeige
-
Interstitial-Anzeige erstellen
Interstitial-Anzeigen sind ganzseitige Anzeigen, die an natürlichen Übergangspunkten wie etwa einem Seitenwechsel, einem App-Start oder beim Laden eines Spielelevels eingeblendet werden.
- Hilfeartikel
- Interstitial
- Anzeigen erstellen
-
Dynamische Anzeige erstellen
Dynamische Anzeigen werden mit relevanten Angeboten auf Ihre Zielgruppe ausgerichtet. Dazu wird anhand von Informationen in einem Datenfeed ermittelt, welche Bilder und Texte angezeigt werden sollen.
- Hilfeartikel
- AMPHTML
- Anzeigen erstellen
-
AMPHTML-Anzeigen
Sie können mit Google Web Designer AMPHTML-Anzeigen erstellen. Anzeigen, die für AMP-Seiten (Accelerated Mobile Pages) erstellt wurden, werden schneller als gewöhnliche Anzeigen geladen und sind daher ideal für Mobilgeräte.
- Hilfeartikel
- Anzeigen erstellen
- AMPHTML
-
Vorlagen verwenden
Vorlagen sind vorgefertigte Anzeigen in häufig verwendeten Größen und mit beliebten Stilen und Funktionen. Wenn Sie die Bilder und anderen Assets ersetzen, haben Sie im Handumdrehen eine nützliche, funktionierende Anzeige eingerichtet.
- Hilfeartikel
- Anzeigen erstellen
- Vorlagen
-
Benutzerdefinierte Vorlage erstellen
Sie können jede Anzeige, die Sie erstellt haben, als Vorlage speichern. Das spart Zeit, insbesondere wenn viele Versionen derselben Anzeige erstellt werden.
- Hilfeartikel
- Anzeigen erstellen
- Vorlagen
-
Anzeigenvalidierung
Mit der Anzeigenvalidierung können Sie Ihre Anzeige auf häufige Probleme überprüfen und die Ergebnisse in Echtzeit in einem Steuerfeld ansehen.
- Hilfeartikel
- Anzeigen erstellen
-
Über den Gliederungseditor durch die Dokumentenstruktur bewegen
Der Gliederungseditor enthält eine Baumansicht der Elemente in Ihrem Dokument, was eine schnelle Auswahl und Navigation ermöglicht.
- Hilfeartikel
- DOM
-
Anzeige oder HTML-Seite in der Vorschau ansehen
Während Sie Ihre Anzeige oder HTML-Seite bearbeiten, können Sie sie im Browser in der Vorschau ansehen und sich ein Bild davon machen, wie sie nach der Veröffentlichung aussieht und funktioniert.
- Hilfeartikel
- Vorschau
-
Projekt veröffentlichen
Durch die Veröffentlichung Ihres Projekts werden endgültige Dateien erstellt, die für das Trafficking bereit sind. Google Web Designer kann die Dateien dann in einem lokalen Ordner speichern oder sie direkt auf Google Drive oder in Studio veröffentlichen.
- Hilfeartikel
-
Zoom für erweiterte Zeitachse
User Experience Engineer Natalie zeigt, wie man in der Zeitleiste im erweiterten Modus heran- und herauszoomt.
- Erweiterter Modus
- Zeitachse
- Videoanleitung
-
Easing-Funktionen ("Step-start" und "Step-end")
User Experience Engineer Natalie erklärt, wie man die Easing-Funktionen "Step-start" und "Step-end" hinzufügt. Dies ist besonders hilfreich, wenn eine Animation direkt von einem Keyframe zu einem anderen springen soll statt allmählich überzugehen.
- Videoanleitung
- Easing
-
Zeitachsenebenen ausblenden und sperren
User Experience Engineer Natalie erklärt die Schritte, mit denen sich mehrere Ebenen auf einer Zeitachse ausblenden und sperren lassen.
- Erweiterter Modus
- Zeitachse
- Videoanleitung
-
Benutzeroberfläche – Übersicht
UX-Entwickler Jon gibt einen Überblick zur Benutzeroberfläche von Google Web Designer. Sie lernen die verschiedenen Symbolleisten und Steuerfelder kennen und erfahren, wie Sie den Arbeitsbereich nach Ihren persönlichen Vorlieben organisieren und anpassen.
- Videoanleitung
- UI
-
Ereignisse – Übersicht
Google Web Designer-Entwickler Maciek gibt einen Überblick zum Workflow "Ereignisse". Hier erfahren Sie unter anderem, wie Sie mit Ereignissen CSS-Stile festlegen und benutzerdefinierte Aktionen hinzufügen.
- Videoanleitung
- Ereignisse
-
Farbverlauf-Tool – Übersicht
Google Web Designer-Entwickler Jean-Pierre gibt einen Überblick zu Farbverläufen. Dabei geht er auch auf lineare und radiale Farbverläufe und das Bearbeitungstool für den Farbverlauf ein.
- Videoanleitung
- Farbverläufe
-
Formen – Übersicht
Google Web Designer-Entwickler Jean-Pierre gibt einen Überblick zu den Form-Tools, einschließlich Ovalen und Vierecken.
- Videoanleitung
- Formen
-
Text – Übersicht
Google Web Designer-Entwicklerin Shuo gibt einen Überblick zu den Textfunktionen und geht dabei auch auf die Verwendung des Steuerfelds "Text" ein. Sie lernen, wie Sie die Größe von Text ändern und ihn verschieben sowie Textstile zwischen Dokumenten und anderen Dateien kopieren.
- Videoanleitung
- Text
-
2D- und 3D-Zeichnungen – Übersicht
Google Web Designer-Entwickler Lucas gibt einen Überblick zu den Funktionen und Tools für 2D- und 3D-Zeichnungen.
- Videoanleitung
- Inhalte erstellen und ändern
-
Zeitachse im erweiterten Modus – Übersicht
Google Web Designer-Entwicklerin Natalie erklärt uns die Zeitachse im erweiterten Modus. Sie erfahren unter anderem, wie Sie Animationen erstellen, mit Keyframes arbeiten und das Easing festlegen.
- Erweiterter Modus
- Videoanleitung
-
Anzeigenvalidierung
Google Web Designer-Entwickler Jon gibt einen Überblick zur Funktion "Anzeigenvalidierung". Mit dieser Verbesserung können Sie Ihre Anzeige auf mögliche Probleme prüfen und sich die Ergebnisse im Steuerfeld "Anzeigenvalidierung" ansehen. Dadurch ist zwar nicht garantiert, dass die Anzeige genehmigt wird, bestimmte Probleme können so aber sofort entdeckt und behoben werden.
- Anzeigen erstellen
- Videoanleitung
-
Steuerfeldgruppe "Arbeitsbereich"
Google Web Designer-Entwicklerin Yaqi erklärt Ihnen, wie die Steuerfeldgruppe "Arbeitsbereich" funktioniert, damit Sie Arbeitsbereiche nach Ihren Wünschen speichern können.
- Videoanleitung
- Arbeitsplatz
- Einrichtung
-
Bewegungspfade – Übersicht
Google Web Designer-Entwickler Lucas gibt einen Überblick zu Bewegungspfaden. Mit Bewegungspfaden lassen sich Objekte animieren, während sie sich entlang eines von Ihnen festgelegten Pfads bewegen. Sie können Ankerpunkte setzen, um diese Animation und Kurve zu definieren, oder sie nach Bedarf verbinden.
- Videoanleitung
- Bewegung
-
Bewegungspfad bearbeiten
Google Web Designer-Entwicklerin Chia-Ling erklärt Ihnen, wie Sie einen Bewegungspfad bearbeiten. Sie lernen dabei verschiedene Möglichkeiten kennen, wie Sie Ihre Animation im Anzeigebereich mit der Bearbeitungsfunktion für den Bewegungspfad anpassen.
- Videoanleitung
- Bewegung
-
Gruppen – Übersichts
In diesem Video bietet der Google Web Designer-Ingenieur Lucas eine Demo der Gruppenfunktion.
- Elemente gruppieren
- Videoanleitung
-
Gruppen mit Ereignissen – Übersicht
Google Web Designer-Entwickler Lucas gibt einen Überblick zur Verwendung von Ereignissen, die Teil der neuen Funktion "Gruppen" sind. Mit Gruppen haben Sie die Möglichkeit, wiederverwendbare Sammlungen von Elementen zu erstellen, die Sie als einzelnes Objekt bearbeiten und verwalten können. Zusammen mit Ereignissen lassen sich damit in kurzer Zeit umfangreiche Animationen erstellen.
- Videoanleitung
- Ereignisse
- Elemente gruppieren
-
Workflow für responsive Anzeigen
Google Web Designer Creative Specialist Kent Myers erklärt den Workflow für responsive Anzeigen. Sie erfahren, wie Sie aus einer Vorlage für responsive Anzeigen schnell und einfach Ihre eigene Anzeige erstellen.
- Responsiv
- Videoanleitung
-
Gliederungseditor
In diesem Video gibt der Ingenieur des Google Web Designer, Jean-Pierre, einen Überblick über den Outliner.
- Videoanleitung
- Gliederungseditor
-
Keyframe auf der Zeitachse skalieren
Google Web Designer-Entwicklerin Natalie erklärt die Funktion zur Skalierung von Keyframes. Halten Sie die Umschalttaste gedrückt, während Sie ausgewählte Keyframes auf die Zeitachse im erweiterten Modus ziehen. So ändern Sie die Länge einer Animation, während der Abstand zwischen den Keyframes proportional bleibt.
- Erweiterter Modus
- Zeitachse
- Videoanleitung
-
Die Galeriekomponenten in Google Web Designer
Hier können Sie die erweiterten Funktionen der Galeriekomponenten in Google Web Designer kennenlernen.
- Blog
- Galerie
- Komponenten
-
Tipps für Google Web Designer – Teil 2
Hier erfahren Sie unter anderem, wie Sie benutzerdefinierten Code erstellen und Zeitachsenereignisse nutzen, um Wiedergabeschleifen für Anzeigen zu erstellen.
- Erweiterter Modus
- Benutzerdefinierter Code
- Blog
-
Text in Google Web Designer
Wir zeigen Ihnen, wie Sie das Erscheinungsbild von Text in Ihrem Google Web Designer-Dokument verwalten.
- Text
- Blog
Jetzt starten
Klicken Sie unten auf "Web Designer herunterladen", um den Download zu starten. Folgen Sie dann der Installationsanleitung auf dem Bildschirm.
