Der Countdown-Block ermöglicht es Ihnen, animierte Countdown-Timer zu Ihren Seiten hinzuzufügen, ohne benutzerdefinierten Code oder Plugins zu benötigen. Egal, ob Sie Vorfreude auf eine Produkteinführung, einen Flash-Sale oder eine Live-Veranstaltung aufbauen, der Countdown-Block erzeugt ein überzeugendes Gefühl der Dringlichkeit, das Besucher zum Handeln motiviert.
Sie können zwischen einem Countdown bis zu einem festen Datum wählen, der zu einem bestimmten Zeitpunkt endet, oder einem Evergreen-Timer, der für jeden Besucher zurückgesetzt wird – und so ein personalisiertes, immer aktives Dringlichkeitsgefühl vermittelt, egal wann jemand auf Ihrer Seite landet.
Hinzufügen des Countdown-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Countdown-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Countdown-Block in den gewünschten Bereich Ihrer Seite.
Ziehen Sie den Countdown-Block aus dem Blöcke-Panel und legen Sie ihn in den gewünschten Seitenbereich.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Countdown-Block, um seine Einstellungen zu öffnen. Wählen Sie im Tab Inhalt Ihren Timer-Typ und konfigurieren Sie sein Verhalten und seine Beschriftungen.
Timer-Typ:
- Datum/Uhrzeit-Countdown: Zählt bis zu einem festen Datum und einer festen Uhrzeit herunter. Ideal für Produkteinführungen, Flash-Sales oder Veranstaltungen mit einem bestimmten Enddatum – alle Besucher sehen denselben Timer, unabhängig davon, wann sie ankommen.
- Besucher-Timer (Evergreen): Zählt von einer festgelegten Dauer herunter, die für jeden neuen Besucher zurückgesetzt wird. Verwendet Cookies, um die Konsistenz über Seitenaktualisierungen hinweg aufrechtzuerhalten, sodass sich jeder Besucher fühlt, als wäre das Angebot persönlich zeitlich begrenzt.
Der Datum/Uhrzeit-Countdown ermöglicht es Ihnen, ein bestimmtes Enddatum und eine bestimmte Uhrzeit für Ihren Timer festzulegen.
Der Besucher-Timer (Evergreen) setzt die Countdown-Dauer für jeden neuen Besucher mithilfe von Cookies zurück.
Timer-Einstellungen:
- Enddatum & Uhrzeit: (Nur Datum/Uhrzeit) Legen Sie das genaue Datum und die genaue Uhrzeit fest, zu der der Countdown abläuft.
- Zeitzone: (Nur Datum/Uhrzeit) Wählen Sie die Zeitzone für die Endzeit, um die Genauigkeit für Ihre Zielgruppe zu gewährleisten.
- Stunden / Minuten / Sekunden: (Nur Evergreen) Legen Sie die Countdown-Dauer fest, die jeder Besucher sieht, wenn er zum ersten Mal ankommt.
- Größe: Legen Sie die Gesamtgröße des Countdown-Timers fest – Winzig, Klein, Mittel oder Groß.
Aktion beim Ablauf:
- Nachricht anzeigen: Zeigen Sie eine benutzerdefinierte Nachricht an, sobald der Timer Null erreicht hat, z. B. eine Benachrichtigung über abgelaufenes Angebot oder eine Dankesnachricht.
- Weiterleiten: Leiten Sie Besucher automatisch zu einer anderen Seite weiter, wenn der Countdown endet, z. B. zu einer Checkout-Seite oder einer Landingpage nach dem Verkauf.
- Neustart: (Nur Evergreen) Starten Sie den Timer von vorne, sobald er Null erreicht hat.
Wählen Sie aus, was passiert, wenn der Timer Null erreicht – zeigen Sie eine benutzerdefinierte Nachricht an, leiten Sie Besucher zu einer anderen URL weiter oder starten Sie den Timer neu.
Beschriftungen anpassen:
- Tage-Beschriftung: Passen Sie den Text an, der unter der Einheit Tage angezeigt wird (Standard: „Tage“).
- Stundenbeschriftung: Passen Sie den Text an, der unter der Einheit „Stunden“ angezeigt wird (Standard: „Stunden“)
- Minutenbeschriftung: Passen Sie den Text an, der unter der Einheit „Minuten“ angezeigt wird (Standard: „Minuten“)
- Sekundenbeschriftung: Passen Sie den Text an, der unter der Einheit „Sekunden“ angezeigt wird (Standard: „Sekunden“)
Schritt 3: Vorlagenstil auswählen
Im Tab Vorlagen können Sie aus vordefinierten Countdown-Stilen auswählen, um das Gesamterscheinungsbild Ihres Timers schnell zu ändern, ohne einzelne Einstellungen anzupassen.
- Vordefinierte Vorlagen: Wählen Sie aus einer Vielzahl fertiger Designs mit jeweils einzigartigen Farbschemata, Box-Stilen und Layouts. Klicken Sie auf eine beliebige Vorlage, um sie sofort auf Ihren Countdown-Block anzuwenden
Durchsuchen und wenden Sie vordefinierte Countdown-Stile aus dem Tab „Vorlagen“ an.
Schritt 4: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild und das Layout Ihres Countdown-Blocks vollständig anpassen.
Stile:
- Typografie: Klicken Sie auf Bearbeiten, um das vollständige Typografie-Panel zu öffnen. Steuern Sie Schriftfamilie, Größe (Desktop, Tablet und Mobilgerät), Schriftstärke, Kursivschrift, Unterstreichung, Groß-/Kleinschreibung, Zeilenhöhe und Buchstabenabstand für den Countdown-Text
- Hervorhebungsfarbe: Legen Sie die Hintergrundfarbe der einzelnen Zeiteinheiten-Boxen fest
- Beschriftungsfarbe: Legen Sie die Farbe der Beschriftungen Tage, Stunden, Minuten und Sekunden unter jeder Zahl fest
- Abstand dazwischen: Steuern Sie den Abstand zwischen jeder Zeiteinheiten-Box mit einem Schieberegler
- Abgerundete Ecken: Runden Sie die Ecken der Zeiteinheiten-Boxen mit einem Schieberegler ab
- Schatten: Fügen Sie den Countdown-Boxen einen Schatten hinzu. Wählen Sie aus voreingestellten Größen: Keine, Haarlin, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Benutzerdefiniert
Abstand:
- Seitenabstand (Außen): Steuern Sie den äußeren Abstand um Ihren Countdown-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Timer und den umgebenden Elementen erscheint
- Seitenabstand (Innen): Passen Sie den inneren Abstand innerhalb Ihres Countdown-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Timer und den Blockrändern
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Countdown-Block an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Countdown-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-timer|true)
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Countdown-Block auf Desktop-Bildschirmen aus
- Auf Tablet ausblenden: Blenden Sie den Countdown-Block auf Tablet-Geräten aus
- Auf Mobilgeräten ausblenden: Blenden Sie den Countdown-Block auf Mobilgeräten aus
Animationseffekte:
- Eingangs-Animation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Countdown-Block ins Sichtfeld gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Eine Eingangs-Animation lenkt die Aufmerksamkeit sofort auf Ihren Timer, sobald Besucher ihn sehen
Verwenden Sie die Registerkarte "Erweitert", um Stile, Abstände, Attribute, Gerätesichtbarkeit und Eingangsanimationen für Ihren Countdown-Block zu steuern.
Schritt 5: Änderungen speichern
Sobald Sie die Konfiguration des Countdown-Blocks abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Countdown-Block zu Ihrer Seite hinzugefügt! Countdown-Timer sind eines der effektivsten Werkzeuge zur Steigerung der Konversionen – sei es bei der Bewerbung eines zeitlich begrenzten Angebots, einer Produkteinführung oder einer bevorstehenden Veranstaltung. Experimentieren Sie mit Timer-Typen, Vorlagen und Ablaufaktionen, um ein Erlebnis zu schaffen, das die Besucher fesselt und zum Handeln motiviert.