Möchten Sie die Farben auf Ihrer WordPress-Website anpassen?
Farben spielen eine entscheidende Rolle dabei, Ihre Website ästhetisch ansprechend zu gestalten und Ihre Markenidentität zu etablieren. Glücklicherweise macht es WordPress sehr einfach, die Farben auf Ihrer gesamten Website anzupassen.
In diesem Artikel zeigen wir Ihnen, wie Sie die Farben Ihrer WordPress-Website, einschließlich Hintergrund-, Kopfzeilen-, Text- und Linkfarben, ganz einfach anpassen können.
Was ist Farbtheorie?
Bevor Sie mit der Anpassung der Farben auf Ihrer WordPress-Website beginnen können, ist es wichtig, die Farbtheorie zu verstehen.
Die Farbtheorie befasst sich mit Farben und ihrem Zusammenwirken. Es hilft Designern, Farbkombinationen zu erstellen, die sich gegenseitig ergänzen.
Bei der Gestaltung einer Website sollten Sie Farben wählen, die zusammen gut aussehen. Dadurch wird Ihre Website für Ihre Besucher attraktiver, was das Benutzererlebnis verbessern und das Engagement steigern kann.
Unterschiedliche Farben können bei Menschen unterschiedliche Emotionen und Gefühle hervorrufen, und die Farbtheorie kann Ihnen dabei helfen, die richtige Kombination für Ihre Website auszuwählen.
Rot wird beispielsweise häufig zur Darstellung von Lebensmitteln und Restaurants verwendet. Andererseits wird Blau häufig auf Banken- und Finanzwebsites verwendet.
Denn Rot kann Gefühle von Wärme, Energie und Leidenschaft erzeugen, während Blau Selbstvertrauen, Sicherheit und Ruhe bedeutet.
Neben der Ergänzung von Farben können Sie auch Farbkontraste nutzen, um die Aufmerksamkeit auf wichtige Bereiche Ihres WordPress-Blogs zu lenken.
Dadurch können Sie Ihre Inhalte besser lesbar machen, eine starke Markenidentität etablieren und eine bestimmte Atmosphäre auf der Website erzeugen.
Was sind WordPress-Themes? Können die Themenfarben geändert werden?
WordPress-Themes steuern, wie der Benutzer Ihre Website sieht. Ein typisches WordPress-Theme besteht aus einer Reihe vorgefertigter Vorlagen, die Sie auf Ihrer Website installieren, um deren Erscheinungsbild und Design zu ändern.
Themes machen Ihre Website attraktiver, benutzerfreundlicher und steigern das Engagement.
Sie können mit Plugins wie z. B. auch Ihre eigenen Themes von Grund auf erstellen SemillaProd und das Thrive Theme Builder.
Mit WordPress können Sie ganz einfach Themen anpassen und Hintergrundfarben, Schriftarten, Schaltflächen und Links ändern.
Beachten Sie jedoch, dass einige Themes über vordefinierte Farboptionen verfügen, während andere mehr Flexibilität bei der Auswahl eigener Farboptionen bieten.
Sehen wir uns nun an, wie Sie Farben in WordPress ganz einfach anpassen können.
So passen Sie Farben in WordPress an
Sie können Farben in WordPress mit vielen verschiedenen Methoden anpassen, darunter dem Theme-Customizer, dem vollständigen Site-Editor, benutzerdefiniertem CSS, Plugins für den Seitenersteller und mehr.
Ändern Sie die Farben mit dem Theme-Customizer
Es ist sehr einfach, Farben mit dem in WordPress integrierten Theme-Customizer zu ändern.
Besuchen Sie zunächst die Aussehen » Anpassen Seite aus der Admin-Seitenleiste.
Notiz: Wenn Sie die Registerkarte „Anpassen“ in Ihrem WordPress-Dashboard nicht finden, bedeutet das, dass Sie ein Block-Theme verwenden. Scrollen Sie nach unten zum nächsten Abschnitt dieses Tutorials, um herauszufinden, wie Sie die Farben in einem Blockdesign ändern.
Für dieses Tutorial verwenden wir das Standardthema Twenty Twenty-One.
Denken Sie daran, dass der Theme-Customizer je nach Theme, das Sie gerade verwenden, unterschiedlich aussehen kann.
Das Twenty Twenty-One-Design verfügt beispielsweise über ein Bedienfeld „Farben und Dunkelmodus“, mit dem Benutzer eine Hintergrundfarbe auswählen und den Dunkelmodus anpassen können.
Klicken Sie nach dem Öffnen des Panels einfach auf die Option „Farbe auswählen“. Dadurch 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 auf Ihrer Website zu veröffentlichen.
Ändern Sie die Farben im vollständigen Site-Editor
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 die Farben Ihrer Website zu ändern.
Gehen Sie zunächst zu Aussehen » Herausgeber Bildschirm aus der Admin-Seitenleiste, 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.
Hier können Sie die Hintergrund-, Text-, Link-, Kopfzeilen- und Schaltflächenfarben des Themas ändern.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.
Ändern Sie Farben mit benutzerdefiniertem CSS
CSS ist eine Sprache, mit der Sie das visuelle Erscheinungsbild Ihrer Website, einschließlich ihrer Farben, ändern können. 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 Themes auf Ihrer Website ändern oder Ihr bestehendes Theme aktualisieren.
Aus diesem Grund empfehlen wir die Verwendung von WPC-Code Plugin, das beste WordPress-Code-Snippets-Plugin auf dem Markt. Dies ist die einfachste Möglichkeit, benutzerdefinierten CSS-Code hinzuzufügen und ermöglicht Ihnen die sichere Anpassung der Farben auf Ihrer WordPress-Website.
Zuerst müssen Sie das installieren und aktivieren WPC-Code Stecker. Weitere Anweisungen finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.
Notiz: Da ist auch ein kostenlose Version von WPCode das du nutzen kannst. Wir empfehlen jedoch ein Upgrade auf einen kostenpflichtigen Plan, um das volle Potenzial des Plugins auszuschöpfen.
Sobald Sie WPCode aktiviert haben, müssen Sie die besuchen Code-Snippets » + Snippets hinzufügen Seite aus der Admin-Seitenleiste.
Klicken Sie einfach auf die Schaltfläche „Snippet verwenden“ unter der Überschrift „Benutzerdefinierten Code hinzufügen (neues Snippet)“.
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 anschließend einfach „CSS-Fragment“ 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 Farbe des Textes auf der Website ändert:
Scrollen Sie anschließend 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 einfach zum Seitenanfang und stellen Sie den Schalter „Inaktiv“ auf „Aktiv“ um.
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 die Farben auch mit anpassen SemillaProd Stecker.
Es ist der beste WordPress-Seitenersteller auf dem Markt, mit dem Sie Themen von Grund auf erstellen können, ohne Code zu verwenden.
Zuerst müssen Sie das installieren und aktivieren SemillaProd Stecker. Weitere Informationen finden Sie in unserer Einsteigeranleitung zur Installation eines WordPress-Plugins.
Gehen Sie nach der Aktivierung zu SeedProd » Theme Builder Seite aus der WordPress-Admin-Seitenleiste.
Klicken Sie hier oben auf die Schaltfläche „Theme Template Kits“.
Notiz: Wenn Sie Ihr eigenes Theme von Grund auf erstellen möchten, müssen Sie auf die Schaltfläche „+ Neue Theme-Vorlage hinzufügen“ klicken.
Dadurch gelangen Sie zur Seite „Theme Template Kit Selector“. Hier können Sie aus einer der vorgefertigten Themenvorlagen wählen, die SeedProd anbietet.
Weitere Informationen finden Sie in unserem Tutorial zum einfachen Erstellen eines WordPress-Themes ohne Code.
Nachdem Sie ein Thema ausgewählt haben, werden Sie zur Seite „Themenvorlagen“ weitergeleitet.
Hier müssen Sie den Schalter „SeedProd Theme aktivieren“ auf „Ja“ stellen, um das Theme zu aktivieren.
Jetzt müssen Sie auf einer beliebigen Themenseite auf den Link „Layout bearbeiten“ klicken, um den Drag-and-Drop-Editor zu öffnen.
Klicken Sie dort unten in der linken Spalte auf das Zahnradsymbol.
Dadurch gelangen Sie zu den „Global CSS“-Einstellungen.
Von hier aus können Sie die Hintergrundfarben, Texte, 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 verfügen über eine Standardhintergrundfarbe. Sie können es jedoch problemlos ändern, um Ihre Website zu personalisieren und die Lesbarkeit zu verbessern.
Wenn Sie ein Blockdesign verwenden, müssen Sie die Hintergrundfarbe mit dem vollständigen Site-Editor ändern.
Zuerst müssen Sie zum gehen Aussehen » Herausgeber Bildschirm aus der Admin-Seitenleiste.
Sobald der vollständige Site-Editor gestartet ist, klicken Sie auf das Symbol „Stile“ in der oberen rechten Ecke des Bildschirms.
Klicken Sie anschließend einfach auf das Bedienfeld „Farben“, um weitere 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 ist, 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.
Dadurch wird der Farbwähler geöffnet, in dem Sie die gewünschte Farbe 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.
Anschließend können Sie einen Standardverlauf aus dem Design auswählen oder mit Hilfe des Farbauswahltools 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 Theme-Customizer, SeedProd und benutzerdefiniertem CSS ändern.
Ausführlichere Anweisungen finden Sie in unserer Anleitung zum Ändern der Hintergrundfarbe in WordPress.
Bei vielen WordPress-Themes ist oben auf der Seite eine Kopfzeile integriert. Es enthält normalerweise Links zu wichtigen Seiten, soziale Symbole, CTAs und mehr.
Wenn Sie ein Block-Theme verwenden, können Sie den WordPress-Header ganz einfach mit dem vollständigen Site-Editor anpassen.
Zuerst müssen Sie die besuchen Aussehen » Herausgeber Bildschirm aus der Admin-Seitenleiste, um den vollständigen Site-Editor zu starten. Wählen Sie dort oben die Vorlage „Kopfzeile“ durch Doppelklick aus.
Scrollen Sie von hier aus einfach nach unten zum Abschnitt „Farbe“ und klicken Sie auf die Option „Hintergrund“.
Dadurch wird ein Popup-Fenster geöffnet, 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 Farbauswahl-Tool öffnen.
Um Ihren Header mithilfe eines Farbverlaufs anzupassen, müssen Sie zur Registerkarte „Verlauf“ wechseln.
Anschließend können Sie eine Standardverlaufsoption auswählen oder mit dem Farbwähler Ihre eigene anpassen.
Klicken Sie abschließend auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.
Wenn Sie die Header-Farbe mit dem Theme-Customizer oder zusätzlichem CSS ändern möchten, können Sie unseren Einsteigerleitfaden zum Anpassen Ihres WordPress-Headers lesen.
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 die besuchen Aussehen » Herausgeber Bildschirm aus der Admin-Seitenleiste. Dadurch wird der vollständige Site-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 zusätzliche Einstellungen zuzugreifen.
Sobald Sie dort angekommen sind, klicken Sie im Abschnitt „Elemente“ auf die Option „Text“.
Sobald die Textfarbeinstellungen geöffnet wurden, können Sie im Abschnitt „Standard“ verschiedene Textfarben sehen.
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 Ihre Änderungen zu speichern.
Zusätzlicher Tipp: Du kannst den … benutzen WebAIM-Kontrastprüfungstool um zu prüfen, ob Hintergrund- und Textfarbe zusammenpassen. Das Tool kann Ihnen dabei helfen, die Lesbarkeit von Texten auf Ihrer Website zu verbessern.
Um die Textfarbe mit CSS, dem Theme-Customizer oder SeedProd anzupassen, möchten Sie vielleicht unsere Anleitung zum Ändern der Textfarbe in WordPress lesen.
So ändern Sie die Textauswahlfarbe 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 möglicherweise nicht gut zu Ihrem WordPress-Theme und Sie möchten sie möglicherweise ändern.
Durch das Hinzufügen von CSS-Code zu Ihren Designdateien können Sie die Farbe der Textauswahl ganz einfach ändern. Beachten Sie jedoch, dass der CSS-Code verschwindet, wenn Sie zu einem anderen Theme wechseln oder Ihr aktuelles Theme aktualisieren.
Aus diesem Grund empfehlen wir die Verwendung von WPC-Code Plugin, das beste WordPress-Code-Snippets-Plugin auf dem Markt.
Zuerst müssen Sie das installieren und aktivieren WPC-Code Stecker. Weitere Anweisungen finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Gehen Sie nach der Aktivierung zu Code-Snippets » + Snippets hinzufügen Seite aus der Admin-Seitenleiste.
Klicken Sie dann einfach auf die Schaltfläche „Snippet verwenden“ unter der Überschrift „Benutzerdefinierten Code hinzufügen (neues Snippet)“.
Sobald Sie sich auf der Seite „Benutzerdefiniertes Snippet erstellen“ befinden, können Sie mit der Eingabe eines Namens für Ihr Code-Snippet beginnen.
Danach müssen Sie im Dropdown-Menü rechts „CSS-Fragment“ 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 Textauswahlfarbe ändern, indem Sie den Hex-Code neben „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 „Automatisches Einfügen“ wählen, um den Code bei der Aktivierung automatisch auszuführen.
Scrollen Sie anschließend nach oben und stellen Sie den Schalter „Inaktiv“ auf „Aktiv“ um.
Klicken Sie abschließend auf die Schaltfläche „Snippet speichern“, um Ihre Änderungen zu speichern.
Sie können jetzt Ihre Website besuchen, um die Farbe der Textauswahl zu überprüfen.
Sie können die Textauswahlfarbe auch mit dem Theme-Customizer 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 Blockthema verwenden, gehen Sie zu Aussehen » Herausgeber Bildschirm aus der Admin-Seitenleiste.
Sobald der vollständige Site-Editor gestartet ist, müssen Sie oben rechts auf das Symbol „Stile“ klicken.
Klicken Sie anschließend auf das Feld „Farben“ in der rechten Spalte, um weitere Einstellungen anzuzeigen.
Sobald Sie dort sind, klicken Sie einfach auf das Feld „Links“.
Dadurch werden die Einstellungen für die Linkfarbe gestartet und in der rechten Spalte werden mehrere Standard-Linkfarben angezeigt.
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 die Farbe des schwebenden Links auch mit dem FSE ändern. Das bedeutet, dass sich die Farbe des Links ändert, wenn jemand mit der Maus darüber fährt.
Zunächst müssen Sie von oben zur Registerkarte „Hover“ wechseln.
Dort können Sie eine Standardfarbe oder eine benutzerdefinierte Farbe auswählen, um die Farbe des schwebenden 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 bei Bedarf auch das Admin-Farbschema in WordPress ändern. Diese Methode kann nützlich sein, wenn Sie möchten, dass das Admin-Panel zum Branding Ihrer Website passt oder Ihre Lieblingsfarben verwendet.
Beachten Sie jedoch, dass eine Änderung des Farbschemas des WordPress-Dashboards keine Auswirkungen auf den sichtbaren Teil Ihrer Website hat.
Um das Admin-Farbschema zu ändern, besuchen Sie einfach die Benutzer » Profil Seite aus der Admin-Seitenleiste.
Neben der Option „Administration-Farbschema“ werden mehrere Farbschemata angezeigt.
Wählen Sie das gewünschte Profil 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 Einsteigerleitfaden zum Ändern des Admin-Farbschemas in WordPress.
Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, zu lernen, wie Sie die Farben auf Ihrer WordPress-Website anpassen. Vielleicht möchten Sie auch unseren ultimativen SEO-Leitfaden für WordPress und unseren Artikel zur Auswahl eines perfekten Farbschemas für Ihre WordPress-Website lesen.
