Der Event Progress Countdown zeigt mit einem Balken, der sich füllt, je näher das Datum rückt, wie nah ein Event ist, statt sich nur auf die Zahlen zu verlassen. Er ist für Webinare, Launches und Live-Sessions gebaut und enthält einen Button zur Anmeldung und einen Link zum Hinzufügen zum Kalender. Es gibt zwei Versionen mit identischen Einstellungen — wählen Sie die Form, die zu dem Ort passt, an dem Sie ihn einsetzen möchten.
Die zwei Versionen
- Event Progress Countdown — eine einzige zentrierte Spalte: oben der Text, dann Balken und Timer, dann die Buttons. Gut als Bereich innerhalb einer Seite oder als Vollbild-Übernahme.
- Event Progress Countdown (Side-by-Side) — zwei Spalten: Text und Buttons auf der einen Seite, Timer und Balken auf der anderen. Gut für breite Hero-Bereiche.
Alles Folgende gilt für beide, sofern nicht anders angegeben.
Den Event-Zeitpunkt festlegen
Der Countdown selbst wird im Abschnitt Timer unter Countdown logic festgelegt, genau wie bei den anderen Countdown-Vorlagen. Für ein echtes Event verwenden Sie ein festes Datum mit Uhrzeit, damit alle dieselbe Frist sehen. Der Fortschrittsbalken liest denselben Countdown, Sie legen das Datum also nur einmal fest.
Woher der Fortschrittsbalken weiß, wo er beginnt
Ein Countdown braucht nur ein Enddatum, ein Balken aber auch einen Anfang — sonst lässt sich nicht bestimmen, was „halb geschafft“ bedeutet. Dafür gibt es Progress Window (days).
Es beantwortet: Wie lange vorher soll sich der Balken zu füllen beginnen? Mit dem Standardwert 14 ist der Balken zwei Wochen vor dem Event leer, eine Woche vorher halb voll und erreicht das Ende genau zum Beginn des Events. Passen Sie den Wert an die Laufzeit Ihrer Kampagne an — 30 für einen Monat, 7 für die letzte Woche.
Bevor das Fenster beginnt, ist der Balken einfach leer; nichts geht kaputt, wenn Sie das Event weiter in die Zukunft legen.
Füllen oder leeren
Bar Direction steuert die Richtung. fill wächst zum Event hin und wirkt wie „fast da“. drain leert sich, während die Zeit abläuft, und wirkt wie „die Zeit läuft ab“. Beide nutzen denselben Countdown; es geht nur darum, welche Geschichte Sie erzählen möchten.
Nachrichten, die sich ändern, je näher das Event rückt
Das ist der Teil, der den Balken lohnenswert macht. Unter Progress Messages können Sie bis zu vier Stufen festlegen, jede mit eigener Formulierung und eigener Balkenfarbe. Mit der Zeit wird die Nachricht ersetzt, sodass der Besucher immer die dringendste passende sieht:
- Step 1 — 336 Stunden (14 Tage) — „Save the date“
- Step 2 — 168 Stunden (7 Tage) — „Noch eine Woche“
- Step 3 — 24 Stunden — „Letzte Chance zur Anmeldung“
- Step 4 — 1 Stunde — „Gleich geht es los“
Jede Stufe ist eine Anzahl von Stunden vor dem Event. Angezeigt wird die Stufe mit der kleinsten Zahl, die die verbleibende Zeit unterschritten hat; Sie können sie also in beliebiger Reihenfolge eingeben. Jede Stufe legt außerdem die Balkenfarbe fest — deshalb laufen die Standardwerte von Grün über Blau und Bernstein zu Koralle.
Es ist immer nur eine Nachricht sichtbar — anders als bei einer Leiste für den Warenkorbwert, bei der alle Stufen gleichzeitig angezeigt werden. Das ist Absicht: Der Besucher kann einen Countdown nicht beschleunigen, der Wert liegt also in der wechselnden Nachricht, nicht darin, die ganze Leiter zu sehen.
Schalten Sie das Ganze mit Use Changing Messages aus, wenn Sie lieber einen einfachen Balken möchten.
Den Balken ohne Zahlen zeigen
Stellen Sie Show Numeric Timer auf No, dann verschwinden die Countdown-Kästen, und nur der Balken mit seiner Nachricht bleibt. Der Countdown läuft im Hintergrund weiter und steuert weiterhin den Balken. Das ist eine gute Option, wenn ein sekundengenauer Zähler für die Zielgruppe zu aggressiv wirkt.
Den Balken gestalten
- Bar Style — abgerundete oder eckige Enden und ein dünnerer oder dickerer Balken.
- Bar Animation — stripes für bewegte diagonale Streifen, shimmer für einen darüber gleitenden Lichtschein, pulse für ein sanftes Aufhellen oder keine.
- Bar Position (nur einspaltige Version) — über dem Timer, unter dem Timer, über dem Titel oder unter den Buttons.
In der Version Side-by-Side sitzt der Balken immer mit dem Timer in dessen eigener Spalte, vertikal zum Text zentriert; eine Einstellung für die Position gibt es daher nicht.
Symbol, Text und Buttons
- Event Icon — ein Kalender, eine Videokamera, ein Mikrofon, ein Ticket usw., neben dem Text angezeigt. Schalten Sie es aus, wenn Sie möchten.
- Eyebrow, Title, Subtext — Ihr Überschriftentext, dazu optionale kurze Zeilen über und unter dem Timer.
- Main button — Ihr Link zur Registrierung oder Anmeldung, optional mit einem Symbol darin.
- Second button — eingerichtet als „Zum Kalender hinzufügen“. Verweisen Sie ihn auf Ihren Google-Kalender-Link, Outlook-Link oder eine
.ics-Datei. - Button ‘No thanks’ — ein optionaler Link zum Schließen, in einer eigenen Zeile unter den beiden Buttons.
Wenn das Event beginnt
Legen Sie im Abschnitt Timer die Nachricht fest, die bei null angezeigt wird. Ist When Timer Ends auf Yes gestellt, ersetzt sie den gesamten Inhalt, sodass der Besucher eine einzige klare Zeile sieht, etwa „Diese Session hat begonnen“. Bei No wird nur der Timer ersetzt.
Aussehen
Preset (dark, light oder brand), Größe, Eckenradius, Schatten, ein optionales Hintergrundbild mit abdunkelndem Overlay, optionale dekorative Formen und die Button-Animation funktionieren genau wie bei den anderen Countdown-Vorlagen.
Schließen — und ein wichtiger Hinweis zum Testen
Der Abschnitt Close steuert den X-Button und ob er immer oder nur beim Hovern erscheint. Das Schließen verhindert außerdem, dass die Aktion eine Zeit lang erneut erscheint.
Bitte lesen Sie das, bevor Sie testen: Einmal geschlossen, erscheint sie auch für Sie für die an der Aktion eingestellte Anzahl von Sitzungen nicht mehr. Das kann leicht so aussehen, als sei die Vorlage kaputt, obwohl sie genau wie konfiguriert funktioniert. Deshalb:
- Schließen Sie Ihre Tests und die QA zuerst ab und schalten Sie das Ausblenden danach ein.
- Um sie wieder zu sehen, löschen Sie Cookies und Websitedaten für Ihre Website oder nutzen Sie ein Inkognito- bzw. privates Fenster.
- Die Anzahl der Sitzungen wird an der Aktion unter Placement / Trigger festgelegt, nicht in der Vorlage.
Ein Hinweis zur Vorschau im Editor
Der Countdown läuft im Editor-Bereich nicht, daher bleibt der Balken dort in seiner Anfangsposition. Der Vollbildmodus wird im Editor außerdem als gewöhnlicher Block dargestellt, damit er die Bearbeitungsleiste nicht verdeckt. Nutzen Sie die Live-Vorschau, um beides richtig zu sehen. Das ist so vorgesehen.
Technische Hinweise
- Der Balken wird von demselben Countdown gesteuert, den Sie im Abschnitt Timer festlegen; Zeitzonen und Datumslogik werden also für Sie erledigt. Es gibt kein zweites Datum, das synchron gehalten werden müsste.
- Der Balken aktualisiert sich jede Sekunde zusammen mit dem Countdown.
- Wenn Sie eine Einheit ausblenden, indem Sie ihre Beschriftung leeren, funktioniert der Balken trotzdem — er liest die verbleibende Zeit aus den angezeigten Einheiten.
- Wer den Countdown wo und wie oft sieht, wird an der Aktion festgelegt, nicht in der Vorlage.
Weiterführende Lektüre
- Website-Popup-Vorlagen — alle 16 Vorlagen und wie Sie das richtige Format wählen.