Wie du in Squarespace den Abstand zwischen Überschriften und Text änderst
Als ich mit Squarespace meine erste Website erstellt hatte, ist mir sofort dieser große Abstand zwischen Überschriften und Absätzen aufgefallen. Das hat mir von Anfang an überhaupt nicht gefallen. Und ich wette, dir geht es genau so!
Du hast endlich deine Squarespace-Website am Start, aber dann springt dir dieser riesige Abstand zwischen deinen Überschriften und den Texten ins Auge – und du denkst dir nur: "Why, Squarespace, why?!" 😩
Keine Sorge, ich hab’ die Lösung für dich!
In diesem Artikel zeige ich dir, wie du mit ein wenig CSS (keine Panik, das klingt nerdiger, als es ist) den Abstand anpassen kannst. Egal, ob du’s kompakter oder luftiger willst, am Ende weißt du, wie es geht.
Und hey, falls dir das hier gefällt, abonnier meinen Newsletter. So bleibst du immer up to date mit den neuesten Squarespace-Hacks. Deal? 😉
Los geht’s!
1. Vorbereitung: Style Guide einrichten
Bevor wir loslegen, ein kleiner Pro-Tipp: Eine Style Guide-Seite ist ein echter Game-Changer. Aber was ist das überhaupt?
Der Plan:
Eine Style Guide-Seite ist wie der perfekte Ort, um alle Überschriften (H1, H2, H3, H4) und Textabsätze auf einen Blick zu sehen. Das ist superpraktisch, wenn du mit Code arbeitest, weil du sofort checken kannst, was sich ändert.
👉 In diesem Artikel zeige ich dir, wie du den Style Guide einrichtest.
2. Den Abstand mit CSS anpassen
Jetzt wird’s spannend – let’s talk CSS! Keine Sorge, das klingt komplizierter, als es ist. Squarespace hat nämlich eine Funktion, mit der du benutzerdefinierten Code hinzufügen kannst.
So findest du die Einstellung:
Klick im Backend auf die kleine Lupe.
Tipp „CSS“ in die Suchleiste ein.
Zack, da ist sie – die magische „Benutzerdefinierte CSS“-Box!
Und hier kommt der Code:
Füge folgenden Code ein, um den Abstand zwischen deinen Headings (H1, H2, H3, H4) und dem nächsten Absatz zu ändern:
h1, h2, h3, h4 {
margin-bottom: -0.5rem;
}
Das macht der Code:
„Margin-Bottom“ beschreibt den Abstand unterhalb der Überschriften.
Der Wert „-0.5rem“ macht den Abstand kleiner. Willst du’s luftiger? Probier einfach „1rem“ oder mehr.
Pro-Tipp: durch einen Style Guide wird dir die Änderungen direkt angezeigt, also kannst du ein bisschen rumspielen. Das macht sogar Spaß!
3. Abstände für einzelne Überschriften anpassen
Du willst nur bestimmte Überschriften anpassen? Kein Problem, wir machen das individuell – H1 bis H4 können ihre eigenen Abstände bekommen.
Beispiel: Nur H1 und H2 ändern? Easy:
h1, h2 {
margin-bottom: -0.5rem;
}
Und für H3 und H4:
h3, h4 {
margin-bottom: -0.3rem;
}
Mit ein bisschen Copy-Paste kannst du für jede Headline den perfekten Look kreieren. Mach’s so minimalistisch oder extra wie du willst. Wichtig ist, dass es ausgewogen aussieht.
4. Testen und Feinjustieren
Jetzt, wo der Code drin ist, schau dir alles in Ruhe an. Ist der Abstand genau so, wie du’s willst? Nein? Dann tweak die Werte, bis alles passt.
Pro-Tipp: Wenn du den Abstand auf einer bestehenden Seite einstellst, rate ich dir die gesamte Website noch mal anzuschauen, da sich eventuelle Textblöcke verschoben haben.
Fazit
Du hast es geschafft! Mit ein paar Zeilen CSS bringst du Ordnung in die Abstände deiner Squarespace-Überschriften. Kein überflüssiger Space mehr, dafür alles genau so, wie du’s magst.
Und hey, wenn dir das hier gefallen hat, schau mal in meinen Newsletter! Da teile ich regelmäßig Tipps, Tricks und Updates zu Squarespace. Den Link findest du unten in der Beschreibung.
Mach’s gut und viel Spaß beim Stylen deiner Squarespace Website!
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!
