Google Web Designer: Komponenten

Im vorerst letzten Teil der Google Web Designer Reihe erkläre ich Euch noch, was Ihr mit den einzelnen Komponenten machen könnt. Damit es übersichtlicher ist, nutze ich diesmal die komplette Arbeitsfläche, anstatt nur einen Banner zu erstellen.

Ich habe dazu die Abmessungen beim Erstellen einer neuen Datei selbst auf 1600 x 1200 festgelegt. Fügt die gewünschte Komponente zum Verwenden einfach in Euer Projekt ein.

Komponente hinzufügen

Klickt dazu die Komponente an, haltet die Maustaste gedrückt und zieht die Komponente auf die Arbeitsoberfläche. Die Iframe- (externe URL-Elemente/Webseiten einbinden) und Video-Komponente lasse ich hier aus, da nichts weiter zu tun ist, als das Ihr die Quelle in den Eigenschaften angeben müsst.

Google Web Designer - Komponenten Menü

360° Galerie

Google Web Designer - 360 Galerie
Nachdem Ihr die Galerie hinzugefügt habt und die Größe und Position angepasst habt, könnt Ihr über die Eigenschaften auf der rechten Seite noch einen Namen vergeben. Über das Symbol neben dem Textfeld Bilder könnt Ihr direkt mehrere Bilder von Eurem PC oder einer URL hinzufügen (oberes Bild). Die Reihenfolge der Bilder lässt sich durch einfaches Verschieben anpassen (unteres Bild).  Damit seid Ihr auch schon fertig und könnt Eure Galerie in der Vorschau genießen.

Tipp für Euch:
Die 360° Galerie ist gut , um sich drehende Objekte anzuzeigen!

Google Web Designer - 360 Galerie EinstellungenGoogle Web Designer - 360 Galerie Bilder hinzufügen

Karussell-Galerie

Die Einrichtung der Karussell-Galerie ist gleich mit der 360° Galerie. Die Besonderheit ist nur das Ihr die Übergänge, Startframes, Framebreiten usw. manuell bearbeiten könnt. Übergang und Startframe könnt Ihr direkt rechts in den Eigenschaften anpassen (oberes Bild). Alles Weitere findet Ihr in den erweiterten Eigenschaften (unteres Bild).

Google Web Designer - Karussell EigenschaftenGoogle Web Designer - Karussell Erweiterte Eigenschaften
Aussehen kann die fertige Galerie wie in diesem Bild:

GWD - Karussell Galerie
Beispiel einer mit dem Google Web Designer erstellten Karussell-Galerie

Horizontal navigierbare Galerie

Diese Galerie-Art ist perfekt für Panorama-Ansichten. Die Einrichtung entspricht wieder der 360° Galerie. Namen vergeben, Bilder hinzufügen und ggf. Übergang und Startframe in den Eigenschaften rechts einstellen, fertig.

Google Web Designer - Swipe Gallery Einstellungen

Google Web Designer - Swipe Galerie
Beispiel einer mit dem Google Web Designer erstellten Swipe Galerie

Karte aka Google Maps

Mit der Karten-Komponente könnt Ihr eine Google Maps Anzeige integrieren. Auch hier wieder die Komponente auf die Arbeitsfläche ziehen und Größe, Position usw. festlegen. In den Komponenteneigenschaften gibt es 3 wichtige Angaben, die festgelegt werden müssen.

  • Abfrage: Gebt hier die Adresse des Standortes ein, der auf der Karte markiert werden soll. Ihr könnt auch den Firmennamen eingeben oder beides. Am besten probiert Ihr aus, was in Eurem Fall das beste Ergebnis liefert.
  • Breitengrad und Längengrad: Die genaue Position Eures Standortes könnt Ihr z.B. über Wikipedia oder die Google-Suche ermitteln.

Wenn Ihr wollt, könnt ihr noch den Haken setzen, damit der derzeitige Standort des Benutzers per GPS oder Postleitzahl bestimmt werden kann.

Google Web Designer - Karte
In den erweiterten Einstellungen gibt es ebenfalls 3 wichtige Punkte, die individuell angepasst werden können. Zuerst solltet Ihr den Suchradius nach unten korrigieren, wenn Ihr z.B. nur Euren Firmenstandort anzeigen wollt. Das Minimum ist „1000“. Geht es um mehrere Standorte, kann der Suchradius natürlich auch nach oben angepasst werden. Den Wert Max. Ergebnisse passt Ihr ebenfalls nach dem eben genannten Schema an. Bei den Standardeinstellung für Zoom fahrt Ihr mit einem Wert von 14 – 16 gut, wenn Ihr nur einen kleinen Bereich anzeigen lassen wollt. Für einen größeren Kartenausschnitt setzt Ihr den Wert auf 4 -6.

Google Web Deisgner - Erweiterte Einstellungen Karte
Der Punkt Markierungssymbol ist ein nettes Gimmick. Ihr könnt eine Bilddatei auf Euren Webspace laden, um Euer eigenes Symbol für die Kartenmarkierung zu verwenden (unteres Bild). Gebt dazu die URL der Datei im Textfeld ein.

Google Web Designer - Karte Markierungssymbole
Allerdings muss die Datei die folgenden Voraussetzungen erfüllen, damit Eure Symbole korrekt angezeigt werden.

  • Maße der PNG-Datei: 105 x 34 Pixel
  • Die Datei muss 3 Symbole in dieser Reihenfolge und Position enthalten (den Schatten könnt Ihr ggf. auch einfach weglassen).
  1. Standardmarkierung = 34 x 34 Pixel
  2. Aktive Markierung = 34 x 34 Pixel, beginnt bei (Position 34,0)
  3. Markierungsschatten = 37 x 34 Pixel, beginnt bei (Position 68,0)

Google Web Designer - Die fertige Karte

YouTube und Berührungsbereich

Im unteren Bild seht Ihr, dass ich eine YouTube Komponente eingefügt habe und außerdem noch ein Image mit einem Berührungsbereich versehen habe. Über den Berührungsbereich soll auf unseren Blog verlinkt werden. Wie das funktioniert, erkläre ich Euch im Folgenden.

Google Web Designer - YouTube und Tap-AreaWie gewohnt könnt Ihr die Komponenten für YouTube und einen Berührungsbereich wieder durch Ziehen auf die Arbeitsfläche einfügen. Bei der YouTube Komponente gibt es wieder mal nicht viele Pflichtfelder zum Bearbeiten. Zu erwähnen ist nur das Textfeld URL in den Einstellungen auf der rechten Seite. In diesem Feld fügt Ihr den Link ein, den Ihr auf YouTube erhaltet, wenn Ihr auf Teilen unter dem Video klickt.

Google Web Designer - YouTube Link einfügen
Zusätzlich könnt Ihr noch auswählen, ob die Videosteuerung angezeigt, das Video automatisch wiedergegeben werden soll und noch einiges mehr. Die Möglichkeiten sind bereits von der Video-Komponente oder dem Video-Tag bekannt.

Die Berührungs-Komponente ist ein transparentes Objekt, welches Ihr überall auf der Arbeitsfläche platzieren könnt. Durch Berühren/Anklicken wird eine vorher von Euch festgelegte Aktion ausgeführt. Die durchzuführende Aktion legt Ihr über die Ereignisse unten rechts fest. Klickt dazu auf das „+“ Symbol.

Google Web Designer - Ereignis einfügen
Im Einstellungsfenster für die Ereignisse könnt Ihr dem Berührungsbereich eine Aktion zuweisen. Je nach Objektart (Image, Video…), erhaltet Ihr verschiedene Auswahlmöglichkeiten. Vom Drehen in das Hoch- oder Querformat, starten oder beenden einer Wiedergabe oder dem Verlinken zu einer URL ist vieles möglich. Im unteren Bild seht Ihr ein Beispiel wie Ihr ein Bild auf eine URL verweist.

Google Web Designer - Ereignisse festlegen
Damit sind wir auch schon am Ende des Workshops für den Google Web Designer angelangt. Sobald die Beta-Phase beendet ist, werde ich Euch wieder über die neuen Funktionen und Möglichkeiten informieren. Bis dahin wünsche ich Euch viel Spaß beim Arbeiten mit dem Google Web Designer. Sollten bei Euch noch Fragen aufkommen, stellt sie einfach im Blog.

Rating: 5.0/5. Von 1 Abstimmung.
Bitte warten...

4 Gedanken zu „Google Web Designer: Komponenten

  1. Hallo, muss nochmal stören. Hab es jetzt mit Deiner Lösung versucht und eine Schaltfläche hinzugefügt. In der Vorschau lässt es sich anklicken. Wenn ich die html Datei dann so in die php datei einbinde, lässt es sich erstens nicht anklicken und auch die Touchbedienung der Seite geht wie zuvor auch nicht mehr.

    Noch eine Idee?

    Danke im voraus.

    1. Arne

      Hi Steven,

      leider hab ich da so direkt keinen Tipp mehr. Ich werde die Tage mal schauen, wie das Einbinden in WordPress ggf. möglich ist und gebe dir Bescheid.

      Gruß Arne

  2. Hallo,

    tolle Tutorials. Man bekommt ja am Ende eine Html und die verwendeten Dateien ausgeworfen. Hatte die html Datei dann einfach in ein WordPress php template eingebunden, was auch gut funktioniert hat. Allerdings ließ sich die Seite dann nicht mehr auf Tablets via Touch bedienen. Man konnte nichts mehr anklicken, nur via Maus.

    Mache ich irgendetwas falsch?

    1. Arne

      Hi Steven,

      wichtig ist das du die Schaltflächen im Google Web Designer mit einem Berührungsbereich/Tap Area überlagerst
      und ein Ereignis zuweist (z.B. rufe Link XY auf).

Schreibe einen Kommentar

Die von Ihnen hier erhobenen Daten werden gemäß unserer Datenschutzerklärung zur Veröffentlichung Ihres Kommentars in unserem Blog verarbeitet.