So ändern Sie die Hintergrundfarbe in WordPress (Anfängerleitfaden)

Die Hintergrundfarbe Ihrer Website bestimmt die gesamte Stimmung für Ihre Besucher.

Vielleicht möchten Sie etwas Sauberes und Professionelles, Warmes und Einladendes oder Kühnes und Kreatives – welche Stimmung Sie auch immer anstreben, die richtige Hintergrundfarbe kann den entscheidenden Unterschied machen.

Die gute Nachricht ist, dass die Änderung keine technischen Fähigkeiten oder teuren Werkzeuge erfordert. WordPress verfügt über integrierte Funktionen, mit denen Sie Farben mit nur wenigen Klicks anpassen können.

Nachdem wir vielen Website-Besitzern geholfen haben, ihre Websites zu personalisieren, haben wir festgestellt, dass die meisten Menschen überrascht sind, wie einfach und unmittelbar der Prozess sein kann.

Wir führen Sie durch verschiedene einfache Möglichkeiten, Ihre Hintergrundfarbe in WordPress zu aktualisieren, beginnend mit der anfängerfreundlichsten Option und weiter zu etwas fortgeschritteneren Techniken.

Warum Ihre WordPress-Hintergrundfarbe wirklich wichtig ist 🎨

Betrachten Sie die Hintergrundfarbe Ihrer Website als die Wände Ihres digitalen Zuhauses. Während Ihr WordPress-Theme eine Standardfarbe mitbringt, kann die Wahl der richtigen Hintergrundfarbe einen großen Unterschied darin machen, wie einladend Ihre Website für Besucher wirkt.

Hier ist, warum dieses WordPress-Designelement so wichtig ist:

• Sie machen Ihre Inhalte leichter lesbar
• Sie helfen wichtigen Informationen, hervorzustechen
• Sie schaffen die Stimmung für Ihre Website
• They can make your site look more professional

Die richtige Hintergrundfarbe kann helfen, Ihre wichtigen Schaltflächen hervorzuheben und Ihre Conversions zu steigern. Sie können auch verschiedene Farben verwenden, um Ihre Inhalte besser zu organisieren, z. B. bestimmte Farben für verschiedene Blog-Kategorien oder spezielle Ankündigungen.

Und wenn Sie Ihre Website noch ansprechender gestalten möchten, können Sie sogar Video-Hintergründe hinzufügen, um die Aufmerksamkeit Ihrer Besucher zu fesseln.

Nichtsdestotrotz wollen wir uns ansehen, wie Sie die Hintergrundfarbe in WordPress ändern können. Wir zeigen Ihnen verschiedene Möglichkeiten, die Hintergrundfarbe anzupassen, damit Sie direkt zu dem Abschnitt springen können, den Sie bevorzugen:

So ändern Sie die Hintergrundfarbe im WordPress Theme Customizer

Abhängig von Ihrem Theme können Sie die Hintergrundfarbe möglicherweise mit dem WordPress Theme Customizer ändern. Damit können Sie das Erscheinungsbild Ihrer Website in Echtzeit bearbeiten, ohne Code bearbeiten zu müssen.

Um auf den WordPress Theme-Customizer zuzugreifen, können Sie sich auf Ihrer Website anmelden und dann zu Darstellung » Anpassen gehen.

Dies öffnet den Theme-Customizer, wo Sie mehrere Optionen zur Änderung Ihres Themes finden. Dazu gehören Menüs, Farben, Homepage, Widgets, Hintergrundbild und mehr.

The specific options available will depend on which WordPress theme your site is using. For this tutorial, we are using the default Twenty Twenty-One theme.

Um die Hintergrundfarbe Ihrer Website zu ändern, klicken Sie im Menü auf der linken Seite auf den Tab „Farben & Dunkelmodus“.

Als Nächstes müssen Sie auf die Option 'Hintergrundfarbe' klicken und eine Farbe für Ihre Website auswählen.

Sie können das Farbauswahlwerkzeug verwenden oder einen Hex-Farbfarbcode für Ihren Hintergrund eingeben.

Wenn Sie mit den Änderungen fertig sind, vergessen Sie nicht, auf die Schaltfläche 'Veröffentlichen' zu klicken.

Sie können nun Ihre WordPress-Website besuchen, um die neue Hintergrundfarbe in Aktion zu sehen.

Your theme may not have this option available in the Theme Customizer. In that case, you can try one of the methods below.

Hintergrundfarbe im vollständigen Website-Editor (Block-Themes) ändern

Der vollständige Website-Editor (FSE) ist eine WordPress-Bearbeitungsplattform zum Bearbeiten von Block-Themes. Dieser Editor macht es super einfach, die Hintergrundfarbe Ihrer Website zu ändern. Lassen Sie uns den Prozess gemeinsam durchgehen.

Beginnen Sie, indem Sie in Ihrem WordPress-Dashboard zu Darstellung » Editor navigieren.

Nun sehen Sie in einer der Menüoptionen eine Schaltfläche 'Stile'.

Klicken Sie einfach darauf.

Klicken Sie nun auf den Stift-Bearbeiten-Button.

Dies bringt Sie zur Bearbeitungsoberfläche.

Nun bemerken Sie ein praktisches Bedienfeld auf der rechten Seite Ihres Bildschirms. Dies ist Ihr Design-Kontrollzentrum, in dem Sie Farben, Schriftarten und mehr ändern können.

Um Ihre Hintergrundfarbe zu ändern, klicken Sie einfach im Bedienfeld „Stile“ auf „Farben“.

Klicken Sie als Nächstes auf „Hintergrund“.

Sie können nun zwischen einer Volltonfarbe oder einem Farbverlauf wählen. Wählen Sie frei, was zu Ihrem Stil passt. Wenn Sie mit Ihrer Wahl zufrieden sind, klicken Sie auf „Speichern“ und fertig!

So ändern Sie die Hintergrundfarbe in WordPress mit CSS

Fragen Sie sich, wie Sie die Hintergrundfarbe mit CSS ändern können?

Eine weitere Möglichkeit, die Hintergrundfarbe Ihrer WordPress-Website zu ändern, ist das Hinzufügen von benutzerdefiniertem CSS im WordPress Theme Customizer.

Gehen Sie zunächst zu Design » Anpassen und dann zum Tab „Zusätzliches CSS“.

Als Nächstes können Sie den folgenden Code eingeben:

body {
 background-color: #FFFFFF;
}

Sie müssen lediglich den Hintergrundfarbcode durch den gewünschten Farbcode für Ihre Website ersetzen. Geben Sie den Code anschließend im Tab „Zusätzliches CSS“ ein.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche 'Veröffentlichen' zu klicken. Sie können nun Ihre Website besuchen, um die neue Hintergrundfarbe anzuzeigen.

Weitere Details finden Sie in unserem Leitfaden zum Thema Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.

So ändern Sie zufällig Hintergrundfarben in WordPress

Möchten Sie Ihrem Website einen sanften Hintergrundfarbwechsel-Effekt hinzufügen? Dieser Effekt wechselt automatisch durch verschiedene Farben, was großartig sein kann, um einen bestimmten Bereich hervorzuheben oder Aufmerksamkeit zu erregen.

Um den Effekt hinzuzufügen, müssen Sie Code zu Ihrer WordPress-Website hinzufügen. Wir führen Sie unten durch den Prozess.

Zuerst müssen Sie die CSS-Klasse des Bereichs herausfinden, in dem Sie den sanften Hintergrundfarbwechsel-Effekt hinzufügen möchten.

Sie können dies tun, indem Sie das Inspect-Tool in Ihrem Browser verwenden. Alles, was Sie tun müssen, ist, mit der Maus auf den Bereich zu zeigen, dessen Farbe Sie ändern möchten, und mit der rechten Maustaste klicken, um das Inspect-Tool auszuwählen.

Anschließend müssen Sie die CSS-Klasse eingeben, die Sie ansprechen möchten. Im obigen Screenshot möchten wir beispielsweise den Bereich mit der CSS-Klasse „page-header“ ansprechen.

Als Nächstes müssen Sie auf Ihrem Computer einen einfachen Texteditor öffnen, z. B. Notepad, und eine neue Datei erstellen. Sie müssen die Datei als 'wpb-background-tutorial.js' auf Ihrem Desktop speichern.

Once that’s done, you can add the following code to the JS file you just created:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

Wenn Sie sich den Code ansehen, werden Sie feststellen, dass wir die CSS-Klasse 'page-header' verwendet haben, da dies der Bereich ist, den wir auf unserer Website ansprechen möchten.

Sie werden auch sehen, dass wir vier Farben mit dem Hex-Farrcode verwendet haben. Sie können beliebig viele Farben für Ihren Hintergrund hinzufügen. Alles, was Sie tun müssen, ist, die Farbcodes in den Ausschnitt einzugeben und sie durch ein Komma und einfache Anführungszeichen zu trennen, wie die anderen Farben.

Jetzt, da Ihre JS-Datei bereit ist, müssen Sie sie in den JS-Ordner Ihres WordPress-Themes hochladen. Der einfachste Weg, dies zu tun, ist mit einem File Transfer Protocol (FTP)-Client, mit dem Sie Dateien direkt auf Ihrem Webserver verwalten können.

Für dieses Tutorial verwenden wir FileZilla. Es ist ein kostenloser und einfacher FTP-Client für Windows, Mac und Linux. Tatsächlich ist es ein gängiges Werkzeug, das wir selbst zur Verwaltung von Website-Dateien getestet haben.

Um zu beginnen, müssen Sie sich bei Ihrem FTP-Server anmelden. Die Anmeldedaten finden Sie in der E-Mail von Ihrem Hosting-Anbieter oder im cPanel-Dashboard Ihres Hosting-Kontos.

Nach der Anmeldung sehen Sie unter der Spalte „Remote-Site“ eine Liste der Ordner und Dateien Ihrer Website. Navigieren Sie zum JS-Ordner im Theme Ihrer Website.

Wenn Ihr Theme keine js-Ordner hat, können Sie einen erstellen.

Klicken Sie einfach mit der rechten Maustaste auf den Ordner Ihres Themes im FTP-Client und wählen Sie die Option 'Verzeichnis erstellen'.

Als Nächstes müssen Sie den Speicherort Ihrer JS-Datei in der Spalte 'Lokale Website' öffnen.

Klicken Sie dann mit der rechten Maustaste auf die Datei und wählen Sie die Option „Hochladen“, um die Datei Ihrem Theme hinzuzufügen.

Für weitere Details können Sie unserem Tutorial zum Hochladen von Dateien mit FTP in WordPress folgen.

Als Nächstes müssen Sie den folgenden Code in die funtions.php-Datei Ihres Themes einfügen. Dieser Code lädt die JavaScript-Datei korrekt und das abhängige jQuery-Skript, das Sie für die Funktion dieses Codes benötigen:

function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
 }
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

Wir empfehlen die Verwendung des kostenlosen WPCode-Plugins, um den Code sicher zu Ihrer Website hinzuzufügen. Weitere Details finden Sie in unserem Leitfaden zum Einfügen von Snippets aus dem Web in WordPress.

Sie können Ihre Website nun besuchen, um die zufällig wechselnden Farben in dem von Ihnen ausgewählten Bereich in Aktion zu sehen.

Hintergrundfarbe für einzelne Beiträge ändern

Möchten Sie einem bestimmten Blogbeitrag ein einzigartiges Aussehen verleihen? Sie können die Hintergrundfarbe einzelner Beiträge mit benutzerdefiniertem CSS ändern. Dies ermöglicht es Ihnen, spezielle Ankündigungen hervorzuheben, Inhalte nach Farben zu kategorisieren oder einfach kreativ mit Ihrem Design zu werden.

Zuerst müssen Sie die spezifische Post-ID-Klasse in der CSS-Datei Ihres Themes finden. Zeigen Sie einfach den Blogbeitrag an, den Sie anpassen möchten, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie das Werkzeug 'Untersuchen'.

Suchen Sie im Quellcode nach dem Tag <article> oder dem Tag <body>. Sie sehen eine Klasse, die wie post-104 oder postid-104 aussieht.

Sobald Sie Ihre Beitrags-ID haben, können Sie den folgenden benutzerdefinierten CSS-Schnipsel verwenden. Stellen Sie sicher, dass Sie die Beitrags-ID und den Farbcode durch Ihre eigenen Details ersetzen:

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

Um diesen Code hinzuzufügen, gehen Sie zu Darstellung » Anpassen und fügen Sie ihn in den Tab 'Zusätzliches CSS' ein.

Sobald Sie auf 'Veröffentlichen' klicken, ändert sich die Hintergrundfarbe nur für diesen spezifischen Blogbeitrag.

Sie können nun Ihren Blogbeitrag besuchen, um die neue Hintergrundfarbe zu sehen.

Wenn Sie die Hintergrundfarbe basierend auf Autor, Kommentaren oder Kategorie ändern möchten, lesen Sie unser detailliertes Tutorial unter So gestalten Sie jeden WordPress-Beitrag unterschiedlich.

Bonus-Tipp: Verwenden Sie einen Page Builder für mehr Designkontrolle

Das Ändern von Hintergrundfarben ist nur der Anfang. Wenn Sie die volle Kontrolle über das Design Ihrer Website übernehmen möchten, eröffnet Ihnen ein Page Builder so viele weitere Möglichkeiten.

Bei WPBeginner empfehlen wir SeedProd, da es der beliebteste und benutzerfreundlichste Page Builder für WordPress ist. Unsere Partner-Marken haben ihn auch zum Entwerfen ihrer Websites verwendet, darunter WPForms, Duplicator und Charitable.

Es gibt Ihnen die vollständige Designkontrolle und ermöglicht Ihnen Folgendes:

• Gestalten Sie jede Seite ohne Code
• Farben, Layouts und Abstände anpassen
• Erstellen Sie professionell aussehende Seiten in wenigen Minuten
• Sorgen Sie dafür, dass Ihre Seiten auf allen Geräten großartig aussehen

Wir haben das Tool in unserer Demo-Umgebung gründlich getestet und festgestellt, dass es sehr intuitiv und einfach zu bedienen ist. Um mehr über unsere Erfahrungen zu erfahren, lesen Sie unseren SeedProd-Testbericht.

Der Einstieg ist einfach – installieren und aktivieren Sie SeedProd einfach mit unserem einfachen Installationsleitfaden für WordPress-Plugins.

Hinweis: Sie können mit der kostenlosen Version beginnen, aber SeedProd Pro bietet Ihnen Zugriff auf mehr Vorlagen und Designoptionen, falls Sie diese benötigen.

Sobald das Plugin aktiv ist, werden Sie aufgefordert, Ihren Lizenzschlüssel einzugeben. Sie finden den Schlüssel in Ihrem SeedProd-Konto. Nach der Eingabe des Schlüssels klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Als Nächstes können Sie zu SeedProd » Seiten navigieren.

Klicken Sie von hier aus auf die Schaltfläche „Neue Landingpage hinzufügen“.

Danach müssen Sie ein Theme für Ihre Landingpage auswählen. SeedProd bietet viele schöne Landingpage-Vorlagen für den Einstieg.

Sie können auch eine leere Vorlage verwenden, um von Grund auf neu zu beginnen. Wir empfehlen jedoch die Verwendung einer Vorlage, da dies der einfachere und schnellere Weg ist, eine Landingpage zu erstellen.

Wenn Sie eine Vorlage auswählen, werden Sie aufgefordert, einen Seitennamen einzugeben und eine URL auszuwählen.

Klicken Sie danach einfach auf die Schaltfläche „Speichern und Seite bearbeiten starten“.

Auf dem nächsten Bildschirm sehen Sie den SeedProd Page Builder. Hier können Sie den Drag-and-Drop-Builder verwenden, um Blöcke aus dem Menü auf Ihrer linken Seite hinzuzufügen. Sie können eine Überschrift, ein Video, ein Bild, eine Schaltfläche usw. hinzufügen.

Wenn Sie nach unten scrollen, gibt es im Abschnitt „Erweitert“ weitere Blöcke. Sie können zum Beispiel einen Countdown-Timer hinzufügen, um Dringlichkeit zu erzeugen, Social-Media-Profile anzeigen, um Follower zu gewinnen, ein Optionsformular hinzufügen, um Leads zu sammeln, und mehr.

Mit dem Drag-and-Drop-Builder ist es mühelos, die Position jedes Blocks auf Ihrer Landingpage zu ändern. Sie können sogar das Layout, die Größe, die Farbe und die Schriftart des Textes ändern.

Um die Hintergrundfarbe Ihrer Landingpage zu ändern, wählen Sie einfach einen beliebigen Abschnitt der Seite aus. Sie sehen nun im Menü auf der linken Seite Optionen, um den Hintergrundstil, die Farbe und das Hinzufügen eines Bildes zu bearbeiten.

Wenn Sie mit der Bearbeitung Ihrer Landingpage fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Speichern“ zu klicken.

Als Nächstes können Sie zum Tab „Verbinden“ wechseln und die Seite mit verschiedenen E-Mail-Marketing-Diensten integrieren. Sie können sich zum Beispiel mit Constant Contact, Brevo (ehemals Sendinblue) und anderen verbinden.

Klicken Sie anschließend auf den Tab „Seiteneinstellungen“.

Hier können Sie den Seitenstatus von Entwurf auf Veröffentlichen ändern, um Ihre Seite live zu schalten.

Darüber hinaus können Sie auch die SEO-Einstellungen der Seite ändern, die Analysen anzeigen, benutzerdefinierten Code unter Skripte hinzufügen und eine benutzerdefinierte Domain eingeben.

Sobald Sie fertig sind, können Sie den SeedProd-Page-Builder verlassen und Ihre benutzerdefinierte Landingpage besuchen.

Video-Tutorial

Häufig gestellte Fragen zum Ändern von Hintergrundfarben in WordPress

Hier sind einige häufig gestellte Fragen unserer Leser zum Ändern von Hintergrundfarben in WordPress:

Kann ich stattdessen ein Bild für meinen Hintergrund verwenden?

Ja, das können Sie absolut. Die meisten WordPress-Themes, die es Ihnen ermöglichen, die Hintergrundfarbe zu ändern, bieten auch die Möglichkeit, ein Hintergrundbild hochzuladen.

Normalerweise finden Sie diese Einstellung im Theme Customizer (Darstellung » Anpassen) unter einem Tab wie „Hintergrundbild“. Von dort aus können Sie eine Datei von Ihrem Computer hochladen.

Beeinflusst die Änderung meiner Hintergrundfarbe die Geschwindigkeit meiner Website?

Eine einfarbige Hintergrundfarbe hat praktisch keinen Einfluss auf die Geschwindigkeit Ihrer Website und ist somit ein sicherer und einfacher Leistungsgewinn.

Die Verwendung eines großen, nicht optimierten Hintergrundbildes kann jedoch die Ladezeiten Ihrer Seiten erheblich verlangsamen. Wenn Sie ein Bild verwenden, empfehlen wir immer, es zuerst zu komprimieren.

Weitere Tipps finden Sie in unserem Leitfaden zur Optimierung von Bildern für das Web ohne Qualitätsverlust.

Wo finde ich den richtigen Hex-Code für meine Markenfarbe?

Ein Hex-Code ist ein sechsstelliger Code, der eine bestimmte Farbe darstellt (z. B. #FFFFFF für reines Weiß). Der beste Ort, um den Hex-Code Ihrer Marke zu finden, ist der offizielle Styleguide Ihres Unternehmens.

Wenn Sie noch keinen haben, können Sie ein kostenloses Online-Tool wie HTML Color Codes verwenden. Deren Farbwähler ermöglicht es Ihnen, den genauen Hex-Code für jeden gewünschten Farbton zu finden.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Hintergrundfarbe in WordPress ändern können. Möglicherweise möchten Sie auch unseren Leitfaden zum Konvertieren von Figma zu WordPress und unseren Vergleich der besten Webdesign-Software lesen.

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