Wie man die Hintergrundfarbe in WordPress ändert (Anleitung für Anfänger)

Suchen Sie nach einer einfachen Möglichkeit, die Hintergrundfarbe Ihrer WordPress-Website zu ändern?

Die Hintergrundfarbe Ihrer Website spielt eine wichtige Rolle für Ihr Design und Ihr Branding und trägt dazu bei, dass Ihre Inhalte besser lesbar sind.

In diesem Artikel zeigen wir Ihnen, wie Sie die Hintergrundfarbe Ihrer WordPress-Website ganz einfach ändern können.

Warum sollte man die Hintergrundfarbe in WordPress ändern?

Ein WordPress-Theme wird mit einer Standard-Hintergrundfarbe geliefert. Das Ändern der Hintergrundfarbe kann dazu beitragen, das Design Ihrer Website zu personalisieren und die Lesbarkeit zu verbessern.

Sie können zum Beispiel einen bestimmten Abschnitt einer Seite durch eine andere Hintergrundfarbe hervorheben. Dies hilft dabei, Ihre Aufforderung zum Handeln (CTA) hervorzuheben und die Konversionsrate zu erhöhen.

Sie können unterschiedliche Hintergrundfarben für verschiedene Beiträge in Ihrem WordPress-Blog auf der Grundlage von Autoren, Kommentaren oder Kategorien verwenden. So können Sie Artikel von anderen Inhalten auf Ihrer Website unterscheiden.

Es gibt auch eine Möglichkeit, Videos als Hintergrund hinzuzufügen, um die Aufmerksamkeit Ihrer Besucher sofort zu erregen und das Engagement zu steigern.

Schauen wir uns also an, wie man die Hintergrundfarbe in WordPress ändern kann. Wir zeigen Ihnen verschiedene Möglichkeiten, wie Sie die Hintergrundfarbe anpassen können, so dass Sie zu jedem Abschnitt springen können, den Sie bevorzugen:

Ändern der Hintergrundfarbe mit dem WordPress Theme Customizer

Je nach Ihrem Theme können Sie die Hintergrundfarbe mit dem WordPress Theme Customizer ändern. Damit können Sie das Erscheinungsbild Ihrer Website in Echtzeit und ohne die Notwendigkeit, Code zu bearbeiten, bearbeiten.

Um auf den WordPress Theme Customizer zuzugreifen, loggen Sie sich auf Ihrer Website ein und gehen Sie dann auf Darstellung “ Anpassen.

Daraufhin wird der Theme Customizer geöffnet, in dem Sie mehrere Optionen zur Änderung Ihres Themes finden. Dazu gehören die Menüs, Farben, die Homepage, Widgets, das Hintergrundbild und vieles mehr.

Welche Optionen im Einzelnen verfügbar sind, hängt davon ab, welches WordPress-Theme Ihre Website verwendet. Für dieses Tutorial verwenden wir das Standard-Theme Twenty Twenty-One.

Um die Hintergrundfarbe Ihrer Website zu ändern, klicken Sie im Menü auf der linken Seite auf die Registerkarte „Farben & Dunkler Modus“.

Als Nächstes müssen Sie auf die Option „Hintergrundfarbe“ klicken und eine Farbe für Ihre Website auswählen. Sie können den Farbwähler verwenden oder einen Hex-Farbcode 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 Website besuchen, um die neue Hintergrundfarbe in Aktion zu sehen.

Möglicherweise ist diese Option im Theme Customizer Ihres Themes nicht verfügbar. In diesem Fall können Sie eine der folgenden Methoden ausprobieren.

Ändern der Hintergrundfarbe durch Hinzufügen von benutzerdefiniertem CSS

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

Gehen Sie zunächst auf Darstellung “ Anpassen und dann auf die Registerkarte „Zusätzliche CSS“.

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

body {
 background-color: #FFFFFF;
}

Sie müssen lediglich den Code für die Hintergrundfarbe durch den Farbcode ersetzen, den Sie auf Ihrer Website verwenden möchten. Als Nächstes geben Sie den Code auf der Registerkarte Additional 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 zu sehen.

Weitere Details finden Sie in unserer Anleitung, wie Sie Ihrer WordPress-Website ganz einfach benutzerdefinierte CSS hinzufügen können.

Zufällige Änderung der Hintergrundfarben in WordPress

Suchen Sie nun nach einer Möglichkeit, die Hintergrundfarbe in WordPress nach dem Zufallsprinzip zu ändern?

Sie können einen sanften Effekt für den Wechsel der Hintergrundfarbe hinzufügen, um automatisch zwischen verschiedenen Hintergrundfarben zu wechseln. Der Effekt durchläuft mehrere Farben, bis er die endgültige Farbe erreicht.

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

Als Erstes müssen Sie die CSS-Klasse des Bereichs herausfinden, in dem Sie den Effekt für den sanften Wechsel der Hintergrundfarbe hinzufügen möchten.

Dazu können Sie das Inspektionstool in Ihrem Browser verwenden. Gehen Sie einfach mit der Maus auf den Bereich, dessen Farbe Sie ändern möchten, und klicken Sie mit der rechten Maustaste, um das Inspektionstool auszuwählen.

Danach müssen Sie die CSS-Klasse angeben, auf die Sie abzielen möchten. Im obigen Screenshot wollen wir zum Beispiel den Bereich mit der CSS-Klasse „page-header“ anvisieren

Als Nächstes müssen Sie einen einfachen Texteditor auf Ihrem Computer öffnen, z. B. einen Notizblock, und eine neue Datei erstellen. Sie müssen die Datei unter dem Namen „wpb-background-tutorial.js“ auf Ihrem Desktop speichern.

Anschließend können Sie den folgenden Code in die soeben erstellte JS-Datei einfügen:

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

Sie werden auch sehen, dass wir vier Farben mit dem Hex-Farbcode verwendet haben. Sie können so viele Farben für Ihren Hintergrund verwenden, wie Sie möchten. Geben Sie einfach die Farbcodes in das Snippet ein und trennen Sie sie mit einem Komma und einfachen Anführungszeichen, wie bei den anderen Farben.

Jetzt, wo Ihre JS-Datei fertig ist, müssen Sie sie mit einem FTP-Dienst (File Transfer Protocol) in den JS-Ordner Ihres WordPress-Themes hochladen.

Für dieses Tutorial verwenden wir FileZilla. Dies ist ein kostenloser FTP-Client für Windows, Mac und Linux, der sehr einfach zu bedienen ist.

Um zu beginnen, müssen Sie sich beim FTP-Server Ihrer Website anmelden. Die Anmeldedaten finden Sie in der E-Mail Ihres Host-Providers oder im cPanel-Dashboard Ihres Hosting-Accounts.

Nachdem Sie eingeloggt sind, sehen Sie in der Spalte „Remote Site“ eine Liste der Ordner und Dateien Ihrer Website. Navigieren Sie zu dem JS-Ordner im Thema Ihrer Website.

Wenn Ihr Thema keinen 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 klicken Sie auf die Option „Hochladen“, um die Datei zu Ihrem Thema hinzuzufügen.

Weitere Details finden Sie in unserer Anleitung zum Hochladen von Dateien mit FTP in WordPress.

Als nächstes müssen Sie den folgenden Code in die Datei funtions.php Ihres Themes einfügen. Dieser Code lädt die JavaScript-Datei und das abhängige jQuery-Skript, das Sie benötigen, damit dieser Code funktioniert.

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 Code Snippets-Plugins, um den Code sicher zu Ihrer Website hinzuzufügen. Weitere Einzelheiten finden Sie in unserer Anleitung zum Einfügen von Snippets aus dem Internet in WordPress.

Sie können nun Ihre Website besuchen und die zufällig wechselnden Farben in dem von Ihnen ausgewählten Bereich in Aktion 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 die gesamte Website zu verwenden. Dazu verwenden Sie benutzerdefiniertes CSS.

Damit können Sie das Erscheinungsbild bestimmter Beiträge ändern und ihre Hintergründe personalisieren. So können Sie beispielsweise den Stil jedes Beitrags auf der Grundlage der Autoren anpassen oder eine andere Hintergrundfarbe für Ihren meistkommentierten Beitrag anzeigen.

Sie können sogar die Hintergrundfarbe für Beiträge einer bestimmten Kategorie ändern. So können zum Beispiel Nachrichtenbeiträge eine andere Hintergrundfarbe haben als Anleitungen.

Als Erstes müssen Sie die Post-ID-Klasse im CSS Ihres Themas finden. Dies können Sie tun, indem Sie einen beliebigen Blogeintrag anzeigen und dann mit der rechten Maustaste auf das Tool „Inspizieren“ in Ihrem Browser klicken.

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

Sobald Sie Ihre Beitrags-ID haben, können Sie die Hintergrundfarbe eines einzelnen Beitrags ändern, indem Sie das folgende benutzerdefinierte CSS verwenden. Ersetzen Sie einfach die Beitrags-ID durch Ihre eigene und den gewünschten Code für die Hintergrundfarbe.

.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 bei Ihrer WordPress-Website angemeldet sind. Besuchen Sie dann Ihren Blogbeitrag und klicken Sie oben auf die Option „Anpassen“.

Wechseln Sie dann im Menü auf der linken Seite zur Registerkarte “ Zusätzliches CSS „.

Geben Sie dann das benutzerdefinierte CSS ein und 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 je nach Autor, Kommentar oder Kategorie ändern möchten, lesen Sie unsere detaillierte Anleitung, wie Sie jeden WordPress-Beitrag anders gestalten können.

Verwenden Sie ein Video im Hintergrund

Die Verwendung von Videos als Hintergrund für Ihre Website ist eine großartige Möglichkeit, die Aufmerksamkeit Ihrer Besucher zu erregen und das Engagement der Nutzer zu erhöhen.

Der einfachste Weg, ein Video im Hintergrund einzufügen, ist die Verwendung eines WordPress-Plugins. In diesem Tutorial werden wir mb.YTPlayer für Hintergrundvideos verwenden.

Es ist ein kostenloses Plugin, mit dem Sie YouTube-Videos im Hintergrund Ihrer WordPress-Website abspielen können. Es ist auch eine Premium-Version verfügbar, mit der Sie das mb.YTPlayer-Wasserzeichen entfernen können und die mehr Anpassungsfunktionen bietet.

Zunächst müssen Sie das Plugin auf Ihrer Website installieren und aktivieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie von Ihrem WordPress-Verwaltungsbereich aus zu mb.ideas “ YTPlayer wechseln.

Auf dem nächsten Bildschirm müssen Sie die URL Ihres YouTube-Videos eingeben und das Hintergrundvideo aktivieren.

Außerdem können Sie mit dem Plugin den Ort auswählen, an dem Ihr Hintergrundvideo angezeigt werden soll. Sie können eine statische Homepage, eine Blog-Index-Homepage oder beides wählen. Es gibt auch eine Option, um das Video auf Ihrer gesamten Website anzuzeigen, wenn Sie „Alle“ auswählen

Sobald Sie die Video-URL eingegeben und den Hintergrund aktiviert haben, können Sie Ihre Website besuchen, um den Videohintergrund in Aktion zu sehen.

Erstellen Sie eine benutzerdefinierte Landing Page

Die Erstellung von benutzerdefinierten Landing Pages in WordPress ermöglicht es Ihnen, Leads zu generieren und den Umsatz Ihres Unternehmens zu steigern. Sie haben die vollständige Kontrolle über die Hintergrundfarbe und das Design der Seite.

Der einfachste Weg, eine ansprechende individuelle Landing Page zu erstellen, ist die Verwendung von SeedProd. Es ist das beste Landing-Page-Plugin für WordPress und bietet einen benutzerfreundlichen Drag-and-Drop-Seiten-Builder, mit dem Sie Seiten ohne Bearbeitung des Codes erstellen können.

Als Erstes müssen Sie SeedProd auf Ihrer Website installieren und aktivieren. Sie können unsere Anleitung zur Installation eines WordPress-Plugins lesen.

Hinweis: Wir werden die Pro-Version von SeedProd verwenden, da sie mehr leistungsstarke Funktionen, Vorlagen und Anpassungsoptionen bietet. Es gibt jedoch auch eine kostenlose Version, die auf WordPress.org verfügbar ist.

Sobald das Plugin aktiv ist, werden Sie aufgefordert, Ihren Lizenzschlüssel einzugeben. Sie finden den Schlüssel in Ihrem SeedProd-Kontobereich. Nachdem Sie den Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Als nächstes können Sie zu SeedProd “ Seiten gehen und auf die Schaltfläche „Neue Landing Page hinzufügen“ klicken.

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

Sie können auch eine leere Vorlage verwenden, um von Grund auf neu zu beginnen. Wir empfehlen jedoch, eine Vorlage zu verwenden, da die Erstellung einer Landing Page so einfacher und schneller ist.

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

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

Wenn Sie nach unten scrollen, finden Sie weitere Blöcke unter dem Abschnitt Erweitert. Sie können z. B. einen Countdown-Timer hinzufügen, um Dringlichkeit zu erzeugen, soziale Profile anzeigen, um die Zahl der Follower zu erhöhen, ein Optionsformular hinzufügen, um Leads zu sammeln, und vieles mehr.

Mit dem Drag-and-Drop-Builder können Sie die Position der einzelnen Blöcke auf Ihrer Landing Page mühelos ändern. Sie können sogar das Layout, die Größe, die Farbe und die Schriftart des Textes ändern.

Um die Hintergrundfarbe Ihrer Landing Page zu ändern, wählen Sie einfach einen beliebigen Bereich der Seite aus. Im Menü auf der linken Seite sehen Sie nun Optionen zum Bearbeiten des Hintergrundstils, der Farbe und zum Hinzufügen eines Bildes.

Wenn Sie Ihre Landing Page fertig bearbeitet haben, vergessen Sie nicht, oben auf die Schaltfläche „Speichern“ zu klicken.

Als Nächstes können Sie auf die Registerkarte „Verbinden“ gehen und die Seite mit verschiedenen E-Mail-Marketingdiensten integrieren. Sie können zum Beispiel eine Verbindung zu Constant Contact, SendinBlue und anderen herstellen.

Danach klicken Sie auf die Registerkarte „Seiteneinstellungen“. Hier können Sie den Seitenstatus von „Entwurf“ in „Veröffentlichen“ ändern, um Ihre Seite live zu schalten.

Außerdem können Sie 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 Landing Page besuchen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man die Hintergrundfarbe in WordPress ändert.