Designsystem
Gemeinsame Klassen.
Geben Sie Elementen eine Klasse wie „card“ und gestalten Sie die Klasse einmal. Jedes Element mit dieser Klasse auf der ganzen Website folgt.
Der Tab Advanced: Klassen des ausgewählten Elements
Eine Klasse ist ein benannter Stil, der auf der ganzen Website gemeinsam genutzt wird. Sie ist das richtige Werkzeug, wann immer sich dasselbe Aussehen wiederholt – Karten, Labels, ein dunkles Band.
Eine Klasse verwenden
- Wählen Sie ein Element aus und öffnen Sie den Tab Advanced.
- Geben Sie unter Classes einen Namen ein (zum Beispiel
card) und klicken Sie auf Add. Vorhandene Klassen werden bei der Eingabe vorgeschlagen. - Klicken Sie auf die Klasse, um ihren Stil zu bearbeiten. Das Panel zeigt, wo die Klasse verwendet wird; speichern Sie sie, und die Änderung gilt für jedes Element mit dieser Klasse auf jeder Seite – sofort, ohne Veröffentlichen.
Eine Klasse hat eigene Zustände für Desktop, Tablet, Mobil und Hover. Ein Element kann mehrere Klassen haben, und sein eigener Stil hat weiterhin Vorrang vor der Klasse. Nur Administratoren bearbeiten gemeinsame Klassen; Redakteure können vorhandene zuweisen.
Im Tab Advanced legen Sie außerdem einen Anker des Elements fest (eine id für #links) sowie zusätzliches CSS und Attribute genau dieses Elements.
Klassen und Claude
Claude kann Klassen über MCP auflisten und speichern (list_classes, save_classes) – aus gewöhnlichen CSS-Regeln wie .card { … }, .card:hover { … } und @media (max-width: 767px). Eine Änderung an einer Klasse gilt sofort für die ganze Website.