Möchten Sie Ihrer WordPress-Website ein neues Aussehen verleihen, ohne stundenlang mit komplexen Designänderungen zu verbringen?
Wir erstellen WordPress-Websites seit 2008. Und wir können Ihnen mit Gewissheit sagen, dass die Änderung der Hintergrundfarbe Ihrer Website eine der schnellsten Möglichkeiten ist, das Erscheinungsbild Ihrer Website zu verändern.
Bei all den verschiedenen WordPress Themes und Editoren, die es gibt, kann die Suche nach der richtigen Methode für Anfänger jedoch überwältigend sein.
In dieser leicht verständlichen Anleitung zeigen wir Ihnen genau, wie Sie Ihre WordPress-Hintergrundfarbe ändern können, unabhängig davon, welches Theme oder welchen Page-Builder Sie verwenden.
Warum Ihre WordPress-Hintergrundfarbe wirklich wichtig ist 🎨
Betrachten Sie die Hintergrundfarbe Ihrer Website als die Wände Ihres digitalen Zuhauses. Ihr WordPress-Theme wird zwar mit einer Standard-Farbe geliefert, aber die Wahl des richtigen Hintergrunds kann einen großen Unterschied machen, wie einladend Ihre Website auf Besucher wirkt.
Hier erfahren Sie, warum dieses WordPress-Design-Element so wichtig ist:
- Sie machen Ihre Inhalte leichter lesbar
- Sie helfen, wichtige Informationen hervorzuheben
- Sie prägen die Stimmung auf Ihrer Website
- Sie können Ihrer Website ein professionelleres Aussehen verleihen
Die richtige Hintergrundfarbe kann Ihre wichtigen Buttons hervorheben und die Konversionsrate erhöhen. Sie können auch verschiedene Farben verwenden, um Ihre Inhalte besser zu organisieren, z. B. indem Sie bestimmte Farben für verschiedene Kategorien oder besondere Ankündigungen verwenden.
Und wenn Sie Ihre Website noch ansprechender gestalten wollen, können Sie sogar Video-Hintergründe hinzufügen, um die Aufmerksamkeit Ihrer Besucher zu wecken.
Schauen wir uns also an, wie man die Hintergrundfarbe in WordPress ändern kann. Wir werden Ihnen verschiedene Möglichkeiten zeigen, wie Sie die Hintergrundfarbe anpassen können, damit Sie zu dem Abschnitt springen können, den Sie bevorzugen:
- How to Change Background Color in WordPress Theme Customizer
- How to Change Background Color in Full Site Editor (2024 Method)
- How to Change Background Color in WordPress With CSS
- How to Randomly Change Background Colors in WordPress
- How to Change Background Color for Individual Posts
- Bonus Tip: Use a Page Builder for More Design Control
Ändern der Hintergrundfarbe im WordPress Theme Customizer
Je nach 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, können Sie sich auf Ihrer Website anmelden und dann auf Darstellung ” Anpassen gehen.
Daraufhin wird der Theme Customizer geöffnet, in dem Sie zahlreiche Optionen zur Anpassung Ihres Themes finden. Dazu gehören die Menüs, Farben, Homepage, Widgets, Hintergrundbild und mehr.
Welche Optionen im Einzelnen zur Verfügung stehen, 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 WordPress-Website besuchen, um die neue Hintergrundfarbe in Aktion zu sehen.
Möglicherweise ist diese Option in Ihrem Theme nicht im Theme Customizer verfügbar. In diesem Fall können Sie eine der folgenden Methoden ausprobieren.
Ändern der Hintergrundfarbe im vollständigen Website-Editor (Methode 2024)
Der Full Website-Editor (FSE) ist eine WordPress-Bearbeitungsplattform für die Bearbeitung von Block-Themes. Mit diesem Editor lässt sich die Hintergrundfarbe Ihrer Website ganz einfach ändern. Lassen Sie uns gemeinsam durch den Prozess gehen.
Gehen Sie zunächst in Ihrem WordPress-Dashboard auf Design ” Editor.
In einer der Optionen finden Sie nun einen Button “Stile”.
Klicken Sie einfach darauf.
Klicken Sie nun auf den Pencil Edit Button.
Dadurch gelangen Sie zur Bearbeitungsoberfläche.
Auf der rechten Seite Ihrer Ansicht sehen Sie nun ein praktisches Bedienfeld. Dies ist Ihr Design-Kontrollzentrum, in dem Sie Farben, Schriften und vieles mehr ändern können.
Um Ihre Hintergrundfarbe zu ändern, klicken Sie einfach auf “Farben” im Bedienfeld “Formatvorlagen”.
Klicken Sie anschließend auf “Hintergrund”.
Sie können nun zwischen einer Einheitsfarbe oder einem Farbverlauf erstellen. Entscheiden Sie sich für das, was Ihrem Stil entspricht. Wenn Sie mit Ihrer Wahl zufrieden sind, klicken Sie auf “Speichern” und fertig!
Wie man die Hintergrundfarbe in WordPress mit CSS ändert
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 benutzerdefinierten CSS im WordPress Theme Customizer.
Gehen Sie zunächst auf Darstellung ” Anpassen und dann auf die Registerkarte “Zusätzliche CSS”.
Anschließend können Sie den folgenden Code eingeben:
1 2 3 | 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 “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 zu sehen.
Weitere Einzelheiten finden Sie in unserer Anleitung zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.
Zufällige Änderung der Hintergrundfarben in WordPress
Suchen Sie nun nach einer Möglichkeit, die Hintergrundfarbe in WordPress zufällig zu ändern?
Sie können einen fließenden Farbwechsel-Effekt für den Hintergrund 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 des sanften Hintergrundfarbwechsels hinzufügen möchten.
Dies können Sie mit dem Werkzeug Untersuchen in Ihrem Browser tun. 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 wollen. Im obigen Screenshot wollen wir zum Beispiel den Bereich mit der CSS-Klasse “page-header” festlegen.
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.
Sobald das erledigt ist, können Sie den folgenden Code in die soeben erstellte JS-Datei einfügen:
1 2 3 4 5 6 7 8 9 10 11 12 | 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 hinzufügen, wie Sie möchten. Sie müssen lediglich die Farbcodes in das Snippet eingeben und sie wie die anderen Farben durch ein Komma und einfache Anführungszeichen trennen.
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 Hosting-Providers oder im cPanel-Dashboard Ihres Hosting-Kontos.
Nachdem Sie eingeloggt sind, sehen Sie in der Spalte “Remote Site” eine Liste der Ordner und Dateien Ihrer Website. Navigieren Sie zum JS-Ordner im Thema Ihrer Website.
Wenn Ihr Theme keinen js-Ordner hat, können Sie einen erstellen.
Klicken Sie einfach mit der rechten Maustaste auf den Ordner Ihres Themas 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 “Lokaler Standort” ö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 Einzelheiten finden Sie in unserer Anleitung zum Hochladen von Dateien in WordPress mit FTP.
Als nächstes müssen Sie den folgenden Code in die Datei funtions.php Ihres Themes eingeben. Dieser Code lädt die JavaScript-Datei und das abhängige jQuery-Skript, das Sie benötigen, damit dieser Code funktioniert:
1 2 3 4 | 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 Einzelheiten finden Sie in unserem Leitfaden zum Einfügen von Snippets aus dem Internet in WordPress.
Sie können nun Ihre Website besuchen, um die zufällig wechselnden Farben in dem von Ihnen ausgewählten Bereich in Aktion zu sehen.
So ändern Sie die Hintergrundfarbe für einzelne Beiträge
Sie können auch die Hintergrundfarbe jedes einzelnen Blogeintrags in WordPress ändern, anstatt eine einzige Farbe für Ihre gesamte Website zu verwenden , indem Sie benutzerdefinierte CSS verwenden.
Sie ermöglicht es Ihnen, das Aussehen bestimmter Beiträge zu ändern und ihre Hintergründe zu personalisieren. Sie können zum Beispiel den Stil jedes Beitrags auf der Grundlage der Autoren anpassen oder eine andere Hintergrundfarbe für Ihren meist kommentierten Beitrag anzeigen.
Sie können sogar die Hintergrundfarbe für Beiträge in einer bestimmten Kategorie ändern. Zum Beispiel können 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 Blog-Beitrag anzeigen und dann mit der rechten Maustaste klicken, um das Inspektionstool in Ihrem Browser zu verwenden.
Hier ist ein Beispiel dafür, wie es aussehen könnte:
1 | <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 ä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.
1 2 3 4 | .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 anschließend im Menü auf der linken Seite zur Registerkarte Zusätzliches CSS.
Als nächstes geben Sie das benutzerdefinierte CSS ein.
Klicken Sie anschließend auf die Schaltfläche “Veröffentlichen”.
Sie können nun Ihren Blogeintrag 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.
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 haben möchten, eröffnet Ihnen ein Page-Builder so viele weitere Möglichkeiten.
Wir verwenden SeedProd, den beliebtesten Page-Builder für WordPress, weil er Ihnen die Möglichkeit gibt:
- Gestalten Sie jede Seite ohne Programmierung
- Individuelles Anpassen von Farben, Layouts und Abständen
- Erstellen Sie in wenigen Minuten professionell aussehende Seiten
- Damit Ihre Seiten auf allen Geräten gut aussehen
Die ersten Schritte sind ganz einfach: Installieren und aktivieren Sie SeedProd mithilfe unserer einfachen WordPress Plugin-Installationsanleitung.
Hinweis: Sie können mit der kostenlosen Version beginnen, aber mit SeedProd Pro haben Sie Zugang zu mehr Templates und Design Optionen, wenn Sie diese benötigen.
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 übergehen.
Klicken Sie hier auf die Schaltfläche “Neue Landing Page hinzufügen”.
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 Sie damit einfacher und schneller eine Landing Page erstellen können.
Wenn Sie eine Vorlage auswählen, werden Sie aufgefordert, einen Seitennamen einzugeben und eine URL zu wählen.
Danach klicken Sie einfach auf die Schaltfläche “Speichern und mit der Bearbeitung der Seite beginnen”.
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 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 zum Beispiel 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 mit der Bearbeitung Ihrer Landing Page fertig sind, 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, Brevo (ehemals 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 einsehen, unter Skripte benutzerdefinierten Code hinzufügen und eine benutzerdefinierte Domain eingeben.
Sobald Sie fertig sind, können Sie den SeedProd Page Builder verlassen und Ihre individuelle Landing Page besuchen.
Video-Anleitung
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu erfahren, wie Sie die Hintergrundfarbe in WordPress ändern können. Vielleicht interessiert Sie auch unsere Anleitung zur Konvertierung von Figma in WordPress und unser Vergleich der besten Webdesign-Software.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Have a question or suggestion? Please leave a comment to start the discussion.