So ändern Sie die Textfarbe in WordPress (für alle Themes)

Als wir anfingen, WordPress zu nutzen, gingen wir davon aus, dass das Ändern der Textfarbe einfach sein würde. Aber wir stellten schnell fest, dass es je nach Theme, Einstellungen oder dem von Ihnen verwendeten Editor variieren kann.

Nachdem wir Tausenden von Anfängern geholfen haben, ihre WordPress-Websites anzupassen, wissen wir, dass dies für viele Benutzer eine häufige Frustration darstellt.

Die gute Nachricht ist, dass es mehrere einfache Möglichkeiten gibt, die Textfarbe in WordPress zu ändern, unabhängig davon, welches Theme Sie verwenden.

In dieser Schritt-für-Schritt-Anleitung führen wir Sie durch die einfachsten Methoden, um Ihre Textfarbe in WordPress anzupassen.

Warum die Textfarbe in WordPress ändern?

Das Ändern der Textfarbe in WordPress ermöglicht es Ihnen, wichtige Inhalte hervorzuheben, die Lesbarkeit zu verbessern und das Branding Ihrer Website anzupassen.

Sie können beispielsweise einen Call to Action auf einer Landingpage hervorheben oder farbige Unterüberschriften auf Ihrer Website verwenden.

Manchmal möchten Sie vielleicht sogar die Textfarbe auf einer gesamten Website ändern. Zum Beispiel verwendet Ihr WordPress-Theme möglicherweise eine graue Schriftfarbe, aber Sie würden lieber Schwarz für einen besseren Kontrast zu Ihrer Hintergrundfarbe verwenden.

Sie können Farbe auch verwenden, um bei Ihren Besuchern eine Emotion auszulösen. Zum Beispiel glauben viele Menschen, dass Blau ein Gefühl von Vertrauen und Zuverlässigkeit erzeugt.

Weitere Informationen finden Sie in unserem Leitfaden zur Auswahl eines perfekten Farbschemas für Ihre WordPress-Website.

Lassen Sie uns nun sehen, wie Sie die Textfarbe in WordPress ändern können.

Verwenden Sie einfach die folgenden Links, um zu der von Ihnen bevorzugten Methode zu springen:

• Method 1: How to Change Text Color in Block Editor
  • Textfarbe eines Wortes oder Satzes ändern
• Methode 2: Textfarbe im Theme Customizer ändern (nur klassische Themes)
• Methode 3: Textfarbe im Full Site Editor ändern (nur Block-Themes)
• Methode 4: Textfarbe mit CSS-Code ändern (flexibler)
• Methode 5: Textfarbe in einem Page Builder ändern
• Häufig gestellte Fragen zum Ändern der Textfarbe

Methode 1: Textfarbe im Block-Editor ändern

Wenn Sie nur ein paar Wörter, einen Absatz oder eine Überschrift in einem Beitrag ändern möchten, können Sie den WordPress-Inhaltseditor verwenden. Diese Methode funktioniert unabhängig davon, ob Sie ein Block-Theme oder ein klassisches Theme verwenden.

Um zu beginnen, öffnen Sie den Beitrag oder die Seite, auf der Sie die Textfarbe ändern möchten, oder erstellen Sie eine neue Seite.

Wenn Sie dies noch nicht getan haben, geben Sie den Text ein, den Sie anpassen möchten. Je nach Text müssen Sie möglicherweise einen Absatz, eine Überschrift oder einen anderen Block hinzufügen, der Text akzeptiert. Hilfe hierzu finden Sie in unserem Leitfaden zur Verwendung des neuen WordPress-Block-Editors.

Sobald Sie etwas Text haben, sind Sie bereit, dessen Farbe zu ändern.

Die Textfarbe eines Blocks ändern

Für dieses erste Beispiel ändern wir die Textfarbe eines ganzen Blocks. Dies ist eine gute Möglichkeit, einen ganzen Inhaltsbereich hervorzuheben, z. B. einen ganzen Absatz.

Klicken Sie einfach auf den Block und wählen Sie dann im rechten Menü die Registerkarte „Block“ aus.

Sobald Sie dies getan haben, suchen Sie den Abschnitt „Farbe“ und klicken Sie auf „Text“.

Der visuelle Editor zeigt nun einige Farben an, die Ihr WordPress-Theme ergänzen. Sie können einfach auf eine beliebige Farbe klicken, um den gesamten Text innerhalb dieses Blocks zu ändern.

Um eine andere Farbe zu verwenden, klicken Sie einfach auf das Feld oben im Popup.

Dies öffnet eine Auswahl, in der Sie eine neue Schriftfarbe auswählen können.

Eine weitere Option ist die Eingabe eines Hex-Codes, des HTML-Codes für eine bestimmte Farbe. Dies ist nützlich, wenn Sie eine sehr spezifische Farbe verwenden möchten, z. B. den genauen Rotton aus dem Logo Ihrer Website.

Wenn Sie sich nicht sicher sind, welchen Hex-Code Sie verwenden sollen, kann es hilfreich sein, eine Website wie HTML color codes zu besuchen. Hier können Sie verschiedene Farben erkunden und deren Hex-Codes erhalten.

Sobald Sie einen Code haben, fügen Sie ihn entweder in das Feld „Hex“ ein oder tippen Sie ihn ein.

Wenn Sie Ihre Meinung ändern und die Standardtextfarbe wiederherstellen möchten, klicken Sie einfach auf den gepunkteten Button im rechten Menü.

Die angezeigten Optionen variieren je nachdem, ob Sie auch die Hintergrundfarbe des Blocks geändert haben. Möglicherweise müssen Sie daher auf „Text“ oder „Alle zurücksetzen“ klicken.

Textfarbe eines Wortes oder Satzes ändern

Manchmal möchten Sie vielleicht nur die Farbe eines bestimmten Wortes, einer Phrase oder eines Satzes ändern, wie z. B. den Call-to-Action auf Ihrer Squeeze Page.

Um dies zu tun, markieren Sie einfach das Wort oder die Phrase, die Sie im WordPress-Block-Editor ändern möchten. Klicken Sie dann auf den kleinen Pfeil nach unten in der Symbolleiste des Inhaltseditors und klicken Sie auf „Hervorheben“.

Dies öffnet ein Popup-Fenster, das einige Farben anzeigt, die gut zu Ihrem aktuellen Theme passen.

Sie können auch manuell eine Farbe auswählen oder sogar einen Hex-Code verwenden, indem Sie denselben oben beschriebenen Prozess befolgen.

Profi-Tipp: Möchten Sie die Farbe Ihrer Links ändern? Lesen Sie unseren Anfängerleitfaden unter so ändern Sie die Linkfarbe in WordPress.

Methode 2: Textfarbe im Theme Customizer ändern (Nur klassische Themes)

Farbe kann die Aufmerksamkeit auf die wichtigsten Inhalte einer Seite lenken, aber viele verschiedene Farben können überwältigend sein. Vor diesem Hintergrund möchten Sie normalerweise die gleiche Textfarbe auf den meisten Ihrer WordPress-Website verwenden.

Jede Seite und jeder Beitrag manuell mit dem Block-Editor zu ändern, würde lange dauern. Stattdessen empfehlen wir, das Theme selbst mit dem Theme Customizer zu ändern.

Hinweis: Wenn der Theme Customizer fehlt, verwenden Sie wahrscheinlich ein Block-Theme und können zu Methode 3 springen.

Um zu beginnen, gehen Sie zu Darstellung » Anpassen.

Sie müssen nun die Texteinstellungen des Themes finden. Jedes Theme ist anders, aber Sie müssen normalerweise nach einer Option namens „Typografie“ suchen.

In unseren Bildern verwenden wir OceanWP.

Klicken Sie auf die Einstellung 'Typografie' oder eine ähnliche Einstellung. An diesem Punkt sehen Sie normalerweise alle verschiedenen Textarten, die im Theme verwendet werden, wie z. B. Überschrift 1 und Seitentitel.

Um den Text in Ihren Beiträgen und Seiten zu ändern, klicken Sie auf den Abschnitt „Body“ oder einen ähnlichen Abschnitt.

Um die Textfarbe anzupassen, suchen Sie den Abschnitt „Schriftfarbe“.

Klicken Sie dann auf 'Farbe auswählen'.

Dies öffnet den Picker. Sie können entweder eine der vorgefertigten Farben verwenden, eine neue Farbe über die Einstellungen auswählen oder einen Hex-Code eingeben.

Wenn Sie die Standardfarbe des Themes jederzeit wiederherstellen möchten, klicken Sie einfach auf „Standard“.

Sie können diese Einstellungen auch verwenden, um die Schriftgröße, den Stil, den Buchstabenabstand und mehr zu ändern.

Wenn Sie mit dem Aussehen des Textes zufrieden sind, klicken Sie oben auf dem Bildschirm auf die Schaltfläche „Veröffentlichen“.

Methode 3: Textfarbe im Full Site Editor ändern (nur Block-Themes)

Wenn Sie ein blockbasiertes Theme wie ThemeIsle Hestia Pro oder Twenty Twenty-Three verwenden, ist der Prozess der Änderung der Textfarbe des Themes etwas anders.

Um den Text mit dem Full Site Editor anzupassen, gehen Sie zu Themes » Editor.

Nun sehen Sie mehrere Menüs, um das Erscheinungsbild Ihrer Website anzupassen.

Hier möchten Sie 'Styles' auswählen. Dieser Abschnitt definiert die globalen Farben, Typografie und das Layout für Ihre Website.

Auf dem nächsten Bildschirm sehen Sie einige Stil-Kombinationen zur Auswahl. Wenn Sie das Aussehen Ihres Block-Themes komplett ändern möchten, können Sie einfach eine der verfügbaren Optionen auswählen.

Aber zu Demonstrationszwecken klicken wir auf den Stift „Stile bearbeiten“.

Sie gelangen nun zum Full Site Editor, und der Tab „Stile“ wird geöffnet.

Klicken wir auf „Farben“.

Die Seitenleiste zeigt Ihnen einige Elemente an, deren Farbeinstellungen Sie ändern können, wie z. B. Text, Links, Bildunterschriften, Schaltflächen und Überschriften.

Jeder wird unterschiedliche Farbeinstellungen haben, erkunden Sie diese also, um zu sehen, was sie können.

Nehmen wir ein Beispiel, indem wir auf „Überschrift“ klicken.

Um die Überschriftenfarbe zu ändern, können Sie entweder eine der vordefinierten Theme-Farben auswählen oder eine benutzerdefinierte Farbe verwenden, indem Sie auf den Farbwähler klicken.

Wenn Sie mit dem Aussehen Ihrer Textfarben zufrieden sind, klicken Sie einfach auf die Schaltfläche „Speichern“. Alle von Ihnen vorgenommenen Änderungen werden dann auf all Ihren Seiten und Beiträgen angewendet.

Weitere Informationen finden Sie in unserem Anfängerleitfaden zu WordPress Full Site Editing.

Methode 4: Textfarbe mit CSS-Code ändern (Anpassbarer)

Wenn Sie mehr Kontrolle über die Textfarben Ihrer Website wünschen oder ein Element ändern müssen, das in Ihren Theme-Einstellungen nicht verfügbar ist, dann ist das Hinzufügen von benutzerdefiniertem CSS-Code eine ausgezeichnete Lösung.

Diese leistungsstarke Methode ist hochgradig anpassbar und ermöglicht es Ihnen, bestimmte Textarten, wie z. B. Überschriften oder Absätze, auf Ihrer gesamten Website anzusprechen.

Die gute Nachricht ist, dass Sie den Text auf einer gesamten Website anpassen können, indem Sie benutzerdefiniertes CSS hinzufügen. Noch besser, diese Methode ermöglicht es Ihnen, verschiedene Farben für bestimmte Textarten zu definieren, wie z. B. Überschrift 1 (h1) oder Absatztext (p).

Da die Bearbeitung und Anpassung von WordPress-Themes von Theme zu Theme variieren kann, empfehlen wir die Verwendung von WPCode, um benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen.

WPCode ist das beste Code-Snippet-Plugin, das von über 1 Million WordPress-Websites verwendet wird. Es erleichtert das Hinzufügen von benutzerdefiniertem CSS, PHP, HTML und mehr, ohne dass Sie Kern-WordPress-Dateien bearbeiten müssen.

Das erste, was Sie tun müssen, ist das kostenlose WPCode-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Code Snippets » Snippet hinzufügen.

Hier sehen Sie alle fertigen WPCode-Snippets, die Sie zu Ihrer Website hinzufügen können.

Bewegen Sie einfach die Maus über „Fügen Sie Ihren benutzerdefinierten Code hinzu“ und wählen Sie dann „Snippet verwenden“, wenn es erscheint.

Geben Sie zunächst einen Titel für den benutzerdefinierten Code-Schnipsel ein. Dies kann alles sein, was Ihnen hilft, den Schnipsel im WordPress-Dashboard zu identifizieren.

Öffnen Sie danach das Dropdown-Menü „Code-Typ“ und wählen Sie „CSS-Snippet“.

Als Nächstes können Sie den benutzerdefinierten CSS-Code in den kleinen Code-Editor eingeben. Sie müssen den Selektor für den Texttyp, den Sie anpassen, gefolgt vom Hex-Code für die gewünschte Farbe eingeben.

Sie können beispielsweise die Farbe des Absatztextes ändern, indem Sie Folgendes hinzufügen:

p { color:#990000; }

Wenn Sie eine andere Farbe für die Überschriften Ihrer Website verwenden möchten, müssen Sie die Selektoren h1, h2, h3 oder ähnliche verwenden.

Dies können Sie im folgenden Bild sehen.

Wenn Sie sich nicht sicher sind, welchen Hex-Code Sie verwenden sollen, können Sie eine Website wie HTML-Farbcodes verwenden.

Wenn Sie mit dem Snippet zufrieden sind, scrollen Sie zum Abschnitt „Einfügen“. WPCode kann das CSS an verschiedenen Stellen hinzufügen, z. B. nach jedem Beitrag, nur im Frontend oder nur im Admin-Bereich.

Um den Text auf Ihrem gesamten WordPress-Blog zu ändern, klicken Sie auf „Auto Insert“, falls es nicht bereits ausgewählt ist. Öffnen Sie dann das Dropdown-Menü „Location“ und wählen Sie „Site Wide Header.“

Sobald Sie dies getan haben, scrollen Sie zum oberen Bildschirmrand und klicken Sie auf den Schalter 'Inaktiv', damit er zu 'Aktiv' wechselt.

Klicken Sie abschließend auf „Snippet speichern“, um das CSS-Snippet live zu schalten.

Wenn Sie nun Ihre Website besuchen, sehen Sie den benutzerdefinierten Text live.

Wenn Sie zu einem beliebigen Zeitpunkt eine andere Textfarbe verwenden möchten oder einfach nur mehr CSS zu diesem Ausschnitt hinzufügen möchten, gehen Sie einfach zu Code Snippets » Code Snippets. Fahren Sie hier mit der Maus über den gerade erstellten Ausschnitt und klicken Sie auf „Bearbeiten“, wenn er erscheint.

Sie können nun den Code-Schnipsel bearbeiten, um die neue Farbe zu verwenden, und dann auf „Snippet speichern“ klicken, um die Änderung auf Ihrer Website live zu schalten.

Neben der Textfarbe können Sie mit WPCode auch die Standardfarbe beim Auswählen von Text ändern oder Text-Hervorhebungen auf einer Seite und in Beitragstexten aktivieren.

Methode 5: Textfarbe in einem Page Builder ändern

Oftmals möchten Sie, dass Ihre Landingpages anders aussehen als der Rest Ihrer Website. Das hebt sie hervor und kann zu mehr Conversions führen.

Dies ist besonders wichtig, wenn Sie mehrere Landingpages haben, z. B. eine für eine virale Warteliste und eine andere für eine Google-Anzeigenkampagne. Jede dieser Seiten benötigt möglicherweise ihr eigenes einzigartiges Design und Farbschema, um verschiedene Zielgruppen oder Marketingkanäle effektiv anzusprechen.

Wenn Sie eine Landingpage oder eine Verkaufsseite erstellen möchten, empfehlen wir die Verwendung von SeedProd. Von allen Page Buildern, die wir ausprobiert haben, ist es der beste auf dem Markt und verfügt über einen einfach zu bedienenden Drag-and-Drop-Page-Builder.

SeedProd wird mit über 90 Blöcken geliefert, die Sie einfach per Drag & Drop in Ihr Layout ziehen können. Sie können diese Blöcke dann auf vielfältige Weise verfeinern, einschließlich der Änderung der Textfarbe.

Wenn Sie eine benutzerdefinierte Seite für mehr Conversions verwenden, funktioniert SeedProd mit vielen beliebten Tools von Drittanbietern, die Sie möglicherweise bereits zur Verwaltung von Conversions verwenden.

Dazu gehören Top-E-Mail-Marketing-Dienste,  WooCommerce,  Google Analytics und mehr.

Zuerst müssen Sie SeedProd installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung des Plugins wird SeedProd nach Ihrem Lizenzschlüssel fragen.

Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website. Nachdem Sie den Lizenzschlüssel eingegeben haben, klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Als Nächstes müssen Sie SeedProd » Seiten besuchen und auf die Schaltfläche 'Neue Landingpage hinzufügen' klicken.

Danach ist es an der Zeit, eine Vorlage auszuwählen. SeedProd bietet über 300 professionell gestaltete Vorlagen, die Sie mit Ihren eigenen Bildern, Texten, Farben und vielem mehr anpassen können.

Um eine Vorlage auszuwählen, bewegen Sie einfach die Maus darüber und klicken Sie auf das Symbol „Häkchen“.

Wir verwenden in all unseren Bildern die Vorlage „Juicy Sales Page“, aber Sie können jedes Design verwenden.

Geben Sie als Nächstes einen Namen für die benutzerdefinierte Seite ein. SeedProd erstellt automatisch eine URL basierend auf dem Titel der Seite, aber Sie können diese URL beliebig ändern.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern und Seite bearbeiten starten“.

Als Nächstes gelangen Sie zum SeedProd Drag-and-Drop-Seitenersteller, wo Sie Ihre Vorlage anpassen können.

Der SeedProd-Editor zeigt rechts eine Live-Vorschau Ihres Designs und links einige Blockeinstellungen an.

Das linke Menü enthält auch Blöcke, die Sie in Ihr Layout ziehen können.

Sie können beispielsweise Standardblöcke wie Schaltflächen und Bilder per Drag & Drop verschieben oder erweiterte Blöcke wie Countdown-Timer, rotierende Testimonials, Social-Sharing-Buttons und mehr verwenden.

SeedProd verfügt auch über 'Abschnitte', bei denen es sich um Sammlungen von Blöcken handelt, die häufig zusammen verwendet werden. Zum Beispiel hat SeedProd einen Header, ein Hero-Bild, einen Call-to-Action, Testimonials, ein Kontaktformular, FAQs, Funktionen, Footer-Abschnitte und mehr. Dies kann Ihnen helfen, schnell eine professionell gestaltete Seite zu erstellen.

Um die verschiedenen Abschnitte durchzusehen, klicken Sie einfach auf die Registerkarte „Abschnitte“. Um eine Vorschau eines Abschnitts anzuzeigen, bewegen Sie die Maus darüber und klicken Sie auf das Lupensymbol.

Um den Abschnitt zu Ihrem Design hinzuzufügen, klicken Sie einfach auf „Diesen Abschnitt auswählen“.

Dies fügt den Abschnitt am Ende Ihrer Seite hinzu.

Sie können Abschnitte und Blöcke mit Drag & Drop in Ihrem Layout verschieben.

Um einen Block anzupassen, klicken Sie einfach darauf, um ihn in Ihrem Layout auszuwählen. Das linke Menü zeigt nun alle Einstellungen an, die Sie zur Konfiguration dieses Blocks verwenden können.

Um die Textfarbe zu ändern, klicken Sie einfach auf einen beliebigen Block, der Text enthält.

Wählen Sie im linken Menü die Registerkarte „Erweitert“. Klicken Sie unter „Stile“ auf „Farbe“.

Dies öffnet ein Popup, in dem Sie eine neue Textfarbe auswählen können.

Eine weitere Option ist die Eingabe eines Hex-Codes in das Feld 'Hex'.

Sie können nun die Textfarbe für jeden anderen Block ändern, indem Sie einfach denselben oben beschriebenen Vorgang befolgen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, ist es an der Zeit, sie durch Klicken auf die Schaltfläche „Speichern“ zu veröffentlichen. Wählen Sie dann „Veröffentlichen“.

Wenn Sie Ihren Online-Shop, Blog oder Ihre Website besuchen, sehen Sie die neue Seite in Aktion, komplett mit Ihren benutzerdefinierten Textfarben.

Häufig gestellte Fragen zum Ändern der Textfarbe

Hier sind einige Fragen, die unsere Leser zum Ändern der Textfarbe in WordPress gestellt haben:

Was ist der einfachste Weg, die Textfarbe für eine gesamte Website zu ändern?

Der beste Weg ist die Verwendung der integrierten Einstellungen Ihres Themes. Bei klassischen Themes finden Sie dies im WordPress Customizer unter Darstellung » Anpassen, normalerweise in einem Tab „Typografie“ oder „Farben“.

Für moderne Block-Themes können Sie globale Farben festlegen, indem Sie zu Themes » Editor navigieren und auf das Symbol 'Stile' klicken. Dies gewährleistet ein einheitliches Erscheinungsbild auf allen Ihren Seiten.

Warum kann ich meine Textfarbe in WordPress nicht ändern?

Dieses Problem tritt häufig auf, wenn die Stylesheet (CSS) Ihres Themes die von Ihnen im Editor gewählten Einstellungen überschreibt. Der Code des Themes hat möglicherweise eine spezifischere Regel für die Textfarbe. In diesen Fällen ist das Hinzufügen Ihres eigenen benutzerdefinierten CSS (wie in Methode 4 gezeigt) der zuverlässigste Weg, um die gewünschte Farbänderung zu erzwingen.

Was ist die beste Vorgehensweise für Textfarbe und Barrierefreiheit?

Für die Barrierefreiheit ist es sehr wichtig, einen hohen Kontrast zwischen Ihrem Text und seiner Hintergrundfarbe sicherzustellen. Dies macht Ihre Inhalte für Besucher mit Sehbehinderungen lesbar. Wir empfehlen die Verwendung eines Online-Tools wie des WebAIM Contrast Checker, um sicherzustellen, dass Ihre Farbkombinationen die Standards für Barrierefreiheit erfüllen.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie die Textfarbe in WordPress ändern können. Möglicherweise möchten Sie auch unser Tutorial über das Hinzufügen einer Schriftgrößenanpassung in WordPress für die Barrierefreiheit und Möglichkeiten zur Erstellung einer mobilfreundlichen WordPress-Website lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.