Wie fügt man WordPress-Hintergrundbilder richtig zu seiner Website hinzu?

Ist das Hinzufügen von WordPress-Hintergrundbildern zu Ihrer Website einfach? Die Antwort lautet größtenteils ja, es sei denn, Ihr Thema unterstützt dies nicht.

Die Wahrheit ist, dass viele WordPress-Themes heutzutage einige mühelose Möglichkeiten bieten, vorhandene Hintergrundbilder hinzuzufügen und zu ändern.

Sie können WordPress-Hintergrundbilder auch mit CSS oder einem Plugin ändern, was Optionen zum Festlegen des Hintergrundbilds auf Seiten, Beiträgen und Kategorien eröffnet.

Dieser Artikel zeigt Ihnen, wie Sie all dies tun, um Ihre Website mit einem auffälligen Erscheinungsbild hervorzuheben.

Was sind WordPress-Hintergrundbilder ?

Ein WordPress-Hintergrundbild ist ein Bild, das hinter dem Hauptinhalt angebracht wird. Anstatt wie ein Heldenbild im Mittelpunkt Ihrer Website zu stehen, sind sie oft subtiler und ergänzen andere Inhalte auf Ihren Webseiten.

WP-Hintergrundbilder helfen nicht nur bei der Erstellung von Webseiten, die ein besseres Leseerlebnis bieten, sondern bieten auch viele Gestaltungsmöglichkeiten, die Ihre Website von der Konkurrenz abheben.

Sich von der Konkurrenz abzuheben bedeutet, Ihre Markenbekanntheit zu steigern, indem Sie zusätzlichen Aufwand in Ihr Website-Design stecken, was nicht immer einfach ist. In solchen Fällen können Sie eine Digitalagentur um professionelle Webdesign-Dienstleistungen bitten.

Aber warum willst du den Hintergrund ändern? Nun, die Standardeinstellung spricht Sie möglicherweise nicht an oder ähnelt nicht Ihrer Marke. Oder vielleicht ist es überhaupt kein Bild, sondern nur eine Volltonfarbe. Oder vielleicht haben Sie das vorhandene anfangs geliebt, aber jetzt haben Sie sich damit gelangweilt.

Was auch immer der Grund ist, lassen Sie uns mit der Änderung experimentieren.

Verwenden Sie den Standard-WordPress-Anpasser, um ein WordPress -Hintergrundbild hinzuzufügen

WordPress-Themes bieten normalerweise eine mühelose Möglichkeit, eine Farbe oder ein Bild im Hintergrund zu verwenden. Die meisten Benutzer entscheiden sich dafür, die Hintergrundfarbe zu ändern, die besser zur Marke und zum Geschmack ihrer Website passt.

In diesem Leitfaden verwenden wir Woostify – ein fantastisches Thema für E-Commerce-Websites. Abhängig von Ihrem Thema kann die Methode leicht abweichen.

1. Gehen Sie im WordPress-Dashboard zu Darstellung > Hintergrund/Hintergrund oder Darstellung > Anpassen > Hintergrund .

2. Klicken Sie auf die Schaltfläche Bild auswählen, um die Medienbibliothek zu öffnen.

3. Wählen Sie Ihr gewünschtes Bild aus. Sie können es von Ihrem Computer hochladen oder ein vorhandenes aus der Medienbibliothek auswählen.

4. Klicken Sie auf die Schaltfläche Bild auswählen, wenn Sie zufrieden sind.
5. Wenn Ihnen die Vorschau gefällt, klicken Sie auf die Schaltfläche „ Veröffentlichen “. Und das ist alles!

Darüber hinaus bietet WordPress ein einfaches Tool zum Bearbeiten von Hintergrundbildern. Sie können damit experimentieren, um zu sehen, welche Größe, Position usw. am besten ist.

Machen Sie sich keine Sorgen, dass Sie an irgendetwas hängen bleiben. Es ist einfach, zu den Einstellungen zurückzukehren und den Hintergrund (und die zugehörigen Optionen) jederzeit zu ändern.

Verwenden Sie den Elementor Page Builder, um WordPress-Hintergrundbilder zu einem Beitrag/einer Seite hinzuzufügen

Elementor ist ein weit verbreiteter Seitenersteller, der die Website-Erstellung dramatisch beschleunigt. Es bietet ein kostenloses Plugin, mit dem Sie WordPress-Hintergrundbilder hinzufügen können.

1. Um zu beginnen, müssen Sie das Elementor-Plugin installieren und aktivieren.
2. Gehen Sie zuerst zu dem Beitrag oder der Seite Ihrer Wahl. Klicken Sie im standardmäßigen WordPress-Seiteneditor auf die Schaltfläche Mit Elementor bearbeiten .

Der Elementor-Editor wird geöffnet. Auf der linken Seite sehen Sie ein Menü, das alle Drag-and-Drop-Blöcke zum Erstellen und Bearbeiten Ihres Beitrags/Ihrer Seite auflistet.

3. Klicken Sie auf das kleine Einstellungssymbol in der unteren linken Ecke des Seitenerstellers.

4. Wählen Sie dann die Registerkarte Stil .

5. Klicken Sie danach auf das Pinselsymbol, um ein WordPress-Hintergrundbild hinzuzufügen.

6. Klicken Sie anschließend auf die Schaltfläche Bild auswählen, um die Medienbibliothek aufzurufen.

7. Wählen Sie Ihr gewünschtes Bild aus. Sie können es von Ihrem Computer hochladen oder ein vorhandenes aus der Medienbibliothek auswählen.

8. Klicken Sie dann unten rechts auf die Schaltfläche „Medien einfügen“.

Nun sollte das gewählte Hintergrundbild rechts in der Vorschau erscheinen. Möglicherweise müssen Sie andere Inhalte anpassen, um sicherzustellen, dass Elemente wie Bilder und Text richtig angezeigt werden.

9. Denken Sie daran, die Schaltfläche „AKTUALISIEREN“ zu drücken, um alle Änderungen zu speichern und den Beitrag/die Seite zu aktualisieren.

Darüber hinaus bietet Elementor einige Anpassungen für WordPress-Hintergrundbilder wie Position, Anhang, Wiederholung usw. Fühlen Sie sich frei, mit ihnen zu experimentieren, um den besten Hintergrund herauszufinden.

Verwenden Sie ein Plugin, um WordPress-Hintergrundbilder hinzuzufügen

Es gibt mehrere kostenlose, aber hervorragende Plugins, die das Hinzufügen von WordPress-Hintergrundbildern übernehmen können . Zum Beispiel einfaches Vollbild-Hintergrundbild, erweiterte WordPress-Hintergründe, vollständiger Hintergrund-Manager usw.

Fügen Sie ein WordPress-Hintergrundbild für die gesamte Website hinzu

In diesem Handbuch verwenden wir das einfache Vollbild-Hintergrundbild, da es einfach ist, daher der Name.

Dieses Plugin bietet eine einfache Installation und Einrichtung eines WordPress-Hintergrundbilds für Ihre Website. Es skaliert das Bild automatisch mit dem Browser. So füllt es immer den Bildschirm aus, egal welche Geräte Ihre Besucher verwenden.

Um es in die Tat umzusetzen, sind nur wenige einfache Schritte erforderlich. Es ist eine kostenpflichtige Version verfügbar, die zusätzliche Funktionen hinzufügt. Das kostenlose ist jedoch alles, was wir brauchen.

1. Installiere und aktiviere das Simple Screen Background Image Plugin.
2. Gehen Sie im WordPress-Dashboard zu Appearance > Fullscreen BG Image .

3. Klicken Sie auf die Schaltfläche Bild auswählen, um die Medienbibliothek zu öffnen.

4. Wählen Sie Ihr gewünschtes Bild aus. Sie können es von Ihrem Computer hochladen oder ein vorhandenes aus der Medienbibliothek auswählen.

5. Klicken Sie auf die Schaltfläche Bild auswählen, wenn Sie zufrieden sind.
6. Klicken Sie abschließend auf die Schaltfläche „Optionen speichern“ und sehen Sie sich Ihre Website an. Das Bild sollte nun auf der Website als WordPress-Hintergrundbild im Vollbildmodus angezeigt werden.

Beachten Sie, dass die Einstellung des Plugins für WordPress-Hintergrundbilder den Standard-WordPress-Customizer überschreibt. Das ist nichts Schlechtes, nur etwas, das man im Hinterkopf behalten sollte.

Fügen Sie WordPress-Hintergrundbilder auf einer bestimmten Seite / einem bestimmten Beitrag hinzu

In diesem Handbuch verwenden wir das oben erwähnte Advanced WordPress Backgrounds-Plugin.

Dieses Plugin ermöglicht das Hinzufügen von Hintergründen mit Gutenberg-Blöcken. Sie können eine Farbe, ein Bild oder sogar ein Video als WordPress-Hintergrund festlegen. Sie sind alle auf Mobilgeräten sichtbar. Darüber hinaus können Sie WordPress-Hintergrundbildern und -Videos einen Parallax-Effekt hinzufügen.

In diesem Fall fügen wir dem Inhaltsbereich, insbesondere Beiträgen/Seiten, nur ein statisches Hintergrundbild hinzu.

Da dies mit Gutenberg-Blöcken funktioniert, stellen Sie sicher, dass Sie bei Bedarf vom klassischen Editor-Modus wechseln.

1. Installieren und aktivieren Sie das Plugin.
2. Öffnen Sie einen bestehenden Beitrag/Seite oder erstellen Sie einen neuen.
3. Klicken Sie auf die Plus-Schaltfläche in der oberen linken Ecke. Scrollen Sie dann nach unten zum Abschnitt Design und wählen Sie den AWB-Block. Neben dem Block erscheinen eine obere Symbolleiste und eine seitliche Menüspalte.

4. Klicken Sie in der seitlichen Spalte auf die Schaltfläche Bild . Klicken Sie dann darunter auf die Schaltfläche Bild auswählen, um die Medienbibliothek zu öffnen.

5. Wählen Sie das gewünschte Bild aus. Klicken Sie dann auf die Schaltfläche Auswählen . Sobald Sie das getan haben, sollten Sie das Hintergrundbild sehen.

6. Klicken Sie in der oberen Symbolleiste auf das Hamburger-Symbol. Wählen Sie dann die Option Volle Breite , um die gesamte Breite abzudecken. Dies ist völlig optional.

In der seitlichen Spalte können Sie die Größe, den Abstand, die Position und vieles mehr des WordPress-Hintergrundbilds ändern. Fühlen Sie sich frei, damit zu experimentieren.

Jetzt müssen Sie nur noch Inhalte innerhalb des Blocks hinzufügen. Wenn Sie einen vorhandenen Beitrag/Seite bearbeiten, schneiden Sie einfach den Inhalt aus und fügen Sie ihn in den Block ein.

Denken Sie daran, den Beitrag/die Seite zu speichern, wenn Sie mit dem Ergebnis zufrieden sind.

Verwenden Sie CSS , um WordPress-Hintergrundbilder hinzuzufügen

Jetzt werden wir untersuchen, wie man WordPress-Hintergrundbilder mit CSS ändert. Dies kann für die gesamte Website oder für bestimmte Kategorien mit dem WordPress Customizer erfolgen.

1. Gehen Sie im WordPress-Dashboard zu Aussehen > Anpassen , um auf den WordPress Customizer zuzugreifen.

2. Scrollen Sie nach unten und klicken Sie auf den Abschnitt Zusätzliches CSS .

3. Kopieren Sie den entsprechenden Code unten und fügen Sie ihn in das CSS-Feld ein:

Fügen Sie ein WordPress-Hintergrundbild für die gesamte Website hinzu

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Achten Sie darauf, den Platzhaltertext „imageURL“ durch die tatsächliche Bilddatei-URL zu ersetzen. Um dies anzuzeigen, wählen Sie Ihr gewünschtes Bild in der Medienbibliothek aus, um die Bildinformationen anzuzeigen.

Und wenn Sie sich mit CSS auskennen, können Sie es nach Belieben anpassen.

Fügen Sie WordPress-Hintergrundbilder auf einer bestimmten Kategorieseite hinzu

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Achten Sie darauf, den Platzhaltertext „imageURL“ durch die eigentliche Bilddatei-URL und „categoryid“ durch den richtigen Kategorienamen zu ersetzen.

Befolgen Sie die nachstehenden Anweisungen, um die Kategorie-ID zu ermitteln:

1. Gehen Sie im WordPress-Dashboard zu Beiträge > Kategorien .

2. Bewegen Sie den Mauszeiger über den Bearbeiten -Text der Kategorie, auf die Sie verweisen möchten. Sie sehen die URL unten links auf der Seite mit der Kategorie-ID.

Best Practices für die Verwendung von Hintergrundbildern in WordPress

Das Festlegen eines benutzerdefinierten Hintergrundbilds in WordPress scheint eine einfache Aufgabe zu sein. Ja! Es stimmt in den meisten Fällen, aber nicht immer.

Daher empfehlen wir, die Best Practices für WordPress-Hintergrundbilder zu befolgen, um so viele Probleme wie möglich zu beseitigen.

Überprüfen Sie die Unterstützung von Hintergrundbildern, bevor Sie ein WordPress-Design verwenden

Leider unterstützen nicht alle WordPress-Themes benutzerdefinierte Hintergrundbilder. Dies liegt normalerweise daran, dass die Hintergründe nicht zum Gesamtdesign des Themas passen. Daher entschieden sich die Entwickler dafür, es vollständig auszuschalten.

Daher sollten Sie beim Herunterladen eines neuen Designs die Liste der Funktionen überprüfen, insbesondere wenn Sie vorhaben, für ein Premium-Design zu bezahlen. Viele Websites, die Themes verkaufen, geben Auskunft darüber, ob ein WordPress-Theme Hintergrundbilder unterstützt oder nicht.

Bleiben Sie bei qualitativ hochwertigen Bildern

Die Auflösung Ihrer beabsichtigten Hintergrundbilder macht oder bricht oft ihre Präsentation. Sie denken vielleicht, dass ein Foto, das Sie mit Ihrem Telefon aufgenommen haben, gut genug für einen Hintergrund ist. Aber die Chancen stehen gut, dass es von viel höherer Qualität sein muss.

Sie können für lizenzfreie Fotos von Websites wie Shutterstock bezahlen. Diese Seiten verfügen oft über professionelle Bilder, die als große Hintergrundbilder hochgeladen werden können. Sie können auch viele davon auf kostenlosen Bildseiten finden.

Das Hintergrundbild ist auf Ihrer WordPress-Seite möglicherweise nicht vollständig sichtbar, da das meiste davon vom Inhalt verdeckt wird. Es wird jedoch weiterhin auf dem gesamten Bildschirm angezeigt. Daher laufen Sie Gefahr, einen gestreckten Hintergrund zu sehen, wenn Sie kein qualitativ hochwertiges Bild verwenden.

Hintergrundbilder optimieren

Wie bei allen Fotos, die auf Ihre WordPress-Seite hochgeladen werden, sollten Sie Hintergrundbilder vor der Veröffentlichung optimieren.

Dies ist besonders wichtig für Hintergrundbilder, da diese oft auf mehreren Seiten Ihrer Website erscheinen. Außerdem sind sie große Fotos und nehmen viel Platz auf dem Bildschirm ein. Außerdem belasten größere Bilder den Server erheblich. Denken Sie daher daran, Ihre Hintergrundbilder zu optimieren, damit Ihre Website schnell geladen wird.

Sie haben hier zwei Möglichkeiten:

• Optimieren Sie Hintergrundbilder (und alle Fotos Ihrer Website), bevor Sie sie auf den Server hochladen. Sie können diesen manuellen Prozess mit Hilfe von Tools wie Photoshop, GIMP und Pixlr abschließen.
• Automatisieren Sie den Optimierungsprozess, indem Sie ein WordPress-Plugin installieren, das Bilder beim Hochladen in der Größe ändert und verkleinert.

Abschließende Gedanken

Das Hinzufügen von WordPress-Hintergrundbildern zu Ihrer Website mag wie eine Kleinigkeit erscheinen. Aber wenn es gut gemacht ist, kann es eine große Wirkung haben.

Darüber hinaus kann es dazu beitragen, Ihre Online-Präsenz frisch zu halten. Daher wird es Ihren Besuchern nicht langweilig, immer wieder dieselben Fotos zu sehen.

Verwenden Sie im Idealfall den WordPress Customizer, um wann immer möglich ein Hintergrundbild hinzuzufügen, da es speziell dafür entwickelt wurde, wie beabsichtigt zu funktionieren.

Sie haben jedoch auch andere Möglichkeiten, WordPress-Hintergrundbilder hinzuzufügen und zu ändern, wie wir oben gezeigt haben.

Machen Sie jetzt weiter und werden Sie kreativ mit Ihrem Website-Hintergrund, um Ihre Besucher visuell anzusprechen.