So passen Sie Farben auf Ihrer WordPress-Website an

Möchten Sie die Farben auf Ihrer WordPress-Website anpassen?

Farben spielen eine entscheidende Rolle, wenn es darum geht, Ihre Website ästhetisch ansprechend zu gestalten und ihre Markenidentität zu etablieren. Glücklicherweise macht es WordPress super einfach, Farben auf deiner gesamten Website anzupassen.

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 damit beginnen können, Farben auf Ihrer WordPress-Website anzupassen, ist es wichtig, die Farbtheorie zu verstehen.

Farbtheorie ist das Studium der Farben und wie sie zusammenarbeiten. Es hilft Designern, Farbkombinationen zu erstellen, die sich gegenseitig ergänzen.

Beim Entwerfen einer Website müssen Sie Farben auswählen, die gut zusammenpassen. Dadurch wird Ihre Website für Ihre Besucher attraktiver, was die Benutzererfahrung verbessern und das Engagement steigern kann.

Unterschiedliche Farben können bei Menschen unterschiedliche Emotionen und Gefühle hervorrufen, und die Farbtheorie kann Ihnen bei der Auswahl der richtigen Kombination für Ihre Website helfen.

Zum Beispiel wird Rot oft verwendet, um Essen und Restaurants darzustellen. Andererseits wird Blau normalerweise auf Banken- 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 bedeutet.

Neben ergänzenden Farben können Sie auch Farbkontraste verwenden, um die Aufmerksamkeit auf wichtige Bereiche Ihres WordPress-Blogs zu lenken.

Dadurch können Sie Ihre Inhalte besser lesbar machen, eine starke Markenidentität aufbauen und eine bestimmte Stimmung auf der Website erzeugen.

Was sind WordPress-Designs und können Sie Designfarben ändern?

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

Themes machen Ihre Website attraktiver, benutzerfreundlicher und erhöhen das Engagement.

Mit Plugins wie SeedProd und dem Thrive Theme Builder können Sie auch Ihre eigenen Themes von Grund auf neu erstellen.

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

Beachten Sie jedoch, dass einige Themen mit vordefinierten Farboptionen ausgestattet sind, während andere mehr Flexibilität bei der Auswahl Ihrer eigenen bieten.

Lassen Sie uns sehen, wie Sie Farben in WordPress einfach anpassen können.

So passen Sie Farben in WordPress an

Sie können Farben in WordPress mit vielen verschiedenen Methoden anpassen, einschließlich dem Design-Anpasser, dem vollständigen Website-Editor, benutzerdefiniertem CSS, Seitenerstellungs-Plugins und mehr.

Ändern Sie die Farben mit dem Theme Customizer

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

Besuchen Sie zunächst die Seite Aussehen » Anpassen in der Admin-Seitenleiste.

Hinweis: Wenn Sie die Registerkarte „Anpassen“ in Ihrem WordPress-Dashboard nicht finden können, bedeutet dies, dass Sie ein Blockdesign verwenden. Scrollen Sie nach unten zum nächsten Abschnitt dieses Tutorials, um herauszufinden, wie Sie die Farben in einem Blockdesign ändern können.

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

Denken Sie daran, dass der Design-Anpasser je nach aktuell verwendetem Design unterschiedlich aussehen kann.

Zum Beispiel enthält das Twenty Twenty-One-Design ein Bedienfeld „Farben und Dunkelmodus“, mit dem Benutzer eine Hintergrundfarbe auswählen und den Dunkelmodus anpassen können.

Klicken Sie nach dem Öffnen des Bedienfelds einfach auf die Option „Farbe auswählen“. Dadurch wird die Farbauswahl geöffnet, in der 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 auf Ihrer Website zu veröffentlichen.

Ändern Sie die Farben im Full Site Editor

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

Gehen Sie zunächst in der Admin-Seitenleiste zum Bildschirm Aussehen » Editor , um den vollständigen Site-Editor zu starten.

Jetzt müssen Sie auf das Symbol „Stile“ in der oberen rechten Ecke des Bildschirms klicken.

Dadurch wird die Spalte „Stile“ geöffnet, in der Sie auf das Bedienfeld „Farben“ klicken müssen.

Von hier aus können Sie den Hintergrund, den Text, den Link, die Überschrift und die Schaltflächenfarben des Designs ändern.

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

Ändern Sie die Farben mit benutzerdefiniertem CSS

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

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

Aus diesem Grund empfehlen wir die Verwendung des WPCode-Plugins, das das beste WordPress-Code-Snippets-Plugin auf dem Markt ist. Es ist der einfachste Weg, benutzerdefinierten CSS-Code hinzuzufügen, und ermöglicht es 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.

Sobald Sie WPCode aktiviert haben, müssen Sie die Seite Code Snippets » + Snippets hinzufügen in der Admin-Seitenleiste aufrufen.

Klicken Sie einfach auf die Schaltfläche „Snippet verwenden“ unter der Überschrift „Fügen Sie Ihren benutzerdefinierten Code hinzu (neues Snippet)“.

Sobald Sie sich auf der Seite „Benutzerdefiniertes Snippet erstellen“ befinden, können Sie damit beginnen, einen Namen für Ihren Code einzugeben.

Wählen Sie danach einfach „CSS-Snippet“ als „Codetyp“ aus dem Dropdown-Menü aus.

Als Nächstes müssen Sie den benutzerdefinierten CSS-Code im Feld „Codevorschau“ hinzufügen.

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

p   { color:#990000;  }

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

Hier können Sie die Option „Automatisch einfügen“ auswählen, wenn Sie möchten, dass der Code bei der Aktivierung automatisch ausgeführt wird.

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

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

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

Ändern Sie die Farben mit SeedProd

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

Es ist der beste WordPress-Seitenersteller auf dem Markt, mit dem Sie Themen von Grund auf neu erstellen können, ohne Code zu verwenden.

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

Gehen Sie nach der Aktivierung zur Seite SeedProd » Theme Builder von der WordPress-Admin-Seitenleiste.

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

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

Dadurch gelangen Sie zur Seite „Theme Template Kit Chooser“. Hier können Sie aus einer der vorgefertigten Themenvorlagen auswä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 auf die Seite „Designvorlagen“ weitergeleitet.

Hier müssen Sie den Schalter „Enable SeedProd Theme“ auf „Yes“ umschalten, um das Theme zu aktivieren.

Jetzt müssen Sie unter einer beliebigen Themenseite auf den Link „Design bearbeiten“ klicken, um den Drag-and-Drop-Editor zu öffnen.

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

Dadurch gelangen Sie zu den „Global CSS“-Einstellungen.

Von hier aus können Sie die Farben des Hintergrunds, des Textes, der Schaltflächen, Links und mehr Ihrer Website 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 haben eine Standard-Hintergrundfarbe. Sie können es jedoch leicht ändern, um Ihre Website zu personalisieren und ihre Lesbarkeit zu verbessern.

Wenn Sie ein Blockdesign verwenden, müssen Sie die Hintergrundfarbe mit dem vollständigen Site-Editor ändern.

Zuerst müssen Sie in der Admin-Seitenleiste zum Bildschirm Aussehen » Editor gehen.

Klicken Sie nach dem Start des vollständigen Website-Editors auf das Symbol „Stile“ in der oberen rechten Ecke des Bildschirms.

Klicken Sie danach einfach auf das Bedienfeld „Farben“, um zusätzliche Einstellungen zu öffnen

Im Bereich „Farben“ können Sie jetzt die Standardfarbe verschiedener Elemente auf Ihrer Website verwalten.

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

Sobald das Bedienfeld „Hintergrund“ erweitert wurde, können Sie hier die Hintergrundfarbe Ihrer Website auswählen.

Alle WordPress-Themes bieten eine Reihe von Standardfarben für Websites, aus denen Sie auswählen können.

Wenn Sie jedoch eine benutzerdefinierte Farbe verwenden möchten, müssen Sie auf das Werkzeug „Benutzerdefinierte Farbe“ klicken.

Dadurch wird der Farbwähler geöffnet, in dem Sie eine Farbe Ihrer Wahl auswählen können.

Sie können auch Verlaufsfarben für den Hintergrund Ihrer Website verwenden.

Dazu müssen Sie zunächst oben auf den Reiter „Verlauf“ wechseln.

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

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

Sie können den Hintergrund Ihrer Website auch mit dem Design-Anpasser, SeedProd und benutzerdefiniertem CSS ändern.

Ausführlichere Anweisungen finden Sie in unserem Leitfaden zum Ändern der Hintergrundfarbe in WordPress.

So ändern Sie die Kopfzeilenfarbe in WordPress

Viele WordPress-Themes verfügen über eine integrierte Kopfzeile oben auf der Seite. Es enthält normalerweise wichtige Seitenlinks, soziale Symbole, CTAs und mehr.

Wenn Sie ein Blockdesign verwenden, können Sie den WordPress-Header einfach mit dem vollständigen Site-Editor anpassen.

Zuerst müssen Sie den Bildschirm Aussehen » Editor aus der Admin-Seitenleiste aufrufen, um den vollständigen Site-Editor zu starten. Wählen Sie dort oben die Vorlage „Header“ per Doppelklick aus.

Scrollen Sie von hier aus einfach nach unten zum Abschnitt „Farbe“ und klicken Sie auf die Option „Hintergrund“.

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 Farbwähler-Tool öffnen.

Um Ihre Kopfzeile mit einem Farbverlauf anzupassen, müssen Sie auf die Registerkarte „Verlauf“ wechseln.

Danach können Sie eine Standardverlaufsoption auswählen oder Ihre eigene mit der Farbauswahl anpassen.

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

Wenn Sie die Kopfzeilenfarbe mit dem Design-Anpasser oder zusätzlichem CSS ändern möchten, lesen Sie vielleicht unseren Anfängerleitfaden zum Anpassen Ihrer WordPress-Kopfzeile.

So ändern Sie die Textfarbe in WordPress

Das Ändern der Textfarbe kann dazu beitragen, die Lesbarkeit Ihres WordPress-Blogs zu verbessern.

Wenn Sie ein Blockdesign verwenden, müssen Sie die Textfarbe mit dem vollständigen Site-Editor ändern.

Sie können beginnen, indem Sie den Bildschirm Aussehen » Editor in der Admin-Seitenleiste aufrufen. Dadurch wird der vollständige Website-Editor gestartet, in dem Sie auf das Symbol „Stile“ in der oberen rechten Ecke klicken müssen.

Als nächstes müssen Sie auf das Bedienfeld „Farben“ klicken, um auf die zusätzlichen Einstellungen zuzugreifen.

Sobald Sie dort sind, fahren Sie fort und klicken Sie auf die Option „Text“ unter dem Abschnitt „Elemente“.

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

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

Nachdem Sie Ihre Auswahl 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 Ihre Textfarbe zusammenpassen. Das Tool kann Ihnen helfen, die Lesbarkeit von Text auf Ihrer Website zu verbessern.

Um die Textfarbe mit CSS, dem Theme Customizer oder SeedProd anzupassen, möchten Sie vielleicht unseren Leitfaden zum Ändern der Textfarbe in WordPress lesen.

So ändern Sie die Farbe der Textauswahl in WordPress

Wenn ein Besucher Text auf Ihrer Website auswählt, wird dieser in einer Hintergrundfarbe angezeigt. Die Standardfarbe ist blau.

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

Durch Hinzufügen von CSS-Code zu Ihren Designdateien kann die Farbe der Textauswahl leicht geändert werden. Beachten Sie jedoch, dass der CSS-Code beim Wechseln zu einem anderen Design oder beim Aktualisieren Ihres aktuellen Designs verschwindet.

Aus diesem Grund empfehlen wir die Verwendung des WPCode-Plugins, das das beste WordPress-Code-Snippets-Plugin auf dem Markt ist.

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

Gehen Sie nach der Aktivierung zur Seite Code Snippets » + Snippets hinzufügen in der Admin-Seitenleiste.

Klicken Sie dann einfach auf die Schaltfläche „Snippet verwenden“ unter der Überschrift „Fügen Sie Ihren benutzerdefinierten Code hinzu (neues Snippet)“.

Sobald Sie sich auf der Seite „Benutzerdefiniertes Snippet erstellen“ befinden, können Sie damit beginnen, einen Namen für Ihr Code-Snippet einzugeben.

Danach müssen Sie im Dropdown-Menü auf der rechten Seite „CSS-Snippet“ als „Codetyp“ auswählen.

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

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

Sie können die Farbe der Textauswahl ändern, indem Sie den Hex-Code neben der „Hintergrundfarbe“ im CSS-Snippet ersetzen.

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

Hier müssen Sie die Methode „Auto Insert“ auswählen, um den Code bei der Aktivierung automatisch auszuführen.

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

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

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

Sie können die Farbe der Textauswahl auch mit dem Design-Anpasser oder einem Plugin ändern. Weitere Informationen finden Sie in unserem Tutorial zum Ändern der Standardfarbe für die Textauswahl in WordPress.

So ändern Sie die Linkfarbe in WordPress

Sie können die Linkfarbe in WordPress ganz einfach mit dem vollständigen Site-Editor oder benutzerdefiniertem CSS ändern.

Wenn Sie ein Blockdesign verwenden, gehen Sie in der Admin-Seitenleiste zum Bildschirm Aussehen » Editor .

Nachdem der vollständige Website-Editor gestartet wurde, müssen Sie auf das Symbol „Stile“ in der oberen rechten Ecke klicken.

Klicken Sie als Nächstes auf das Bedienfeld „Farben“ in der rechten Spalte, um zusätzliche Einstellungen anzuzeigen.

Sobald Sie dort sind, klicken Sie einfach auf das Feld „Links“.

Dadurch werden die Link-Farbeinstellungen gestartet und in der rechten Spalte werden mehrere Standard-Link-Farben angezeigt.

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

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

Zuerst müssen Sie von oben auf die Registerkarte „Hover“ wechseln.

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

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

Ausführlichere Anweisungen finden Sie in unserer Anleitung zum Ändern der Linkfarbe in WordPress.

So ändern Sie das Admin-Farbschema in WordPress

Sie können auch das Admin-Farbschema in WordPress ändern, wenn Sie möchten. Diese Methode kann hilfreich sein, wenn Sie möchten, dass das Admin-Dashboard zum Branding Ihrer Website passt oder Ihre Lieblingsfarben verwendet.

Beachten Sie jedoch, dass eine Ä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 in der Admin-Seitenleiste.

Neben der Option „Admin-Farbschema“ werden mehrere Farbschemata angezeigt.

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

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

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Farben auf Ihrer WordPress-Website anpassen können. Vielleicht möchten Sie auch unseren ultimativen WordPress-SEO-Leitfaden und unseren Artikel darüber lesen, wie Sie ein perfektes Farbschema für Ihre WordPress-Website auswählen.

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