Golf-Template: Look „eagle“

Vorlage und Ergebnis

Vorlage Golfex — **Deine Vorlage (Golfex)**Schwarz, Creme und Signalgelb, Video im runden Rahmen, vier Merkmale auf einer Linie am unteren Rand, runde gelbe Knöpfe mit Pfeil.

Unser Look eagle — **Unser Look „eagle“**Derselbe Aufbau mit unserem Lotsen: die Frage als Überschrift, die fünf Antworten auf der Linie, jede mit einem Golf-Icon.

Die Effekte

Auf Bildern sieht man sie nicht, deshalb hier als Liste. In der Live-Demo laufen sie alle.

Effekt	Wo
Text blendet ein	Jede große Überschrift baut sich Buchstabe für Buchstabe auf, sobald sie ins Bild rollt.
Bilder werden aufgedeckt	Die großen Bilder einer Sektion öffnen sich von links wie ein Vorhang.
Mouseover auf Bildern	Das Bild zoomt leicht und ein heller Lichtstreif läuft diagonal darüber. Bei den Bildkarten wird die gelbe Leiste breit.
Drehender Störer	Gelber Kreis mit umlaufendem Text und Golf-Icon, auf „Über uns“ und in der Brücke zur nächsten Stufe. Hält beim Überfahren an und ist anklickbar.
Deko am Bildschirmrand	Golfschläger, Golfball, Ball auf dem Tee: ragen vom Rand in die Sektion und schweben ganz leicht.
Knöpfe	Beim Überfahren schiebt sich von links eine schwarze Fläche hinein, der Pfeil rückt nach rechts.
Zahlen zählen hoch	In der schwarzen Zahlen-Sektion (Jahreszahlen bleiben stehen).
Gleitende Linie	Im Frage-Bildschirm wandert das gelbe Linienstück zu der Antwort, auf die man zeigt.

Wer im Gerät „weniger Bewegung“ eingestellt hat, sieht alles sofort und ohne Bewegung. Nicht übernommen habe ich den mitlaufenden Maus-Punkt und den Ladebildschirm der Vorlage: beides bremst und stört auf dem Handy.

Grafiken, Icons, Video

Die Deko-Grafiken sind unsere eigenen. Die Dateien der Vorlage habe ich nicht kopiert: Dafür bräuchten wir je Kunden-Website eine Lizenz. Schläger, Bälle und die freigestellten Golfer stammen aus unserer eigenen Golf-Deko-Sammlung, im gleichen Stil und an denselben Stellen. Neu dazugekommen sind ein Golfer im Schwung und der Golfball auf dem Tee. Code, Schrift und Bilder sind ebenfalls eigene; eine Lizenz brauchen wir nicht.

Icons aus deinem Ordner. Ein einziges Set mit 50 Linien-Icons (Ordner „grafik/icons/golf“), damit alles zusammenpasst. Eingesetzt nur dort, wo die Vorlage Icons zeigt: bei den fünf Antworten, in der Bereichs-Leiste, im Ablauf, bei den Vorteilen, im Störer. Jeder Bereich hat sein festes Motiv (Entdecken: Ball auf dem Tee, Lernen: Golfer beim Putten, Mitglied werden: Club-Wappen, Gastspieler: Golfcart, Erleben: Fahne). eagle hängt an derselben Icon-Bibliothek wie die anderen vier Looks (je Look eine Serie, siehe Unterlage Golf-Icons), deshalb zeigen auch Mitgliederbereich und Seiten-Karten dieselbe Serie.

Das Video ist ein Platzhalter. Im Hero läuft zurzeit der FACEFORCE-Film. Ein eigenes Video für die Vorlage erzeuge ich erst mit deinem Go.

Der Unterschied zu „birdie“

Die Bausteine im Einzelnen

**Frage-Bildschirm**Video im runden Rahmen, der Kopf liegt darüber. Frage links, gelber Knopf, unten die fünf Antworten auf der Linie. Auf 1440 × 900 ist alles ohne Rollen zu sehen.

**Startseite für Wiederkehrer**Derselbe Rahmen mit dem Foto des gewählten Bereichs, die Schnellwege stehen auf der Linie.

**Über uns**Zwei gekippte Fotos, darauf der drehende Störer, rechts am Rand der Golfschläger. Die Punkte mit gelbem Haken-Kreis.

**Laufband und Zahlen**Laufband mit gefüllten und umrandeten Wörtern, darunter die schwarze Sektion mit freigestelltem Golfer und hochzählenden Zahlen.

**Highlights**Bildkarten mit gelber Leiste und Pfeil, seitlich rollend, Golfball am linken Rand.

**Kundenstimmen**Foto mit gelber Sterne-Leiste, rechts eine Stimme je Raste, weiter mit den gelben Pfeil-Quadraten oder per Wischen.

**Abschluss und Footer**Alles mittig, mit gezeichnetem Schwung-Pfeil, Schläger am Rand und einer freigestellten Gruppe, die auf dem schwarzen Footer steht. Je Seite wechselt die Gruppe zwischen drei Motiven.

Seitenkopf der Unterseiten — **Seitenkopf**Foto im runden Rahmen, Überschrift mittig, darunter Brotkrumen, Text und Knöpfe.

**„Erkennst du dich wieder?“**Schwarze Sektion mit großen Zeilen. Beim Überfahren wird die Zeile gelb unterlegt.

Vorurteile als Fächer — **„Was du über Golf zu wissen glaubst“ als Fächer**Die offene Tafel ist breit und hell, die anderen stehen schmal und schwarz daneben. Ein Klick öffnet die nächste, die Breiten gleiten.

**Schnupperkurs-Bühne**Schwarze Karte, gekipptes Foto mit Creme-Rand, der Preis im gelben Kreis, die drei Schritte auf der Linie.

**Ablauf**Zwei Bilder und die vier Schritte als Zeilen mit Icon und Nummer. Der Schritt, der gerade im Blick ist, wird schwarz.

**„Was dich erwartet“ als Bildwechsel-Liste**Links die Punkte, rechts wechselt das Bild, sobald man auf einen Punkt zeigt oder tippt.

**Vorteile**Der freigestellte Golfer vor der gelben Scheibe, links und rechts die Vorteile mit Icon im gelben Feld.

**Häufige Fragen**Zwei versetzte Fotos, rechts die Fragen. Die geöffnete Frage wird schwarz. Am Rand der Golfball auf dem Tee.

**Preise**Weißes Innenfeld mit Häkchen, die hervorgehobene Karte schwarz.

**„Mehr aus dem Bereich“**Karten mit Bild und abgetrennter Fußzeile, die beim Überfahren gelb wird.

**Brücke zur nächsten Stufe**Foto über die volle Breite, rechts der drehende Störer an der Stelle, an der die Vorlage ihren Abspiel-Knopf hat.

**Aufgeklapptes Menü**Schwarz, große Gruppen, Schließen als gelbes Quadrat.

**Mitgliederbereich**Kopf als schwarzer Rahmen, Karten in Creme.

**Kontakt**Formular als Creme-Karte mit weißen Feldern, Senden-Knopf gelb über die volle Breite.

Breiter Bildschirm — **Auf deinem breiten Bildschirm (2.400 px)**Der Rahmen geht mit dem Fenster mit, der Inhalt bleibt in der Spalte.

Auf dem Handy

Handy: Frage-Bildschirm — **Frage: Antworten in zwei Spalten**

Handy: Bereichsseite — **Bereichsseite**

Handy: Fächer als Akkordeon — **Fächer als Akkordeon**

So bekommt ein Club diesen Look

In der Akte design.look = "eagle" setzen. Keine Repo-Kopie: Jede Verbesserung am Konzept landet in allen fünf Looks.
Zwei Clubfarben genügen: design.lookFarben mit akzent (statt Gelb) und dunkel (statt Schwarz). Bei einem dunklen Akzent kommt aufAkzent: "#ffffff" dazu, damit die Schrift auf den Knöpfen hell wird.
Ein Hero-Video (quer und hochkant) oder ein Foto des Clubs.

Geprüft

Alle 84 Seiten automatisch auf Handy- und Laptop-Breite: nichts läuft über den Rand. Drei Lesbarkeitsfehler gefunden und behoben (hervorgehobene Preis-Karte, Namen auf den Golflehrer-Fotos, eine dunkle Karte im Mitgliederbereich).
Startseite und Bereichsseiten angesehen auf 390, 1.440 und 2.400 px. Menü, Lotsen-Wechsler, Fächer und Mini-Beratung durchgeklickt.
Die vier anderen Looks (modern, klassik, fairway, birdie) sind durch eagle unverändert: Ihr HTML ist vor und nach dem Bau Zeile für Zeile gleich.
Die Sie-Fassung baut. Der Text im Störer wird jetzt mit umgestellt.
Nicht geprüft: echte Geräte (nur der Browser im Handy-Maß) und das Verhalten mit echten Club-Farben.

Was du entscheiden solltest

Eigenes Hero-Video. Soll ich für die Vorlage ein eigenes Golf-Video erzeugen (quer und hochkant), oder bleibt der FACEFORCE-Film als Platzhalter, bis ein Club sein eigenes bringt?

Runde Knöpfe. Die Vorlage hat ganz runde Knöpfe, so habe ich es gebaut. Das weicht von deiner Regel „keine Pillenform“ ab. Wenn du es kantiger willst, ist das ein einziger Wert.

Sterne-Leiste bei den Stimmen. Sie zeigt den Durchschnitt der gezeigten Demo-Stimmen („5,0“). Für echte Clubs sollte dort die echte Bewertung stehen oder die Zahl entfallen.

Zielgruppen-Karten. Schnupperkurs, Platzreife, Trainerstunden und Restaurant haben im Inhalt nur drei Zielgruppen, deine Regel sagt „immer vier“. Das gilt für alle Looks und braucht je Seite einen vierten Text.

Eigene Icon-Serie für eagle? eagle zeichnet aus derselben Serie wie birdie (feine Linie, sie passt am besten zur Vorlage). Wenn jeder der fünf Looks seine eigene Serie haben soll, such für eagle eine der übrigen aus: Unterlage Golf-Icons. Der Tausch ist eine Zeile plus eine Tabellenspalte.

Offen

Übernahme in die Vorlage: erledigt am 02.10.2026. Neue Club-Websites wählen den Look über design.look.
Gesamtliste aller offenen Punkte zu den neuen Looks: golf-looks-todo.html