So passen Sie Farben auf Ihrer WordPress-Website an

Farben spielen eine wichtige Rolle dabei, Ihre Website optisch ansprechend zu gestalten und ihre Markenidentität zu etablieren. Glücklicherweise macht es WordPress super einfach, Farben auf Ihrer gesamten Website anzupassen.

Dies ist unerlässlich, um ein einzigartiges Aussehen zu schaffen und Konsistenz und Klarheit zu gewährleisten.

Wir haben Farbe erfolgreich eingesetzt, um eine starke Markenidentität auf unseren Websites aufzubauen. Zum Beispiel ist die Farbe Orange zu einem bestimmenden Teil der WPBeginner-Marke geworden. Sie macht unsere Seite für die Leser einprägsam und schafft gleichzeitig ein ästhetisch ansprechendes Design.

Dieser durchdachte Einsatz von Farben trägt dazu bei, dass unsere Marke leicht erkennbar ist, was das Benutzererlebnis und die Markentreue stärkt.

In diesem Artikel zeigen wir Ihnen, wie Sie Farben auf Ihrer WordPress-Website einfach anpassen können, einschließlich Hintergrund-, Kopfzeilen-, Text- und Linkfarben.

Was ist Farbtheorie?

Bevor Sie mit der Anpassung von Farben auf Ihrer WordPress-Website beginnen können, ist es wichtig, die Farbtheorie zu verstehen.

Farbtheorie ist die Lehre von Farben und wie sie zusammenwirken. Sie hilft Designern, Farbkombinationen zu erstellen, die sich gegenseitig ergänzen.

Beim Erstellen einer Website müssen Sie Farben wählen, die gut zusammen aussehen. Dies lässt Ihre Website für Ihre Besucher attraktiver erscheinen, was die Benutzererfahrung verbessern und das Engagement steigern kann.

Verschiedene Farben können unterschiedliche Emotionen und Gefühle bei Menschen hervorrufen, und die Farbtheorie kann Ihnen helfen, die richtige Kombination für Ihre Website auszuwählen.

Zum Beispiel wird Rot oft verwendet, um Lebensmittel und Restaurants darzustellen. Blau hingegen wird normalerweise auf Bank- und Finanzwebsites verwendet.

Das liegt daran, dass Rot Gefühle von Wärme, Energie und Leidenschaft hervorrufen kann, während Blau Vertrauen, Sicherheit und Ruhe signalisiert.

Neben komplementären Farben können Sie auch Farbkontraste verwenden, um wichtige Bereiche Ihres WordPress-Blogs hervorzuheben.

Dies ermöglicht es Ihnen, Ihre Inhalte lesbarer zu gestalten, eine starke Markenidentität zu etablieren und eine bestimmte Stimmung auf der Website zu erzeugen.

Was sind WordPress-Themes und kann man Theme-Farben ändern?

WordPress-Themes steuern, wie Ihre Website für den Benutzer aussieht. Ein typisches WordPress-Theme ist eine Sammlung von vordefinierten Vorlagen, die Sie auf Ihrer Website installieren, um deren Aussehen und Layout zu ändern.

Themes machen Ihre Website attraktiver, benutzerfreundlicher und erhöhen die Interaktion.

Sie können auch Ihre eigenen Themes von Grund auf neu erstellen, indem Sie Plugins wie SeedProd und den Thrive Theme Builder verwenden.

Mit WordPress können Sie Designs einfach anpassen und deren Hintergrund, Schriftarten, Schaltflächen und Linkfarben ändern.

Beachten Sie jedoch, dass einige Themes vordefinierte Farbauswahlen haben, während andere mehr Flexibilität bieten, um Ihre eigenen auszuwählen.

Lassen Sie uns nun sehen, wie Sie Farben in WordPress ganz einfach anpassen können. Sie können die Schnelllinks unten verwenden, um zu den verschiedenen Teilen unseres Tutorials zu springen:

• Wie man Farben in WordPress anpasst
• So ändern Sie die Hintergrundfarbe in WordPress
• Wie man die Header-Farbe in WordPress ändert
• So ändern Sie die Textfarbe in WordPress
• So ändern Sie die Textauswahlfarbe in WordPress
• So ändern Sie die Linkfarbe in WordPress
• So ändern Sie das Admin-Farbschema in WordPress

Wie man Farben in WordPress anpasst

Sie können Farben in WordPress mit vielen verschiedenen Methoden anpassen, darunter der Theme-Customizer, der Full Site Editor, benutzerdefiniertes CSS, Page-Builder-Plugins und mehr.

Farben über den Theme-Customizer ändern

Es ist super einfach, Farben mit dem integrierten WordPress Theme Customizer zu ändern.

Besuchen Sie zuerst die Seite Darstellung » Anpassen in der Admin-Seitenleiste.

Hinweis: Wenn Sie den Tab „Anpassen“ in Ihrem WordPress-Dashboard nicht finden können, bedeutet dies, dass Sie ein Block-Theme verwenden. Scrollen Sie zum nächsten Abschnitt dieses Tutorials, um zu erfahren, wie Sie Farben in einem Block-Theme ändern können.

Für dieses Tutorial verwenden wir das Standard-Theme Twenty Twenty-One.

Denken Sie daran, dass der Theme-Customizer je nach dem von Ihnen aktuell verwendeten Theme anders aussehen kann.

Zum Beispiel wird das Twenty Twenty-One-Theme mit einem Bedienfeld „Farben und Dunkelmodus“ geliefert, mit dem Benutzer eine Hintergrundfarbe auswählen und den Dunkelmodus anpassen können.

Nach dem Öffnen des Panels klicken Sie einfach auf die Option 'Farbe auswählen'. Dies öffnet den Farbwähler, wo Sie Ihre bevorzugte Hintergrundfarbe auswählen können.

Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern und sie auf Ihrer Website live zu schalten.

Farben im Full Site Editor ändern

Wenn Sie ein blockbasiertes Theme verwenden, haben Sie keinen Zugriff auf den Theme-Customizer. Sie können jedoch den Full Site Editor (FSE) verwenden, um Farben auf Ihrer Website zu ändern.

Gehen Sie zunächst im Admin-Menü zu Design » Editor, um den Full Site Editor zu öffnen. Klicken Sie nun auf das Symbol 'Stile' in der oberen rechten Ecke des Bildschirms.

Dies öffnet die Spalte 'Stile', wo Sie auf das Panel 'Farben' klicken müssen.

Sie können hier die Hintergrund-, Text-, Link-, Überschriften- und Schaltflächenfarben des Themes ändern.

Sobald Sie fertig sind, klicken Sie auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

Farben mit benutzerdefiniertem CSS ändern

CSS ist eine Programmiersprache, mit der Sie das visuelle Erscheinungsbild Ihrer Website ändern können, einschließlich ihrer Farben. Sie können benutzerdefiniertes CSS in Ihren Theme-Einstellungen speichern, um Ihre Anpassungen auf Ihre gesamte Website anzuwenden.

Der benutzerdefinierte CSS-Code wird jedoch nicht mehr angewendet, wenn Sie das Theme auf Ihrer Website wechseln oder Ihr bestehendes Theme aktualisieren.

Deshalb empfehlen wir die Verwendung von WPCode, dem besten WordPress-Code-Snippet-Plugin auf dem Markt. Es ist der einfachste Weg, benutzerdefinierten CSS-Code hinzuzufügen, und es ermöglicht Ihnen, Farben auf Ihrer WordPress-Website sicher anzupassen.

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung besuchen Sie die Seite Code-Snippets » + Snippet hinzufügen in der Admin-Seitenleiste von WordPress.

Klicken Sie hier einfach unter der Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ auf die Schaltfläche „Snippet verwenden“.

Sobald Sie sich auf der Seite „Benutzerdefiniertes Snippet erstellen“ befinden, können Sie mit der Eingabe eines Namens für Ihren Code beginnen.

Wählen Sie danach einfach im Dropdown-Menü „CSS-Snippet“ als „Code-Typ“ aus.

Für diesen Abschnitt fügen wir benutzerdefinierten CSS-Code hinzu, der die Textfarbe auf der Website ändert:

p   { color:#990000;  }

Fügen Sie einfach den benutzerdefinierten CSS-Code in das Feld „Code-Vorschau“ ein.

Wenn Sie das getan haben, scrollen Sie nach unten zum Abschnitt „Einfügung“.

Hier können Sie die Option „Automatisch einfügen“ wählen, wenn der Code bei der Aktivierung automatisch ausgeführt werden soll.

Sie können auch einen Shortcode zu bestimmten WordPress-Seiten oder Beiträgen hinzufügen.

Wenn Sie fertig sind, scrollen Sie zurück zum Anfang der Seite und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“.

Schließlich müssen Sie auf die Schaltfläche „Ausschnitt speichern“ klicken, um den CSS-Code auf Ihre Website anzuwenden.

Farben mit SeedProd ändern

Sie können Farben auch mit dem SeedProd Plugin anpassen.

Es ist der beste WordPress Page Builder auf dem Markt und ermöglicht es Ihnen, Themes von Grund auf neu zu erstellen, ohne Code verwenden zu müssen.

Zuerst müssen Sie das SeedProd Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung navigieren Sie im WordPress-Admin-Menü zur Seite SeedProd » Theme Builder.

Klicken Sie von hier aus oben auf die Schaltfläche „Theme Template Kits“.

Hinweis: Wenn Sie Ihr eigenes Theme von Grund auf neu erstellen möchten, müssen Sie stattdessen auf die Schaltfläche „+ Neues Theme-Vorlage hinzufügen“ klicken.

Dies führt Sie zur Seite „Theme Template Kit Chooser“. Hier können Sie aus den vorgefertigten Theme-Vorlagen wählen, die von SeedProd angeboten werden.

Weitere Details finden Sie in unserem Tutorial zur einfachen Erstellung eines WordPress-Themes ohne Code.

Nachdem Sie ein Design ausgewählt haben, werden Sie zur Seite „Theme-Vorlagen“ weitergeleitet.

Schalten Sie hier den Schalter „SeedProd Theme aktivieren“ auf „Ja“, um das Theme zu aktivieren.

Klicken Sie nun auf den Link „Design bearbeiten“ unter einer beliebigen Theme-Seite, um den Drag-and-Drop-Editor zu öffnen.

Sobald Sie dort sind, klicken Sie auf das Zahnradsymbol unten in der linken Spalte.

Dies führt Sie zu den Einstellungen für „Globales CSS“.

Von hier aus können Sie die Farben Ihres Website-Hintergrunds, Textes, Ihrer Schaltflächen, Links und mehr anpassen.

Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

So ändern Sie die Hintergrundfarbe in WordPress

Alle WordPress-Themes werden mit einer Standard-Hintergrundfarbe geliefert. Sie können diese jedoch einfach ändern, um Ihre Website zu personalisieren und ihre Lesbarkeit zu verbessern.

Wenn Sie ein Block-Theme verwenden, müssen Sie die Hintergrundfarbe über den Vollständigen Website-Editor ändern.

Zuerst müssen Sie zum Bildschirm Darstellung » Editor im WordPress-Dashboard navigieren.

Dies öffnet den Full Site Editor, wo Sie in der oberen rechten Ecke des Bildschirms auf das Symbol 'Stile' klicken müssen.

Klicken Sie danach einfach auf das Panel 'Farben', um zusätzliche Einstellungen zu öffnen

In diesem Bedienfeld können Sie nun die Standardfarbe verschiedener Elemente auf Ihrer Website verwalten.

Hier müssen Sie unter dem Abschnitt „Elemente“ auf die Option „Hintergrund“ klicken.

Sobald sich dieses Panel erweitert hat, können Sie hier die Hintergrundfarbe Ihrer Website auswählen.

Alle WordPress-Themes bieten eine Reihe von Standard-Website-Farben, aus denen Sie wählen können.

Wenn Sie jedoch eine benutzerdefinierte Farbe verwenden möchten, müssen Sie auf das Werkzeug „Benutzerdefinierte Farbe“ klicken. Dies öffnet den Farbwähler, wo Sie eine Farbe Ihrer Wahl auswählen können.

Sie können auch Farbverläufe für den Hintergrund Ihrer Website verwenden.

Dazu müssen Sie zuerst zum Tab „Verlauf“ oben wechseln.

Als Nächstes können Sie einen Standardverlauf aus dem Design auswählen oder Ihre eigenen Verlaufsfarben mit Hilfe des Farbwähler-Tools auswählen.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Sie können auch den Hintergrund Ihrer Website über den Theme-Customizer, SeedProd und benutzerdefiniertes CSS ändern.

Für detailliertere Anweisungen sehen Sie sich unseren Leitfaden für Anfänger an, wie Sie die Hintergrundfarbe in WordPress ändern können: wie man die Hintergrundfarbe in WordPress ändert.

Wie man die Header-Farbe in WordPress ändert

Viele WordPress-Themes verfügen über eine integrierte Kopfzeile am oberen Rand der Seite. Sie enthält normalerweise wichtige Seitenlinks, Social-Media-Icons, CTAs und mehr.

Wenn Sie ein Block-Theme verwenden, können Sie den WordPress-Header ganz einfach mit dem Full Site Editor anpassen.

Zuerst müssen Sie zum Bildschirm Darstellung » Editor in der Admin-Seitenleiste navigieren, um den Full Site Editor zu starten. Dort angekommen, doppelklicken Sie auf die Vorlage „Header“ oben, um sie auszuwählen.

Dies öffnet die Kopfzeileneinstellungen im Blockbedienfeld auf der rechten Seite. Hier müssen Sie zum Abschnitt „Farbe“ scrollen und auf die Option „Hintergrund“ klicken.

Dies öffnet ein Popup, in dem Sie eine Standardfarbe für Ihre Kopfzeile auswählen können.

Sie können auch eine benutzerdefinierte Farbe auswählen, indem Sie das Werkzeug Farbwähler öffnen.

Um Ihren Header mit einem Farbverlauf anzupassen, müssen Sie zum Tab „Verlauf“ wechseln.

Danach können Sie eine Standard-Verlaufsoption auswählen oder Ihren eigenen mit dem Farbwähler anpassen.

Klicken Sie abschließend auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

Wenn Sie die Header-Farbe über den Theme-Customizer oder zusätzliches CSS ändern möchten, lesen Sie unseren Anfängerleitfaden zur Anpassung Ihres WordPress-Headers.

So ändern Sie die Textfarbe in WordPress

Das Ändern der Textfarbe kann die Lesbarkeit Ihres WordPress-Blogs verbessern.

Wenn Sie ein Block-Theme verwenden, müssen Sie die Textfarbe über den Full Site Editor ändern.

Sie können damit beginnen, indem Sie im WordPress-Adminbereich zu Design » Editor gehen. Dies öffnet den Full Site Editor, wo Sie auf das Symbol 'Stile' in der oberen rechten Ecke klicken müssen.

Klicken Sie als Nächstes auf das Bedienfeld „Farben“, um auf die zusätzlichen Einstellungen zuzugreifen.

Sobald Sie dort sind, klicken Sie auf die Option „Text“ im Abschnitt „Elemente“.

Sobald die Textfarbeinstellungen geöffnet sind, sehen Sie im Abschnitt „Standard“ eine Reihe von Textfarben.

Alternativ können Sie auch eine benutzerdefinierte Textfarbe verwenden, indem Sie auf das Werkzeug „Benutzerdefinierte Farbe“ klicken und den Farbwähler öffnen.

Sobald Sie Ihre Wahl getroffen haben, klicken Sie einfach auf die Schaltfläche „Speichern“, um die Änderungen zu speichern.

Bonus-Tipp: Sie können das WebAIM Contrast Checker-Tool verwenden, um zu überprüfen, ob Ihr Hintergrund- und Textfarbe gut zusammenpassen. Das Tool kann Ihnen helfen, die Lesbarkeit von Texten auf Ihrer Website zu verbessern.

Um die Textfarbe mithilfe von CSS, dem Theme Customizer oder SeedProd anzupassen, sollten Sie sich unseren Schritt-für-Schritt-Leitfaden ansehen: So ändern Sie die Textfarbe in WordPress.

So ändern Sie die Textauswahlfarbe in WordPress

Wenn ein Besucher Text auf Ihrer Website auswählt, wird eine Hintergrundfarbe angezeigt. Die Standardfarbe ist Blau.

Manchmal passt die Farbe jedoch möglicherweise nicht gut zu Ihrem WordPress-Theme und Sie möchten sie vielleicht ändern.

Das Hinzufügen von CSS-Code zu Ihren Theme-Dateien kann die Textauswahlfarbe leicht ändern. Beachten Sie jedoch, dass der CSS-Code verschwindet, wenn Sie zu einem anderen Theme wechseln oder Ihr aktuelles Theme aktualisieren.

Deshalb empfehlen wir die Verwendung von WPCode, dem besten WordPress-Code-Snippet-Plugin auf dem Markt.

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie im Admin-Menü zu Code-Schnipsel » + Schnipsel hinzufügen.

Klicken Sie dann einfach unter der Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ auf die Schaltfläche „Snippet verwenden“.

Sobald Sie sich auf der Seite „Benutzerdefinierten Ausschnitt erstellen“ befinden, können Sie mit der Eingabe eines Namens für Ihren Codeausschnitt beginnen.

Wählen Sie danach im Dropdown-Menü auf der rechten Seite „CSS-Snippet“ als „Code-Typ“ aus.

Kopieren Sie nun den folgenden CSS-Code und fügen Sie ihn in das Feld „Code-Vorschau“ ein:

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}

Sie können die Textauswahlfarbe ändern, indem Sie den Hex-Code neben background-color im CSS-Snippet ersetzen.

Sobald Sie den Code hinzugefügt haben, scrollen Sie nach unten zum Abschnitt „Einfügen“.

Wählen Sie hier die Methode „Automatisch einfügen“, um den Code nach der Aktivierung automatisch auszuführen.

Scrollen Sie danach wieder nach oben und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“ um.

Klicken Sie abschließend auf die Schaltfläche „Snippet speichern“, um Ihre Änderungen zu speichern.

Nun können Sie Ihre Website besuchen, um die Textauswahlfarbe zu überprüfen.

Sie können die Textauswahlfarbe auch über den Theme-Customizer oder ein Plugin ändern. Weitere Details finden Sie in unserem Tutorial zum Thema Ändern der Standard-Textauswahlfarbe in WordPress.

So ändern Sie die Linkfarbe in WordPress

Sie können die Linkfarbe in WordPress einfach mit dem Full Site Editor oder benutzerdefiniertem CSS ändern.

Wenn Sie ein Block-Theme verwenden, navigieren Sie im Admin-Menü zu Darstellung » Editor.

Klicken Sie nach dem Öffnen des Full Site Editors auf das Symbol „Stile“ in der oberen rechten Ecke.

Klicken Sie anschließend im rechten Bereich auf das Bedienfeld „Farben“, um weitere Einstellungen anzuzeigen.

Sobald Sie dort sind, klicken Sie einfach auf den Tab „Links“.

Dies öffnet die Einstellungen für die Linkfarbe, und Sie sehen mehrere Standard-Linkfarben in der rechten Spalte.

Sie können jedoch auch eine benutzerdefinierte Linkfarbe verwenden, indem Sie auf das Werkzeug „Benutzerdefinierte Farbe“ klicken, um den Farbwähler zu öffnen.

Sie können auch die Hover-Link-Farbe mit dem FSE ändern. Das bedeutet, dass sich die Linkfarbe ändert, wenn jemand mit der Maus darüber fährt.

Zuerst müssen Sie zum Tab „Hover“ oben wechseln.

Dort können Sie eine Standard- oder benutzerdefinierte Farbe auswählen, um die Hover-Link-Farbe zu ändern.

Klicken Sie abschließend auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

Für detailliertere Anweisungen können Sie unseren Anfängerleitfaden zur Änderung der Linkfarbe in WordPress konsultieren.

Admin-Farbschema in WordPress ändern

Sie können auch das Admin-Farbschema in WordPress ändern, wenn Sie möchten. Diese Methode kann hilfreich sein, wenn das Admin-Dashboard zu Ihrem Website-Branding passen soll oder Sie Ihre Lieblingsfarben verwenden möchten.

Beachten Sie jedoch, dass die Änderung des Farbschemas des WordPress-Dashboards den sichtbaren Teil Ihrer Website nicht beeinflusst.

Um das Admin-Farbschema zu ändern, besuchen Sie einfach die Seite Benutzer » Profil im WordPress-Dashboard.

Hier sehen Sie mehrere Farbschemata neben der Option „Admin-Farbschema“.

Wählen Sie die gewünschte Option und klicken Sie dann unten auf der Seite auf die Schaltfläche „Profil aktualisieren“, um Ihre Änderungen zu speichern.

Detailliertere Anweisungen finden Sie in unserem Anfängerleitfaden zum Ändern des Admin-Farbschemas in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Farben auf Ihrer WordPress-Website anpassen können. Möglicherweise möchten Sie auch unseren Artikel über die Wahl eines perfekten Farbschemas für Ihre WordPress-Website und unseren ultimativen Leitfaden zu WordPress-Designelementen 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.