Vorlagen: Countdown Timer Card, Bar und Event Bar

Die Countdown-Vorlagen stellen Ihren Besuchern einen Live-Timer vor Augen, der Dringlichkeit rund um eine Frist erzeugt — ein Sale, der endet, ein Preis, der steigt, oder ein Event, das beginnt. Es gibt drei davon. Sie teilen dieselbe Timer-Engine und fast alle Einstellungen; wer eine kennt, kennt alle drei. Wählen Sie die Form, die zu dem Ort passt, an dem sie erscheinen soll.

Die drei Vorlagen

• Countdown Timer Card — eine Karte mit Überschrift, Timer und Button. Nutzen Sie sie inline in einer Seite, kombinieren Sie sie mit dem modalen Hintergrund der Aktion, um ein Popup daraus zu machen, oder schalten Sie sie auf Vollbild-Übernahme um. Sie kann gestapelt (alles zentriert) oder nebeneinander (Text auf der einen Seite, Timer auf der anderen) sein.
• Countdown Timer Bar — ein Streifen in voller Breite, oben oder unten am Bildschirm fixiert, wie eine Ankündigungsleiste mit Live-Timer. Er kann auch inline in der Seite stehen.
• Event Countdown Bar — derselbe Streifen, eingerichtet für Webinare, Launches und Live-Events. Er ergänzt ein Event-Symbol, Symbole auf den Buttons und einen zweiten Link für „Zum Kalender hinzufügen“.

Alles Folgende gilt für alle drei, sofern nicht anders angegeben.

Den Countdown festlegen

Öffnen Sie den Abschnitt Timer und nutzen Sie Countdown logic. Es gibt zwei Arten herunterzuzählen:

• Ein festes Datum mit Uhrzeit — alle sehen dieselbe Frist. Nutzen Sie das für ein echtes Event oder einen Sale, der wirklich zu einem festen Zeitpunkt endet.
• Ein Countdown pro Besucher — jeder Besucher erhält sein eigenes Zeitfenster (zum Beispiel eine Stunde ab seiner ersten Ansicht), gespeichert in seinem Browser. Nutzen Sie das für dauerhafte Angebote. Sie können ihn auch nach einem gewählten Zeitraum neu starten lassen.

Ab Werk sind die Vorlagen auf einen Countdown pro Besucher von einer Stunde eingestellt, damit ein Timer läuft, sobald Sie die Vorlage einsetzen. Ändern Sie ihn vor dem Livegang auf Ihre echte Frist.

Festlegen, welche Einheiten angezeigt werden

Der Timer zeigt Tage, Stunden, Minuten und Sekunden. Um eine Einheit auszublenden, leeren Sie ihre Beschriftung im Abschnitt Timer — wenn Sie „Days Label“ leeren, verschwindet der ganze Tage-Kasten, nicht nur die Beschriftung. So zeigen Sie etwa nur Stunden und Minuten.

Sie können die Beschriftungen auch mit eigenen Worten versehen und den Separator Between Boxes festlegen (das Zeichen : ) oder ihn leeren, um gar kein Trennzeichen zu haben.

Den Timer gestalten

Jeder Teil des Timers hat eine eigene Stileinstellung: der Kasten hinter jeder Zahl, die Zahl selbst, die Beschriftung darunter, das Trennzeichen und der Container um das Ganze. Die Standardwerte ergeben weiße Kästen mit dunklen Zahlen und ein farbiges Trennzeichen.

Gut zu wissen: Der Kastenstil wird auch auf die Trennzeichen angewendet, nicht nur auf die Zahlenkästen; geben Sie den Kästen einen Hintergrund, erscheint er also auch hinter dem Trennzeichen, sofern der Stil des Trennzeichens ihn nicht überschreibt. Die mitgelieferten Standardwerte berücksichtigen das bereits.

Text rund um den Timer

Neben Eyebrow, Titel und Untertext können Sie eine kurze Zeile über und unter dem Timer einschalten — zum Beispiel „Angebot endet in“ darüber und „Plätze sind begrenzt“ darunter. Beide sind standardmäßig aus; schalten Sie sie im Abschnitt Timer ein und legen Sie Ihren eigenen Text fest. Sie wandern mit dem Timer, wo immer Sie ihn platzieren.

Wenn der Timer null erreicht

Im Abschnitt Timer können Sie eine Nachricht festlegen, die erscheint, wenn der Countdown abgelaufen ist. When Timer Ends steuert, was mit dem übrigen Inhalt passiert:

• Yes (Standard) — die Nachricht ersetzt alles, sodass der Besucher eine einzige klare Aussage sieht, etwa „Dieses Angebot ist abgelaufen“.
• No — nur der Timer selbst wird ersetzt; Überschrift und Buttons bleiben.

Wo sie erscheint

Card: inline platziert sie in der Seite dort, wo die Aktion platziert ist — kombinieren Sie das mit der Einstellung für den modalen Hintergrund der Aktion, wenn Sie ein klassisches Popup möchten. fullscreen macht den ganzen Bildschirm zum Hintergrund, in einer Volltonfarbe oder mit Ihrem eigenen Bild, und zentriert den Inhalt.

Bars: top oder bottom fixiert den Streifen an diesem Bildschirmrand, damit er beim Scrollen sichtbar bleibt; inline lässt ihn im Seitenfluss.

Aussehen

• Preset — Farben dark, light oder brand.
• Size — compact, default oder spacious.
• Corner Radius und Shadow — von eckig und flach bis rund und kräftig. Bei einer fixierten Leiste bleiben die Ecken eckig, damit sie bündig am Rand sitzt.
• Background Image — standardmäßig aus. Schalten Sie es ein, wählen Sie ein Bild und dunkeln Sie es mit Background Overlay ab, damit Ihr Text lesbar bleibt.
• Decorative Shapes — optionale dezente Kreise, Ecken oder Ringe im Hintergrund. Sie übernehmen automatisch die Preset-Farbe.
• Logo — standardmäßig aus; schalten Sie es ein und wählen Sie Ihr Bild.
• Button Animation — ein sanftes Pulsieren, ein weiches Leuchten oder nichts.
• Timer Urgency Pulse — ein dezentes wiederkehrendes Pulsieren am Timer selbst.

Buttons

Alle drei haben einen Haupt-Call-to-Action mit eigenem Text und Link sowie einen optionalen Button „No thanks“, der sie einfach schließt.

Die Event Countdown Bar ergänzt neben dem Haupt-Button einen zweiten Link, standardmäßig als „Zum Kalender hinzufügen“ eingerichtet. Verweisen Sie ihn auf Ihren Google-Kalender-Link, Outlook-Link oder eine .ics -Datei. Außerdem können Sie in jeden Button ein Symbol setzen und neben dem Text ein Event-Symbol — einen Kalender, eine Videokamera, ein Mikrofon, ein Ticket usw.

Schließen — und ein wichtiger Hinweis zum Testen

Der Abschnitt Close steuert den X-Button: ob er erscheint, wie er aussieht und ob er immer oder nur beim Hovern sichtbar ist. Der Schließen-Button verhindert außerdem, dass die Aktion eine Zeit lang erneut angezeigt wird.

Bitte lesen Sie das, bevor Sie testen: Wurde die Aktion 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.
• Ist sie bereits nicht mehr zu sehen und Sie müssen sie erneut sehen, löschen Sie Cookies und Websitedaten für Ihre Website oder öffnen Sie sie in einem Inkognito- bzw. privaten Fenster.
• Wie viele Sitzungen sie ausgeblendet bleibt, wird an der Aktion selbst unter Placement / Trigger festgelegt, nicht in der Vorlage.

Ein Hinweis zur Vorschau im Editor

Zwei Dinge passieren nur auf Ihrer echten Website, nicht im Editor-Bereich:

• Der Timer zählt nur in der Live-Vorschau und auf Ihrer Website. Im Editor wird er als statische Kästen dargestellt.
• Vollbild und fixierte Leisten schweben im Editor nicht. Sie werden bewusst als gewöhnlicher Block dargestellt, damit sie die Bearbeitungsleiste nicht verdecken. Nutzen Sie die Live-Vorschau, um sie richtig zu sehen.

Das ist erwartetes Verhalten, kein Fehler.

Technische Hinweise

• Wer den Countdown wo und wie oft sieht, wird an der Aktion festgelegt, nicht in der Vorlage. Die Vorlage steuert nur ihr Aussehen und Verhalten.
• Alle drei Vorlagen nutzen die integrierte Countdown-Engine von Personyze; Zeitzonen und die Cookie-Logik pro Besucher werden also für Sie erledigt.
• Der Timer bleibt in jeder Größe einzeilig, auch auf Smartphones, wo die Kästen schrumpfen, statt umzubrechen.
• Auf schmalen Bildschirmen stapeln die Leisten ihren Inhalt automatisch in einer Spalte.

Weiterführende Lektüre

• Website-Popup-Vorlagen — alle 16 Vorlagen und wie Sie das richtige Format wählen.
• Gamification-Marketing — die Mechanik hinter interaktiven Vorlagen und wo sie passen.