Home » WordPress » Wie man die Hintergrundfarbe in WordPress ändert

Wie man die Hintergrundfarbe in WordPress ändert

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:

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ü.

how to edit wordpress website colors

Sobald sich der Full Site Editor öffnet, schauen Sie oben rechts auf der Seite – dort finden Sie das Symbol Styles. Klicken Sie es an.

how to change wordpress webste colors in full site editor

Klicken Sie auf Farben im Menü Stile.

how to change colors in wordpress

Klicken Sie nun auf Hintergrund.

how to change background in full site editor

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.

background color change in wordpress

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.

how to change background color in wordpress full site editor

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.

how to set gradient color in wordpress full site editor

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.

wordpress where to change background color

Best WordPress hosting 2024

Hier ist ein Beispiel aus dem Twenty Twenty-One-Theme. Klicken Sie auf die Registerkarte Farben & Dunkler Modus.

how to change background color in classic wordpress themes

Sie können aus den vordefinierten Farben am unteren Rand der Registerkarte auswählen oder eine beliebige Farbe aus dem Farbwähler auswählen.

how to change colors in wordpress

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.

wordpress add css background color

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.

wordpress how to change background color

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.

where to find post or page id in wordpress

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/:

wordpress how to setup gradient color background

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.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK