Dynamische Sternebewertungen aus dem Webflow CMS

Sascha Neurath

July

2025

•

DATA-LESEZEIT

Möchtest du auf deiner Webflow-Website echte Sternebewertungen anzeigen, direkt aus einem CMS-Feld? In diesem Beitrag zeige ich dir Schritt für Schritt, wie du Sterne dynamisch füllst: 4,0, 4,5 oder sogar 3,75 Sterne werden exakt dargestellt. Ganz ohne zusätzliche Libraries oder Plugins.

Bevor du mit dem Aufbau im Designer startest, musst du zuerst die CMS Collection anlegen, denn das Rating-Feld ist die Grundlage für die dynamische Sternanzeige.

‍

Schritt 1: CMS Collection „Reviews“ anlegen

Erstelle eine neue CMS Collection mit mindestens diesen Feldern:

Name (Plain text) - für den Namen des Kunden oder Autors
Review (Plain text) - der eigentliche Bewertungstext
Rating (Number) - Dezimalwert von 0 bis 5
Company (Plain text) - optional: Name der Firma
Avatar (Image) - optional: Profilbild oder Firmenlogo

Wichtig: Das Feld Rating muss vom Typ Number sein, damit das JavaScript später korrekt darauf zugreifen kann.

‍

‍

Schritt 2: Projektstruktur in Webflow

Damit du deine dynamischen Sternebewertungen in Webflow umsetzen kannst, gibt es zwei Wege, beide funktionieren gleich gut, unterscheiden sich aber in Handhabung und Flexibilität:

‍

Möglichkeit 1: Mit einem Code Embed Element

Hier fügst du den HTML-Code direkt in ein Embed-Element innerhalb deines Review-Cards ein. So kannst du sofort die fünf Bewertungssterne samt data-rating Attribut platzieren und mit dem dynamischen CMS-Feld verbinden.

‍

Vorteile:

Schnelle Umsetzung. Du kopierst einfach den gesamten Block aus dem Tutorial
Du brauchst keine zusätzliche Struktur im Designer

Nachteile:

Weniger visuelle Kontrolle im Designer
Änderungen am Styling oder an der Anzahl der Sterne nur direkt im Code möglich

‍

‍

Möglichkeit 2: Direkt im Designer mit DIV Elementen & Custom Attribute

Du kannst die Sterne auch ganz normal als fünf div-Elemente im Designer bauen und diese in einem übergeordneten div-Wrapper gruppieren. Dem Wrapper gibst du dann im Custom Attributes Panel das Attribut data-rating="{{Rating}}".

‍

Vorteile:

Alles bleibt im visuellen Designer sichtbar
Styling, Abstände & Änderungen sind direkt im Webflow-UI anpassbar
Besser für spätere Wartung & Übergabe an den Kunden

Nachteile:

Etwas aufweniger beim Einrichten
Du musst das data-rating manuell ins Attributfeld eintragen

‍

Schritt 3: Code Embed einfügen (CSS & JavaScript)

Damit die Sterne richtig dargestellt und dynamisch berechnet werden, musst du einmalig CSS und JavaScript in deine Seite einfügen.

‍

Wichtig:

Platziere das Code Embed-Element außerhalb der CMS Collection, also unterhalb der Collection List Wrapper, aber innerhalb deiner Section. So wird der Code nur einmal geladen und nicht bei jedem Review dupliziert.

‍

Das gehört in ein Embed-Element

<style>
.reviews_rating-wrapper {
  display: flex;
  gap: 4px;
}

.reviews_rating-icon {
  width: 24px;
  height: 24px;
  background-color: #ccc; /* grau als Grundfarbe */
  clip-path: polygon(50% 0%, 61% 38%, 98% 38%, 68% 59%, 79% 91%, 50% 70%, 21% 91%, 32% 59%, 2% 38%, 39% 38%);
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>

<script>
document.querySelectorAll('.reviews_rating-wrapper').forEach(wrapper => {
  const rating = parseFloat(wrapper.getAttribute('data-rating'));
  const stars = wrapper.querySelectorAll('.reviews_rating-icon');

  stars.forEach((star, index) => {
    const starIndex = index + 1;
    const fill = Math.min(Math.max(rating - index, 0), 1); // Wert zwischen 0 und 1
    const fillPercent = Math.round(fill * 100); // z. B. 75%

    star.style.backgroundImage = `linear-gradient(90deg, #FFC107 ${fillPercent}%, #ccc ${fillPercent}%)`;
  });
});
</script>

‍

Erklärung von CSS & JavaScript

‍

CSS – Design der Sterne

Der CSS-Teil sorgt für das Aussehen und Verhalten der Sterne:

‍

.reviews_rating-wrapper {
  display: flex;
  gap: 4px;
}

display: flex: Die 5 Sterne werden nebeneinander angezeigt.
gap: 4px: Zwischen jedem Stern ist etwas Abstand.

‍

.reviews_rating-icon {
  width: 24px;
  height: 24px;
  background-color: #ccc; /* grau als Grundfarbe */
  clip-path: polygon(50% 0%, 61% 38%, 98% 38%, 68% 59%, 79% 91%, 50% 70%, 21% 91%, 32% 59%, 2% 38%, 39% 38%);
  background-repeat: no-repeat;
  background-size: 100%;
}

background-color: #ccc: Die Grundfarbe aller Sterne ist grau (für „leer“).
clip-path: Formt das div in ein Sternsymbol – ganz ohne Bilddatei oder SVG.
Jeder Stern ist ein einfaches div mit fixer Größe.
background-size: 100% sorgt dafür, dass der Stern gleichmäßig gefüllt wird.

‍

JavaScript: Dynamische Füllung berechnen

‍

document.querySelectorAll('.reviews_rating-wrapper').forEach(wrapper => {
  const rating = parseFloat(wrapper.getAttribute('data-rating'));
  const stars = wrapper.querySelectorAll('.reviews_rating-icon');

Für jedes .reviews_rating-wrapper wird der data-rating-Wert ausgelesen (z. B. 3.75).
Dann holen wir die 5 Stern-Divs, die sich im Wrapper befinden.

‍

  stars.forEach((star, index) => {
    const starIndex = index + 1;
    const fill = Math.min(Math.max(rating - index, 0), 1); // Wert von 0 bis 1
    const fillPercent = Math.round(fill * 100); // z. B. 0.75 → 75%

Für jeden Stern wird berechnet, wie viel davon gefüllt werden soll:
- 1.0 = 100 % gefüllt (voller Stern)
- 0.5 = 50 % gefüllt (halber Stern)
- 0.0 = leerer Stern

‍

    star.style.backgroundImage = `linear-gradient(90deg, #FFC107 ${fillPercent}%, #ccc ${fillPercent}%)`;
  });
});

Mit linear-gradient wird die linke Seite gelb gefärbt (#FFC107) und der Rest bleibt grau (#ccc).
Dadurch wirkt der Stern anteilig gefüllt – z. B. zu 20%, 75% oder komplett.

‍

Das CSS sorgt für die Optik, das JavaScript übernimmt die Logik. Die Sterne passen sich exakt an den CMS-Wert an und das ganz ohne Klassen oder zusätzliche Markup-Strukturen.

‍

Konfiguration

Farbe ändern? Ersetze #FFC107 (gelb) durch deine Wunschfarbe
Anzahl Sterne? Einfach mehr oder weniger div.reviews_rating-icon hinzufügen
Sternform? Andere clip-path-Werte oder Icons verwenden

‍

Fazit

Mit dieser Lösung kannst du präzise und visuell überzeugende Sternebewertungen aus deinem CMS anzeigen – ohne Kompromisse bei halben Sternen. Es ist einfach, sauber und flexibel anpassbar.

‍