Webflow Textmarkierung in deiner Brandfarbe einstellen

Kurz vorweg

Ich feier grad kurz mit dir mit, denn ich darf mich jetzt offiziell zertifizierte Webflow-Partnerin nennen. Und weil ich schon dabei bin, zeige ich dir zur Feier des Tages einen kleinen Custom-Code-Trick, den kaum jemand einbaut, der aber jedes Mal einen kleinen Aha-Moment auslöst.

Mal angenommen, jemand markiert auf deiner Website einen Satz, weil er ihn sich merken oder zitieren will. Wat passiert dann? Bei den allermeisten Seiten: Standard-Blau, irgendein System-Grau, komplett generisch. Bei deiner Seite könnte da stattdessen genau deine Brandfarbe aufleuchten. Ein Detail, das niemand erwartet und das trotzdem hängen bleibt.

Genau das zeige ich dir jetzt: wie du mit ein paar Zeilen Custom Code in Webflow einstellst, dass jede Textmarkierung auf deiner Website in deiner eigenen Farbe erscheint, sowohl für die ganze Seite als auch nur für einzelne Unterseiten.

Was ist die Textmarkierung eigentlich und warum lohnt sich das

Wenn du mit der Maus über einen Text ziehst, um ihn zu markieren, greift im Hintergrund ein CSS-Pseudo-Element namens ::selection. Es bestimmt, wie markierter Text aussieht, welche Hintergrundfarbe er bekommt und welche Schriftfarbe. Ohne eigene Einstellung nutzt der Browser dafür sein Standarddesign, meistens dieses bekannte Hellblau.

Auf meiner eigenen Website habe ich das so eingestellt, dass jede Markierung in meinem Gelb erscheint, kombiniert mit einem sehr dunklen, fast schwarzen Braun als Schrift. Egal ob jemand auf der Startseite einen Satz markiert oder in einem Blogartikel eine Textstelle rauszieht, es taucht immer dieselbe Farbkombination auf. Checke einmal selbst, wie sich das anfühlt: Du gehst auf eine Seite, markierst versehentlich einen Satz, und plötzlich siehst du ein kleines Stück Wiedererkennung, das eigentlich niemand einbaut.

Über Conversions oder Rankings entscheidet dieser Trick nicht, ganz ehrlich. Aber er zeigt, dass hinter der Website jemand sitzt, der bis in die letzte Ecke mitgedacht hat, und genau das bleibt hängen.

5 Dinge die eine gute Startseite wirklich braucht →

Das brauchst du, bevor du startest

Für diesen Trick brauchst du kein einziges Plugin und keine Zeile Programmiererfahrung. Du brauchst nur drei Dinge:

• Zugriff auf dein Webflow-Projekt mit den passenden Rechten für Site Settings
• Deine Brandfarben als Hexcode, also zum Beispiel #FFDC37 für Gelb und #1C1807 für ein dunkles Braun
• Einen Site-Plan, der Custom Code beim Veröffentlichen unterstützt (bei den meisten kostenpflichtigen Webflow-Plänen ist das automatisch der Fall)

Falls du deine Brandfarben noch nicht als Hexcode zur Hand hast, zeige ich dir gleich im nächsten Abschnitt, wie du sie dir mit einem Farbpipetten-Tool ganz einfach besorgst, auch wenn du gerade nur ein Referenzbild oder eine bereits bestehende Seite vor dir hast.

Schritt für Schritt: Textmarkierung global einstellen

So richtest du die Textmarkierung für deine komplette Website ein, Seite für Seite, ohne dass du das irgendwo einzeln wiederholen musst.

1. Logg dich in dein Webflow-Konto ein und öffne das gewünschte Projekt aus deinem Dashboard.
2. Geh oben links auf Site Settings.
3. Wechsle im Menü zu Custom Code.
4. Du siehst dort zwei Felder, einmal für den Head Code und einmal für den Footer Code. Für die Textmarkierung brauchst du den Head Code.
5. Füg dort folgenden Code ein:

<style>
  ::selection {
    background-color: #FFDC37;
    color: #1C1807;
  }
  ::-moz-selection {
    background-color: #FFDC37;
    color: #1C1807;
  }
</style>

‍

Die zweite Regel mit ::-moz-selection ist kein Tippfehler, sondern sorgt dafür, dass die Einstellung auch in Firefox greift. Manche Browser brauchen diesen zusätzlichen Selektor, damit die Formatierung wirklich überall ankommt.

6. Ersetz die beiden Hexcodes durch deine eigenen Brandfarben. background-color ist die Farbe hinter dem markierten Text, color ist die Schriftfarbe darüber.
7. Klick auf Speichern und veröffentlich deine Website danach neu, damit die Änderung live geht.
8. Öffne deine Website, markier irgendeinen Text auf einer beliebigen Unterseite und checke, ob deine Brandfarbe erscheint.

Sobald der Code im globalen Head Code deiner Site Settings liegt, gilt er automatisch für jede Seite deines Projekts, auch für neue Seiten, die du später noch anlegst.

Mit der Farbpipette zur exakten Brandfarbe

Wenn du deine Hexcodes noch nicht griffbereit hast, arbeite ich am liebsten mit einem Farbpipetten-Tool. Damit ziehst du dir die exakte Farbe direkt von einem bestehenden Element, zum Beispiel deinem Logo, einem Button oder einer Grafik, die schon in deiner Marke gehalten ist.

Pixeur Tool

So gehst du dabei vor:

1. Öffne das Farbpipetten-Tool und richte es auf die Stelle, deren Farbe du übernehmen willst, zum Beispiel dein Logo oder ein Element mit deiner Akzentfarbe.
2. Zieh dir den Hexcode, den dir das Tool anzeigt.
3. Wechsle zurück in deine Webflow Site Settings, in den Custom-Code-Bereich.
4. Trag den Hexcode bei background-color ein.
5. Wiederhol das Ganze für die Schriftfarbe, die du bei color einträgst, zum Beispiel Weiß oder ein dunkler Kontrastton.
6. Speichern, veröffentlichen, Seite neu laden und testen.

Ein Beispiel aus einem meiner Kundenprojekte: Dort sollte die Markierung einen dunkelgrünen Hintergrund mit weißer Schrift bekommen, weil genau diese Farbkombination im gesamten Branding der Kundin auftaucht. Sobald ich den Code veröffentlicht hatte, zog sich diese Farbkombination über die komplette Website, egal auf welcher Unterseite jemand gerade markierte.

Was ist eine Website wirklich →

Textmarkierung nur auf einzelnen Seiten einstellen

Nicht jede Website soll die Textmarkierung überall gleich haben. Vielleicht willst du deine Startseite unangetastet lassen und nur bei einer bestimmten Unterseite, zum Beispiel einer Trainings- oder Kursseite, mit der Markierungsfarbe arbeiten. Auch das lässt sich in Webflow gezielt steuern, ganz ohne den globalen Code zu verändern.

1. Öffne dein Webflow-Projekt und geh in den Pages-Bereich (in der Seitenleiste als Open Site beziehungsweise Seitenübersicht zu finden).
2. Wähl die Seite aus, auf der die Textmarkierung greifen soll, und öffne über das Zahnrad-Symbol die Page Settings.
3. Scroll runter bis zum Bereich Custom Code dieser einzelnen Seite.
4. Füg denselben ::selection-Code wie oben in das Head Code-Feld dieser Seite ein.
5. Speichern, veröffentlichen, und die Seite im Browser neu laden.

Wichtig dabei: Dieser Code gilt jetzt ausschließlich für die eine Seite, auf der du ihn eingetragen hast. Alle anderen Seiten bleiben unverändert, solange dort kein globaler Code im Site-weiten Head hinterlegt ist. So lässt sich zum Beispiel die Startseite bewusst neutral halten und nur bei einer Kampagnen- oder Trainingsseite mit der Markierungsfarbe arbeiten.

Falls du später doch willst, dass die Markierung wieder überall greift, reicht es, den Code aus dem Site-weiten Head Code in den Site Settings einzutragen und ihn bei Bedarf von den einzelnen Seiten wieder zu entfernen, damit du nicht doppelt arbeitest.

Warum sich diese Kleinigkeit für deine Marke lohnt

Ich sag dir wat: Niemand kommt auf deine Seite, weil die Textmarkierung gelb ist. Aber wer beim Lesen zufällig einen Satz markiert und dabei genau deine Farben sieht, merkt sich das, meistens ohne selbst zu wissen warum.

Diese Art von Feinschliff macht nicht jede und nicht jeder. Ich baue solche Details bei fast jedem Projekt mit ein. Am Ende sind es oft genau diese Kleinigkeiten, wegen denen sich eine Website nach der Person dahinter anfühlt und nicht nach dem hundertsten Template von der Stange.

Webflow für Einsteiger, so startest du kostenlos →

Lass uns deine Website noch runder machen

Kleine Details wie die Textmarkierung sind genau das, was ich an Webflow liebe. Du hast die volle Kontrolle über jede Ecke deiner Website, ohne dich durch Plugin-Wirrwarr kämpfen zu müssen. Wenn du magst, zeig mir dein Ergebnis gerne in den Kommentaren unter dem Video, ich freu mich zu sehen, in welcher Farbe deine Website jetzt aufleuchtet.

Wenn du merkst, dass an deiner Webflow-Website noch mehr solcher Feinheiten fehlen, oder du gar nicht weißt, wo du anfangen sollst: Ich bin zertifizierte Webflow-Partnerin und helfe dir genau bei so was. Buch dir ein unverbindliches Erstgespräch, dann schauen wir gemeinsam drauf.

Und falls du künftig keine Webflow-Tutorials mehr verpassen willst: Abonnier gerne meinen YouTube-Kanal, dort zeig ich in Zukunft wieder regelmäßiger solche kleinen und größeren Webflow-Tricks. Schreib mir in die Kommentare, welches Thema dir schwerfällt oder was du dir als nächstes Tutorial wünschst, ich sammle das für die nächsten Videos.