Zeilenabstand in Squarespace individuell anpassen – So geht's ganz easy!
Hey, schön, dass du hier bist! 👋 Wenn du auch schon mal mit den Standard-Einstellungen von Squarespace gekämpft hast und dachtest: "Warum kann ich Überschriften und Absätze nicht unterschiedlich stylen?", dann bist du hier genau richtig. In diesem Post zeige ich dir, wie du mit ein bisschen CSS deine Zeilenabstände komplett individuell einstellen kannst – schnell und unkompliziert. 🚀
Warum der Standard nicht reicht
Squarespace bietet einen simplen Regler, um den Zeilenabstand global für alle Absätze oder Überschriften zu definieren. Super für Einsteiger, aber manchmal willst du einfach mehr Kontrolle – zum Beispiel für unterschiedliche Textgrößen oder um deinem Design den letzten Feinschliff zu verpassen.
Let’s go: Zeilenabstand mit Code einstellen
Hier kommt die Anleitung! Hol dir einen Kaffee ☕, öffne deine Squarespace-Seite und folge den Steps:
1. Deine Style Guide-Seite
Erstell dir eine Style Guide-Seite, um alles im Blick zu behalten. Das ist quasi deine Spielwiese für alle Design-Experimente. Hier sollten alle Textstile (Überschriften, Absätze etc.) und Buttons sichtbar sein.
👉 Hier findest du die Anleitung zur Style Guide Seite.
2. Zur Orientierung für dich: hier kannst du den Zeilenabstand in Squarespace für Überschriften und Absätze allgemein einstellen:
Klicke auf den Pinsel im Backend.
Navigiere zu Schriften und dann zu Überschriften.
Hier kannst du global die Zeilenhöhe für Überschriften und Absätze einstellen.
3. Individuelle Anpassungen mit CSS
Jetzt wird’s spannend! Du gehst in deine CSS-Bearbeitungsseite:
Suche nach CSS (einfach mit der Lupe im Backend).
2. Kopiere den folgenden Code und füge ihn ein:
/* Absatz 1 */
.sqsrte-large { line-height: 1.5;}
/* Absatz 2 */
p { line-height: 1.8;}
/* Absatz 3 */
.sqsrte-small { line-height: 1.2;}
4. Was bedeutet das genau?
.sqsrte-large: Absatz 1p: Absatz 2.sqsrte-small: Absatz 3
Pro-Tipp: Experimentier ruhig mit den Werten, bis es für dich passt. 👩💻👨💻
Zeilenabstände für Überschriften anpassen
Und jetzt ran an die Headings! Das geht genauso easy:
Ergänze den Code für Überschriften:
Das
!importantsorgt dafür, dass deine Einstellungen die Standardwerte überschreiben. 🎯
/* Überschrift 1 */
h1 { line-height: 1.2 !important;}
/* Überschrift 2 */
h2 { line-height: 1.6 !important;}
/* Überschrift 3 */
h3 { line-height: 1.6 !important;}
/* Überschrift 4 */
h4 { line-height: 1.4 !important;}
Stay organized: Kleine Notizen helfen
Damit du den Überblick behältst, schreib dir kleine Kommentare in den CSS-Code. Zum Beispiel:
/* Individuelle Abstände für Absätze und Überschriften */
Sie sieht der CSS-Code in deinem Fenster dann aus:
Your Turn: Zeilenabstände wie ein Pro!
Das war’s auch schon – mega einfach, oder? Jetzt bist du dran! Probier’s aus! 🙌
Tipp für dich: Komme in meine Facebook-Community und stelle deine Fragen!
Und hey, wenn dir der Artikel geholfen hat, würde ich mich riesig freuen, wenn du ihn teilst.
Bis zum nächsten Mal – stay creative! ✨
Hier findest du die Schritt für Schritt-für-Schritt-Anleitung auf YouTube
Du willst mehr hilfreiche Tipps, rundum deine Business Website und Hacks zu Squarespace?
Trage dich jetzt in meine Newsletter und werde Teil meiner grandiosen Community! In regelmäßigen Abständen erhältst du von mir super nützliche Infos – taufrisch in deinen Posteingang geflattert!
