Möchten Sie die Hintergrundfarbe Ihrer WordPress-Website ändern? Es gibt verschiedene Möglichkeiten, das zu tun. Hier finden Sie alles, was Sie über das Hinzufügen oder Ändern von Hintergrundfarben in WordPress wissen müssen.
Was Sie in diesem Tutorial lernen werden:
- wie man die Hintergrundfarbe in WordPress mit Full Site Editing Themes ändert
- wie man die Hintergrundfarbe von WordPress-Websites mit klassischen WordPress-Themes ändert
- wie man die Hintergrundfarbe in WordPress mit CSS ändert (funktioniert mit jedem Theme)
- wie man nur die Hintergrundfarbe der Homepage in WordPress ändern kann
- wie man die Hintergrundfarbe nur in bestimmten WordPress-Seiten oder Beiträgen ändert (funktioniert mit jedem Theme)
- wie man einen Farbverlauf in WordPress mit CSS einstellt
Beginnen wir mit der Einstellung der Hintergrundfarbe in Full Site Editing (FSE) Themes.
Wie ändert man die Hintergrundfarbe in WordPress Full Site Editing Themes
Die neuesten Standard-WordPress-Themes wie Twenty Twenty-Three sind Full-Site-Editing-Themes. Fast jedes Element des Themes kann mit dem integrierten Theme-Editor konfiguriert werden. Es erlaubt Ihnen auch, die Hintergrundfarbe der Website zu ändern.
Klicken Sie zunächst auf Erscheinungsbild >> Editor im Admin-Menü.
Sobald sich der Full Site Editor öffnet, schauen Sie oben rechts auf der Seite – dort finden Sie das Symbol Styles. Klicken Sie es an.
Klicken Sie auf Farben im Menü Stile.
Klicken Sie nun auf Hintergrund.
Sobald Sie im Abschnitt Hintergrund sind, finden Sie einige Optionen. Sie können Volltonfarbe oder Farbverlauf wählen.
Wenn Sie eine Volltonfarbe verwenden möchten, können Sie eine beliebige Farbe aus den vordefinierten Farben unten auswählen, oder Sie klicken auf den Farbcode (FFFFFF im Beispiel), um eine beliebige Farbe auszuwählen.
In WordPress können Sie buchstäblich jede beliebige Farbe für den Hintergrund mit dem integrierten Farbwähler auswählen. Wählen Sie eine beliebige Farbe aus, und Sie werden sehen, wie sie live aussieht – Sie müssen die Seite nicht jedes Mal speichern und aktualisieren.
Wenn Sie einen Hintergrund mit Farbverlauf in WordPress verwenden möchten, können Sie einen Hintergrund aus einigen vordefinierten auswählen. Sie können aber auch eine beliebige Hintergrundfarbe mit Farbverlauf erstellen, indem Sie den integrierten Farbwähler verwenden.
Vergessen Sie nur nicht, auf die Schaltfläche Speichern zu klicken, um die Änderungen zu speichern, wenn Sie den Hintergrund auf Ihrer Website anwenden möchten.
Wie man die Hintergrundfarbe in klassischen WordPress-Themes ändert
Viele WordPress-Themes haben Einstellungen im Theme Customizer, um die Hintergrundfarbe einzustellen.
Wenn Ihr WordPress-Theme über diese Funktion verfügt, finden Sie sie unter Erscheinungsbild >> Anpassen. Sie können auch auf das gleiche Tool zugreifen, wenn Sie Ihre Website als Besucher ansehen – klicken Sie einfach auf den Link Anpassen am oberen Rand der Seite.
Hier ist ein Beispiel aus dem Twenty Twenty-One-Theme. Klicken Sie auf die Registerkarte Farben & Dunkler Modus.
Sie können aus den vordefinierten Farben am unteren Rand der Registerkarte auswählen oder eine beliebige Farbe aus dem Farbwähler auswählen.
Alle Farbänderungen, die Sie vornehmen, werden sofort sichtbar sein. Vergessen Sie nicht, die Änderungen zu speichern, um die Hintergrundfarbe in Ihrer WordPress-Website zu aktualisieren.
Wie man die Hintergrundfarbe mit CSS-Code ändert
Einige WordPress-Themes verfügen möglicherweise nicht über Tools zum Ändern der Hintergrundfarbe. Das ist aber nicht weiter schlimm – es ist gar nicht so schwer, die Hintergrundfarbe mit CSS-Code zu ändern. Es funktioniert mit JEDEM WordPress-Theme.
Um CSS-Code zu WordPress hinzuzufügen, müssen Sie den Customizer über den Link Anpassen unter Darstellung >> Anpassen oder über das obere Menü öffnen, wenn Sie die Website als Besucher besuchen.
Auf der linken Seite sehen Sie das Menü Customizer. Öffnen Sie die Registerkarte Zusätzliches CSS.
Sobald Sie die Registerkarte geöffnet haben, geben Sie diesen Code in das Feld Zusätzliches CSS ein:
body {
background-color: pink;
}Das Ergebnis wird sofort angezeigt, während Sie den Code eingeben.
Möglicherweise möchten Sie eine spezifischere Farbe für Ihren Hintergrund anstelle der Hauptfarbnamen wählen. Auch das ist leicht zu bewerkstelligen – Sie können den Farbnamen durch seinen HEX-Code ersetzen.
HEX ist ein Code mit 6 Symbolen (mit # davor), der jede beliebige Farbe darstellen kann. Zum Beispiel steht #FF0000 für Rot, #FFFFFF für Weiß, #000000 für Schwarz und so weiter. Sie können den HEX-Code für jede beliebige Farbe erhalten, indem Sie Online-Farbwähler verwenden (wie https://htmlcolorcodes.com/ ).
Wie legen Sie also die Hintergrundfarbe mit HEX-Code fest? Ganz einfach. Hier ist das Beispiel aus dem obigen Bild, das in der Registerkarte Additional CSS eingegeben werden sollte:
body {
background-color: #d1e4dd;
}Wie man die Hintergrundfarbe der Homepage in WordPress ändert
Nur die Hintergrundfarbe der Homepage in WordPress zu ändern, ist überhaupt nicht kompliziert. Alle korrekt erstellten WordPress-Themes verwenden Body-Klassen. Jede Homepage hat eine Klasse namens home.
Alles, was Sie tun müssen, um nur die Hintergrundfarbe der Homepage zu ändern, finden Sie in diesem Beispiel:
body.home {
background-color: #d1e4dd;
}Vergessen Sie nicht, den Farbcode (d1e4dd) durch die gewünschte HEX-Farbe zu ersetzen.
Wie man die Hintergrundfarbe nur für bestimmte Beiträge oder Seiten in WordPress ändert
Um die Hintergrundfarbe nur für eine bestimmte Seite oder einen bestimmten Beitrag in WordPress zu ändern, müssen Sie ein paar einfache Tricks kennen.
Erstens – Sie müssen die ID dieser bestimmten WordPress-Seite oder dieses Beitrags kennen. Um herauszufinden, welche Seite welche ID hat, müssen Sie zu Seiten >> Alle Seiten im WordPress-Adminpanel gehen. Versuchen Sie, eine beliebige Seite zu bearbeiten, und sehen Sie sich den Seitenlink in der URL des Browsers an. Der Teil, der ?post=[NUMBER] anzeigt, gibt die Seiten-ID an. Im Beispiel sehen Sie, dass die Seiten-ID 2 ist.
Die gleiche Regel gilt, wenn Sie die Beitrags-ID wissen wollen. Sie brauchen nur einen beliebigen Beitrag zu öffnen(Beiträge >> Alle Beiträge) und in der URL nach der Beitrags-ID zu suchen.
Um den Hintergrund nur für eine bestimmte Seite einzustellen, müssen Sie diesen Code in der Registerkarte Additional CSS eingeben (class: page-id-[PAGE ID, die Sie aus der URL ermittelt haben]):
body.page-id-2 {
background-color: #d1e4dd;
}Wenn Sie den Hintergrund für einen bestimmten Beitrag festlegen möchten, müssen Sie einen etwas anderen Code eingeben (class: postid-[POST ID] ):
body.postid-2 {
background-color: #d1e4dd;
}Das war’s – jetzt wissen Sie, wie Sie eine benutzerdefinierte Hintergrundfarbe nur für bestimmte Beiträge oder Seiten in WordPress hinzufügen können.
Wie man in klassischen WordPress-Themes einen Farbverlauf für den Hintergrund einstellt
Das Einstellen von Farbverläufen in klassischen WordPress-Themes ist so einfach wie das Einstellen einer Volltonfarbe. Sie brauchen nur etwas Hilfe von Online-Generatoren für CSS-Farbverläufe. Zum Beispiel dieser hier https://cssgradient.io/:
Sie können die Farben nach Belieben ändern, und das Tool generiert einen benutzerdefinierten Code für den Hintergrundverlauf. Alles, was Sie tun müssen, ist, ihn in WordPress auf die gleiche Weise einzugeben, wie Sie Volltonfarben eingegeben haben – über Anpassen >> Zusätzliches CSS:
body {
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}Das war’s – Ihr WordPress-Hintergrund mit Farbverlauf ist fertig!
Autor des Beitrags – David Pisnoy.
