Mit der Sektion Countdown Timer ergänzt du zeitlich begrenzte Elemente auf deiner Seite - etwa einen Countdown bis zum Ende einer Aktion oder bis zum Start eines Events. Ein Timer erzeugt Dringlichkeit und bringt deine Besucher wirksam zum Handeln.
Die wichtigsten Funktionen
- Countdown in Echtzeit mit weichen Animationen
- Beschriftungen, Farben und Position frei anpassbar
- Feste Positionierung mit optionalem Close-Button
- Primärer und sekundärer CTA-Button integrierbar
- Vollständig responsives Design für jedes Gerät
- Nullen werden in der Textvariante automatisch ausgeblendet
Timer hinzufügen
So legst du in Easypage einen Timer an:
- Öffne dein Projekt in Easypage unter Websites → Landing Page.
- Klicke auf + New Section.
- Wähle aus der Liste Countdown Timers.
- Wähle eine der Vorlagen und zieh sie auf die Arbeitsfläche.
Der Timer erscheint auf deiner Seite, und du kannst ihn sofort anpassen.
Verfügbare Timer-Varianten
Horizontale Banner
- Digital Flip - animierte Karten mit dynamischem Umklapp-Effekt. Jeder Wechsel bei Sekunden, Minuten oder Stunden ist weich animiert und zieht Blicke auf sich. Dieser moderne, energiegeladene Stil passt gut zu kurzen, zeitlich begrenzten Aktionen.
- Circular Progress - runde Fortschrittsanzeigen, die den Zeitverlauf sichtbar machen. Jeder Kreis steht für eine Einheit (Tage, Stunden, Minuten, Sekunden) und füllt sich nach und nach mit Farbe. Ideal für elegante, reduzierte Seiten wie Produkt-Launches oder Event-Countdowns.
- Simple Display - ein klarer, gut lesbarer Textcountdown mit klassischen Ziffern. Ohne Animationen, dafür ohne Ablenkung vom eigentlichen Inhalt. Gute Wahl für textlastige Seiten oder Formulare.
- Text Inline - ein reduzierter Text-Timer, der Nullen automatisch ausblendet. Du platzierst ihn direkt in einem Satz (etwa “Das Angebot endet in 03:25:10”). Er fügt sich nahtlos in deinen Inhalt ein und hält das Layout aufgeräumt.
Vertikale Sektionen
- Simple Centered - zentriertes Layout mit rundem Timer. Titel, Timer, Beschreibung und Buttons stehen mittig, der Countdown wird damit zum zentralen Element. Ideal für “Coming soon”-Seiten, Produkt-Launches oder zeitlich begrenzte Angebote.
- Split with Media - geteiltes Layout aus Text (Tag, Titel, Beschreibung, Timer, Buttons) und Medien (Bild, Video oder iframe). Auf einer Seite stehen Timer und Text, auf der anderen das Visual. Gut geeignet für Werbe- und Verkaufskampagnen, in denen Bilder die Botschaft tragen.
- Split with Media Left - Variante mit Medien links und Inhalt rechts. So sehen deine Besucher zuerst Bild oder Video und lesen danach Text und CTA. Ideal für dynamische Landingpages und Marketing-Bereiche.
Die wichtigsten Einstellungen
Tab “Content”
- Countdown end time - wähle Datum und Uhrzeit, wann deine Aktion oder dein Event endet. Danach stoppt der Timer automatisch, und deine Besucher sehen die von dir gewählte Aktion (etwa Rücksetzung auf null oder eine eigene Meldung).
- When timer expires - lege fest, was nach dem Countdown passiert. Du kannst den Timer auf null stehen lassen oder eine eigene Meldung zeigen, etwa “Aktion beendet” oder “Sei bei der nächsten Runde dabei”.
- Title - eine optionale kurze Überschrift über oder neben dem Timer. Nutze sie für eine klare Aufforderung wie “Aktion endet in” oder “Zeit bis zum Launch”.
- Unit labels - trage eigene Bezeichnungen für Tage, Stunden, Minuten und Sekunden ein, passend zur Sprache und Tonalität deiner Seite.
Buttons
- Primary CTA button - der Hauptbutton, der zum Handeln auffordert, etwa “Jetzt kaufen”, “Anmelden” oder “Angebot ansehen”. Beschriftung, Farbe und Link kannst du anpassen.
- Secondary button - ein optionaler zweiter Button für unterstützende Aktionen wie “Mehr erfahren”.
- Entire banner as link - macht das gesamte Banner klickbar. Deine Besucher gelangen dann von jeder Stelle des Timers auf die gewünschte Seite, inklusive Hover-Effekt.
- Close button - ein kleines X, mit dem deine Besucher den Timer schließen. Besonders praktisch, wenn der Timer oben oder unten am Bildschirm fixiert ist.
Tab “Style”
- Colors - passe das Aussehen an deine Marke an. Du änderst Hintergrund, Text, Buttons, Karten und Rahmen.
- Layout and positioning - lege fest, wo und wie der Timer erscheint:
- Fixed position: Off / Top / Bottom - fixiere den Timer oben oder unten am Bildschirm.
- Width mode: Full width / Rounded container - entscheide, ob der Timer über die volle Breite läuft oder in einem abgerundeten Block sitzt.
Tipp: Kombiniere Timer mit CTA-Buttons, um die Aufmerksamkeit gezielt zu lenken - zum Beispiel: “Das Angebot endet in 2 Stunden - bestell jetzt!”