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 drei 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
• So ändern Sie die Hintergrundfarbe im Full Site Editor (Methode 2024)
• So ändern Sie die Hintergrundfarbe in WordPress mit CSS
• So ändern Sie zufällig Hintergrundfarben in WordPress
• Hintergrundfarbe für einzelne Beiträge ändern
• Bonus Tip: Use a Page Builder for More Design Control
• FAQs: Hintergrundfarben in WordPress ändern

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.

So ändern Sie die Hintergrundfarbe im Full Site Editor (Methode 2024)

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

Suchen Sie jetzt nach einer Möglichkeit, die Hintergrundfarbe in WordPress zufällig zu ändern?

Sie können einen sanften Hintergrundfarbwechsel-Effekt hinzufügen, um automatisch zwischen verschiedenen Hintergrundfarben zu wechseln. Der Effekt durchläuft mehrere Farben, bis er die Endfarbe erreicht.

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

Sie können auch die Hintergrundfarbe jedes einzelnen Blogbeitrags in WordPress ändern, anstatt eine einzige Farbe für Ihre gesamte Website zu verwenden mithilfe von benutzerdefiniertem CSS.

Es ermöglicht Ihnen, das Erscheinungsbild bestimmter Beiträge zu ändern und deren Hintergründe zu personalisieren. Sie können beispielsweise den Stil jedes Beitrags basierend auf den Autoren anpassen oder eine andere Hintergrundfarbe für Ihren meistkommentierten Beitrag anzeigen.

Sie können sogar die Hintergrundfarbe für Beiträge in einer bestimmten Kategorie ändern. Nachrichtenbeiträge können beispielsweise andere Hintergrundfarben haben als Tutorials.

Das erste, was Sie tun müssen, ist, die Post-ID-Klasse im CSS Ihres Themes zu finden. Sie können dies tun, indem Sie einen beliebigen Blogbeitrag anzeigen und dann mit der rechten Maustaste klicken, um das Inspektionstool in Ihrem Browser zu verwenden.

Hier ist ein Beispiel, wie es aussehen würde:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">

Sobald Sie Ihre Beitrags-ID haben, können Sie die Hintergrundfarbe eines einzelnen Beitrags mit dem folgenden benutzerdefinierten CSS ändern. Ersetzen Sie einfach die Beitrags-ID, um Ihre eigene anzupassen, und den gewünschten Hintergrundfarbcode.

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

Um das benutzerdefinierte CSS hinzuzufügen, können Sie den WordPress Theme Customizer verwenden. Stellen Sie zunächst sicher, dass Sie auf Ihrer WordPress-Website angemeldet sind. Besuchen Sie dann Ihren Blogbeitrag und klicken Sie oben auf die Option „Anpassen“.

Danach wechseln Sie zum Tab Zusätzliches CSS im Menü auf der linken Seite.

Geben Sie als Nächstes den benutzerdefinierten CSS-Code ein.

Sobald das erledigt ist, klicken Sie auf die Schaltfläche „Veröffentlichen“.

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

FAQs: Hintergrundfarben in WordPress ändern

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.