Wie Sie die Farben Ihrer WordPress-Website anpassen

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

Farben spielen eine wichtige Rolle, wenn es darum geht, Ihre Website ästhetisch ansprechend zu gestalten und ihre Markenidentität zu etablieren. Glücklicherweise ist es mit WordPress sehr einfach, die Farben auf Ihrer gesamten Website anzupassen.

In diesem Artikel zeigen wir Ihnen, wie Sie die Farben auf Ihrer WordPress-Website leicht anpassen können, einschließlich der Farben für Hintergrund, Kopfzeile, Text und Links.

Was ist die Farbenlehre?

Bevor Sie mit der Anpassung der Farben auf IhremWordPress-Websiteist es wichtig, die Farbtheorie zu verstehen.

Die Farbtheorie ist die Lehre von den Farben und ihrem Zusammenspiel. Sie hilft Designern, Farbkombinationen zu schaffen, die sich gegenseitig ergänzen.

Bei der Gestaltung einer Website sollten Sie Farben wählen, die gut zueinander passen. Dadurch wird Ihre Website für Ihre Besucher attraktiver, was die Benutzerfreundlichkeit und das Engagement erhöhen kann.

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

Rot wird zum Beispiel häufig für Lebensmittel und Restaurants verwendet. Blau hingegen wird in der Regel auf Bank- und Finanz-Websites verwendet.

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

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

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

Was sind WordPress-Themes, und können Sie Theme-Farben ändern?

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

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

Sie können auch Ihre eigenen Themen von Grund auf neu erstellen, indem Sie Plugins wieSeedProdund dieThrive Theme Builder.

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

Beachten Sie jedoch, dass einige Themes mit vordefinierten Farbauswahlen geliefert werden, während andere mehr Flexibilität bei der Wahl Ihrer eigenen Farben bieten.

Sehen wir uns also an, wie Sie die Farben in WordPress leicht anpassen können.

Wie man Farben in WordPress anpasst

Sie können Farben in WordPress mit vielen verschiedenen Methoden anpassen, z. B. mit dem Theme-Customizer, dem vollständigen Site-Editor, benutzerdefinierten CSS, Page-Builder-Plugins und mehr.

Farben ändern mit dem Theme Customizer

Es ist super einfach, die Farben mit Hilfe der eingebautenWordPress Theme-Anpassungsprogramm.

Besuchen Sie zunächst dieErscheinungsbild “ Anpassen Seite in der Admin-Seitenleiste.

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

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

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

Das Twenty Twenty-One-Theme verfügt zum Beispiel über ein Panel „Farben und dunkler Modus“, mit dem der Benutzer eine Hintergrundfarbe auswählen und seine Einstellungen anpassen kann.Dunkelmodus.

Nachdem Sie das Panel geöffnet haben, klicken Sie einfach auf die Option „Farbe auswählen“. Daraufhin wird der Farbwähler geöffnet, in dem 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 zu veröffentlichen.

Farben im Full Site Editor ändern

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

Gehen Sie zunächst zurErscheinungsbild “ Editor in der Admin-Seitenleiste, um den vollständigen Site-Editor zu starten.

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

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

Von hier aus können Sie die Farben für Hintergrund, Text, Links, Überschriften und Schaltflächen des Themas ändern.

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

Farben mit benutzerdefiniertem CSS ändern

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

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

Deshalb empfehlen wir die Verwendung desWPCode Plugin, das beste WordPress-Code-Snippets-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.

Zunächst müssen Sie das ProgrammWPCode Plugin. Weitere Anweisungen finden Sie in unserem Leitfaden für Einsteiger unterwie man ein WordPress-Plugin installiert.

Sobald Sie WPCode aktiviert haben, müssen Sie dieCode-Schnipsel “ + Schnipsel hinzufügen Seite in der Admin-Seitenleiste.

Klicken Sie einfach auf die Schaltfläche „Snippet verwenden“ unter der Überschrift „Eigenen Code hinzufügen (neues Snippet)“.

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

Danach wählen Sie einfach „CSS Snippet“ als „Code-Typ“ aus dem Dropdown-Menü.

Als nächstes müssen Sie den benutzerdefinierten CSS-Code in das Feld „Codevorschau“ einfügen.

In diesem Abschnitt fügen wir benutzerdefinierten CSS-Code hinzu, der die Textfarbe auf der Website ändert:

p {

Wenn Sie dies getan haben, blättern Sie nach unten zum Abschnitt „Einfügen“.

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

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

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

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

Farben ändern mit SeedProd

Sie können die Farben auch mit der FunktionSeedProd Plugin.

Es ist diebester WordPress-Seitenersteller auf dem Markt, die es Ihnen ermöglicht, Themen von Grund auf zu erstellen, ohne irgendeinen Code zu verwenden.

Zunächst müssen Sie das Programm installieren und aktivieren.SeedProd Plugin. Weitere Einzelheiten finden Sie in unserem Leitfaden für Einsteiger überwie man ein WordPress-Plugin installiert.

Nach der Aktivierung begeben Sie sich zumSeedProd “ Theme Builder Seite in der WordPress-Verwaltungsseitenleiste.

Klicken Sie hier oben auf die Schaltfläche „Themenvorlagen-Kits“.

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

Dadurch gelangen Sie auf die Seite ‚Theme Template Kit Chooser‘. Hier können Sie aus einer der vorgefertigten Themenvorlagen von SeedProd wählen.

Weitere Einzelheiten finden Sie in unserem Tutorial überWie man ein WordPress-Theme ganz einfach ohne Code erstellt.

Nachdem Sie ein Thema ausgewählt haben, werden Sie auf die Seite „Themenvorlagen“ weitergeleitet.

Hier müssen Sie den Schalter „SeedProd-Theme aktivieren“ auf „Ja“ setzen, um das Thema zu aktivieren.

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

Dort klicken Sie auf das Zahnradsymbol unten in der linken Spalte.

Dies führt Sie zu den „Globalen CSS“-Einstellungen.

Von hier aus können Sie die Farben für den Hintergrund Ihrer Website, den Text, die Schaltflächen, die Links und vieles mehr anpassen.

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

Wie man die Hintergrundfarbe in WordPress ändert

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

Wenn Sie ein Blockthema verwenden, müssen Sie die Hintergrundfarbe mit dem Editor der Website ändern.

Zunächst müssen Sie sich zum Erscheinungsbild “ Editorin der Admin-Seitenleiste.

Sobald der vollständige Site-Editor gestartet ist, klicken Sie auf das Symbol „Stile“ in der oberen rechten Ecke des Bildschirms.

Danach klicken Sie einfach auf das Feld „Farben“, um weitere Einstellungen zu öffnen

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

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

Sobald sich der Bereich „Hintergrund“ erweitert hat, können Sie hier die Hintergrundfarbe Ihrer Website auswählen.

Alle WordPress-Themes bieten eine Reihe von Standard-Websitefarben, 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.

Daraufhin wird der Farbwähler geöffnet, in dem 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 zunächst oben auf die Registerkarte „Farbverlauf“ wechseln.

Als Nächstes können Sie einen Standardverlauf aus dem Thema wählen oder mit Hilfe des Farbauswahlwerkzeugs 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 über den Theme-Customizer, SeedProd und benutzerdefinierte CSS ändern.

Ausführlichere Anweisungen finden Sie in unserem Leitfaden überwie man die Hintergrundfarbe in WordPress ändert.

Ändern der Farbe der Kopfzeile in WordPress

Viele WordPress-Themes verfügen über eine integrierte Kopfzeile am oberen Rand der Seite. Er enthält in der Regel wichtige Seitenlinks, soziale Symbole, CTAs und mehr.

Wenn Sie ein Block-Theme verwenden, können Sie die WordPress-Kopfzeile mit dem vollständigen Site-Editor leicht anpassen.

Zunächst müssen Sie die Erscheinungsbild “ Editor in der Admin-Seitenleiste, um den vollständigen Website-Editor zu öffnen. Wählen Sie dort die Vorlage „Kopfzeile“ am oberen Rand durch Doppelklick aus.

Blättern Sie von hier aus einfach zum Abschnitt „Farbe“ und klicken Sie auf die Option „Hintergrund“.

Daraufhin öffnet sich 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 Farbauswahlwerkzeug öffnen.

Wenn Sie Ihre Kopfzeile mit einem Farbverlauf anpassen möchten, müssen Sie zur Registerkarte „Farbverlauf“ wechseln.

Danach können Sie einen Standardfarbverlauf auswählen oder mit dem Farbwähler einen eigenen Farbverlauf erstellen.

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

Wenn Sie die Farbe der Kopfzeile mit dem Theme-Customizer oder zusätzlichem CSS ändern möchten, lesen Sie bitte unseren Leitfaden für Anfänger überAnpassen der WordPress-Kopfzeile.

Wie man die Textfarbe in WordPress ändert

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

Wenn Sie ein Block-Thema verwenden, müssen Sie die Textfarbe mit dem Editor der Website ändern.

Sie können mit dem Besuch derErscheinungsbild “ Editor in der Seitenleiste der Verwaltung. Dadurch wird der vollständige Website-Editor aufgerufen, in dem Sie auf das Symbol „Stile“ in der oberen rechten Ecke klicken müssen.

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

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

Nach dem Öffnen der Textfarbeneinstellungen sehen Sie unter dem 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 dieWebAIM Contrast Checker Werkzeug um zu prüfen, ob Ihre Hintergrund- und Textfarbe zusammenpassen. Mit diesem Tool können Sie die Lesbarkeit von Text auf Ihrer Website verbessern.

Um die Textfarbe mit CSS, dem Theme-Customizer oder SeedProd anzupassen, lesen Sie bitte unsere Anleitung zuwie man die Textfarbe in WordPress ändert.

So ändern Sie die Farbe der Textauswahl in WordPress

Wenn ein Besucher einen Text auf Ihrer Website auswählt, wird dieser mit einer Hintergrundfarbe versehen. 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 Themendateien können Sie die Farbe der Textauswahl leicht ändern. Beachten Sie jedoch, dass der CSS-Code verschwindet, wenn Sie zu einem anderen Design wechseln oder Ihr aktuelles Design aktualisieren.

Deshalb empfehlen wir die Verwendung desWPCode Plugin, das beste WordPress-Code-Snippets-Plugin auf dem Markt.

Zunächst müssen Sie das Programm installieren und aktivieren.WPCode Plugin. Weitere Anweisungen finden Sie in unserem Leitfaden überwie man ein WordPress-Plugin installiert.

Nach der Aktivierung gehen Sie zumCode-Schnipsel “ + Schnipsel hinzufügen Seite in der Admin-Seitenleiste.