Bitdoze-Logo

Carrd-Countdown-Timer: 5 eigene Designs (Copy-Paste-Code)

Eigenen Countdown-Timer in Carrd einbauen mit 5 Copy-Paste-Designs in HTML/CSS: Karten-, Dark-, Flip-Clock- und Kreis-Styles. Pro-Standard-Embed, UTC-sichere Daten inklusive.

Dragos

Aktualisiert Veröffentlicht 45 Min. Lesezeit

Lila Countdown-Timer-Karte mit Tagen, Stunden, Minuten und Sekunden bis zum Launch

Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.

Carrd bringt ein eingebautes Timer-Element mit, das herunter- (oder hoch-)zählt, aber seine Styling-Optionen sind begrenzt. Wenn du einen Carrd-Countdown-Timer für einen Launch, einen Sale oder ein Event willst, der wie ein Teil deines Designs aussieht, führt der Weg über ein Embed-Element mit eigenem Code.

Ein Embed plus dem Copy-Paste-Code unten ergibt einen Timer, der zu deiner Marke passt und null externe Skripte lädt. Hier sind fünf eigenständige Designs: eine Gradient-Karte, eine minimale Dark-Leiste, kreisförmige Fortschrittsringe, eine Flip-Clock und eine Inline-Text-Version. Alles schlichtes HTML/CSS/JS, alles mobilfreundlich.

Vorab-Warnung, bevor du scrollst: Embeds erfordern Carrd Pro Standard (19 $/Jahr). Details im Abschnitt „Was du brauchst“ weiter unten.

Carrd.co

Ein paar Carrd-Anleitungen:

Die komplette Liste mit Carrd-Plugins, -Themes und -Anleitungen liegt auf meiner carrdme.com-Website. Wenn du lieber installierst statt Code einzufügen, hol dir dort mein Carrd-Tabs-Plugin oder mein Carrd-Akkordeon-Plugin.

Wann sich ein Countdown-Timer auf deiner Carrd-Seite lohnt

Countdown-Timer verdienen ihren Platz, wenn eine echte Deadline existiert:

  1. Produkt-Launches – Vorfreude vor dem Release aufbauen
  2. Sales und Promotions – ein zeitlich begrenztes Angebot mit hartem Ende (ein echtes Enddatum schlägt „nur für kurze Zeit“-Copy); kombiniere es mit einer Carrd-Preistabelle, damit der Rabatt sichtbar ist, während die Uhr läuft
  3. Event-Anmeldungen – Anmeldefristen
  4. Coming-soon-Seiten – Besuchern sagen, wann sie wiederkommen sollen
  5. Webinare und Live-Events – Countdown bis zur Startzeit

Eine tickende Uhr erzeugt eine Dringlichkeit, die statischer Text nicht erreicht. Sie stellt aber auch eine harte Anforderung: Bei einem Launch oder Sale muss der Timer für jeden Besucher zum selben Zeitpunkt null erreichen. An dem Detail scheitern viele – überspringe deshalb nicht den Zeitzonen-Abschnitt weiter unten.

Was du brauchst

Eine Voraussetzung entscheidet, ob irgendetwas in diesem Artikel funktioniert: Das Embed-Element ist ein kostenpflichtiges Feature. So stehen die Pläne (von carrd.com/pro, Stand Oktober 2026):

Plan Preis Seiten Embeds?
Free 0 $ 3 Nein
Pro Lite 9 $/Jahr 3 Nein
Pro Standard 19 $/Jahr 10 Ja – plus Forms, Widgets, Analytics (Carrds native, cookie-freie Analytics seit Okt. 2026, oder Drittanbieter wie Plausible / Umami), eigene Domains
Pro Plus 49 $/Jahr 25 Ja – plus Variables, Redirects, Framing (für Countdowns nicht nötig)

Brauchst du mehr Seiten? Jeder Tier hat Varianten mit mehr Sites (Pro Standard 25 für 39 $/Jahr bis zu 1000 Sites für 599 $/Jahr) – komplette Aufschlüsselung im Carrd-Review.

Pro Standard erforderlich

Free- und Pro-Lite-Accounts können gar keinen eigenen Code einfügen, also auch keine Countdowns. Bist du im Free-Plan, schaltet das Upgrade auf Carrd Pro Standard (19 $/Jahr) alles in diesem Artikel frei, plus Forms, Widgets und eigene Domains. Mein Carrd-Review (Preise und Pläne im Vergleich) bricht auf, was dich jeder Tier bringt.

Es gibt einen kostenlosen 7-Tage-Pro-Trial (keine Zahlung oder Kreditkarte nötig), und er deckt Forms, Widgets und das Verbinden einer eigenen Domain mit Carrd ab. Die Feature-Liste des Trials enthält aber nicht das Embed-Element, du kannst diese Snippets damit also nicht testen – siehe die Trial-FAQ unten.

Nichts weiter zu installieren. Jedes Snippet unten ist ein eigenständiger HTML/CSS/JS-Block.

  • Carrd-Account mit Pro Standard oder höher
  • Eine veröffentlichte (oder veröffentlichbare) Carrd-Seite – eine kostenlose yoursite.carrd.co-Subdomain reicht zum Testen
  • Dein Ziel-Datum und -Uhrzeit festgelegt, mit einer Zeitzonen-Entscheidung (unten behandelt)
  • Fünf Minuten

So fügst du einen eigenen Countdown-Timer in Carrd ein

Jedes Design in diesem Artikel läuft über dasselbe Element: das Embed. Der Ablauf ändert sich nie – Element hinzufügen, Type auf Code setzen, Snippet einfügen, veröffentlichen.

Schritt 1: Ein Embed-Element hinzufügen (Type: Code, Style: Inline)

Klicke im Builder auf den +-Button und füge ein Embed-Element hinzu, dann setze Type auf Code und Style auf Inline.

Füge dein HTML/CSS/JS in das Code-Feld ein. Inline rendert den Countdown genau dort, wo du das Element im Layout platziert hast. Die andere Option, Hidden, injiziert den Code in den Head, Body Top oder Body End der Seite – richtig für globale Skripte wie Analytics, falsch für einen sichtbaren Countdown. (Ältere Tutorials erwähnen einen „Above“-Style; diese Option existiert nicht mehr.)

Um das Embed später wiederzufinden oder zu bearbeiten, nutze das Elements-Panel: More Actions → Elements… listet jedes Element auf der Seite – und zeigt seit Oktober 2026 auch den Sichtbarkeitsstatus jedes Elements, inklusive vom Publishing ausgeschlossener oder per CSS versteckter Elemente. Praktisch, wenn ein Embed „verschwindet“: Prüfe erst das Panel, bevor du den Code verdächtigst.

Embeds sind im Builder unsichtbar

Carrds Doku sagt es unmissverständlich: Das Embed-Element gibt im Builder nichts aus. Eine leere Stelle, wo dein Countdown sein sollte, ist normal. Veröffentliche die Seite und er erscheint. Das ist der Fehlalarm Nummer eins bei eigenem Code in Carrd.

Code einfügenBuilder bleibt leerVeröffentlichendann hart neu ladenCountdown liveSekunden ticken
Embeds rendern nichts im Builder. Veröffentliche, um jede Änderung zu prüfen.

Dann lauf jedes Mal denselben Vier-Schritte-Check:

  • Seite veröffentlichen
  • Live-Seite hart neu laden (Ctrl+Shift+R / Cmd+Shift+R)
  • DevTools-Konsole öffnen – sie sollte sauber sein, keine roten Fehler
  • Den Sekunden ein paar Schläge beim Ticken zusehen

Um eine Änderung rückgängig zu machen, lösche das Embed-Element und veröffentliche erneut. Nichts anderes auf der Seite wird angefasst.

Schritt 2: Countdown-Style auswählen

Wähle eines der fünf Designs unten und füge es in das Code-Feld des Embeds ein. Die einzige Änderung, die du machen musst, ist das Zieldatum oben im Skript, behandelt in Ziel-Datum und Uhrzeit festlegen.

Zwei Timer auf einer Seite?

Jedes Snippet nutzt eigene IDs (countdown1…countdown5), verschiedene Styles koexistieren also. Zwei Kopien desselben Styles tun es nicht: Doppelte IDs bedeuten, dass nur der erste Timer tickt. Benenne jede id in der zweiten Kopie um (days1 → days6, countdown1 → countdown6, dayCircle → dayCircle2, day1Card → day1Card2) und die passenden getElementById-Strings in ihrem Skript – dann funktioniert es.

Option 1: Moderner Karten-Countdown-Timer

Saubere Gradient-Karten mit dem Label unter jeder Zahl. Der Hover-Lift ist dezent, und die Karten umbrechen auf Mobile.

html
<style>
  .countdown-modern {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 20px 0;
  }

  .countdown-item {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 25px 20px;
    min-width: 100px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    transition: transform 0.3s;
  }

  .countdown-item:hover {
    transform: translateY(-5px);
  }

  .countdown-value {
    font-size: 48px;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
  }

  .countdown-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  @media (max-width: 500px) {
    .countdown-item {
      min-width: 70px;
      padding: 18px 15px;
    }
    .countdown-value {
      font-size: 32px;
    }
    .countdown-label {
      font-size: 11px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .countdown-item {
      transition: none;
    }
    .countdown-item:hover {
      transform: none;
    }
  }
</style>

<div class="countdown-modern" id="countdown1" role="timer">
  <div class="countdown-item">
    <div class="countdown-value" id="days1">00</div>
    <div class="countdown-label">Days</div>
  </div>
  <div class="countdown-item">
    <div class="countdown-value" id="hours1">00</div>
    <div class="countdown-label">Hours</div>
  </div>
  <div class="countdown-item">
    <div class="countdown-value" id="minutes1">00</div>
    <div class="countdown-label">Minutes</div>
  </div>
  <div class="countdown-item">
    <div class="countdown-value" id="seconds1">00</div>
    <div class="countdown-label">Seconds</div>
  </div>
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown1').innerHTML = '<p style="font-size: 24px; font-weight: 700; color: #667eea;">Event has started!</p>';
      return;
    }

    var days = Math.floor(distance / 86400000);
    var hours = Math.floor((distance % 86400000) / 3600000);
    var minutes = Math.floor((distance % 3600000) / 60000);
    var seconds = Math.floor((distance % 60000) / 1000);

    document.getElementById('days1').innerHTML = (days < 10 ? '0' : '') + days;
    document.getElementById('hours1').innerHTML = (hours < 10 ? '0' : '') + hours;
    document.getElementById('minutes1').innerHTML = (minutes < 10 ? '0' : '') + minutes;
    document.getElementById('seconds1').innerHTML = (seconds < 10 ? '0' : '') + seconds;
  }

  var iv = setInterval(updateCountdown, 1000);
  updateCountdown();
})();
</script>

Anpassen: Ändere die Zeile Date.UTC(2027, 2, 1, 9, 0, 0). Es ist die eine Zeile, die du bearbeitest. Monate sind 0-indiziert (Januar = 0, März = 2). Veröffentliche und sieh ihm beim Ticken zu; zeigt er beim Laden „Event has started!“, liegt dein Zieldatum in der Vergangenheit.

Option 2: Minimaler Dark-Countdown-Timer

Eine dunkle Leiste mit Doppelpunkt-Trennern, für Seiten, die ohnehin eine dunkle Palette fahren.

html
<style>
  .countdown-dark {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #1a1a2e;
    padding: 30px 40px;
    border-radius: 12px;
    font-family: 'Monaco', 'Consolas', monospace;
    max-width: 600px;
    margin: 20px auto;
  }

  .cd-block {
    text-align: center;
  }

  .cd-number {
    font-size: 56px;
    font-weight: 600;
    color: #eee;
    line-height: 1;
  }

  .cd-text {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    margin-top: 10px;
    letter-spacing: 1px;
  }

  .cd-separator {
    font-size: 40px;
    color: #4a4a6a;
    padding: 0 5px;
    margin-top: -20px;
  }

  @media (max-width: 500px) {
    .countdown-dark {
      padding: 20px;
      gap: 8px;
    }
    .cd-number {
      font-size: 36px;
    }
    .cd-separator {
      font-size: 28px;
    }
  }
</style>

<div class="countdown-dark" id="countdown2" role="timer">
  <div class="cd-block">
    <div class="cd-number" id="days2">00</div>
    <div class="cd-text">Days</div>
  </div>
  <span class="cd-separator">:</span>
  <div class="cd-block">
    <div class="cd-number" id="hours2">00</div>
    <div class="cd-text">Hours</div>
  </div>
  <span class="cd-separator">:</span>
  <div class="cd-block">
    <div class="cd-number" id="minutes2">00</div>
    <div class="cd-text">Mins</div>
  </div>
  <span class="cd-separator">:</span>
  <div class="cd-block">
    <div class="cd-number" id="seconds2">00</div>
    <div class="cd-text">Secs</div>
  </div>
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown2').innerHTML = '<p style="color: #eee; font-size: 24px;">Time is up!</p>';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById('days2').innerHTML = (days < 10 ? '0' : '') + days;
    document.getElementById('hours2').innerHTML = (hours < 10 ? '0' : '') + hours;
    document.getElementById('minutes2').innerHTML = (minutes < 10 ? '0' : '') + minutes;
    document.getElementById('seconds2').innerHTML = (seconds < 10 ? '0' : '') + seconds;
  }

  var iv = setInterval(updateCountdown, 1000);
  updateCountdown();
})();
</script>

Ein dunkler Countdown sitzt natürlich auf einer dunklen Sektion. Soll die Sektion dem System-Theme des Besuchers folgen, kombiniere das mit dem Carrd-Dark-Mode-Umschalter, damit der Timer zu der gerade aktiven Palette passt.

Anpassen: dieselbe Date.UTC-Zeile wie Option 1. Veröffentlichen, hart neu laden und den Kontrast auf einem Handy-Display prüfen.

Option 3: Countdown mit kreisförmigen Fortschrittsringen

SVG-Fortschrittsringe, die leer laufen, während die Zeit ausläuft. Jeder Kreis hat r=42, sein Umfang ist also 2πr ≈ 264 – daher kommt der Wert stroke-dasharray="264". Änderst du r, musst du ihn neu berechnen.

html
<style>
  .countdown-circles {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .circle-item {
    position: relative;
    width: 100px;
    height: 100px;
  }

  .circle-item svg {
    transform: rotate(-90deg);
  }

  .circle-bg {
    fill: none;
    stroke: #e6e6e6;
    stroke-width: 8;
  }

  .circle-progress {
    fill: none;
    stroke: #10b981;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s;
  }

  .circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .circle-value {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
  }

  .circle-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
  }

  @media (max-width: 450px) {
    .circle-item {
      width: 75px;
      height: 75px;
    }
    .circle-value {
      font-size: 22px;
    }
    .circle-label {
      font-size: 9px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .circle-progress {
      transition: none;
    }
  }
</style>

<div class="countdown-circles" id="countdown3" role="timer">
  <!-- Ring math: 2πr ≈ 264 for r=42. Recompute stroke-dasharray if you change r. -->
  <div class="circle-item">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle class="circle-bg" cx="50" cy="50" r="42"/>
      <circle class="circle-progress" id="dayCircle" cx="50" cy="50" r="42" stroke-dasharray="264" stroke-dashoffset="0"/>
    </svg>
    <div class="circle-content">
      <div class="circle-value" id="days3">00</div>
      <div class="circle-label">Days</div>
    </div>
  </div>

  <div class="circle-item">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle class="circle-bg" cx="50" cy="50" r="42"/>
      <circle class="circle-progress" id="hourCircle" cx="50" cy="50" r="42" stroke-dasharray="264" stroke-dashoffset="0"/>
    </svg>
    <div class="circle-content">
      <div class="circle-value" id="hours3">00</div>
      <div class="circle-label">Hours</div>
    </div>
  </div>

  <div class="circle-item">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle class="circle-bg" cx="50" cy="50" r="42"/>
      <circle class="circle-progress" id="minCircle" cx="50" cy="50" r="42" stroke-dasharray="264" stroke-dashoffset="0"/>
    </svg>
    <div class="circle-content">
      <div class="circle-value" id="minutes3">00</div>
      <div class="circle-label">Mins</div>
    </div>
  </div>

  <div class="circle-item">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle class="circle-bg" cx="50" cy="50" r="42"/>
      <circle class="circle-progress" id="secCircle" cx="50" cy="50" r="42" stroke-dasharray="264" stroke-dashoffset="0"/>
    </svg>
    <div class="circle-content">
      <div class="circle-value" id="seconds3">00</div>
      <div class="circle-label">Secs</div>
    </div>
  </div>
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);
  var circumference = 264; // 2πr for r=42

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown3').innerHTML = '<p style="font-size: 24px; color: #1f2937;">Event Started!</p>';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById('days3').innerHTML = (days < 10 ? '0' : '') + days;
    document.getElementById('hours3').innerHTML = (hours < 10 ? '0' : '') + hours;
    document.getElementById('minutes3').innerHTML = (minutes < 10 ? '0' : '') + minutes;
    document.getElementById('seconds3').innerHTML = (seconds < 10 ? '0' : '') + seconds;

    document.getElementById('dayCircle').style.strokeDashoffset = circumference - (circumference * Math.min(days, 365) / 365);
    document.getElementById('hourCircle').style.strokeDashoffset = circumference - (circumference * hours / 24);
    document.getElementById('minCircle').style.strokeDashoffset = circumference - (circumference * minutes / 60);
    document.getElementById('secCircle').style.strokeDashoffset = circumference - (circumference * seconds / 60);
  }

  var iv = setInterval(updateCountdown, 1000);
  updateCountdown();
})();
</script>

Anpassen: dieselbe Date.UTC-Zeile. Veröffentlichen und prüfen, dass die Ringe animieren und sich dann auf den richtigen Bruchteilen einpendeln.

Option 4: Flip-Clock-Countdown-Animation

Klassische Split-Flap-Karten, die kippen, wenn eine Ziffer wechselt. Optisch die schwerste Option – und die, an die sich Leute erinnern.

Für Ziele über 100 Tage hinaus

Das Tage-Feld hat nur zwei Ziffern-Karten. Jenseits von 99 Tagen gibt pad2(days) drei Zeichen zurück, und dStr[1] zeigt die falsche Ziffer. Das Snippet unten klemmt es mit Math.min(days, 99). Brauchst du echte dreistellige Anzeige? Füge ein drittes day3Card-Element hinzu und übergib dStr[2] an es.

html
<style>
  .countdown-flip {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .flip-section {
    text-align: center;
  }

  .flip-card-container {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
  }

  .flip-card {
    position: relative;
    width: 50px;
    height: 70px;
    perspective: 400px;
  }

  .flip-card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #2d2d44 50%, #252538 50%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }

  .flip-card-inner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,0,0,0.3);
  }

  .flip-label {
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  @keyframes flipAnim {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(-10deg); }
    100% { transform: rotateX(0deg); }
  }

  .flip-card.flip .flip-card-inner {
    animation: flipAnim 0.6s ease-in-out;
  }

  @media (max-width: 500px) {
    .countdown-flip {
      gap: 15px;
    }
    .flip-card {
      width: 38px;
      height: 55px;
    }
    .flip-card-inner {
      font-size: 28px;
    }
    .flip-label {
      font-size: 10px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .flip-card.flip .flip-card-inner {
      animation: none;
    }
  }
</style>

<div class="countdown-flip" id="countdown4" role="timer">
  <div class="flip-section">
    <div class="flip-card-container">
      <div class="flip-card" id="day1Card"><div class="flip-card-inner">0</div></div>
      <div class="flip-card" id="day2Card"><div class="flip-card-inner">0</div></div>
    </div>
    <div class="flip-label">Days</div>
  </div>

  <div class="flip-section">
    <div class="flip-card-container">
      <div class="flip-card" id="hour1Card"><div class="flip-card-inner">0</div></div>
      <div class="flip-card" id="hour2Card"><div class="flip-card-inner">0</div></div>
    </div>
    <div class="flip-label">Hours</div>
  </div>

  <div class="flip-section">
    <div class="flip-card-container">
      <div class="flip-card" id="min1Card"><div class="flip-card-inner">0</div></div>
      <div class="flip-card" id="min2Card"><div class="flip-card-inner">0</div></div>
    </div>
    <div class="flip-label">Minutes</div>
  </div>

  <div class="flip-section">
    <div class="flip-card-container">
      <div class="flip-card" id="sec1Card"><div class="flip-card-inner">0</div></div>
      <div class="flip-card" id="sec2Card"><div class="flip-card-inner">0</div></div>
    </div>
    <div class="flip-label">Seconds</div>
  </div>
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

  function updateFlipCard(cardId, value) {
    var card = document.getElementById(cardId);
    var inner = card.querySelector('.flip-card-inner');
    if (inner.innerHTML !== value) {
      card.classList.add('flip');
      inner.innerHTML = value;
      setTimeout(function() { card.classList.remove('flip'); }, 600);
    }
  }

  function pad2(num) {
    return (num < 10 ? '0' : '') + num;
  }

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown4').innerHTML = '<p style="font-size: 24px;">Launch Time!</p>';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    var dStr = pad2(Math.min(days, 99)); // two cards only - clamp to avoid 3-digit overflow
    var hStr = pad2(hours);
    var mStr = pad2(minutes);
    var sStr = pad2(seconds);

    updateFlipCard('day1Card', dStr[0]);
    updateFlipCard('day2Card', dStr[1]);
    updateFlipCard('hour1Card', hStr[0]);
    updateFlipCard('hour2Card', hStr[1]);
    updateFlipCard('min1Card', mStr[0]);
    updateFlipCard('min2Card', mStr[1]);
    updateFlipCard('sec1Card', sStr[0]);
    updateFlipCard('sec2Card', sStr[1]);
  }

  var iv = setInterval(updateCountdown, 1000);
  updateCountdown();
})();
</script>

Anpassen: dieselbe Date.UTC-Zeile. Veröffentlichen, dann mit einem Datum über 100 Tage in der Zukunft testen und bestätigen, dass die Karten „99“ zeigen und sauber kippen.

Option 5: Inline-Text-Countdown

Die leichteste Option. Keine Boxen, keine Animation – nur ein Satz, der sich aktualisiert, was ihn leicht zwischen eine Headline und einen Copy-Absatz setzen lässt. Das ist der, der in einen Sticky-Header passt, ohne das Layout zu brechen.

html
<style>
  .countdown-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 24px;
    color: #374151;
    text-align: center;
    padding: 20px;
  }

  .countdown-text .highlight {
    color: #dc2626;
    font-weight: 700;
  }

  @media (max-width: 500px) {
    .countdown-text {
      font-size: 18px;
    }
  }
</style>

<div class="countdown-text" id="countdown5" role="timer">
  Sale ends in <span class="highlight" id="textDays">0</span> days,
  <span class="highlight" id="textHours">0</span> hours,
  <span class="highlight" id="textMins">0</span> minutes
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown5').innerHTML = '<span class="highlight">Sale has ended!</span>';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

    document.getElementById('textDays').innerHTML = days;
    document.getElementById('textHours').innerHTML = hours;
    document.getElementById('textMins').innerHTML = minutes;
  }

  // no seconds shown, so a 60-second tick is enough
  var iv = setInterval(updateCountdown, 60000);
  updateCountdown();
})();
</script>

Dieser tickt einmal pro Minute statt jede Sekunde, da er keine Sekunden anzeigt. Er passt gut zu einer Preistabelle, wenn die Deadline der Grund ist, jetzt zu kaufen.

Anpassen: dieselbe Date.UTC-Zeile. Veröffentlichen und prüfen, dass der Satz auf Mobile sauber umbricht.

Ziel-Datum und Uhrzeit festlegen (zeitzonensicher)

Jedes Snippet setzt seine Deadline in einer Zeile:

javascript
var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

Das ist die Zeile, die du änderst. Date.UTC(year, month, day, hour, minute, second) nimmt dieselben Argumente wie new Date(...), und Monate sind weiterhin 0-indiziert: Januar = 0, März = 2, Dezember = 11.

Beispiele in der Zukunft:

    1. März 2027 um 09:00 UTC: Date.UTC(2027, 2, 1, 9, 0, 0)
    1. Dezember 2027 um 09:00 UTC: Date.UTC(2027, 11, 25, 9, 0, 0)
    1. Juli 2027 um 18:00 UTC: Date.UTC(2027, 6, 4, 18, 0, 0)

Eine Gewohnheit, die dir ein Republish erspart: Wähl zum Testen ein Datum bequem in der Zukunft. Ein Countdown, dessen Ziel schon verstrichen ist, rendert beim Laden seine Ablauf-Nachricht – das wirkt kaputt, obwohl der Code in Ordnung ist. Wenn das echte Datum steht, roll das Jahr weiter, statt ein altes Datum stehen zu lassen.

Besucher-lokale vs. UTC-Deadlines

Date.UTC(...) und new Date(y, m, d) sehen austauschbar aus, sind es aber nicht:

  • new Date(2027, 2, 1) zählt bis Mitternacht in der Zeitzone jedes einzelnen Besuchers. Ein Besucher in London erreicht null fünf Stunden vor einem Besucher in New York. Für eine globale Deadline (ein Launch, ein Sale-Ende, ein Webinar-Start) ist das ein echter Bug: Manche Besucher sehen „Sale has ended!“, während andere noch Stunden Rest sehen.
  • Date.UTC(2027, 2, 1, 9, 0, 0) ist ein fester Zeitpunkt. Der Timer jedes Besuchers erreicht null im selben Moment; jeder Browser rendert die Restzeit nur gegen seine eigene Uhr.

Faustregel: globale Deadline → Date.UTC. Lokales Event (Einlass, Promo im Laden) → besucher-lokales new Date(y, m, d) ist okay.

Date.UTC

javascript
var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

ISO-String

javascript
var targetDate = new Date("2027-03-01T09:00:00Z").getTime();

Beide sind derselbe Zeitpunkt: 1. März 2027 um 09:00 UTC. Nimm die Syntax, die du in sechs Monaten lieber lesen willst.

Der Monat ist 0-indiziert

Sowohl in new Date(y, m, d) als auch in Date.UTC(y, m, d, ...) ist Januar Monat 0 und Dezember Monat 11. Es erwischt jeden einmal. Ist dein Countdown um genau einen Monat daneben, ist das der Grund.

Date.UTC()eine DeadlineNull: derselbe MomentLondon und New York erreichen ihn gemeinsamnew Date()lokale MitternachtLondon 00:00New York 00:00zwei verschiedene Momente, 5 Stunden auseinander
new Date() zählt bis zur lokalen Mitternacht jedes Besuchers. Date.UTC() ist ein Moment für alle.

Countdown-Farben und -Fonts anpassen

Jeder Style nutzt schlichte CSS-Farben, deine Marke zu treffen ist also eine Hex-Änderung:

Gradient-Hintergründe nehmen zwei Hex-Farben:

css
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Change the hex colors to match your brand */

Vollfarben sind noch simpler:

css
background: #1a1a2e;  /* Dark background */
color: #10b981;       /* Accent color */

Die Kreisringe nehmen zwei Stroke-Farben:

css
stroke: #10b981;  /* Progress color */
stroke: #e6e6e6;  /* Background circle */

Die Snippets nutzen alle System-Font-Stacks, sie funktionieren also überall ohne Ladekosten. Willst du deinen Marken-Font: Ab Pro Standard gibt es Local Fonts – Carrd hat im August 2026 sechs weitere hinzugefügt (Geist Pixel, Smooch Sans, Tangerine und ein paar andere). Lade den Font auf der Seite und überschreibe dann im <style>-Block des Embeds:

css
.countdown-value { font-family: 'Smooch Sans', sans-serif; }

Bleib barrierefrei

Die animierten Styles in diesem Artikel kommen mit einem prefers-reduced-motion-Guard, und jeder Container trägt role="timer". Wenn du den Code für eine eigene Variante adaptierst, behalte diesen Block:

css
@media (prefers-reduced-motion: reduce) {
  .countdown-item:hover { transform: none; }
  .flip-card.flip .flip-card-inner { animation: none; }
  .circle-progress { transition: none; }
}

Überspringe aria-live bei einem Timer im Sekundentakt. Eine Live-Region würde Screenreadern jeden Tick vorlesen.

Dieselbe Embed-Technik deckt auch andere Injektionen ab – ein Cookie-Hinweis funktioniert exakt genauso.

Was passiert, wenn der Countdown endet

Jedes Snippet tauscht den Timer bei null gegen eine Nachricht und stoppt sein eigenes Intervall, es tickt also nicht unsichtbar ewig weiter. Zwei Muster decken die meisten Fälle ab:

Nachricht zeigen

javascript
if (distance < 0) {
  clearInterval(iv);
  document.getElementById('countdown1').innerHTML = '<p>We are live!</p>';
  return;
}

Redirect bei Ablauf

javascript
if (distance < 0) {
  clearInterval(iv);
  window.location.href = 'https://yoursite.com/launch';
  return;
}

Halte die Uhr an

setInterval feuert nach dem Ablauf weiter, wenn du es nicht leerst. Der clearInterval(iv)-Aufruf in diesen Snippets fährt den Timer in dem Moment herunter, in dem Nachricht oder Redirect laufen. Ohne ihn tickt das Intervall weiter und tut nichts.

Wenn die Uhr null erreicht, ist der Tausch der CTA gegen ein Popup-Modal, das die Warteliste einsammelt, der nächste Schritt.

Richte den Redirect auf eine Seite deiner eigenen Custom Domain, damit die URL ein Redesign überlebt. Pro Plus (49 $/Jahr) bringt außerdem native Redirects und eine Framing-Option unter Publish → Settings, aber ein dreizeiliger JavaScript-Redirect im Embed reicht für die meisten Countdowns.

Ein Security-Hinweis, falls du stattdessen einen iframe-basierten Timer abwägst: Veröffentlichte Carrd-Seiten senden content-security-policy: frame-ancestors https://carrd.com und x-frame-options: deny. Das beschränkt nur, wer deine Carrd-Seite iframen darf. Inline-Skripte wie diese Snippets laufen problemlos, ebenso Drittanbieter-Widget-Skripte.

Carrd.co testen

Eigener Embed vs. Countdown-Widgets von Drittanbietern

Dienste wie der Elfsight Countdown Timer lassen sich in dasselbe Embed-Element einfügen, das du gerade genutzt hast, und sie sind echte Produkte mit visuellen Editoren, Count-up-Modus und verzögerten Starts. Der Haken sind die Kosten. Stand Oktober 2026 fährt Elfsight vier Tiers: Lite 0 $, Basic 5 $/Monat, Pro 10 $/Monat, Premium 20 $/Monat – pro Widget, also 60–240 $/Jahr, sobald du den Free-Tier verlässt. Prüfe die aktuellen Preise, bevor du budgetierst; Widget-Preise ändern sich oft, und die Abrechnungsbasis geht aus ihrer Website nicht klar hervor.

Eigener Embed (dieser Artikel) Drittanbieter-Widget
Jährliche Kosten 0 $ extra (Pro Standard ist ohnehin erforderlich) 5–20 $/Monat pro Widget (60–240 $/Jahr) zusätzlich zu Carrd
Externe Requests Keine Vendor-JS bei jedem Pageview
No-Code-Bearbeitung Nein – du bearbeitest das Snippet Ja – visuelles Dashboard
Vendor-Badge Keins Free-Tiers fügen meist eins hinzu

Der eigene Embed gewinnt bei Kosten und Seitengewicht. Du brauchst Pro Standard ohnehin für jedes Embed, der Mehrpreis dieser Snippets ist also null, und nichts funkt nach Hause. Ein Widget verdient seine Gebühr nur, wenn du brauchst, was Code nicht einfach liefern kann:

  • Einen visuellen Editor, den ein nicht-technischer Kunde anpassen kann
  • Count-up-Modus (Zeit seit einem Event, nicht bis zu einem)
  • Denselben Timer, über ein Dashboard auf mehreren Seiten synchronisiert

Eins, das Leute verwirrt: Carrds eigenes Widget-Element unterstützt Stripe, Gumroad, Facebook, PayPal und Typeform. Kein Countdown dabei. Carrds Countdown lebt im separaten Timer-Element, und sobald du über seine Styling-Optionen hinauswächst, landest du beim Embed-Element.

Fehlerbehebung und FAQ

Warum zeigt mein Countdown nichts im Carrd-Builder?

Embed-Elemente rendern nichts im Builder – Carrds Doku sagt das direkt. Veröffentliche die Seite und lade die Live-Seite hart neu. Bleibt sie nach dem Veröffentlichen leer, öffne die DevTools und prüfe die Konsole auf Skriptfehler. Fehlt er auch nach dem Veröffentlichen noch, öffne More Actions → Elements… – seit Oktober 2026 zeigt das Panel, ob ein Element vom Publishing ausgeschlossen oder per CSS versteckt ist.

Warum sagt mein Countdown sofort „Event has started!“?

Dein Zieldatum liegt in der Vergangenheit. Prüfe die Date.UTC(...)-Zeile oben im Skript und roll sie nach vorn. Denk an den 0-indizierten Monat: Date.UTC(2027, 2, 1) ist der 1. März 2027, nicht der 1. Februar.

Warum erreicht mein Countdown zur falschen Zeit null?

Du hast wahrscheinlich new Date(y, m, d) genutzt, das bis Mitternacht in der lokalen Zeitzone jedes Besuchers zählt. Für eine Deadline, die weltweit zum selben Moment fallen muss, wechsle zu Date.UTC(y, m, d, h, min, s) oder new Date("2027-03-01T09:00:00Z").getTime().

Brauche ich einen bezahlten Plan für einen Carrd-Countdown-Timer?

Ja. Das Embed-Element erfordert Pro Standard oder höher, mindestens 19 $/Jahr. Free- und Pro-Lite-Pläne können gar keinen eigenen Code einfügen, es gibt also keinen Free-Tier-Workaround innerhalb von Carrd.

Kann ich zwei oder mehr Countdowns auf eine Seite setzen?

Ja. Verschiedene Styles koexistieren, weil sich ihre IDs unterscheiden (countdown1 bis countdown5). Zwei Kopien desselben Styles kollidieren – benenne jede ID in der zweiten Kopie um und passe die getElementById-Strings in ihrem Skript entsprechend an.

Warum zeigt die Flip-Clock nach 100 Tagen falsche Tage?

Das Tage-Feld hat zwei Ziffern-Karten, es kann also keine dreistellige Zahl anzeigen. pad2(150) gibt „150“ zurück, und dStr[1] greift die mittlere Ziffer. Das Snippet klemmt es mit Math.min(days, 99), oder du fügst eine dritte Karte für echte dreistellige Werte hinzu.

Sind diese Countdown-Snippets barrierefrei?

Größtenteils ja. Jeder Container hat role="timer", und die animierten Styles enthalten einen prefers-reduced-motion-Guard, der die Flip- und Hover-Effekte für Nutzer killt, die sich dagegen entscheiden. Füge kein aria-live zu einem Timer im Sekundentakt hinzu; eine Live-Region, die jeden Tick vorliest, ist schlimmer als gar nichts anzusagen.

Kann ich den Timer mit Carrds kostenlosem 7-Tage-Pro-Trial testen?

Wahrscheinlich nicht. Der Trial deckt Forms, Widgets, das Verbinden einer eigenen Domain mit Carrd und Carrds native Analytics ab – aber das Embed-Element (eigener Code) steht nicht auf der dokumentierten Feature-Liste des Trials unter carrd.com/docs/pro/trial. Du brauchst Pro Standard (19 $/Jahr), um diese Snippets einzufügen und zu veröffentlichen.

Fazit

Carrds eingebautes Timer-Element deckt die Basics ab, aber ein eigener Embed ist der Weg zu einem Countdown, der zu deinem Design passt. Wähl einen Style, ändere eine Date.UTC-Zeile, veröffentliche und prüfe, dass er tickt. Du gibst weniger aus als auf dem Widget-Weg und lieferst null externe Skripte aus.

Kombiniere den Timer mit einem Popup-Modal für E-Mail-Capture, einem WhatsApp-Button, damit Besucher dich erreichen, wenn die Uhr null erreicht, und einem Cookie-Hinweis, falls du EU-Traffic bedienst. Die Anleitungsliste oben enthält den Rest der Carrd-Custom-Code-Builds.

Carrd.co testen
#Carrd#CSS#Countdown Timer

Ähnliche Artikel

Hat diese Anleitung bei dir funktioniert?

Dragos

Geschrieben von Dragos

Dragos is the author of Bitdoze — practical DevOps, programming, and self-hosting guides.

Mehr Anleitungen von Dragos →

Brauchst du Hilfe bei Astro, VPS oder einer Self-hosted-App? Services ansehen →