So richtest du für einzelne Überschriften einen farbigen Hintergrund ein

May 2, 2020 Victoria Weber & Team

Möchtest du gerne einen Teil deiner Texte oder Überschriften bei Squarespace mit farbigem Hintergrund versehen?

Mit ein paar wenigen CSS-Einstellungen geht das ganz leicht!

Falls du noch nicht weißt, wie CSS bei Squarespace funktioniert und was das ist, schau dir kurz den oberen Teil meines Artikels über CSS-Einstellungen an.

Jetzt zeige ich dir, wie du Überschriften oder anderen Text bei Squarespace farbig unterlegt.

Los geht’s!

See this content in the original post

👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥

So markierst du deine Texte “wie mit einem Textmarker”

Als Erstes kommen hier zwei Bilder, damit du siehst, worum es hier überhaupt geht. Und zwar siehst du hier zunächst einen Website-Ausschnitt, bei dem kein Text markiert ist - und dann einen zweiten, bei dem die Überschrift rosa unterlegt ist:

Vorher: Schwarzer Text auf rosa Hintergrund.

Nachher: Mit ein bisschen CSS kannst du beliebige Textteile bei Squarespace farbig unterlegen.

Von der Optik wirkt das also so, als hätte man einen Textmarker genommen und (natürlich überdurchschnittlich säuberlich) die wichtigsten Teile markiert.

So richtest du die “Textmarker”-Einstellung für Überschriften bei Squarespace ein

Wenn diese Stilart für die ganze Website gelten soll, geht das sehr leicht.

Alles, was du machen musst, ist den folgenden Code in dein CSS-Feld (beim Squarespace-Hauptmenü unter Design > Benutzerdefiniertes CSS) zu kopieren:

//Hintergrundfarbe für Text

h1 {

color: #ffffff;

display: inline;

background: #FFB3BF;

box-shadow: 10px 0 0 #FFB3BF, -10px 0 0 #FFB3BF;

-webkit-box-decoration-break: clone;

-o-box-decoration-break: clone; box-decoration-break: clone;

}

Dabei steht h1 für “Überschrift 1” - wenn du also stattdessen möchtest, dass Überschrift 2 verändert wird, dann ändere h1 zu h2.

Color steht für die Farbe, die der Text haben soll, und background für die Farbe, die der Hintergrund bzw. die Untermalung haben soll.

Das, was hinter dem # steht, ist der HEX-Code für die Farbe, mit der untermalt werden soll (hier pink). Wenn du eine weißen Untergrund möchtest, nimmst du dann einfach #FFFFFF und so weiter.

Die Zeile mit box-shadow sorgt übrigens dafür, dass der Hintergrund über die Worte hinaus geht. Wenn du nur willst, dass die Untermalung nur genau das Wort untermalt, lass diesen Abschnitt weg. Wenn du möchtest, dass der Hintergrund nur knapp über das Wort hinausgeht, verkleinere den Wert (zum Beispiel von 10px zu 8px).

Alles mit “clone” sorgt dafür, dass der Befehl auch für Browser wie Firefox korrekt angezeigt wird. Das solltest du also lassen.

See this content in the original post

Was, wenn du nur einen bestimmten Bereich so unterlegen willst? Also nicht auf allen Seiten?

Auch das ist kein Problem.

Oft kommt es vor, dass man nur einzelne Sätze, zum Beispiel auf einem Banner auf der Startseite, farbig untermalen möchte.

Dazu nimmst du anstatt eines Textblocks einen Code-Block, und fügst ihn in deine Seite ein:

Im Kästchen, das sich dann öffnet, fügst du das Folgende ein:

<h1><span>Deine Überschrift</span></h1>

Dann gehst du bei Squarespace links zu Design > Benutzerdefiniertes CSS und gibst den folgenden Code an:

h1 {

color: #ffffff;

background: #FFB3BF;

box-shadow: 10px 0 0 #FFB3BF, -10px 0 0 #FFB3BF;

}

Teste dies am besten auf mehreren Browsern. Falls der Befehl mit Mozilla Firefox nicht funktioniert, füge den Teil von oben, in dem “clone” vorkommt, hinzu. Dann sollte alles funktionieren!

Du startest gerade erst? Teste Squarespace hier 14 Tage lang gratis & hol dir mit dem Code VICTORIA10 10% Rabatt auf dein erstes Jahr (Das ist natürlich Werbung für meinen Liebling Squarespace)

Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.

Eine andere Möglichkeit: Neue Klassen vergeben

Es kann natürlich auch sein, dass du nicht nur einen einzigen Teil untermalen möchtest, sondern dasselbe auf verschiedenen Seiten im “Textmarker”-Style haben willst.

Zum Beispiel möchtest du eine Überschriften-2-Gruppe haben, die zentriert ist.

Dann hast du die Möglichkeit, eine neue sogenannte “Klasse” zu vergeben. Dazu baust du auf der jeweiligen Seite wieder einen Code-Block:

In diesem Beispiel ist das mit Überschrift 2 angewendet (h2), du kannst das aber auch für Text (p), Überschrift 1 (h1) oder Überschrift 2 (h2) anwenden.

Damit das aber auch funktioniert, musst du noch in deinen CSS-Einstellungen den “Stil” für deine neue Klasse “Center” eingeben:

Darin ist nun dafür gesorgt, dass der Text auch noch zentriert ist. (text-align: center)

Du kannst jetzt auf allen weiteren Seiten h2 class=”center” verwenden, ohne erneut Einstellungen ändern zu müssen. Sehr praktisch, wenn du ganz viele Bereiche markieren möchtest!

Auch hier gilt, dass du das Ganze für verschiedene Browser testen und evtl. den “clone” Zusatz von ganz oben für die richtige Anzeige bei Mozilla Firefox verwenden solltest. In Deutschland ist schließlich nach Chrome immer noch Firefox vorne!

Falls du Fragen hast, schreib sie unten in die Kommentare.

Keine Lust, solche Einstellungen bei Squarespace selbst zu machen? Schau dir meine Services and und lass mich das für dich erledigen.

Diese Artikel könnten dich auch interessieren: