Carrd Testimonial-Slider: 3 kostenlose Copy-Paste-Designs (2026)

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.

Social Proof verkauft. Wenn potenzielle Kunden sehen, wie andere deine Arbeit empfehlen, vertrauen sie dir eher. Aber mehrere Testimonials auf einer Single-Page-Carrd-Site unterzubringen, frisst wertvollen Platz.

In dieser Anleitung fügst du einen Carrd Testimonial-Slider mit drei kostenlosen Copy-Paste-Designs hinzu: ein minimalistisches Karussell mit Punkten und Autoplay, einen Karten-Slider mit Pfeilen und ein Testimonial-Grid, das alles auf einmal zeigt. Jedes davon ist ein einziges Carrd-Embed mit schlichtem HTML, CSS und Vanilla-JavaScript. Nichts zu bauen und kein Vendor-Skript zu laden.

Was du brauchst, bevor du startest:

Carrd-Account mit Pro Standard (19 $/Jahr) oder höher. Das Embed-Element ist auf Free oder Pro Lite nicht verfügbar (Quelle: Carrds Plan-Dokumentation, geprüft am 24.09.2026).
Eine Carrd-Site mit einer Sektion, die den Slider aufnehmen kann. Eine Full-Width-Sektion ist der sichere Default; die Snippets gehen von einer max-width von 700 bis 800 px aus.
Testimonial-Texte mit Namen und Rollen. Avatar-Fotos sind optional, und Platzhalter-Avatare sind nur zum Testen okay.
Sonst nichts. Du brauchst keinen Server, kein npm und kein separates Plugin.

Kosten. Carrds Staffelung ist Free (3 Sites auf einer *.carrd.co-Adresse, mit Branding, keine Embeds), Pro Lite für 9 $/Jahr (3 Sites, kein Branding, immer noch keine Embeds), Pro Standard für 19 $/Jahr (10 Sites, eigene Domains, Embeds, Widgets, Forms, Analytics) und Pro Plus für 49 $/Jahr (25 Sites, eigene Forms, Site-Source-Download). Dieses Tutorial braucht Pro Standard. Preise verifiziert am 24.09.2026 auf der offiziellen Plans-Seite – prüfe sie vor dem Bezahlen in deinem Dashboard nochmal. Wenn dich die 19 $ zum Zögern bringen, lies zuerst, ob Carrd Pro Standard die 19 $/Jahr wert ist.

Embeds brauchen Carrd Pro Standard

Alle drei Designs nutzen das Embed-Element, das hinter Pro Standard oder höher liegt. Auf Free oder Pro Lite kannst du überhaupt keinen eigenen Code einfügen. Die nächstliegende native Annäherung: zwei oder drei Columns nebeneinander, jeweils mit einem gestylten Text-Element für ein Zitat, oder Testimonial-Screenshots als Image-Elemente. Das ist kein Slider, geht aber noch heute Abend auf einem Free-Plan live.

Carrd.co

Ein paar Carrd-Tutorials:

Die komplette Liste mit Carrd-Plugins, -Themes und -Tutorials findest du auf meiner Website carrdme.com.

Warum ein Testimonial-Slider auf Carrd

Ein Carrd Testimonial-Karussell schlägt eine Wand statischer Zitate:

Spart Platz. Zeige 5–10 Testimonials auf dem Platz von einem.
Hält den Content frisch. Besucher, die auf der Seite bleiben, sehen verschiedene Zitate, ohne zu scrollen.
Zieht Aufmerksamkeit. Bewegung fällt ins Auge und lenkt den Fokus auf deinen Social Proof.
Sieht professionell aus. Es ist ein gängiges Pattern auf gut designten Sites.
Funktioniert auf Mobilgeräten. Swipe-freundliches Design für Touch-Geräte.

Wie du einen Testimonial-Slider zu Carrd hinzufügst

So fügst du Testimonials zu Carrd in drei Stilen hinzu: ein Embed-Element einfügen, eines der Snippets unten reinkopieren, veröffentlichen, dann auf der Live-URL verifizieren. Der Workflow ist kurz, aber der Teil mit Veröffentlichen-und-Verifizieren ist nicht optional.

Schritt 1: Ein Embed-Element in Carrd hinzufügen

Klicke auf das +-Zeichen und füge ein Embed-Element hinzu:

Type: Code
Style: Inline (wichtig: so wird der Slider auf deiner Seite angezeigt)

Einstellungspanel des Carrd Embed-Elements mit Type auf Code und dem Style-Dropdown

Der Screenshot stammt aus dem Back-to-Top-Tutorial, deshalb zeigen seine Style-Dropdowns Hidden und Head. Für den Slider öffne dasselbe Style-Dropdown und wähle Inline.

Auf einer langen Seite nutzt du das Elements Panel (More Actions, dann Elements – seit dem 07.08.2026 im Builder), um direkt zu dem gerade hinzugefügten Embed zu springen statt zu scrollen.

Das ist derselbe Embed-Workflow, den jedes Carrd-Widget auf dieser Site nutzt. Wenn du ein zweites durchgearbeitetes Beispiel willst, bevor du Testimonials anfasst, füge zuerst einen Back-to-Top-Button per Embed hinzu.

Du siehst den Slider nicht im Builder

Carrd rendert Embed-Code nicht im Editor. Klicke nach dem Einfügen auf Publish Changes, öffne die Live-URL und lade hart neu. Der Slider erscheint dort, wo das Embed in der Sektions-Reihenfolge sitzt. Eine leere Stelle im Builder heißt nicht, dass etwas kaputt ist.

Profi-Tipp: Code und Markup trennen

Halte das sichtbare Embed rein presentational. Lege HTML und CSS ins Inline-Embed und die <script>-Hälfte in ein zweites Embed mit Style Hidden und Platzierung Body End. Carrd dokumentiert beide Styles plus die Platzierungen Head, Body Top und Body End für Hidden-Embeds in den offiziellen Embedding-Docs.

Verifizieren: Publish Changes, Live-URL öffnen, hart neu laden. Erwartetes Ergebnis: Der Slider rendert unterhalb der Embed-Position mit dem ersten Testimonial sichtbar. Kaputt sieht so aus: eine leere Lücke auf der Live-Seite (Code fehlt oder Style steht auf Hidden) oder roher Code-Text auf der Seite (Type steht auf etwas anderem als Code).

Schritt 2: Wähle deinen Slider-Stil

Drei Designs unten. Such dir eines aus und füge den ganzen Block ins Embed ein.

Option 1: Punkte + Autoplay

Der kompakte Default. Ein Zitat auf einmal, rotiert automatisch alle 5 Sekunden, pausiert bei Hover, Swipe auf Mobilgeräten, Navigationspunkte darunter. Am besten, wenn der vertikale Platz knapp ist und sich die Zitate von selbst bewegen sollen.

Spring zu Option 1: Minimaler Slider.

Option 2: Pfeile

Ein Karten-Look mit Links/Rechts-Pfeilen, Sternebewertungen und einem 1 / N-Zähler. Erst manuelle Kontrolle, dann Autoplay. Am besten für längere Zitate und wenn Besucher in ihrem eigenen Tempo browsen sollen.

Spring zu Option 2: Karten-Slider mit Pfeilen.

Option 3: Grid

Überhaupt kein Slider. Zeigt jedes Testimonial auf einmal auf dem Desktop, stapelt auf Mobilgeräten. Am besten, wenn du 4 oder weniger Zitate hast und alle für Besucher und Suchmaschinen ohne JavaScript sichtbar sein sollen.

Spring zu Option 3: Testimonial-Grid.

Rollback ist bei allen dreien trivial: Lösche das Embed-Element und klicke nochmal auf Publish Changes.

Option 1: Minimaler Slider (Punkte + Autoplay)

Das minimalistische Design unten kommt einem klassischen Carrd Testimonial-Karussell am nächsten. Ein schlichtes Design, das mit jedem Farbschema funktioniert.

html

<style>
  :root {
    --testimonial-bg: #ffffff;
    --testimonial-text: #1f2937;
    --testimonial-secondary: #6b7280;
    --testimonial-accent: #4f46e5;
    --testimonial-quote: #e5e7eb;
    --testimonial-radius: 16px;
    --testimonial-max-width: 700px;
  }

  .testimonial-slider {
    max-width: var(--testimonial-max-width);
    margin: 40px auto;
    position: relative;
    font-family: inherit;
  }

  .testimonial-container {
    overflow: hidden;
    border-radius: var(--testimonial-radius);
    background: var(--testimonial-bg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  }

  .testimonial-track {
    display: flex;
    transition: transform 0.5s ease;
  }

  .testimonial-slide {
    min-width: 100%;
    padding: 50px 40px;
    box-sizing: border-box;
    text-align: center;
  }

  .testimonial-quote-mark {
    font-size: 80px;
    color: var(--testimonial-quote);
    line-height: 1;
    margin-bottom: -20px;
    font-family: Georgia, serif;
  }

  .testimonial-text {
    font-size: 20px;
    line-height: 1.7;
    color: var(--testimonial-text);
    margin: 0 0 30px 0;
    font-style: italic;
  }

  .testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--testimonial-quote);
  }

  .testimonial-info {
    text-align: left;
  }

  .testimonial-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--testimonial-text);
    margin: 0;
  }

  .testimonial-role {
    font-size: 14px;
    color: var(--testimonial-secondary);
    margin: 4px 0 0 0;
  }

  .testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
  }

  .testimonial-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--testimonial-quote);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
  }

  .testimonial-dot.active {
    background: var(--testimonial-accent);
    transform: scale(1.2);
  }

  .testimonial-dot:hover {
    background: var(--testimonial-accent);
    opacity: 0.7;
  }

  @media (max-width: 600px) {
    .testimonial-slide {
      padding: 35px 25px;
    }
    .testimonial-text {
      font-size: 17px;
    }
    .testimonial-quote-mark {
      font-size: 60px;
    }
  }
</style>

<div class="testimonial-slider">
  <div class="testimonial-container">
    <div class="testimonial-track" id="testimonialTrack">
      
      <div class="testimonial-slide">
        <div class="testimonial-quote-mark">"</div>
        <p class="testimonial-text">Working with them changed how our business runs. They delivered exactly what we needed, on time and within budget. Highly recommend!</p>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?img=1" alt="Sarah Johnson" class="testimonial-avatar">
          <div class="testimonial-info">
            <p class="testimonial-name">Sarah Johnson</p>
            <p class="testimonial-role">CEO, TechStart Inc.</p>
          </div>
        </div>
      </div>

      <div class="testimonial-slide">
        <div class="testimonial-quote-mark">"</div>
        <p class="testimonial-text">The attention to detail was impressive. They took the time to understand our needs and created something that exceeded expectations.</p>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?img=3" alt="Michael Chen" class="testimonial-avatar">
          <div class="testimonial-info">
            <p class="testimonial-name">Michael Chen</p>
            <p class="testimonial-role">Marketing Director, GrowthCo</p>
          </div>
        </div>
      </div>

      <div class="testimonial-slide">
        <div class="testimonial-quote-mark">"</div>
        <p class="testimonial-text">Fast, professional, and great communication throughout the project. This is how freelancing should work. Will definitely hire again.</p>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?img=5" alt="Emily Rodriguez" class="testimonial-avatar">
          <div class="testimonial-info">
            <p class="testimonial-name">Emily Rodriguez</p>
            <p class="testimonial-role">Founder, DesignLab</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  
  <div class="testimonial-dots">
    <button class="testimonial-dot active" onclick="goToSlide(0)" aria-label="Go to testimonial 1"></button>
    <button class="testimonial-dot" onclick="goToSlide(1)" aria-label="Go to testimonial 2"></button>
    <button class="testimonial-dot" onclick="goToSlide(2)" aria-label="Go to testimonial 3"></button>
  </div>
</div>

<script>
var testimonialTrack = document.getElementById('testimonialTrack');
var testimonialDots = document.querySelectorAll('.testimonial-dot');
var testimonialSlides = document.querySelectorAll('.testimonial-slide');
var currentSlide = 0;
var slideInterval;

function goToSlide(index) {
  currentSlide = index;
  testimonialTrack.style.transform = 'translateX(-' + (index * 100) + '%)';
  for (var i = 0; i < testimonialDots.length; i++) {
    testimonialDots[i].classList.remove('active');
  }
  testimonialDots[index].classList.add('active');
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % testimonialSlides.length;
  goToSlide(currentSlide);
}

slideInterval = setInterval(nextSlide, 5000);

testimonialTrack.onmouseenter = function() { clearInterval(slideInterval); };
testimonialTrack.onmouseleave = function() { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, 5000); };

var touchStartX = 0;
testimonialTrack.ontouchstart = function(e) {
  touchStartX = e.changedTouches[0].screenX;
  clearInterval(slideInterval);
};
testimonialTrack.ontouchend = function(e) {
  var diff = touchStartX - e.changedTouches[0].screenX;
  if (diff > 50) { currentSlide = (currentSlide + 1) % testimonialSlides.length; goToSlide(currentSlide); }
  else if (diff < -50) { currentSlide = (currentSlide - 1 + testimonialSlides.length) % testimonialSlides.length; goToSlide(currentSlide); }
  clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, 5000);
};
</script>

Vier kleine Verbesserungen, die es wert sind, obendrauf eingefügt zu werden. Keine davon ändert die Markup-Struktur, das Copy-Paste funktioniert also weiter.

Scope die Theme-Variablen. Das Snippet deklariert seine Farben auf :root, also seiten-global. Okay für ein Embed, falsch für zwei. Verschiebe die Variablen auf .testimonial-slider (siehe „Die Farben anpassen“ im Abschnitt „Deinen Testimonial-Slider anpassen“).

Zwei ARIA-Attribute lassen den Wrapper sich Screenreadern gegenüber als Karussell melden. Bearbeite die vorhandenen öffnenden Tags in-place und lass das .testimonial-container-Div dazwischen. Die volle Erklärung steht im Accessibility-Abschnitt weiter unten.

html

<div class="testimonial-slider" aria-roledescription="carousel" aria-label="Customer testimonials">
  <div class="testimonial-container">
    <div class="testimonial-track" id="testimonialTrack" aria-live="off">

Eine vierte Slide braucht einen vierten Punkt. Track, Autoplay und Swipe-Logik zählen die Slides zur Laufzeit. Die Punkte sind hardcodiert. Wenn du eine Slide hinzufügst, füge ihren Button hinzu:

html

<!-- Add inside .testimonial-dots when you add a 4th slide -->
<button class="testimonial-dot" onclick="goToSlide(3)" aria-label="Go to testimonial 4"></button>

Für barrierearmes Autoplay und eine Offscreen-Pause füge diese Zeilen am Ende desselben Script-Blocks ein. Sie tauschen das Intervall gegen abgesicherte Start/Stop-Helper, überspringen Autoplay komplett für Reduced-Motion-Nutzer, rotieren nur, solange der Slider auf dem Screen ist, und pausieren, wenn Tastaturfokus reinkommt. Nur Standard-Browser-APIs (IntersectionObserver und matchMedia). Teste auf deiner veröffentlichten Site; die Builder-Vorschau führt Embed-Skripte nicht aus.

// Accessibility + offscreen pause. Paste at the end of the existing <script> block.
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var rotationStopped = false; // set to true to turn autoplay off completely

function startAuto() {
  if (reduceMotion || rotationStopped || slideInterval) return;
  slideInterval = setInterval(nextSlide, 5000);
}

function stopAuto() {
  clearInterval(slideInterval);
  slideInterval = null;
}

// Replaces the plain setInterval start and the mouse and touch handlers above
stopAuto();
startAuto();

testimonialTrack.onmouseenter = stopAuto;
testimonialTrack.onmouseleave = startAuto;

var swipeStart = testimonialTrack.ontouchstart;
var swipeEnd = testimonialTrack.ontouchend;
testimonialTrack.ontouchstart = function (e) { swipeStart(e); stopAuto(); };
testimonialTrack.ontouchend = function (e) { swipeEnd(e); stopAuto(); startAuto(); };

document.querySelector('.testimonial-slider').addEventListener('focusin', stopAuto);
document.querySelector('.testimonial-slider').addEventListener('focusout', startAuto);

if (!reduceMotion) {
  var testimonialObserver = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) { startAuto(); } else { stopAuto(); }
    });
  }, { threshold: 0.3 });
  testimonialObserver.observe(document.getElementById('testimonialTrack'));
}

document.addEventListener('visibilitychange', function () {
  if (document.hidden) { stopAuto(); } else { startAuto(); }
});

Weil startAuto() idempotent ist (es weigert sich, ein zweites Intervall zu stapeln) und der Block die Maus- und Touch-Handler neu zuweist, ist das Einfügen nach dem Original-Skript sicher. Wenn du diesen Block überspringst, funktioniert der Slider trotzdem – er rotiert dann nur weiter, während er offscreen ist.

Option 2: Karten-Slider mit Pfeilen

Ein interaktiveres Carrd Testimonial-Karussell mit Navigationspfeilen zur manuellen Kontrolle. Das ist der Testimonial-Slider mit Pfeilen, falls du danach gesucht hast. Er braucht beim Hinzufügen von Slides auch kein zusätzliches Nav-Markup pro Slide: Der 1 / N-Zähler wird aus der Slide-Anzahl berechnet.

html

<style>
  :root {
    --card-bg: #f8fafc;
    --card-text: #0f172a;
    --card-secondary: #64748b;
    --card-accent: #0ea5e9;
    --card-border: #e2e8f0;
    --card-shadow: rgba(0, 0, 0, 0.08);
  }

  .card-slider {
    max-width: 800px;
    margin: 40px auto;
    position: relative;
    padding: 0 50px;
  }

  .card-slider-container {
    overflow: hidden;
  }

  .card-slider-track {
    display: flex;
    transition: transform 0.4s ease;
  }

  .card-slide {
    min-width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .card-content {
    background: white;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px var(--card-shadow);
    text-align: left;
  }

  .card-stars {
    color: #fbbf24;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .card-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--card-text);
    margin: 0 0 25px 0;
  }

  .card-divider {
    height: 1px;
    background: var(--card-border);
    margin: 25px 0;
  }

  .card-author {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .card-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }

  .card-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--card-text);
    margin: 0;
  }

  .card-role {
    font-size: 14px;
    color: var(--card-secondary);
    margin: 3px 0 0 0;
  }

  .card-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: white;
    border: 2px solid var(--card-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--card-text);
    transition: all 0.2s;
    z-index: 10;
  }

  .card-arrow:hover {
    background: var(--card-accent);
    border-color: var(--card-accent);
    color: white;
  }

  .card-arrow-left {
    left: 0;
  }

  .card-arrow-right {
    right: 0;
  }

  .card-counter {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--card-secondary);
  }

  @media (max-width: 600px) {
    .card-slider {
      padding: 0 15px;
    }
    .card-arrow {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
    .card-arrow-left {
      left: -5px;
    }
    .card-arrow-right {
      right: -5px;
    }
    .card-content {
      padding: 30px 25px;
    }
    .card-text {
      font-size: 16px;
    }
  }
</style>

<div class="card-slider">
  <button class="card-arrow card-arrow-left" id="cardPrev" aria-label="Previous testimonial">←</button>
  <button class="card-arrow card-arrow-right" id="cardNext" aria-label="Next testimonial">→</button>
  
  <div class="card-slider-container">
    <div class="card-slider-track" id="cardTrack">
      
      <div class="card-slide">
        <div class="card-content">
          <div class="card-stars">★★★★★</div>
          <p class="card-text">"Absolutely fantastic experience from start to finish. The communication was excellent, the work was top-notch, and everything was delivered ahead of schedule. I couldn't be happier with the results."</p>
          <div class="card-divider"></div>
          <div class="card-author">
            <img src="https://i.pravatar.cc/120?img=11" alt="David Park" class="card-avatar">
            <div>
              <p class="card-name">David Park</p>
              <p class="card-role">Product Manager, Innovate Labs</p>
            </div>
          </div>
        </div>
      </div>

      <div class="card-slide">
        <div class="card-content">
          <div class="card-stars">★★★★★</div>
          <p class="card-text">"They transformed our outdated website into something modern and user-friendly. Our conversion rate increased by 40% within the first month. Worth every penny!"</p>
          <div class="card-divider"></div>
          <div class="card-author">
            <img src="https://i.pravatar.cc/120?img=9" alt="Lisa Thompson" class="card-avatar">
            <div>
              <p class="card-name">Lisa Thompson</p>
              <p class="card-role">Owner, Bloom Boutique</p>
            </div>
          </div>
        </div>
      </div>

      <div class="card-slide">
        <div class="card-content">
          <div class="card-stars">★★★★★</div>
          <p class="card-text">"Professional, creative, and incredibly easy to work with. They took our vague ideas and turned them into exactly what we needed. Already planning our next project together."</p>
          <div class="card-divider"></div>
          <div class="card-author">
            <img src="https://i.pravatar.cc/120?img=7" alt="James Wilson" class="card-avatar">
            <div>
              <p class="card-name">James Wilson</p>
              <p class="card-role">Founder, Wilson Consulting</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  
  <div class="card-counter" id="cardCounter">1 / 3</div>
</div>

<script>
  const cardTrack = document.getElementById('cardTrack');
  const cardPrev = document.getElementById('cardPrev');
  const cardNext = document.getElementById('cardNext');
  const cardCounter = document.getElementById('cardCounter');
  const cardSlides = cardTrack.querySelectorAll('.card-slide');
  let cardIndex = 0;

  function updateCardSlider() {
    cardTrack.style.transform = `translateX(-${cardIndex * 100}%)`;
    cardCounter.textContent = `${cardIndex + 1} / ${cardSlides.length}`;
  }

  cardPrev.addEventListener('click', () => {
    cardIndex = (cardIndex - 1 + cardSlides.length) % cardSlides.length;
    updateCardSlider();
  });

  cardNext.addEventListener('click', () => {
    cardIndex = (cardIndex + 1) % cardSlides.length;
    updateCardSlider();
  });

  // Auto-rotate every 6 seconds
  setInterval(() => {
    cardIndex = (cardIndex + 1) % cardSlides.length;
    updateCardSlider();
  }, 6000);
</script>

Die Autoplay-Geschwindigkeit hier ist 6000 ms am Ende des Skripts. Autoplay zu deaktivieren funktioniert wie bei Option 1: Lösche den setInterval-Block oder kommentiere ihn aus.

Option 3: Testimonial-Grid (kein Slider)

Wenn du lieber alle Testimonials auf einmal auf dem Desktop zeigen willst und auf Mobilgeräten scrollst, ist dieses Testimonial-Grid die Antwort. Kein Autoplay, kein JavaScript, jedes Zitat im DOM für Besucher und Suchmaschinen. Es ist außerdem die accessibility-freundliche Wahl und das visuelle Ziel für das, was Columns plus Text-Elemente auf einem Free-Plan annähern.

html

<style>
  :root {
    --grid-bg: #fefce8;
    --grid-card-bg: #ffffff;
    --grid-text: #1c1917;
    --grid-secondary: #78716c;
    --grid-accent: #f59e0b;
  }

  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
  }

  .grid-card {
    background: var(--grid-card-bg);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: left;
  }

  .grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  }

  .grid-rating {
    display: flex;
    gap: 3px;
    margin-bottom: 15px;
  }

  .grid-star {
    width: 20px;
    height: 20px;
    fill: var(--grid-accent);
  }

  .grid-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--grid-text);
    margin: 0 0 20px 0;
  }

  .grid-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid #f3f4f6;
  }

  .grid-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
  }

  .grid-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--grid-text);
    margin: 0;
  }

  .grid-role {
    font-size: 13px;
    color: var(--grid-secondary);
    margin: 2px 0 0 0;
  }

  @media (max-width: 600px) {
    .testimonial-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="testimonial-grid">
  
  <div class="grid-card">
    <div class="grid-rating">
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
    </div>
    <p class="grid-text">"Quick turnaround and excellent quality. Exactly what I was looking for. Will definitely work together again!"</p>
    <div class="grid-author">
      <img src="https://i.pravatar.cc/120?img=12" alt="Anna Lee" class="grid-avatar">
      <div>
        <p class="grid-name">Anna Lee</p>
        <p class="grid-role">Freelance Designer</p>
      </div>
    </div>
  </div>

  <div class="grid-card">
    <div class="grid-rating">
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
    </div>
    <p class="grid-text">"They went above and beyond to make sure everything was perfect. Communication was smooth the entire time."</p>
    <div class="grid-author">
      <img src="https://i.pravatar.cc/120?img=15" alt="Tom Harris" class="grid-avatar">
      <div>
        <p class="grid-name">Tom Harris</p>
        <p class="grid-role">Startup Founder</p>
      </div>
    </div>
  </div>

  <div class="grid-card">
    <div class="grid-rating">
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
    </div>
    <p class="grid-text">"Responsive and creative. They captured our brand voice perfectly. Our customers love the new design!"</p>
    <div class="grid-author">
      <img src="https://i.pravatar.cc/120?img=20" alt="Rachel Green" class="grid-avatar">
      <div>
        <p class="grid-name">Rachel Green</p>
        <p class="grid-role">Marketing Manager</p>
      </div>
    </div>
  </div>

</div>

Deinen Testimonial-Slider anpassen

Eigene Testimonials einfügen

Ersetze den Platzhalter-Content in jeder Slide:

Ändere den Absatz-Text zu deinem echten Testimonial.
Aktualisiere den Namen zum Namen deines Kunden.
Ändere Rolle und Firma.
Ersetze die Bild-URL durch das Foto deines Kunden (Platzhalter-Dienste wie pravatar.cc sind nur zum Testen).

Halte das alt-Attribut beschreibend. Der Name des Kunden funktioniert gut. Generische oder leere Alts lassen Screenreader-Nutzer hängen und verschenken einen leichten Accessibility-Gewinn.

Mehr Slides hinzufügen

Kopiere einen kompletten Slide-Block und füge ihn nach der letzten Slide ein. Der Slider passt sich an jede Slide-Anzahl an, weil Track, Autoplay und Swipe-Logik die Slide-Elemente zur Laufzeit zählen. Aber bei Option 1 musst du auch für jede neue Slide einen passenden Punkt-Button hinzufügen. Die Punkte sind hardcodiert, eine vierte Slide ohne vierten Button ist per Klick nicht erreichbar (Swipe und Autoplay zeigen sie trotzdem). Option 2 braucht nichts extra: Ihr 1 / N-Zähler wird aus der Slide-Anzahl berechnet.

html

<!-- Add inside .testimonial-dots when you add a 4th slide -->
<button class="testimonial-dot" onclick="goToSlide(3)" aria-label="Go to testimonial 4"></button>

Autoplay-Geschwindigkeit ändern

Finde die setInterval-Aufrufe und ändere die Zahl (in Millisekunden):

5000 = 5 Sekunden
7000 = 7 Sekunden
3000 = 3 Sekunden

Option 1 wiederholt 5000 an jeder Stelle, die den Timer neu startet (Initialstart, Maus-verlässt, Swipe-Ende und die optionalen Accessibility- und Toggle-Blöcke). Ändere alle auf denselben Wert. Option 2 nutzt 6000 am Ende ihres Skripts. Dieselbe Änderung.

Autoplay deaktivieren

Entferne oder kommentiere den setInterval-Codeblock aus, wenn du nur manuelle Navigation willst. Bei Option 1 rufen die Mouse-Leave- und Swipe-Handler ebenfalls setInterval, also entferne diese Zeilen auch. Wenn du das Accessibility-Upgrade in Option 1 eingefügt hast, ändere stattdessen var rotationStopped = false; zu var rotationStopped = true;. Das blockiert jeden Neustart-Pfad.

Die Farben anpassen

Jedes Snippet bringt seine Farben auf :root mit. Das funktioniert für ein Embed. Bei zwei Embeds auf einer Seite sind :root-Custom-Properties seiten-global, zwei Widgets, die --testimonial-accent neu definieren, überschreiben sich also gegenseitig. Scope die Variablen stattdessen auf den Widget-Wrapper:

css

.testimonial-slider {
  --testimonial-bg: #ffffff;
  --testimonial-text: #1f2937;
  --testimonial-secondary: #6b7280;
  --testimonial-accent: #4f46e5;
  --testimonial-quote: #e5e7eb;
  --testimonial-radius: 16px;
  --testimonial-max-width: 700px;
}

Dasselbe Prinzip für die anderen beiden Snippets: Verschiebe die Variablen auf .card-slider oder .testimonial-grid. Behalte die Variablennamen und den Rest des CSS unverändert.

Troubleshooting beim Carrd Testimonial-Slider

Häufigstes Problem: Im Builder rendert nichts

Embeds geben im Carrd-Editor nichts aus. Beginne mit dem ersten Punkt unten, bevor du irgendetwas anderes debuggst.

Slider zeigt weder im Builder noch auf der Live-Site

Symptom. Du hast den Code eingefügt und siehst eine leere Stelle.

Ursache. Der Builder rendert Embed-Code nie. Wenn die Live-Seite auch leer ist, hast du noch nicht veröffentlicht, oder der Embed-Style ist Hidden und es gibt keinen sichtbaren Content an der Platzierung.

Fix. Klicke Publish Changes, öffne die Live-URL, lade hart neu. Bestätige, dass Type Code und Style Inline ist. Erwartetes Ergebnis: Der Slider erscheint an der Position des Embeds in der Sektions-Reihenfolge. Roher Code-Text auf der Seite heißt, dass Type auf etwas anderem als Code steht.

Zwei Slider (oder ein Slider + ein anderes Embed) behindern sich

Symptom. Ein Klick auf einen Punkt bewegt den falschen Slider, oder die Browser-Konsole beschwert sich über doppelte IDs oder goToSlide.

Ursache. Die Snippets hardcodieren IDs (testimonialTrack, cardTrack) und die globale goToSlide-Funktion. Dasselbe Snippet zweimal einzufügen, kollidiert.

Fix. Benenne IDs, Klassen und Funktionen für jede Instanz um. Für einen zweiten Slider nutze testimonialTrack2, goToSlide2 und so weiter. Halte jede Umbenennung in HTML und JS konsistent, inklusive der onclick-Attribute auf den Punkten.

Slider breiter als seine Sektion

Symptom. Der Slider überläuft seine Spalte oder ignoriert dein Section-Padding.

Ursache. Das fixe max-width: 700px oder 800px geht von einer Full-Width-Sektion aus.

Fix. Senke --testimonial-max-width (Option 1) oder das max-width auf .card-slider und .testimonial-grid, oder verschiebe das Embed in eine Full-Width-Sektion. Die Mobile-Media-Queries schrumpfen das Padding unter 600 px schon.

Theme-Variablen leaken zwischen Embeds

Symptom. Zwei Embeds ändern gegenseitig ihre Farben, und der zuletzt geladene gewinnt.

Ursache. Auf :root deklarierte Custom Properties sind seiten-global.

Fix. Scope sie auf den Widget-Wrapper. Siehe „Die Farben anpassen“ im Abschnitt „Deinen Testimonial-Slider anpassen“ oben.

Autoplay läuft offscreen oder in Hintergrund-Tabs weiter

Symptom. Das Intervall feuert weiter, während der Slider weggescrollt oder der Tab versteckt ist. Verschwendete Zyklen, und es stört Screenreader-Nutzer.

Ursache. setInterval läuft bedingungslos.

Fix. Nutze das Accessibility-Upgrade in Option 1. Es koppelt die Rotation an IntersectionObserver, matchMedia('(prefers-reduced-motion: reduce)'), Tastaturfokus und visibilitychange. Wenn du nur den Hintergrund-Tab-Teil willst, ist das der minimale Patch für Option 1 (füge ihn am Ende ihres Skripts ein):

document.addEventListener('visibilitychange', function () {
  clearInterval(slideInterval);
  slideInterval = null;
  if (!document.hidden) {
    slideInterval = setInterval(nextSlide, 5000);
  }
});

Avatar-Bilder brechen oder lösen Privacy-Warnungen aus

Symptom. Avatare liefern 404, oder dein Consent-Tool meldet einen Third-Party-Request beim Seitenaufruf.

Ursache. i.pravatar.cc ist ein Live-Drittanbieter-Dienst. Okay zum Testen. Auf einer veröffentlichten Seite ist es ein externer Request, der bei jedem Besucher feuert – schlechte DSGVO-Optik für EU-Publikum und ein Single Point of Failure mehr.

Fix. Hoste Kundenfotos selbst: Lade sie als Carrd-Bild-Assets hoch oder zeig mit dem img-src auf deine eigenen Media-URLs. Behalte beschreibende alt-Texte so oder so bei. Wenn deine veröffentlichte Site Third-Party-Requests macht, füge einen Cookie-Hinweis für Carrd hinzu, damit die Offenlegung zum Verhalten passt.

Accessibility: Das Karussell screenreader-freundlich machen

Out of the box pausieren diese Slider nur bei Hover. Das W3C-ARIA-Authoring-Practices-Karussell-Pattern verlangt von jedem auto-rotierenden Karussell mehr. Die Kurzversion:

Rotation bei Hover pausieren und wenn Tastaturfokus ins Karussell kommt
Eine sichtbare Stopp- und Start-Rotations-Kontrolle anbieten
Jeden Punkt-Button so labeln, dass er die Slide benennt, die er öffnet
Den Container mit einem Klartext-Label als Karussell markieren
Auto-Rotation für prefers-reduced-motion-Nutzer komplett überspringen

Der barrierefreie Autoplay-Block unter Option 1 deckt die Fokus-Pause, den Reduced-Motion-Skip und die Offscreen-Pause ab. Für die Markup-Seite füge dem Option-1-Wrapper und -Track diese Attribute hinzu:

html

<div class="testimonial-slider" aria-roledescription="carousel" aria-label="Customer testimonials">
  <div class="testimonial-container">
    <div class="testimonial-track" id="testimonialTrack" aria-live="off">

aria-live="off" auf dem Track ist Absicht. Solange die Rotation läuft, ist jede Änderung anzusagen nur Rauschen. Wenn du Autoplay komplett deaktivierst, wechsle zu aria-live="polite", damit manuelle Navigation angesagt wird.

Labele jeden Punkt-Button nach seinem Ziel, zum Beispiel aria-label="Go to testimonial 4".

Für die Stopp- und Start-Kontrolle setze einen Button innerhalb von .testimonial-slider, direkt über den Punkten. Er baut auf dem barrierefreien Autoplay-Block auf, also füge diesen Block zuerst ein. Der Toggle flippt rotationStopped, was Hover, Fokus, Swipe und Scroll davon abhält, die Rotation neu zu starten, nachdem ein Besucher sie gestoppt hat. Carrds CSS resettet Button-Styles, deshalb gibt das Snippet dem Button seinen eigenen Look:

html

<style>
  .testimonial-toggle {
    display: block;
    margin: 20px auto 0;
    padding: 6px 14px;
    border: 1px solid var(--testimonial-secondary);
    border-radius: 6px;
    background: transparent;
    color: var(--testimonial-secondary);
    font-size: 14px;
    cursor: pointer;
  }
</style>
<button class="testimonial-toggle" onclick="toggleAutoplay()" aria-label="Stop auto-rotating testimonials">Stop rotation</button>

// Paste after the accessible autoplay block, inside the same <script>
var testimonialToggle = document.querySelector('.testimonial-toggle');

function toggleAutoplay() {
  rotationStopped = !rotationStopped;
  if (rotationStopped) {
    stopAuto();
    testimonialToggle.textContent = 'Start rotation';
    testimonialToggle.setAttribute('aria-label', 'Start auto-rotating testimonials');
  } else {
    startAuto();
    testimonialToggle.textContent = 'Stop rotation';
    testimonialToggle.setAttribute('aria-label', 'Stop auto-rotating testimonials');
  }
}

Diese Ergänzungen nutzen Standard-Browser-APIs (IntersectionObserver, matchMedia, addEventListener). Sie sind nicht gegen eine spezifische Carrd-Theme-Kombination getestet, also verifiziere auf deiner veröffentlichten Site.

Verifizieren: Veröffentliche, öffne die Live-Seite und drücke Tab, bis der Fokus den Slider erreicht. Die Rotation sollte stoppen. Drücke den Stopp-Button, und die Rotation sollte gestoppt bleiben. Aktiviere „Reduce Motion“ in deinen OS-Einstellungen und lade neu: Nichts sollte auto-rotieren. Kaputt sieht so aus: Rotation läuft weiter, während ein Punkt-Button Fokus hat, oder es gibt keinen Weg, das Karussell zu stoppen, ohne die Seite zu verlassen.

No-Code-Alternativen: Carrd Testimonial-Widgets

Nicht jeder will HTML von Hand bearbeiten. Hier ist der ehrliche Vergleich, der die Frage „Wie füge ich Testimonials zu Carrd hinzu“ ohne eigenen Code beantwortet.

Senja

Senja (kostenloser Widget-Builder). Erstelle das Widget in Senjas Studio, kopiere den Embed-Code, füge ihn in dasselbe Carrd Embed-Element ein, veröffentliche. Der echte Mehrwert ist das Collection-Formular: Freigegebene Zitate syncen automatisch ins Widget, du bearbeitest das Embed also nie, um ein Review hinzuzufügen. Senja dokumentiert den Flow in seinem Carrd-Setup-Guide (laut deren Docs funktioniert Embedding auf Carrd Pro, Seite zuletzt geändert am 19.01.2026). Prüfe deren aktuelle Free-Tier-Limits, bevor du dich festlegst.

Nimm Senja, wenn Testimonials kontinuierlich reinkommen und du null Embed-Bearbeitung willst.

Common Ninja

Common Ninja (Freemium-Widget). Ein gehosteter Testimonials-Slider mit Drag- und Peek-Effekten, die diese handcodierte Version nicht versucht. Derselbe Workflow: Widget generieren, in ein Carrd Embed einfügen, veröffentlichen. Sie behandeln es in ihrem Carrd-How-to und einem YouTube-Walkthrough. Bezahlte Tiers schalten mehr Slides und Features frei.

Nimm Common Ninja, wenn du diese Motion-Effekte willst, ohne CSS zu schreiben.

Handcodiert (diese Anleitung)

Handcodiert. Für immer kostenlos, kein Vendor-JavaScript, keine externen Requests jenseits deiner eigenen Avatar-Bilder und volle Kontrolle über Markup und CSS. Der Preis ist Maintenance: Dir gehören der Punkt-Vorbehalt, das Theming und die Accessibility-Arbeit.

Nimm das, wenn du null Third-Party-Abhängigkeit willst und einen Slider, den du in jedem Texteditor bearbeiten kannst.

Eins gilt für alle drei: Beide Widget-Routen brauchen immer noch dasselbe Pro-Standard-Embed. Nichts entkommt dem Plan-Gate. Andere Copy-Paste-Templates existieren online ebenfalls. Die drei Designs hier kommen mit ausformuliertem Troubleshooting- und Accessibility-Teil.

Tipps für bessere Testimonials

Nutze echte Fotos. Stockfotos sehen fake aus. Frag Kunden nach Porträtfotos oder nutze ihre LinkedIn-Fotos mit Erlaubnis.

Halte Zitate kurz. Lange Testimonials verlieren Aufmerksamkeit. Kürze auf die stärksten 2–3 Sätze.

Bring konkrete Zahlen. „Tolle Arbeit!“ ist vergessbar. „Hat unsere Conversion-Rate um 40 % erhöht“ bleibt hängen.

Diversifiziere deine Testimonials. Zeig verschiedene Kundentypen und verschiedene Vorteile, die sie bekommen haben.

Pflege ein Source-of-Truth-Dokument. Eine schlichte Tabelle mit freigegebenen Zitaten, Namen, Rollen und Foto-URLs macht ein Embed-Update zu einer Zwei-Minuten-Aufgabe statt zu einer Ausgrabung. Senjas Collection-Formular löst dasselbe Problem mit Software, wenn du über eine Tabelle hinauswächst.

Social Proof funktioniert am besten mit einem leichten nächsten Schritt. Auf Service-Sites kombiniere den Slider mit einem WhatsApp-Chat-Button, damit überzeugte Besucher dir sofort schreiben können.

Carrd.co testen

Fazit

Ein Carrd Testimonial-Slider gibt dir Social Proof, ohne die halbe Seite zu fressen. Such dir eines der drei Copy-Paste-Designs, tausche echte Zitate und Fotos ein, veröffentliche und verifiziere auf der Live-URL. Die Snippets bleiben abhängigkeitsfrei, unrelated Carrd-Builder-Updates werden sie also nicht brechen.

Kombiniere das mit einer Preistabelle und einem FAQ-Akkordeon für eine komplette Service-Seite. Lieber fertige Widgets? Hol dir das Carrd-Akkordeon-Plugin oder das Carrd-Tabs-Widget von carrdme. Mehr Custom-Code-Designs: ein Carrd-Countdown-Timer mit eigenen Copy-Paste-Designs, ein Sticky Header mit CSS und eine mobile responsive Navbar. Wenn du den Builder selbst noch auswählst, starte mit eine One-Page-Website mit kleinem Budget bauen.

Was seit Erstveröffentlichung neu in Carrd ist:

Der Builder bekam am 07.08.2026 ein Elements Panel (More Actions, dann Elements), das jedes Element auf langen Seiten auflistet. Praktisch, sobald das Testimonial-Embed eines von vielen ist.
Cloudflare und PostHog Web Analytics kamen am 27.04.2026 und 28.04.2026 für Pro Standard und höher. Es lohnt sich, sie anzubinden, wenn du messen willst, ob der Slider Conversions tatsächlich hebt, statt zu raten.
Eine Framing-Kontrolle kam am 23.08.2026, nur für Pro Plus. Sie entscheidet, wann andere Sites deine iframen dürfen. Für den Slider gibt es nichts zu tun – nur gelistet, damit der Changelog kein Rätsel ist.

Baue deinen Slider auf Carrd

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

Carrd Testimonial-Slider: So fügst du einen hinzu (Copy-Paste-Code)

Warum ein Testimonial-Slider auf Carrd

Wie du einen Testimonial-Slider zu Carrd hinzufügst

Schritt 1: Ein Embed-Element in Carrd hinzufügen

Schritt 2: Wähle deinen Slider-Stil

Option 1: Minimaler Slider (Punkte + Autoplay)

Option 2: Karten-Slider mit Pfeilen

Option 3: Testimonial-Grid (kein Slider)

Deinen Testimonial-Slider anpassen

Eigene Testimonials einfügen

Mehr Slides hinzufügen

Autoplay-Geschwindigkeit ändern

Autoplay deaktivieren

Die Farben anpassen

Troubleshooting beim Carrd Testimonial-Slider

Slider zeigt weder im Builder noch auf der Live-Site

Zwei Slider (oder ein Slider + ein anderes Embed) behindern sich

Slider breiter als seine Sektion

Theme-Variablen leaken zwischen Embeds

Autoplay läuft offscreen oder in Hintergrund-Tabs weiter

Avatar-Bilder brechen oder lösen Privacy-Warnungen aus

Accessibility: Das Karussell screenreader-freundlich machen

No-Code-Alternativen: Carrd Testimonial-Widgets

Tipps für bessere Testimonials

Fazit

Carrd Black Friday 2026: 40 % Rabatt auf Pro-Pläne (Code BF2026)

FAQ-Akkordeon-Dropdown in Carrd.co einfügen (kostenloser Code)

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

Inhaltsverzeichnis

Carrd Black Friday 2026: 40 % Rabatt auf Pro-Pläne (Code BF2026)

HolyArrs Docker Guide: Ersetze Sonarr, Radarr, Lidarr, Bazarr, Prowlarr & Overseerr durch eine einzige 15-MB-App

Herdr-App-Layouts & Mods: Ein Blick in die Galerie, in der keine zwei gleich aussehen

Warum ein Testimonial-Slider auf Carrd

Wie du einen Testimonial-Slider zu Carrd hinzufügst

Schritt 1: Ein Embed-Element in Carrd hinzufügen

Schritt 2: Wähle deinen Slider-Stil

Option 1: Minimaler Slider (Punkte + Autoplay)

Option 2: Karten-Slider mit Pfeilen

Option 3: Testimonial-Grid (kein Slider)

Deinen Testimonial-Slider anpassen

Eigene Testimonials einfügen

Mehr Slides hinzufügen

Autoplay-Geschwindigkeit ändern

Autoplay deaktivieren

Die Farben anpassen

Troubleshooting beim Carrd Testimonial-Slider

Slider zeigt weder im Builder noch auf der Live-Site

Zwei Slider (oder ein Slider + ein anderes Embed) behindern sich

Slider breiter als seine Sektion

Theme-Variablen leaken zwischen Embeds

Autoplay läuft offscreen oder in Hintergrund-Tabs weiter

Avatar-Bilder brechen oder lösen Privacy-Warnungen aus

Accessibility: Das Karussell screenreader-freundlich machen

No-Code-Alternativen: Carrd Testimonial-Widgets

Tipps für bessere Testimonials

Fazit

Ähnliche Artikel

Carrd Dark Mode: So fügst du einen Theme-Umschalter hinzu (Guide 2026)

Carrd Popup-Modal: So fügst du eines zu deiner Site hinzu (2026)

Carrd Smooth Scroll: Native Anker-Links + eigener Code