Wie kann ich in Tilda benutzerdefinierte CSS-Regeln hinzufügen?
- Einleitung
- Benutzerdefiniertes CSS im Seiteneinstellungen-Bereich
- CSS in den Block-Einstellungen einfügen
- CSS im globalen Projekt- oder Website-Einstellungen-Bereich
- Eigenständiges CSS in einem HTML-Block
- Speichern und Veröffentlichen der Änderungen
- Zusammenfassung
Einleitung
In Tilda, einem beliebten Website-Builder, ist es möglich, das Aussehen einer Seite durch benutzerdefinierte CSS-Regeln individuell zu gestalten. Durch das Hinzufügen eigener CSS-Anweisungen kannst du Designs anpassen, die mit den Standard-Optionen nicht erreichbar sind. Dieser Leitfaden erklärt dir Schritt für Schritt, wie du benutzerdefinierte CSS-Regeln in Tilda einfügst.
Benutzerdefiniertes CSS im Seiteneinstellungen-Bereich
Zunächst kannst du benutzerdefiniertes CSS direkt in den Einstellungen der jeweiligen Seite hinzufügen. Öffne dazu in Tilda den Projekt-Editor und wähle die Seite aus, die du anpassen möchtest. Klicke anschließend auf das Zahnrad-Symbol, um die Seiteneinstellungen zu öffnen. Dort findest du den Bereich Zusätzliches CSS oder Custom CSS. In dieses Feld kannst du deine CSS-Regeln direkt eingeben. Diese Regeln gelten nur für die ausgewählte Seite. Nach Eingabe der CSS-Anweisungen und Speichern werden die Änderungen automatisch auf der Seite wirksam.
CSS in den Block-Einstellungen einfügen
Wenn du eine spezifische Anpassung nur für einen einzelnen Block innerhalb der Seite vornehmen möchtest, kannst du dies auch auf Block-Ebene tun. Im Editor wählst du hierfür den betreffenden Block aus und klickst auf das Zahnrad-, oder Einstellungen-Symbol des Blocks. In den erweiterten Optionen gibt es oft ein Feld namens Zusätzliches CSS oder ähnlich, wo du den CSS-Code nur auf diesen Block anwenden kannst. Das ist besonders praktisch, wenn deine Anpassungen nur begrenzt wirken sollen und du die Übersichtlichkeit behältst.
CSS im globalen Projekt- oder Website-Einstellungen-Bereich
Willst du eine CSS-Regel global für die gesamte Website oder für alle Seiten eines Projektes erstellen, so bietet Tilda auch hierfür eine Lösung. Im Projekt-Menü kannst du die Einstellungen öffnen und dort den Bereich für globales benutzerdefiniertes CSS finden. Dort eingefügter CSS-Code wird auf jede Seite des Projekts angewendet, was eine einheitliche Gestaltung über die gesamte Website hinweg gewährleistet.
Eigenständiges CSS in einem HTML-Block
Eine weitere Möglichkeit, benutzerdefiniertes CSS hinzuzufügen, ist das Einfügen eines HTML-Blocks in deine Seite. Hier kannst du ein <style>-Tag verwenden, um deine CSS-Regeln direkt in den Inhalt einzugliedern. Füge den HTML-Block an die gewünschte Stelle in deiner Seite und schreibe deine CSS-Regeln in folgendem Format:
<style> /* Deine CSS-Regeln hier */ .meine-klasse { color: #ff0000; font-weight: bold; }</style>Diese Methode ist flexibel, sollte aber mit Bedacht eingesetzt werden, um die Übersicht zu behalten. Außerdem können CSS-Regeln in HTML-Blöcken eine höhere Spezifität haben, was manchmal helfen kann, wenn andere Regeln überschrieben werden sollen.
Speichern und Veröffentlichen der Änderungen
Nachdem du deine benutzerdefinierten CSS-Regeln hinzugefügt hast, solltest du die Eingaben speichern und die Seite neu laden oder veröffentlichen, damit die Änderungen sichtbar werden. Tilda generiert die fertige Seite mit den aktuellen CSS-Anweisungen, sodass dein individuelles Styling angezeigt wird. Teste deine Seite anschließend in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass das Styling wie gewünscht funktioniert.
Zusammenfassung
Das Hinzufügen von benutzerdefiniertem CSS in Tilda ist über verschiedene Wege möglich: page-spezifisch im Seiteneinstellungen-Bereich, block-spezifisch in den Blockeinstellungen, global im Projekt- oder Website-Einstellungen-Bereich oder durch Einfügen eines HTML-Blocks mit einem Style-Tag. Je nach Anwendungsfall kannst du den für dich passenden Weg wählen, um das Design deiner Website effizient anzupassen.