Webflow CMS Rich-Text Bullet Liste mit SVG Icons

Wie du benutzerdefinierte Icons in Webflow Rich Text Listen integrierst

Möchtest du in deinen Webflow-Projekten die standardmäßigen Aufzählungspunkte durch individuelle Icons ersetzen, beispielsweise durch ein Check-Icon? In diesem Tutorial zeige ich dir, wie du genau das erreichst, indem du ein Rich Text Element verwendest und ein wenig CSS-Code hinzufügst. Diese Methode ist nicht nur flexibler, sondern auch besser für die Barrierefreiheit und spart CMS-Felder ein.

Warum Rich Text Listen mit benutzerdefinierten Icons verwenden?

In vielen Fällen fügen wir Features oder Inhalte als einzelne Komponenten in unsere Webflow-Projekte ein. Das führt jedoch schnell dazu, dass wir viele CMS-Felder benötigen und an die Grenzen von Webflow stoßen. Außerdem ist es unflexibel, wenn die Anzahl der Features variiert. Mit einer Rich Text Liste kannst du beliebig viele Einträge hinzufügen, ohne zusätzliche Felder zu benötigen.

Schritt 1: Rich Text Feld im CMS einrichten

1. Öffne dein CMS und wähle die entsprechende Collection (z. B. "Produkte") aus.
2. Füge ein neues Feld hinzu und wähle Rich Text als Feldtyp.
3. Benenne das Feld, z. B. "Checkliste".
4. Speichere die Änderungen und platziere das Feld an der gewünschten Stelle in der Collection.

Schritt 2: Inhalte zur Rich Text Liste hinzufügen

1. Öffne einen Eintrag in deiner CMS Collection und scrolle zum neuen Rich Text Feld.
2. Erstelle eine ungeordnete Liste (Bullet List) innerhalb des Feldes.
3. Füge deine Listenelemente hinzu, indem du sie manuell eingibst oder aus einer Vorlage kopierst.
4. Speichere den Eintrag.

Schritt 3: Rich Text Element im Designer verknüpfen

1. Wechsle zum Designer und füge ein Rich Text Element an der gewünschten Stelle ein.
2. Verknüpfe das Rich Text Element mit dem entsprechenden CMS-Feld unter den Settings.
3. Beachte, dass du nun die Listenelemente nicht mehr einzeln auswählen kannst, da sie aus dem CMS kommen.

Schritt 4: Eigene Klasse für das Rich Text Element erstellen

1. Gib dem Rich Text Element eine neue spezifische Klasse, z. B. checklist-rich-text.
2. Vermeide, deine allgemeine Rich Text Klasse zu verwenden, um Konflikte mit anderen Styles zu verhindern.

Schritt 5: Listenelemente innerhalb der Klasse stylen

1. Klicke auf ein Listenelement innerhalb des Rich Text Elements.
2. Erstelle eine verschachtelte Klasse, indem du "All Unordered Lists" innerhalb von .checklist-rich-text auswählst.
3. Setze die Textformatierung auf "Inherit" oder 1em, damit die Schriftgröße und -farbe vom Elternelement übernommen wird.

Schritt 6: Schriftgröße und -farbe vererben

1. Umschließe das Rich Text Element mit einem Div Block.
2. Gib dem Div Block deine Textklasse, z. B. copy-small oder heading-4 um die Größe der Listenelemente zu definieren.
3. Überprüfe, dass die Listenelemente die Schriftgröße und -farbe vom Div Block erben.

Schritt 7: Bullet Points durch Icons ersetzen

Jetzt kommt der spannende Teil: Wir ersetzen die standardmäßigen Bullet Points durch ein benutzerdefiniertes Icon.

CSS-Code hinzufügen

1. Füge ein Embed Element direkt unter dem Rich Text Element ein.
2. Kopiere den CSS-Code aus der Trick-Kiste.
3. Ersetze den Platzhalter durch den SVG-Code deines gewünschten Icons.

Eigenes SVG-Icon verwenden

1. Erstelle oder wähle ein SVG-Icon aus, z. B. ein Check-Icon.
2. Kopiere den SVG-Code und komprimiere ihn ggf. mit einem SVG-Kompressor.
3. Füge den komprimierten SVG-Code in den CSS-Code ein, wie im Video gezeigt.

Schritt 8: Anpassungen vornehmen

1. Passe die CSS-Werte für left, top, width und height an, um das Icon korrekt zu positionieren.
2. Überprüfe die Darstellung, insbesondere wenn du unterschiedliche Schriftgrößen oder -arten verwendest.

Schritt 9: Globalen CSS-Code verwenden

1. Verschiebe den CSS-Code aus dem Embed Element in den globalen Custom Code Bereich deines Projekts (z. B. in der Navigation).
2. Stelle sicher, dass die Styles auf allen Seiten verfügbar sind, die die Klasse .checklist-rich-text verwenden.

Fazit

Mit dieser Methode kannst du flexibel und effizient individuelle Icons in deinen Rich Text Listen verwenden. Du sparst CMS-Felder, verbesserst die Barrierefreiheit und kannst das Styling zentral steuern.

Möchtest du den vollständigen CSS-Code und weitere exklusive Tipps erhalten?

Dann schau dir meine Webflow Trick-Kiste auf Formburg an! Dort teile ich spezielle Codes, Anleitungen und Insider-Wissen rund um Webflow, die dir helfen, deine Projekte auf das nächste Level zu bringen.