WordPress Hintergrundbilder: Hinzufügen, Bearbeiten und Anpassen des Themes

WordPress Hintergrundbilder gibt es in allen Formen. Du kannst ein Hintergrundbild für deine gesamte Webseite hochladen, es hinter Buttons platzieren oder einen einfarbigen Hintergrund für deine Login-Seite festlegen. Unabhängig davon, wo du sie platzieren willst, ist es wichtig, die Grundlagen des Hochladens eines Bildes zu verstehen, einschließlich eines Hintergrundbildes.

Dieser Artikel erklärt, was ein Hintergrundbild ist und wie du es bearbeiten kannst, um ein besseres Ergebnis zu erzielen. Wir erklären dir auch, wie du Hintergrundbilder schnell auf deiner Webseite aktivierst und wie du eventuelle Probleme auf dem Weg dorthin behebst.

Aufgeregt? Dann lass uns beginnen!

Sieh dir unsere Videoanleitung zum Hinzufügen von WordPress-Hintergrundbildern an:

Was ist ein WordPress Hintergrundbild?

Ein WordPress Hintergrundbild dient als vollständiger Hintergrund deiner Webseite. Man nennt es auch einen benutzerdefinierten Hintergrund.

Ein Hintergrund kann auch eine einfarbige Farbe sein.

Unabhängig davon, welche Option du wählst, die functions.php Datei verwaltet das Hintergrundbild in einem WordPress Theme. Es wird auch in der Datei header.php von WordPress angezeigt.

Dadurch haben die Theme-Entwickler eine größere Kontrolle darüber, ob die benutzerdefinierte Hintergrundfunktion für dein WordPress Theme aktiviert wird oder nicht. Du kannst die Funktion immer noch ein– oder aus schalten, aber das Theme deiner Webseite diktiert normalerweise die Standardeinstellungen.

Es gibt mehrere Arten von Hintergründen, die du in WordPress implementieren kannst. Du kannst dich entweder für einen Standard-Hintergrund für die gesamte Webseite entscheiden oder für einen, der sich hinter bestimmten Elementen wie Sidebars und Artikeln befindet.

Benutzerdefinierte Hintergründe sind auch für bestimmte Stellen auf deiner WordPress Seite möglich:

• Hinter einer WordPress Seite oder einem Beitrag
• Auf einer WordPress Kategorieseite
• Innerhalb eines Inhaltsblocks für eine Seite oder einen Beitrag
• Auf der Login-Seite
• Hinter dem Navigationsmenü
• Auf den Seiten Wartung oder Coming Soon

Wenn der Support für benutzerdefinierte Hintergründe in einem Theme aktiviert ist, hat der Nutzer die Möglichkeit, ein Bild hochzuladen oder eine Farbe zu wählen, die den gesamten Hintergrund deiner Webseite ausfüllt.

Die Einstellungen befinden sich im WordPress Dashboard unter Darstellung > Anpassen > Hintergrundbild. Es sind jedoch auch andere Arten von Hintergründen über Drag and Drop Page Builder, Plugins und verschiedene Optionen möglich.

Das Hochladen eines Hintergrundbildes in das Dashboard ist nur ein Teil des Prozesses. Danach musst du die Einstellungen für das Hintergrundbild konfigurieren. Manchmal kannst du die Einstellungen so belassen, wie sie sind, während es in anderen Fällen wichtig ist, die Einstellungen neu zu konfigurieren, um sicherzustellen, dass das Bild hervorragend aussieht.

Zu den Einstellungen für ein WordPress-Hintergrundbild gehören:

• Hintergrund Farben
• Größenbestimmung
• Bildposition
• Ob das Bild wiederholt werden soll oder nicht
• Optionen um den Bildschirm zu füllen oder das Bild zu strecken

Wir werden zuerst die besten Praktiken bei der Verwendung von WordPress Hintergrundbildern behandeln. Dann gehen wir darauf ein, wie man ein WordPress-Hintergrundbild in verschiedenen Situationen einsetzt.

Die vielen Stile von Hintergründen

Ein echter Vorteil eines WordPress-Hintergrundes ist, dass es sich nicht nur um statische Bilder handelt. Du kannst auf verschiedene Arten von Hintergründen stoßen, von Videos über Fotomuster bis hin zu Diashows.

Einzigartige Hintergründe kannst du oft mit Hilfe von CSS oder Plugins (oder beidem) realisieren. Wir zeigen dir beide Methoden in diesem Artikel.

Hier sind einige Hintergrundstile, die du in Betracht ziehen solltest:

• Standard Hintergrundbilder: Dies sind statische Bilder (PNG, JPG und andere Bildformate), die sich über den Großteil der Webseite erstrecken und hinter dem primären Inhalt sitzen. Zu ihren Vorteilen gehören Einfachheit, Optionen für hochauflösende Fotos und der standardmäßige Support durch den WordPress-Core. Die Nachteile reichen von der Tendenz, die Sichtbarkeit von Elementen im Vordergrund zu beeinträchtigen bis hin zur Verlangsamung deiner Webseite durch ein großes, hochauflösendes Bild.
• Einfarbige Hintergründe: Das einfarbige Hintergrundbild ist praktisch, wenn du deiner Webseite etwas Lebendigkeit verleihen möchtest, aber kein Bild hast, das zu deiner Marke passt oder das als Hintergrund gut aussieht. Ein farbiger Hintergrund wirkt sauberer und professioneller und es dauert nicht lange, ihn zu implementieren. Sie sind großartig, um dein Branding anzupassen, ohne dass du eigenen Code oder ein Plugin brauchst.
• Farbverlauf-Hintergründe: Ein Hintergrund mit Farbverlauf geht von einer Farbe zur anderen über. Es ist visuell ansprechender als einfarbige Hintergründe, braucht nicht viel Zeit und kann mit vielen Plugins hinzugefügt werden. Der größte Nachteil ist, dass der Vordergrund an einem Ende des Farbverlaufs gut zur Geltung kommt, am anderen Ende jedoch nicht.
• Muster- oder Textur-Hintergründe: Alle Muster- und Texturhintergründe sind Fotos, aber sie konzentrieren sich auf sich wiederholende Elemente im Bild oder eine Textur in Nahaufnahme, wie eine Holzplatte oder ein Stück Gras. Das Gute an einem Muster oder einer Textur ist, dass es sich wunderbar als Hintergrund eignet, da man es ausdehnen kann und die meisten Leute nicht bemerken werden, wenn es einen Bruch im Muster gibt, wenn das Bild nicht groß genug ist.
• Bild-Slideshow-Hintergründe: Ein Bild-Slideshow-Hintergrund befähigt Betreiber von Webseiten, mehrere Arten von Designs oder Fotos im Hintergrund zu teilen, was die Bemühungen verstärkt, die Stimmung anzupassen, wenn ein Kunde durch deine Webseite scrollt. Slideshows können jedoch ablenkend wirken oder deine Webseite verlangsamen.
• Video-Hintergründe: Videohintergründe sind fesselnd, machen Spaß beim Anschauen und können das Wesen deiner Marke gut darstellen. Allerdings führen sie auch zu Performance-Problemen, wenn sie nicht richtig gemacht werden und könnten die Aufmerksamkeit deines Verkaufstrichters wegnehmen. Außerdem müssen Hintergrundvideos die perfekte Größe haben und zu den richtigen Zeiten abgespielt werden. Sie können auch teuer werden, es sei denn, du entscheidest dich für kostenlose Stock-Videos.

Best Practices für die Verwendung von WordPress Hintergrundbildern

Ein benutzerdefiniertes Hintergrundbild einzustellen scheint eine einfache Aufgabe zu sein. Du lädst das Bild einfach an der richtigen Stelle hoch und schaust zu, wie es im Frontend erscheint, richtig?

In den meisten Fällen ist das der Fall, aber manchmal kann das Hintergrundbild auch ein wenig mühsam sein. Deshalb empfehlen wir, die Best Practices für WordPress Hintergrundbilder zu befolgen, um so viele Probleme wie möglich zu vermeiden.

Tipps zur Verwendung von WordPress-Hintergrundbildern

Bleibe bei qualitativ hochwertigen Bildern

Die Auflösung deines beabsichtigten Hintergrundbildes entscheidet oft über seine Präsentation. Du denkst vielleicht, dass ein Bild, das du mit deinem Smartphone aufgenommen hast, perfekt für ein Hintergrundbild ist, aber die Chancen stehen gut, dass es von viel höherer Qualität sein muss.

Du kannst für ein lizenzfreies Bild von einer Webseite wie Shutterstock bezahlen. Auf diesen Webseiten findest du in der Regel professionelle Bilder, die bereits vorbereitet sind und als großes Hintergrundbild hochgeladen werden können. Du kannst aber auch eine Menge davon auf kostenlosen Webseiten für Bilder finden.

Es kann sein, dass das Hintergrundbild nicht vollständig auf deiner Webseite zu sehen ist, da ein Großteil davon vom Inhalt verdeckt wird. Dennoch wird das eigentliche Bild über den gesamten Bildschirm angezeigt.

Wenn du kein qualitativ hochwertiges Bild verwendest, läufst du Gefahr, einen gestreckten Hintergrund zu sehen.

Stelle sicher, dass die Hintergrundbilder die richtige Größe haben

Neben der Bildauflösung ist auch die physische Größe des Bildes von großer Bedeutung.

Alle Bildschirme haben unterschiedliche Seitenverhältnisse. Und mobile Geräte machen es noch komplizierter. Aber das Ziel ist es, ein Bild zu verwenden, das auch auf dem größten Bildschirm gut aussieht. Ansonsten läufst du Gefahr, dass das Bild wieder einmal gestreckt oder nicht richtig angezeigt wird.

Im Allgemeinen ist es eine gute Regel, sich an eine minimale WordPress-Hintergrundbildgröße von 1024 x 768 Pixeln zu halten. Andere Experten empfehlen jedoch eher eine Größe von 1920 x 1080 Pixeln. Insgesamt ist es am besten, wenn du bei der Breite zwischen 1000 und 3000 Pixel bleibst, je nachdem, wo es angezeigt werden soll.

Der nächste Faktor, den du berücksichtigen musst, ist das Seitenverhältnis. Deckt das Hintergrundbild eine ganze Webseite ab, oder ist es nur das obere Viertel?

Technisch gesehen hat eine Webseite ein Seitenverhältnis im Hochformat (mehr Höhe als Breite). Du kannst also diese Art von Bildern in Betracht ziehen. Allerdings sollten abschnittsweise Hintergründe – wie die für Header oder Werbebanner – im Querformat bleiben (längere Breite als Höhe).

Außerdem ist das gängigste Seitenverhältnis für Desktops heute 16:9. In der Nähe dieses Ziels zu bleiben, hilft. Ein responsive Theme oder Plugin kann das Hintergrundbild automatisch für die mobile Ansicht anpassen.

Letztendlich sollte das Testen deiner Hintergrundbilder auf einer echten Webseite und mehreren Gerätetypen die endgültige Entscheidung viel einfacher machen.

Optimiere vor der Erstellung eines WordPress Hintergrundbildes

Wie bei allen Bildern, die du in WordPress hochlädst, erweist du dir selbst einen schlechten Dienst, wenn du sie nicht optimierst, bevor du sie im Internet veröffentlichst. Dies ist besonders wichtig für Hintergrundbilder, da sie oft auf mehreren Seiten deiner Webseite auftauchen. Außerdem sind es große Fotos, die eine beträchtliche Fläche auf dem Bildschirm einnehmen.

Größere Bilder belasten deinen Server in erheblichem Maße. Behalte die Auflösung deines Bildes bei, aber optimiere seine Größe, damit deine Webseite schnell lädt.

Du hast zwei Möglichkeiten, Fotos zu optimieren:

1. Optimiere die Hintergrundbilder (und alle Bilder der Webseite), bevor du sie in WordPress hochlädst. Erledige diesen manuellen Prozess mit Hilfe von Tools wie Photoshop Express, GIMP und Pixlr.
2. Automatisiere den Optimierungsprozess, indem du ein WordPress Plugin installierst, das die Größe von Fotos beim Hochladen ändert und verkleinert.

Lies unsere ausführliche Anleitung zur Bildoptimierung, wie du Bilder für eine verbesserte Web-Performance optimierst.

Prüfe auf Hintergrund Support bevor du ein Theme installierst

Leider unterstützen nicht alle Themes benutzerdefinierte Hintergrundbilder. Das liegt oft daran, dass der Hintergrund nicht in das Gesamtdesign des Themes passt, so dass der Entwickler es ganz abgeschaltet hat.

Wenn du aber wirklich einen Hintergrund auf deiner Webseite haben möchtest, ist es ratsam, die Liste der Funktionen zu prüfen, wenn du ein neues Theme herunterlädst, besonders wenn du vorhast, für ein Premium Theme zu bezahlen. Viele Webseiten, die Themes verkaufen, bieten Informationen darüber, ob ein Theme Hintergründe unterstützt oder nicht.

Themes, die in der WordPress Theme Library aufgelistet sind, geben zum Beispiel den Support für benutzerdefinierte Hintergründe als Tags an. Möglicherweise findest du auch einen Hinweis auf einen benutzerdefinierten Hintergrund in der Theme-Beschreibung.

Andere Theme-Webseiten enthalten in der Regel ähnliche Informationen über benutzerdefinierte Hintergrundbilder. Wenn nicht, wende dich an den Entwickler, um herauszufinden, ob es irgendwie möglich ist und ob das Überschreiben des Hintergrundbildblocks (siehe unten) zu Problemen mit dem Theme führt.

Erwäge die Verwendung eines visuellen Page Builders, um Hintergrundbilder zu vereinfachen

Page Builder wie Gutenberg, WPBakery, Divi und Elementor bieten beeindruckende Listen von Blöcken und Modulen, um Elemente wie Bilder und Textfelder überall auf einer Webseite einzufügen.

Ohne einen Drag-and-Drop Builder wird es etwas schwieriger, ein Hintergrundbild zu konfigurieren. Es ist besonders schwierig, Probleme zu beheben, die auftreten können.

Page Builder neigen auch dazu, die standardmäßige Hintergrundbildfunktion von WordPress zu ersetzen. Du kannst Theme-Einschränkungen oder fehlende Elemente, die bei der Anzeige eines Hintergrundbildes helfen, im Code außer Kraft setzen.

Stelle sicher, dass dein Hintergrundbild legal ist

Legalität ist immer ein Thema, wenn es um Bilder geht, besonders wenn sie im Internet veröffentlicht werden. Es gibt einen wachsenden Trend in den sozialen Medien, bei dem die Leute anscheinend davon ausgehen, dass das Hinzufügen einer Quellenangabe zu einem Foto automatisch bedeutet, dass es in Ordnung ist, dieses Foto zu verwenden.

Das ist falsch.

Wer auch immer das Foto macht, dem gehört es. Selbst wenn das Bild von einem schnellen iPhone-Schnappschuss stammt – in den Vereinigten Staaten und vielen anderen Ländern ist das Foto sofort urheberrechtlich geschützt.

Wenn du die legalen Rechte haben möchtest, um das Foto eines anderen zu verwenden, braucht es eine schriftliche Erklärung des Copyright-Inhabers, die dir erlaubt, seine Bilder zu verwenden – eine einfache E-Mail reicht aus. Selbst dann musst du das Foto möglicherweise als Quelle angeben, wenn die Person dich darum bittet.

Wir haben einen umfassenden Leitfaden zum Schutz von Bildern auf deiner Webseite, aber der Artikel enthält auch wertvolle Informationen für diejenigen, die Fotos aus anderen Quellen verwenden möchten.

Das Schwierige an Hintergrundbildern ist, dass es in der Regel nicht praktisch ist, eine Bildunterschrift hinzuzufügen, da WordPress keinen Platz hat, um eine sichtbare Bildunterschrift für Hintergrundbilder einzubauen. Und nein, du kannst nicht auf einem zufälligen Blogpost oder einer Seite eine Namensnennung hinzufügen und erwarten, dass diese als Anerkennung für ein komplettes Hintergrundbild einer Webseite dient.

Um dich selbst zu schützen und diejenigen zu respektieren, die die Fotos machen, solltest du eine der folgenden Möglichkeiten in Betracht ziehen, wenn du ein Hintergrundbild für WordPress suchst:

• Mache das Foto selbst. Das ist der einfachste Weg, um sicherzustellen, dass du nicht gegen das Urheberrecht eines anderen verstößt.
• Bezahle für Fotos auf Webseiten wie Shutterstock und iStockPhoto. Diese sind manchmal teuer, aber für ein Hintergrundbild kann es gerade noch in dein Budget passen.
• Ziehe eine kostenlose Webseite für Bilder wie Unsplash oder Pexels in Betracht. Achte jedoch darauf, dass keine Namensnennung erforderlich ist! Gelegentlich kannst du auf diesen Webseiten Bilder finden, bei denen die Namensnennung vorgeschlagen, aber nicht verlangt wird.
• Kontaktiere den Fotografen oder Künstler und frage, ob du es kostenlos verwenden darfst. Das kann alles sein, was du brauchst, vor allem, wenn du etwas als Gegenleistung anbietest.
• Denke darüber nach, das Hintergrundbild wegzulassen oder einen farbigen Hintergrund statt eines Fotos zu wählen.

Wie setze ich ein Hintergrundbild in WordPress?

Es gibt verschiedene Möglichkeiten, ein Hintergrundbild in WordPress zu setzen. Diese Methoden ändern sich in der Regel, je nachdem, wo du das Bild platzieren möchtest.

Du kannst dich zum Beispiel dafür entscheiden, dass du auf deiner gesamten Webseite das gleiche Hintergrundbild haben möchtest. Auf der anderen Seite ist es möglich, dass du lieber einen Weg finden möchtest, um einzigartige Hintergrundbilder für alle deine Seiten zu zeigen.

Da es so viele Möglichkeiten gibt, werden wir in den folgenden Abschnitten erklären, wie du ein Hintergrundbild oder eine Farbe hinzufügen kannst:

• Die gesamte Webseite
• Eine WordPress Seite
• Ein WordPress-Beitrag
• Ein einzelner Inhaltsblock
• Der WordPress-Header
• Eine Kategorie-Archivseite
• Die WordPress Login-Seite
• Das Navigationsmenü
• Eine Wartungsseite

Hinzufügen eines Hintergrundbildes zur WordPress-Kopfzeile und den Menüs

Bevor du anfängst: Aktiviere den Custom Background Support in WordPress (falls nötig)

Theme-Entwickler entscheiden über das Schicksal der Hintergrundfunktionen einer Webseite. WordPress hat die Funktionalität in den Core eingebaut, aber ein Theme-Entwickler könnte es abschalten, so dass du keine Dashboard-Einstellung hast, um es einzuschalten.

Wenn du an irgendeinem Punkt in den folgenden Tutorials feststellst, dass dein Theme der Grund für das Fehlen der Option „Benutzerdefinierter Hintergrund“ ist, solltest du die folgenden Schritte in Betracht ziehen, um das Problem schnell zu beheben.

Der wichtigste Support für den benutzerdefinierten Hintergrund in WordPress wird über die Datei functions.php abgewickelt. Öffne diese Datei und füge den folgenden Code ein, falls er fehlt:

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Behalte im Hinterkopf, dass das Element, das den Support für den Hintergrund aktiviert, die Funktion add_theme_support() mit allem, was sie enthält, ist. Dieser Code schaltet die Hintergrundfunktion im WordPress Dashboard ein, was du in vielen der folgenden Tutorials in diesem Artikel nutzen kannst.

Es ist auch möglich, ein Standard-Hintergrundbild für das gesamte Theme über die Datei functions.php hinzuzufügen. Gehe einfach zu dem Bereich aus dem vorherigen Code mit dem default-image Wert und füge die URL des Bildes in die Leerstelle zwischen dem ' ' nach dem => ein.

Dies ist ein schneller und einfacher Weg, um benutzerdefinierte Hintergründe innerhalb des WordPress Dashboards einzuschalten.

Wir empfehlen jedoch, das Theme zu wechseln, wenn es keinen Support für Hintergründe hat. Das Entfernen der benutzerdefinierten Hintergrundfunktion könnte einen eigenen Zweck haben, oder vielleicht fand der Theme-Entwickler, dass es zu viele Probleme mit dem Design verursacht.

So fügst du ein Hintergrundbild zu deiner gesamten WordPress Seite hinzu

Wenn dein Theme die Möglichkeit bietet, ein benutzerdefiniertes Hintergrundbild hinzuzufügen (und das tun viele), macht es das für dich viel einfacher.

Um zu beginnen, gehe in dein WordPress Dashboard und klicke auf Erscheinungsbild > Anpassen.

Das bringt dich zum WordPress Theme Customizer, mit Anpassungseinstellungen auf der linken Seite und einer Webseiten Vorschau auf der rechten Seite.

Hier findest du den Reiter Hintergrund und klickst ihn an.

Wenn du alternativ Erscheinungsbild > Hintergrund auswählen kannst, kannst du es für einen direkteren Weg zu dieser Einstellung nutzen.

Der Bereich Hintergrundanpassung verwaltet die Hintergrundelemente für deine gesamte Webseite.

Klicke auf die Schaltfläche Bild auswählen, um fortzufahren.

Im Fenster Bild auswählen wählst du ein Bild, das gut als Hintergrund für deine Marke und das Styling deiner Webseite passt. Im Allgemeinen hilft ein neutrales Farbmuster mit einem schwarzen, oder weißen, oder grauen Farbton, um sicherzustellen, dass die meisten deiner Texte und Inhalte auch mit dem Hintergrund dahinter gut aussehen.

Sobald du dein Bild ausgewählt hast, klicke auf die Schaltfläche Bild auswählen, um fortzufahren.

Der von dir implementierte Hintergrund erscheint nun in der Vorschau der Webseite.

Sieh nach, ob dein Inhalt immer noch hervorsticht und mit dem gewählten Bild präsentabel aussieht. Manchmal wirst du feststellen, dass du den Hintergrund entweder komplett austauschen oder Dinge wie Text- oder Linkfarben ändern musst.

Ein kleines Vorschaubild des Hintergrunds erscheint auch in den Einstellungen und zeigt dir, dass das Bild implementiert wurde.

Für WordPress-Hintergründe sind ein paar zusätzliche Einstellungen verfügbar, darunter das Feld Preset.

Klicke auf das Preset-Feld, um die Formatierung des Bildes mit voreingestellten Designs und Ausrichtungen zu ändern.

Du kannst aus den folgenden Voreinstellungen wählen:

• Standard: Normalerweise ist dies die gleiche Einstellung wie Repeat, aber es kann von deinem Theme abhängen. Die Standardeinstellung funktioniert in der Regel am besten, aber es hängt von dem verwendeten Bild ab.
• Bildschirm ausfüllen: Diese Einstellung streckt das Bild, um sicherzustellen, dass alle Teile des Bildschirms abgedeckt werden, auch wenn es bedeutet, das Bild zu beschneiden, sodass es über den Bildschirm hinausläuft. Es funktioniert gut für viele hochauflösende Bilder, kann aber bei niedrig aufgelösten Bildern zu Unschärfen führen.
• An den Bildschirm anpassen: Dies behält das Seitenverhältnis des Originalfotos bei und versucht, dieses Verhältnis zu nutzen, um das aktuelle Bild auf dem Bildschirm anzupassen. Es macht einen guten Job, das Bild nahe am Originalzustand zu halten, aber es kann sein, dass nicht der gesamte Hintergrundbereich abgedeckt wird.
• Wiederholen: Diese Funktion nutzt Teile der Funktion Bildschirm ausfüllen, indem sie das Bild erweitert und streckt, aber es wiederholt das Bild auch, wenn es nicht erfolgreich den gesamten Bildschirm abdecken kann. Bei Mustern sieht das normalerweise gut aus. Aber bei manchen Bildern kann es eine harte Linie zwischen den wiederholten Bildern erzeugen.
• Benutzerdefiniert: Diese Einstellung gibt dir die meiste Kontrolle über den Hintergrund und bietet mehrere Optionen, um die Größe des WordPress-Hintergrundbildes anzupassen, z.B. wie es sich auf der Seite wiederholt, sich dehnt oder bewegt, wenn der Nutzer scrollt.

Es gibt keine Regel, welche der Voreinstellungen am besten funktioniert, da es Bilder in verschiedenen Größen, Auflösungen und Details gibt. Daher ist es am besten, wenn du mit der Voreinstellung „Standard“ beginnst und dann jede der anderen Voreinstellungen ausprobierst, um zu sehen, welche am besten zu deinem Hintergrundbild passt.

Wenn alles andere fehlschlägt, wähle die Einstellung Benutzerdefiniert, um deine Auswahl zu präzisieren.

Die Voreinstellung An Bildschirm anpassen reicht für dieses Bild nicht ganz aus, vor allem, weil das Originalbild viel länger ist als es breit ist und rechts viel Platz lässt. Ich könnte die Bildposition auf die Mitte ändern, aber es würde höchstwahrscheinlich weißen Raum an den Seiten hinterlassen.

Die nächste Einstellung, die es zu beachten gilt, ist das Image Position Tool. Klicke auf die Pfeile, um dein Hintergrundbild zu verschieben und passe die Ausrichtung an, um den Fokus des Bildes entweder in die Mitte zu legen oder den Bildschirm zu füllen.

Ähnlich wie bei den Voreinstellungen ist auch beim Bild Position Tool ein Prozess des Ratens und Überprüfens deiner Arbeit erforderlich, da das Originalbild und sein Inhalt bestimmen, wie es aussieht.

Als Nächstes gibt es ein Kontrollkästchen, um das Hintergrundbild mit der Seite scrollen zu lassen.

Wenn du dieses Kästchen anklickst, bleibt das Hintergrundbild am Vordergrundinhalt haften und scrollt mit dem Benutzer mit, wenn dieser sich auf der Seite nach oben oder unten bewegt.

Wenn du das Kästchen deaktivierst, ändert sich die generelle Ausrichtung des Hintergrundbildes, aber die dominante Funktion ist es, den Hintergrund statisch zu halten, während der Nutzer die Seite herunter scrollt.

Die Inhalte im Vordergrund (wie in diesem Fall die Produkte) gleiten über das Hintergrundbild, was einen attraktiven Effekt erzeugt.

Arbeiten mit einer benutzerdefinierten Voreinstellung

Wenn du dich für eine andere als die benutzerdefinierte Voreinstellung entscheidest, kannst du nicht so viele zusätzliche Einstellungen konfigurieren.

Wenn du jedoch die Voreinstellung Benutzerdefiniert wählst, kannst du mehrere andere Felder berücksichtigen.

Zum Beispiel kannst du wählen, ob du den Bildschirm ausfüllen oder an den Bildschirm anpassen möchtest, und dies dann mit einem wiederholten oder nicht wiederholten Hintergrundbild kombinieren, um die Elemente der Voreinstellungen von vorher zu kombinieren. Und du bekommst immer noch die Option Mit Seite scrollen.

Schaue, ob es möglich ist, das Originalbild ohne jegliche Bearbeitungen oder Einstellungen zu verwenden. Manchmal ist das Originalfoto nahezu perfekt für die Verwendung als Hintergrund geeignet, warum also mit einem bereits fertigen Bild herumspielen?

Es kann aber auch sein, dass es zu groß für deine Webseite ist, oder das Seitenverhältnis nicht ganz passt. Unabhängig davon empfehlen wir dir, mit dieser Einstellung zu experimentieren, um herauszufinden, ob es das Richtige für dich ist.

Sobald du dich für deine perfekten Hintergrundeinstellungen entschieden hast (für dieses Tutorial sieht die Option Standard gut aus), klicke auf den Button Veröffentlichen, um die Änderungen auf deiner Webseite zu übertragen.

Gehe auf das Frontend deiner Webseite, um den Hintergrund in Aktion zu sehen.

Die Homepage ist ein wunderbarer Ort, um anzufangen. Du wirst feststellen, dass der Headerbereich und das Willkommensbild keinen Hintergrund haben. Das liegt daran, dass das Willkommensbild oben auf deiner Webseite bereits den gesamten horizontalen Teil des Bildschirms als bildschirmfüllendes Heldenbild abdeckt.

Wie du die Hintergründe für den Header und das Menü konfigurieren kannst, erfährst du in einigen der folgenden Tutorials.

Bedenke, dass der allgemeine benutzerdefinierte WordPress-Hintergrund auf jeder Seite und jedem Beitrag deiner Webseite aktiviert wird. Es ist ein globales Feature für alle, die ihre Webseite schnell und einfach mit einem eigenen Design versehen wollen.

Wenn du zum Beispiel die Shop-Seite auf deiner Webseite aufrufst, siehst du den Hintergrund hinter der Produktauswahl.

Wie du eine Hintergrundfarbe anstelle eines Bildes für deine gesamte Webseite einstellst

Der Prozess der Aktivierung einer Hintergrundfarbe für deine gesamte Webseite ist nicht viel anders, als wenn du ein Hintergrundbild aktivierst. Beginne damit, indem du im Dashboard zu Erscheinungsbild > Hintergrund gehst und dann nach dem Feld Hintergrundfarbe suchst.

Klicke auf die Schaltfläche Farbe auswählen, um weitere Einstellungen zu öffnen und verschiedene Farben für deinen Hintergrund auszuwählen.

Das Farbpanel bietet dir mehrere Optionen, um dich für eine Farbe zu entscheiden. Die erste ist die Eingabe oder das Einfügen eines Farbcodes. Alle Farben haben einzigartige Farbcodes und du kannst diese Farben und ihre zugehörigen Codes mit einer schnellen Internetsuche finden.

Die andere Möglichkeit ist, im Farbpanel herumzuklicken, um die perfekte Farbe für den Hintergrund zu finden. Es gibt sogar allgemeine Farbfelder am unteren Ende des Panels, wenn du lieber eine der einfacheren Farben nehmen möchtest.

Um eine Hintergrundfarbe zu aktivieren, stelle sicher, dass die Farbe ausgewählt ist und in der Vorschau Farbe auswählen angezeigt wird.

Du solltest den farbigen Hintergrund in der Vorschau des WordPress Customizers sehen. Ist das nicht der Fall, hast du höchstwahrscheinlich einen Bildhintergrund installiert, der den Farbhintergrund überschreibt.

Alles, was du tun musst, um den farbigen Hintergrund zu sehen, ist auf den Entfernen-Button unter der Vorschau des Hintergrundbildes zu klicken.

Jetzt erscheint die Farbe auf deiner gesamten Webseite, hinter dem Inhalt. Ähnlich wie bei einem Bildhintergrund ist es ratsam, deine Webseite zu überprüfen, um sicherzustellen, dass alle Texte, Bilder und Links auch mit dem neuen Hintergrund sichtbar sind.

Wie man ein Hintergrundbild zu einer WordPress Seite hinzufügt

Aber was ist, wenn du ein Bild in WordPress einfügen möchtest, das als Hintergrund auf einer einzelnen WordPress Seite angezeigt wird? Im vorherigen Abschnitt wurden die globalen Einstellungen für ein seitenweites Hintergrundbild beschrieben.

Schau dir unseren Video-Leitfaden zum Hinzufügen von Hintergrundbildern zu WordPress-Seiten, Beiträgen und Inhaltsblöcken an

Viele Leute fügen gerne Hintergründe zu ihren Seiten hinzu, weil man damit ein bestimmtes Theme oder Gefühl auf einer Seite einbauen kann, das zum Inhalt passt. Zum Beispiel könnte eine „Über uns„-Seite einen Los Angeles-Hintergrund haben, wenn das Unternehmen in LA ist. Oder eine Einleitung zu einem Buch eines Autors könnte einen Hintergrund enthalten, der zum Thema der Geschichte passt.

In diesem Abschnitt zeigen wir dir, wie du ein WordPress-Hintergrundbild zu einer Seite hinzufügst, indem wir eine primäre Methode und ein paar Alternativen vorstellen, wenn es dich nicht stört, Geld für ein Plugin auszugeben oder dich für einen Page Builder zu entscheiden.

Hinweis: Es spielt keine Rolle, ob du den Gutenberg oder den klassischen WordPress Editor verwendest.

Für seitenbezogene Hintergründe scheinen diese Methoden am besten zu funktionieren:

• Hinzufügen eines einzigartigen Seitenhintergrunds mit benutzerdefiniertem CSS.
• Verwendung eines Plugins, das individuelle Seitenhintergründe ermöglicht.
• Einen individuellen Hintergrund auf jeder Seite mit Hilfe eines Page Builders einbinden.

Um dein eigenes CSS zu einer Seite hinzuzufügen, musst du die Klassen-ID für diese Seite herausfinden und eine Hintergrund-URL im Custom CSS Modul in den WordPress Seiteneinstellungen aufrufen. Glücklicherweise ist es nicht so schwierig, die Klassen-ID einer Seite herauszufinden, da wir sie nachschlagen können oder du sie vielleicht schon kennst.

Gehe zu der Seite auf deiner Webseite, auf der du einen Hintergrund für diese Seite haben möchtest.

Klicke mit der rechten Maustaste auf eine beliebige Stelle der Seite, um ein Dropdown-Menü auf deinem Bildschirm zu öffnen. Wähle das Inspect Tool am unteren Ende des Dropdown-Menüs.

Das Inspektionsmodul zeigt die Codierung der Seite selbst an, zusammen mit benutzerdefiniertem CSS, das global für deine Webseite verwendet wird. Es ist ein nützlicher Bereich, um Informationen über eine Seite oder einen Beitrag auf deiner Webseite zu finden.

Die Inspect Box hat Codezeilen von der Seite, aber wir sind nur an dem Class-Tag interessiert, das dieser Seite im Besonderen zugewiesen ist. Zur Verdeutlichung: Jede WordPress-Seite hat ein class-Tag als Identifikationscode.

Benutze die Suchfunktion und gib body oder class ein, um die Codezeile mit dem page-id Tag zu finden.

In diesem Fall ist die ID page-id-352, aber deine wird sich unterscheiden.

Du willst den gesamten Teil des Codes mit dem Keyword page-id-# kopieren, einschließlich der Bindestriche.

Wenn du die Seiten-ID irgendwo gespeichert hast, um sie in den nächsten Schritten zu verwenden, gehe zurück in dein WordPress Dashboard und klicke auf Erscheinungsbild > Anpassen.

Wähle im WordPress Customizer den Reiter Additional CSS aus.

In diesem Bereich kannst du jedes benutzerdefinierte CSS eingeben oder einfügen, um Elemente auf deiner Webseite zu manipulieren. In diesem Fall ist es praktisch, um das Standard-Hintergrundbild zu überschreiben und ein Hintergrundbild für eine Seite zu aktivieren und für die anderen nicht.

Füge den folgenden Code in das Feld Additional CSS ein, aber denke daran, das „#“ durch die tatsächliche Nummer zu ersetzen, die du als Seiten-ID aus den vorherigen Schritten gezogen hast. Außerdem musst du eine echte Bild-URL anstelle des Fülltextes einfügen, den wir dort drin haben (http://YOURIMAGEURL.jpeg).

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

In diesem Beispiel ist die Seiten-ID als 352 eingetragen und wir haben eine Hintergrundbild-URL aus unserer Medienbibliothek eingefügt.

Falls nötig, ändere bitte die benutzerdefinierten Hintergrundeinstellungen, wenn du Probleme hast, das Hintergrundbild des Bildschirms einzupassen. Vielleicht möchtest du zum Beispiel Elemente wie die Größe des WordPress-Hintergrundbildes, den Anhang oder die Position ändern. Wenn nicht, lass sie alle so, wie sie im Beispielcode sind.

Klicke auf die Schaltfläche Veröffentlichen, wenn du mit dem benutzerdefinierten CSS zufrieden bist.

Mit diesem benutzerdefinierten CSS enthält die angegebene Seite ein Hintergrundbild unter Verwendung der Größen- und Positionierungseinstellungen des Codes. Keine andere Seite auf deiner Webseite wird den gleichen Hintergrund zeigen, es sei denn, du wiederholst das CSS für verschiedene Seiten-IDs.

Wie bereits erwähnt, gibt es auch andere Möglichkeiten, einen einzigartigen Hintergrund auf einer WordPress Seite zu platzieren, z.B. mit einem Page Builder oder einem Plugin, das Hintergrundbilder auf einzelnen Seiten ermöglicht.

Der billigste und schnellste Weg, ein Hintergrundbild auf einer individuellen Seite zu platzieren, ist jedoch die oben gezeigte Methode mit CSS-Code.

Wie man ein Hintergrundbild zu einem WordPress Beitrag hinzufügt

Die meisten Hintergrundbilder werden hinter WordPress-Seiten oder jeder Seite auf einer Webseite eingefügt.

Die standardmäßige benutzerdefinierte Hintergrundfunktion in WordPress hat nichts mit einzelnen Beiträgen zu tun, abgesehen davon, dass dieser Hintergrund auch für die Blogposts angezeigt wird. Das ist nicht ideal für alle Organisationen, da verschiedene Blogbeiträge drastisch unterschiedliche Themen haben können.

Solche Blogs könnten von ihren eigenen einzigartigen Hintergrundbildern profitieren. Allerdings haben WordPress-Beiträge keine eigene Einstellung für das Hintergrundbild, was es ein wenig schwieriger macht.

Daher haben wir ein paar Optionen, die du beim Hinzufügen eines Hintergrundbildes zu einem Beitrag berücksichtigen kannst (du wirst feststellen, dass sie die gleichen sind wie bei der Arbeit mit seitenbezogenen Hintergrundbildern):

• Füge ein Hintergrundbild mit benutzerdefiniertem CSS ein.
• Verwende ein Plugin, um einen Hintergrund für einzelne Beiträge zu implementieren.
• Installiere einen Visual Page Builder für Beitragshintergründe.

Wie im vorherigen Abschnitt über einzigartige Seitenhintergründe, kannst du einen postspezifischen Hintergrund mit einem Page Builder oder einem Plugin hinzufügen.

Da sich die Erstellung eines postspezifischen Hintergrunds nicht wesentlich von der eines seitenbezogenen unterscheidet, werden wir nur kurz auf die Schritte eingehen, die du für einen einzelnen Post durchführen musst.

Wenn du ein benutzerdefiniertes CSS verwendest, um einen postspezifischen Hintergrund zu implementieren, verwendest du den gleichen Code wie für den Seitenhintergrund, mit einem Unterschied: Du musst die ID des Posts finden und nicht die ID der Seite.

Öffne also das Frontend eines WordPress-Beitrags, in den du einen Hintergrund einfügen möchtest.

Klicke mit der rechten Maustaste auf den Beitrag und wähle die Option Inspect. Suche innerhalb des Codes nach dem Abschnitt body class. Suche nach dem postid-# Teil – das ist die Post-ID, die du in das benutzerdefinierte CSS einfügen musst.

Du wirst feststellen, dass die Formatierung der Post-ID in diesem Beispiel etwas anders ist als die der Seiten-ID, da der postid-# Tag keinen Bindestrich zwischen „post“ und „id“ hat, wie es bei page-id-# der Fall ist. Außerdem sind das keine festen Regeln. Du kannst verschiedene Formate für die Tags finden.

Gehe nun in dein WordPress Dashboard und klicke auf Erscheinungsbild > Anpassen. Navigiere zum Reiter Zusätzliches CSS.

Füge den folgenden Code in dieses benutzerdefinierte CSS-Feld ein:

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Danach nimmst du die Post ID Nummer, die du vorher von dem gewünschten Post gefunden hast. Ersetze das „#“ im CSS-Code durch die Nummer. Ändere auch den http://YOURIMAGEURL.jpeg Text mit der echten URL des Hintergrundbildes, das du anzeigen möchtest, und behalte die Anführungszeichen drum herum.

Achte darauf, dass du auf die Schaltfläche Veröffentlichen klickst, bevor du den Reiter Zusätzliches CSS verlässt, da dies deine Änderungen auf der Webseite speichert und du den Hintergrund im Frontend sehen kannst.

Mit diesen CSS-Änderungen kannst du nun zurück zum Frontend des WordPress-Blogposts gehen, um den neuen Hintergrund zu sehen. Teste die anderen Blogeinträge und Seiten auf deiner Webseite, um zu sehen, dass keiner der anderen einen Hintergrund hat, es sei denn, du implementierst den gleichen Code für diese Beitrags-IDs.

Wie man ein Hintergrundbild zu einem individuellen Inhaltsblock hinzufügt

Die individuellen Inhaltsblöcke des WordPress Gutenberg-Blockeditors ermöglichen eine Vielzahl von Optionen für die Darstellung von Inhalten, darunter Textfelder, Bilder und Galerien.

Diese unterteilen deinen Inhalt in einzelne Abschnitte. So kannst du eine Hintergrundfarbe oder ein Bild nur für diesen Block hinzufügen.

Nehmen wir an, du schreibst einen Blogbeitrag über den Status der Bekleidungsindustrie im Einzelhandel. Du möchtest den Beitrag mit einem Call-to-Action beenden oder beginnen, damit die Leute sich für dein nächstes Webinar anmelden. Es würde Sinn machen, diesen Abschnitt mit einer Hintergrundfarbe oder einem Bild hervorzuheben.

Leider bietet der WordPress Block-Editor keine allumfassende Einstellung, bei der du jedem Block einen Hintergrund hinzufügen kannst. Einige Blöcke haben jedoch die Option, einen farbigen Hintergrund einzubauen.

Es gibt auch einen Block, der Cover-Block genannt wird und der am ehesten die Möglichkeit bietet, ein Hintergrundbild für einen Block in einem Beitrag oder einer Seite hinzuzufügen. Das Cover erlaubt es, Text und einige Medienelemente zu überlagern, was es für unser Endziel geeignet macht.

Im Folgenden findest du die Techniken, die du verwenden kannst, um ein Bild oder einen farbigen Hintergrund für einen einzelnen WordPress-Block einzustellen.

Einstellen eines farbigen Hintergrunds für einen Block

Der einfachste Weg, einem einzelnen Block etwas Lebendigkeit zu verleihen, ist das Hinzufügen eines farbigen Hintergrunds. Es ist nicht so schick wie ein Bildhintergrund, aber der Farbhintergrund ist tatsächlich die einzige Art von Hintergrund im WordPress-Blockeditor, die für die Standardblöcke zur Verfügung steht.

Hinweis: Einige Blöcke haben überhaupt keine Hintergrundeinstellungen. In diesem Fall ist es am besten, wenn du einen Cover-Block verwendest und andere Blöcke darüber legst, wie weiter unten in diesem Artikel beschrieben.

Der Absatzblock hat zum Beispiel eine Einstellung, um einen farbigen Hintergrund zu aktivieren.

Um diesen zu aktivieren, wähle den Block aus und suche dann die Farbeinstellungen unter der Registerkarte Block auf der rechten Seite.

Dieser Bereich zeigt die Felder Textfarbe und Hintergrundfarbe.

Gehe zum Bereich Hintergrundfarbe und wähle eine Farbe aus der Liste der verfügbaren Optionen. Du kannst auch den Link Benutzerdefinierte Farbe wählen, um deinen eigenen Farbcode einzufügen oder eine einzigartige Farbe zu wählen.

Wie du sehen kannst, wird der Hintergrund des Absatzblocks in eine andere Farbe umgewandelt – in diesem Fall blau.

Hinzufügen eines farbigen Hintergrunds zu jedem WordPress Block

Wie bereits erwähnt, haben nicht alle WordPress Blöcke diese eingebaute Hintergrundfunktion. Was solltest du tun, wenn du eine Galerie oder ein anderes Blockelement erstellen möchtest, das keine Hintergrundoption bietet?

Die schnellste Lösung ist die Verwendung der Gruppenblock-Funktion in WordPress.

Dazu wählst du mehrere Blöcke aus, die sich bereits in deinem Inhalt befinden. Für dieses Beispiel wähle ich einen Absatz-Block und einen Galerie-Block gleichzeitig aus.

Klicke auf das gestapelte quadratische Symbol im Menü, das erscheint.

Wähle die Option Gruppe im Dropdown-Menü.

Damit werden alle Blöcke, die du gerade ausgewählt hast, zu einer Gruppe zusammengefasst, sodass du sie gemeinsam verschieben oder bearbeiten kannst, anstatt einzelne Blöcke.

Damit wird die Gruppe als eigener Block festgelegt. Es bedeutet, dass du auf den Reiter Blockeinstellungen auf der rechten Seite der Seite gehen kannst, um seine Einstellungen zu finden.

Suche nach dem Tab Farbeinstellungen und klicke darauf.

Ähnlich wie ein Standard-Absatzblock hat auch der Gruppenblock eine Funktion für die Hintergrundfarbe.

Wähle die Farbe aus, die dir in dieser Situation am besten gefällt, um zu sehen, dass alles innerhalb dieser Gruppe nun diese Hintergrundfarbe haben sollte.

Das Tolle am Gruppenblock ist, dass er einen anderen Block nimmt, der keine Hintergrundfunktion hat (wie der Galerie-Block) und dir erlaubt, trotzdem einen Hintergrund für ihn zu aktivieren.

Hinzufügen eines Bildhintergrundes zu einem WordPress Block

WordPress Blöcke gibt es sowohl in Seiten als auch in Beiträgen. Daher können wir diese Taktik in beiden Blöcken implementieren. Du kannst so ziemlich jeden Inhalt über dem Hintergrund des gruppierten Blocks einfügen – oder nur in einem WordPress Block.

Um mit diesem Prozess zu beginnen, klicke auf den Button Block hinzufügen oder das „+„-Symbol und suche nach dem Cover-Block.

Wähle diesen Block aus, um ihn in deinen Beitrag oder deine Seite einzufügen.

Du musst dann auf die Schaltfläche Upload oder Medien auswählen klicken, mit der du nach Bildern suchen kannst, die du als Hintergrund verwenden kannst.

Wähle das gewünschte Bild aus und klicke auf die Schaltfläche Auswählen.

Jetzt kannst du das Bild als Hintergrund für den Cover-Block sehen.

Du kannst auf den Block klicken, um mit der Eingabe des Absatzes zu beginnen, denn die primäre Funktion ist das Überlagern von Text.

Das Tolle am Cover-Block ist, dass er mehrere Formatierungsoptionen bietet, so dass du in Sekundenschnelle von einer Überschrift zu einem Absatzformat wechseln kannst.

Um weitere Blöcke auf diesem Hintergrund hinzuzufügen, klicke auf das „+„-Symbol im Cover-Block selbst. Es kann sein, dass du die Eingabetaste einmal drücken musst, um den Button zu sehen.

Ähnlich wie das Hinzufügen eines Inhaltsblocks in einem regulären Artikel, erlaubt dir der Cover-Block, durch alle möglichen Inhaltsblöcke in WordPress zu scrollen.

Das bedeutet, dass du ein Bild, eine Galerie, Spalten oder jede Art von WordPress-Block innerhalb des Cover-Blocks platzieren kannst, was es zur idealen Lösung für Bildhintergründe mit einem individuellen Block macht.

In diesem Beispiel habe ich ein Bild eingefügt und es ein wenig formatiert, damit es im Titelblock akzeptabel aussieht.

Jeder Block, den du vor dem Hintergrund platzierst, hat seine eigenen Einstellungen im Block-Tab auf der rechten Seite, also denke daran, sie zu bearbeiten, während du sie in den Cover-Block einfügst.

Irgendwann möchtest du vielleicht das Hintergrundbild selbst bearbeiten oder anpassen. Wenn das der Fall ist, wähle den Block Cover aus und gehe dann zum Tab Blockeinstellungen auf der rechten Seite der Seite.

Hier findest du eine Vielzahl von Einstellungen, die du für das Hintergrundbild vornehmen kannst, darunter die folgenden:

• Fester Hintergrund
• Wiederholter Hintergrund
• Brennpunkt-Picker
• Abmessungen
• Überlagerung
• Deckkraft
• Erweitert

Eine der wichtigsten Einstellungen, die du beachten solltest, befindet sich am unteren Ende des Blockeinstellungen-Panels.

Scrolle nach unten, um den Abschnitt Overlay zu finden. Öffne den Bereich, um eine Liste von Farbüberlagerungen und Optionen zu sehen, mit denen du diese Farben einfarbig oder mit Farbverläufen machen kannst.

Dies ist eine großartige Option, um deine Hintergrundfarbe leicht zu verändern, damit sie zu deiner Marke passt oder deinen Vordergrundinhalt hervorhebt. Du kannst auch die Deckkraft einstellen, um sicherzustellen, dass das Farb-Overlay den Hintergrund nicht völlig überdeckt.

Als Alternative kannst du das Stackable Page Builder Gutenberg Blocks Plugin in Betracht ziehen, um fortgeschrittenere Tools für Hintergründe auf einzelnen Blöcken zu öffnen.

Wie man ein Hintergrundbild hinter den WordPress Header setzt

Bis jetzt haben wir darüber gesprochen, wie du ein Hintergrundbild zu deiner gesamten WordPress Seite hinzufügst, zusammen mit Methoden für Hintergründe auf bestimmten Bereichen wie WordPress Blöcken, Beiträgen und Seiten. Aber was ist mit dem Bereich, der dein Menü und dein Logo enthält?

Manchmal ist ein Hintergrund hinter deinem Header alles, was du brauchst.

Das Einstellen eines Hintergrundbildes für den Header verleiht deiner Webseite eine neue Ausstrahlung, vor allem, wenn es einen Feiertag oder einen großen Verkauf gibt, den du hervorheben kannst.

Um zu beginnen, gehe im WordPress Dashboard auf Darstellung > Header.

Hinweis: Du kannst die Header-Einstellungen auch unter Erscheinungsbild > Anpassen > Header finden.

Du solltest nun eine Vorschau deiner Homepage auf der rechten Seite des Bildschirms sehen, zusammen mit den Header-Einstellungen auf der linken Seite davon.

Das Header-Modul erklärt die bevorzugten Abmessungen für jedes Header-Hintergrundbild, so dass du dich entscheiden kannst, dein Bild vor dem Hochladen zuzuschneiden oder zu warten, bis du das Bild auf deinem WordPress Dashboard hast.

Unter dem Titel Aktuelle Kopfzeile klickst du auf die Schaltfläche Neues Bild hinzufügen.

Kopfzeilen sind knifflig, weil du sicherstellen willst, dass alle Links und Textelemente (ganz zu schweigen von deinem Logo) kristallklar auf dem Hintergrundbild aussehen.

Deshalb empfehlen wir dir, Hintergrundbilder auszuprobieren und Bilder in Betracht zu ziehen, die eher einfarbig oder gemustert sind. Sie werden es nicht so schwierig machen, deine Menüpunkte und dein Logo zu sehen.

Wähle ein Bild aus, das für dich ideal aussieht, und klicke dann auf den Button Auswählen und zuschneiden, um fortzufahren.

Wir mögen das eingebaute Crop Tool, da es automatisch die richtigen Maße für das Header-Hintergrundbild liefert. Das sollte den Prozess beschleunigen, verglichen mit der vorherigen Bearbeitung eines Fotos in Photoshop oder ähnlichem.

Verschiebe das Zuschneidefeld an die Stelle, die für dein Hintergrundbild am sinnvollsten ist. Ziehe ruhig eine der Ecken, wenn du das Bild noch mehr beschneiden möchtest.

Sobald du den perfekten Zuschnitt hast, klicke auf die Schaltfläche Bild zuschneiden.

Das Header-Hintergrundbild wird sofort in der WordPress Customizer-Vorschau aktiviert, damit du genau sehen kannst, was deine Kunden mit dieser Art von Hintergrund sehen werden.

Du wirst feststellen, dass das Header-Hintergrundbild nicht in den Rest des Seiteninhalts überläuft. Stattdessen verbleibt es im Header, hinter allem, was sich dort gerade befindet, wie Logo, Tagline, Menü und Suchleiste.

Eine weitere Option für deinen Header-Hintergrund ist es, mehrere Bilder hochzuladen und sie zufällig rotieren zu lassen, um deiner Webseite ein wenig Glanz und Überraschung zu verleihen, sobald ein Nutzer auf der Startseite landet.

Damit dies funktioniert, musst du zunächst mehrere Bilder in die Header-Einstellungen hochladen. Klicke auf den Button Neues Bild hinzufügen, um diesen Prozess abzuschließen.

Sobald du mehr als ein Bild hast, klicke auf den Randomize Uploaded Headers Button, um die Funktion zu aktivieren, die jedes Mal einen anderen Header-Hintergrund zeigt.

Es kann sein, dass du feststellst, dass es durch das Hinzufügen eines Hintergrundbildes im Header schwierig wird, einige der Header-Elemente zu sehen, wie z.B. dein Menü oder einen Warenkorb.

Wenn das der Fall ist, empfehlen wir dir, das Kopfzeilenbild nicht sofort zu löschen. Gehe stattdessen zu den Feldern Textfarbe und Linkfarbe, um zu sehen, ob Anpassungen helfen können.

Die Textfarbe steuert jeden Text in der Kopfzeile, der nicht mit einer anderen internen oder externen Seite verlinkt ist. Oft ist das nur die Tagline, wenn du eine hast, aber manchmal gibt es auch andere Elemente wie die Summe des Warenkorbs oder Social Media Icons, die ebenfalls die Farbe des Textes ändern.

Das andere Feld ist für die Linkfarbe. Du wirst höchstwahrscheinlich mehr Änderungen sehen, wenn du diese Farbe anpasst, da es alle Menüpunkte beinhaltet, die mit anderen Seiten verlinkt sind.

Hier ist ein Beispiel dafür, was passiert, wenn du eine neue Farbe für die Textfarbe und die Linkfarbe auswählst. Du kannst sehen, dass sich die Tagline und der Name der Webseite geändert haben, das Menü wurde weiß und auch die meisten anderen Header-Elemente wie das Einkaufswagen-Symbol.

Wenn du kein Hintergrundbild für deine Kopfzeile verwenden möchtest, hast du auch die Möglichkeit, einen einfarbigen Hintergrund zu verwenden.

Hierfür findest du das Feld Hintergrundfarbe im gleichen Bereich der Kopfzeileneinstellungen.

Klicke auf die Schaltfläche Farbe auswählen und wähle aus dem Farbpanel, um das Ergebnis in der Vorschau zu sehen. Du kannst auch die Textfarben ändern, wenn du eine Hintergrundfarbe verwendest.

Nachdem du getestet hast, was für deinen Header am besten funktioniert, und dich für das perfekte Hintergrundbild entschieden hast, klicke auf den Button Veröffentlichen, damit alle die Änderungen sehen können.

Wenn du Probleme mit der Darstellung der Änderungen im Frontend hast, solltest du deinen WordPress-Cache leeren.

Hinzufügen von Hintergrundbildern zu WordPress-Kategorien und Login-Seiten

Wie man ein Hintergrundbild zu einer WordPress Kategorie hinzufügt

Eine WordPress-Kategorie-Archivseite fasst alle Beiträge zusammen, die unter einer bestimmten Kategorie gelistet sind. Zum Beispiel haben viele Webseiten Kategorien für benutzerdefinierte Beitragstypen wie Produkte. Standardmäßig haben alle Webseiten in WordPress Kategorien für Beiträge. Diejenigen, die du nicht kategorisierst, werden mit der Kategorie Uncategorized getaggt.

Da die Archivseiten der Kategorien ähnliche Inhalte bündeln, macht es Sinn, ein entsprechendes Hintergrundbild auf diesen Seiten einzubinden, um die Kategorie besser zu präsentieren. Als Beispiel könntest du einen technisch orientierten Hintergrund für eine Webdesign-Kategorie oder einen Muschel- oder Strand-Muster-Hintergrund für eine Reise-Kategorie verwenden.

Die benutzerdefinierte CSS-Methode (unten beschrieben) ist die günstigste Option. Du kannst aber auch einen Blick in die verschiedenen Page Builder und Plugins werfen, um zu sehen, welche von ihnen Hintergründe auf Kategorieseiten ermöglichen.

Um diese Aufgabe mit CSS zu erledigen, öffne dein WordPress Dashboard und gehe zu Erscheinungsbild > Anpassen.

Wähle den Reiter Zusätzliches CSS, um das Modul zu öffnen, das es dir erlaubt, dein eigenes CSS einzugeben.

Öffne eine deiner Kategorie-Archivseiten auf deiner WordPress Seite. Normalerweise haben diese Seiten URLs wie diese: http://yourwebsitedomain.com/category/travel. Du musst den Reiseteil in die Kategorie ändern, die du auf deiner Webseite hast und den yourwebsitedoman-Teil in deinen tatsächlichen Domain-Namen ändern.

Klicke mit der rechten Maustaste irgendwo auf die Kategorieseite und klicke auf Inspizieren. Es wird das Inspect Tool in deinem Browser angezeigt, mit dem du den Code der Seite sehen kannst.

Suche nach „body“ oder „class“, um die CSS-Klasse für Kategorieseiten zu finden, zusammen mit der Klasse für diese Kategorie im Besonderen.

In diesem Fall ist unsere CSS-Klasse „category-travel“, da ich eine Kategorie namens „Travel“ auf der Webseite habe.

Speichere den CSS-Tag für später.

Danach navigierst du zurück zum Abschnitt Zusätzliches CSS in deinem WordPress Customizer.

Füge den folgenden Code in das Feld ein, tausche die Klasse category-travel mit deiner eigenen aus und füge eine echte Bild-URL an der Stelle ein, an der http://YOURIMAGEURL.jpeg steht.

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Klicke auf die Schaltfläche Veröffentlichen, um die Änderungen zu speichern.

Zum Schluss gehst du zurück auf die Kategorie-Archiv-Seite im Frontend deiner WordPress Seite. Es sollte nun dieselbe Seite wie zuvor angezeigt werden, allerdings mit dem im CSS-Code festgelegten Hintergrund. Wenn du Probleme mit der Formatierung des WordPress-Hintergrundbildes hast, wechsle zurück zum Panel Zusätzliches CSS, um Elemente wie die Position, Größe und Wiederholungsfunktion des Hintergrundes anzupassen.

Wie du ein Hintergrundbild zu deiner WordPress Login-Seite hinzufügst

Die WordPress Login-Seite hat zwei Versionen: eine für normale Benutzer, die auf deine Webseite kommen und sich registrieren und einloggen wollen, und die andere für interne Benutzer, wie Admins und Autoren.

Diese Login-Seiten sind von der Hauptarbeit deiner Webseite getrennt (die meisten Dateien befinden sich in der Datei wp-login.php). Das Tool für das benutzerdefinierte Hintergrundbild wird also nicht in die Login-Module einfließen.

Dies kannst du mit einem Plugin namens Custom Login Page Customizer erreichen. Um loszulegen, installiere und aktiviere das Plugin auf deiner WordPress Seite.

Auf der linken Seite erscheint ein neuer Tab im WordPress Dashboard Menü für LoginPress.

Gehe zu LoginPress > Einstellungen.

Hier kannst du die Einstellungen des Plugins anpassen, bevor du deinen Hintergrund hinzufügst und jeden anderen Teil deiner Anmeldeseite anpasst.

Zum Beispiel bietet es Einstellungen, um Benutzer automatisch zu erinnern, benutzerdefinierte Passwortfelder anzuzeigen und Sitzungen nach einer bestimmten Zeitspanne ablaufen zu lassen.

Um einen eigenen Bildhintergrund für die Login-Seite zu aktivieren, klicke auf LoginPress > Customizer.

Dies führt dich zum WordPress Customizer, wo eine neue Seite für die LoginPress Tools hinzugefügt wurde. Hier findest du Tabs für Themes, Logo, Hintergrund und mehr.

Es ist auch möglich, die Login-Seite anzupassen, indem du auf die Buttons in der visuellen Vorschau klickst.

Wir werden nicht auf alle anderen Einstellungen eingehen, da wir uns im Moment hauptsächlich auf den Hintergrund konzentrieren.

Klicke auf den Reiter Hintergrund, um fortzufahren.

Als erstes musst du dich entscheiden, ob du einen farbigen Hintergrund oder einen Bildhintergrund haben möchtest.

Wenn du einen farbigen Hintergrund möchtest, suche das Feld Hintergrundfarbe und klicke auf Farbe auswählen. Daraufhin öffnet sich ein Farbfeld, in dem du genau die Farbe auswählen kannst, die für dein Unternehmen sinnvoll ist.

Wie du sehen kannst, wird die Änderung auch in der WordPress Customizer Vorschau wirksam.

Direkt unter der Einstellung für die Hintergrundfarbe gibt es einen Abschnitt für das Hintergrundbild.

Aktiviere den Schalter Enable Background Image, um eine Sammlung von vorgefertigten Hintergrundbildern anzuzeigen.

In der kostenlosen Version gibt es nicht viele zur Auswahl, aber das Plugin fügt mehr hinzu, wenn du dich für ein Upgrade auf die Premium-Version entscheidest.

Probiere diese vorgefertigten Hintergründe aus, um zu sehen, ob sie für deine Marke geeignet sind.

Der wahrscheinlichere Weg ist, dein eigenes Bild als Hintergrund für die Anmeldeseite hochzuladen.

Suche nach der Überschrift Hintergrundbild und klicke auf die Schaltfläche Bild auswählen.

Du gelangst zur WordPress-Mediathek und kannst entweder ein Bild von deinem Computer hochladen oder eines der Bilder auswählen, die bereits in WordPress vorhanden sind.

Wähle dein gewünschtes Foto aus und klicke auf die Schaltfläche Bild auswählen.

Das aktivierte Hintergrundbild erscheint als Thumbnail im Customizer Panel und in der aktuellen Vorschau deiner Login-Seite.

Du hast nun die Möglichkeit, auf die Schaltfläche Veröffentlichen zu klicken und bei dem zu bleiben, was auf dem Bildschirm zu sehen ist. Oder du scrollst runter zu den zusätzlichen Einstellungen, um sicherzustellen, dass die beste Ansicht des hochgeladenen Bildes gerade aktiv ist.

Klicke auf das Dropdown-Feld „Hintergrundwiederholung“ und teste Optionen wie „Wiederholen„, „Nicht wiederholen“ und „Repeat-x“ aus.

Je nach Größe deines Fotos, kann es sein, dass sich das Bild ein wenig bewegt.

Als Nächstes kannst du das Hintergrundbild über die Option Position auswählen noch weiter verschieben.

Standardmäßig wird das Bild in der Mitte des Bildschirms platziert, aber manchmal sieht es besser aus, wenn du es rechts unten oder links oben platziert hast. Probiere alle Optionen aus, um herauszufinden, welche für dein Hintergrundbild am besten funktioniert.

Das Dropdown-Menü für die Größe des WordPress-Hintergrundbildes bietet Einstellungen dafür, wie das Bild den Bildschirm abdeckt und passt seine Größe mit jeder voreingestellten Option an.

Auch hier solltest du diese ausprobieren, um zu entscheiden, was am besten aussieht. Vielleicht findest du, dass etwas wie die Einstellung Contain eine bessere Ansicht bietet als die Einstellungen Auto oder Cover.

Und das ist alles, was es zum Hochladen und Aktivieren eines Hintergrundbildes für deine Login-Seite braucht!

Die letzte Einstellung ist da, wenn du ein Video als Hintergrund statt eines Bildes zeigen möchtest. Aktiviere diese Einstellung, wenn du ein interessantes Video hast, das mit deinem Geschäft zu tun hat und nicht zu viel Aufmerksamkeit von den Leuten ablenkt, die sich auf deiner Webseite einloggen.

Sobald alles fertig ist, klicke auf den Veröffentlichen-Button, um den Hintergrund deiner Anmeldeseite einzuschalten und zu sehen, wie er angezeigt wird, sobald ein Nutzer versucht, sich auf deiner Webseite zu registrieren oder anzumelden.

Wie du ein Hintergrundbild zu deinem Navigationsmenü hinzufügst

Du hast vielleicht schon einige Webseiten mit ausgefallenen Menüs gesehen, die Hintergrundbilder oder Icons enthalten. Dies ist eine gängige Praxis in der eCommerce Welt, wo die Marke vielleicht ein Mega-Menü mit Kategorien und Hintergrundbildern für jede Kategorie-Schaltfläche hat.

Wenn du daran interessiert bist, Hintergründe zu deinem Menü hinzuzufügen, schau dir unseren Artikel über die besten WordPress Menü Plugins an. Viele dieser Menü Plugins bieten die Möglichkeit, Bild- und Farbhintergründe in dein Menü einzubauen.

Da es mehrere Plugins gibt, um einen bestimmten Hintergrund für Navigationsmenüs hinzuzufügen, stellen wir dir Tutorials für zwei zur Verfügung, von denen eines Hintergründe hinter deinen Untermenüs ermöglicht. Im Gegensatz dazu fügt das andere einen Hintergrund für dein mobiles Menü hinzu.

Um ein Hintergrundbild zu verschiedenen Untermenüs hinzuzufügen, installiere und aktiviere das WP Mega Menu Plugin. Dieses Plugin ermöglicht es dir, ein Mega-Menü mit mehreren Dropdown-Ebenen zu aktivieren und zu verwalten. Es ist ideal für große Onlineshops, aber es erfüllt den Zweck auch für kleinere Menüs, besonders wenn du ein Hintergrundbild oder Icons hinzufügen möchtest.

Beginne damit, den WP Mega Menu Reiter im WordPress Dashboard zu finden.

Klicke auf den Menüpunkt Themes.

Hier siehst du eine Liste der Standard-Themes, die das Plugin für dein Menü erstellt hat.

Du kannst auf eines der Themes klicken, um es zu bearbeiten oder dein eigenes Design von Grund auf hinzufügen.

Jedes Theme hat seine eigenen Einstellungen, in denen du Elemente wie den Theme-Titel, die Menüleisten-Optionen und das Markenlogo festlegen kannst. So gut wie jeder Teil deines Menüs ist anpassbar, vom Dropdown-Menü bis zu den Untermenüs.

Für den Menühintergrund musst du jedoch nur wissen, welches Theme du wählen möchtest.

Gehe im Dashboard auf Erscheinungsbild > Menüs.

Du wirst ein neues Modul sehen, das zu den Mega-Menü-Einstellungen verlinkt.

Klicke darauf, um das Mega-Menü zu aktivieren und wähle dann aus, was dir auf deiner Webseite am besten gefällt.

Zum Schluss klickst du auf die Schaltfläche Speichern.

Richte nun deine Aufmerksamkeit auf den Bereich der Menüstruktur.

Wenn du über einen deiner aktuellen Menüpunkte scrollst, erscheint ein WP Mega Menu Button. Hier kannst du das Layout und Design für jeden Dropdown-Bereich anpassen.

Klicke auf den WP Mega Menu Button für jeden Menüpunkt, den du möchtest. In diesem Fall fügen wir ein Dropdown-Mega-Menü zum Shop-Tab hinzu.

Hinweis: Wir gehen davon aus, dass du bereits ein Menü auf deiner WordPress Seite konfiguriert hast. Lies unsere WordPress Dropdown-Menü Anleitung, wenn du Hilfe dabei brauchst.

In dem neuen Popup-Fenster legst du den Schalter um, um das Mega-Menü für diesen bestimmten Menüpunkt einzuschalten.

Du kannst dann eine Dropdown-Reihe hinzufügen und einige der vielen Widgets von der linken Seite in diese Reihe ziehen. Zum Beispiel werden wir eine Liste von Produkten ziehen, damit sie angezeigt werden, wenn jemand über den Menüpunkt Shop scrollt.

Um diesem Dropdown-Bereich einen Hintergrund hinzuzufügen, klicke auf die Schaltfläche Optionen in der unteren linken Ecke.

Finde das Feld Hintergrundbild hochladen.

Klicke auf die Schaltfläche Hochladen, um das richtige Foto in deiner Mediathek zu finden, um es als Hintergrund zu verwenden.

Nachdem du es in der Mediathek ausgewählt hast, wird ein Miniaturbild angezeigt.

Es gibt noch ein paar andere Einstellungen, die du beachten solltest, wenn du willst.

Achte darauf, dass du auf den Änderungen speichern Button unten im Optionen Panel klickst.

Du musst auch auf Menü speichern zurück im Bereich Menüstruktur des WordPress Dashboards klicken.

Nun navigierst du zum Frontend deiner Webseite, um das Menü zu sehen. Wenn du über das Element scrollst, das wir gerade angepasst haben, solltest du einen Dropdown-Bereich mit dem Hintergrund sehen.

Eine weitere Möglichkeit, ein Hintergrundbild zu einem Menü hinzuzufügen, ist die Verwendung eines mobilen, responsive Menüs, das angezeigt wird, wenn jemand über ein mobiles Gerät auf deine Webseite zugreift.

Du kannst mit Hilfe des WP Mobile Menu Plugins einen Hintergrund hinter dem mobilen Menü platzieren.

Nachdem du das WP Mobile Menu Plugin installiert und aktiviert hast, gehe im WordPress Dashboard auf Mobile Menu Options.

Das Plugin bietet mehrere Möglichkeiten, dein mobiles Menü zu konfigurieren. Die allgemeine Voraussetzung ist, dass du eines der Menüformate aktivierst und angibst, welches WordPress-Menü du für dieses mobile Menü verwenden möchtest.

Zum Beispiel können wir auf den Schalter Enable Left Menu klicken (was ein mobiles Menü auf der linken Seite des Bildschirms aktiviert) und die Option Main Menu aus dem Left Menu Dropdown auswählen. Dies verbindet unser aktuelles Hauptmenü mit dem mobilen Menü, so dass die Besucher die gleichen Tabs sehen.

Es hängt von der Art des mobilen Menüs ab, das du erstellst, aber da wir ein Menü auf der linken Seite erstellen, können wir auf den Reiter Linkes Menü klicken, um die entsprechenden Einstellungen zum Hinzufügen eines Hintergrunds zu öffnen.

Scrolle nach unten zum Feld Panel Background Image und klicke auf das „+“ Zeichen, um die Medienbibliothek zu öffnen.

Wähle ein Bild aus deiner Mediathek aus und füge es dem Feld hinzu.

Du solltest eine Miniaturversion des Hintergrundbildes als Bestätigung sehen.

Wähle die Schaltfläche Änderungen speichern, um den Hintergrund zu aktivieren.

Da das Plugin mobile Menüs generiert, kann es sein, dass das Menü nur angezeigt wird, wenn dein Browser auf eine schmale Breite eingestellt ist oder wenn du deine Webseite mit einem Telefon oder Tablet aufrufst.

Das neue Menü wird unter einem Hamburger-Icon (drei horizontale Linien) zusammengefasst.

Klicke darauf, um das neue Menü mit dem Hintergrund zu testen.

Wie im Screenshot zu sehen, wird der Hintergrund hinter dem gesamten mobilen Menü für alle sichtbar platziert.

Wie man ein WordPress Hintergrundbild zu einer Wartungsseite hinzufügt

Alle Webseiten müssen gelegentlich gewartet werden, und manchmal dauert diese Wartung so lange, dass die Anzeige einer Wartungsseite hilft.

Hintergrundbilder spielen eine große Rolle bei der Arbeit mit Wartungsseiten. Die meisten Wartungsseiten bestehen aus einem bildschirmfüllenden Hintergrundbild und vielleicht etwas Text oder Links mit weiteren Ressourcen.

Wenn du bereits eine Wartungsseite hast und es kein Hintergrundbild enthält, solltest du die folgenden Schritte in Betracht ziehen, um eine schöne Umgebung für den Fall zu erzeugen, dass du deine Webseite für eine gewisse Zeit von der Öffentlichkeit abschalten musst.

Du kannst ein Hintergrundbild zu einer Wartungsseite mit Hilfe des Maintenance Plugins hinzufügen. Installiere und aktiviere das Plugin auf deiner Webseite.

Sobald es aktiviert ist, findest du oben im Dashboard den Button Wartung ist ein/aus.

Klicke auf den Button, um zur Einstellungsseite des Plugins Wartung zu gelangen.

Eine weitere Möglichkeit, um auf die Einstellungsseite zu gelangen, ist ein Klick auf den Menüpunkt Wartung im Seitenmenü des Dashboards.

Die Einstellungsseite des Plugins bietet eine Reihe von Optionen, die du anpassen kannst, aber der wichtigste Bereich ist das Modul Allgemeine Einstellungen. Hier kannst du eine Überschrift und eine Beschreibung eingeben, die beide als Text über den Hintergrund gelegt werden, den wir gleich einfügen.

Der Seitentitel wird im Browser-Tab angezeigt, also solltest du auch diesen anpassen.

Du kannst das Maintenance Plugin für alles verwenden, von Wartungsseiten bis hin zu „Coming Soon“-Seiten. Du könntest also etwas wie „Unsere Webseite wird gewartet“ einfügen, oder du könntest ein paar Informationen über dein Unternehmen zeigen und ein Formular einfügen, in das die Besucher ihre E-Mail-Adressen eintragen können.

Im weiteren Verlauf bietet das Plugin die Möglichkeit, dein Logo hochzuladen, das sich ebenfalls über das Hintergrundbild legt.

Klicke auf den Button Logo hochladen und wähle dein Logo aus, um dessen Vorschaubild im Dashboard zu sehen.

Das Feld Hintergrundbild fordert dich auf, auf das Feld Hintergrundbild hochladen zu klicken.

Lade entweder ein Bild von deinem Computer hoch oder durchsuche deine Mediathek, um einen passenden Hintergrund für die Wartungsseite zu finden.

Hinweis: Die besten Wartungshintergrundbilder sind groß, hochauflösend und im Querformat. Eine „Hochformat“-Hintergrundalternative ist in den Einstellungen unten verfügbar.

Sobald du den Hintergrund ausgewählt hast, erscheint es als kleinere Miniaturvorschau im Dashboard.

Obwohl ein Hintergrundbild im Querformat für Desktop-Computer und breitere Bildschirme am sinnvollsten ist, kommen viele Leute auf deine Webseite, die Bildschirme im Hochformat benutzen, wie z.B. ein Telefon, das senkrecht gehalten wird.

Daher wird ein breiteres Hintergrundbild nicht so schön aussehen. Aus diesem Grund bietet das Plugin ein Hintergrundbild im Hochformat an, das als Alternative dient und responsive eingefügt wird, sobald ein Nutzer die Seite mit einem hochformatigen Bildschirm besucht.

Es ist wichtig, dass du ein Bild in dieses Feld einfügst, also klicke auf den Button Upload image for portrait device orientation.

Diesmal suchst du dir ein Bild, das höher als breit ist (Hochformat). Du kannst das ursprüngliche Hintergrundbild jederzeit zuschneiden, um es in ein Hochformat zu verwandeln, oder du hast die Möglichkeit, ein komplett anderes Bild hochzuladen, um die Stelle zu füllen.

Markiere das gewünschte Bild und klicke auf die Schaltfläche Bild auswählen, um es in das Dashboard einzufügen.

All diese Einstellungen bedeuten nichts, wenn du den Wartungsmodus nicht aktivierst.

Um dies zu tun, suche den Schalter Wartung Ein/Aus oben auf der Seite Einstellungen.

Lege den Regler um, so dass er auf „Ein“ steht, und wähle dann die Schaltfläche „Änderungen speichern„.

Gehe in das Frontend deiner Webseite, um sicherzustellen, dass das Hintergrundbild und die Wartungsseite richtig angezeigt werden.

Es besteht eine gute Chance, dass es das nicht tut.

Dafür gibt es zwei Gründe: Erstens musst du dich aus dem WordPress Admin-Konto ausloggen, um die Webseite im Wartungsmodus zu sehen. Zweitens musst du möglicherweise den Cache der Webseite leeren, um die Änderung des Inhalts zu aktualisieren.

Wenn ich mich zum Beispiel aus dem Admin-Account auslogge, erscheint jetzt die Wartungsseite, wenn ich auf eine beliebige Seite gehe.

Das Hintergrundbild ist da, zusammen mit meinen Anpassungen wie dem Logo und der Textbeschreibung.

Wenn du außerdem die Größe des Browserfensters auf Hochformat änderst, wird der Hintergrund im Hochformat angezeigt.

Du solltest den Hochformatmodus auch sehen, wenn du die Webseite auf einem Telefon oder Tablet besuchst.

Eine weitere Art von Hintergrundbild mit dem Plugin ist ein Preloader Image. Dieses lädt ein schnelles Bild mit einem animierten Effekt, bevor die eigentliche Wartungsseite, der Hintergrund und der Inhalt angezeigt werden.

Wie beim regulären Hintergrundbild klickst du auf den Upload Preloader Button, um ein Bild zu finden, das gut aussieht und fügst es dem Dashboard hinzu.

Auch hier klickst du auf die Schaltfläche Änderungen speichern und leerst den Cache.

Standardmäßig dreht sich der Preloader Image Effekt für einen Moment und dann verschwindet er, um die Wartungsseite und das Hintergrundbild zu präsentieren.

Es liegt ganz bei dir, ob du diesen Effekt beibehalten möchtest oder nicht.

In den Einstellungen des Plugins Wartung kannst du mit verschiedenen anderen Hintergrundelementen experimentieren.

Vielleicht möchtest du zum Beispiel eine Hintergrundfarbe anstelle eines Hintergrundbildes hinzufügen.

Wenn das der Fall ist, gehe zum Feld Hintergrundfarbe und wähle eine Farbe, die zu deiner Marke passt.

Die Hintergrundfarbe wird für die Wartungsseite nicht angezeigt, es sei denn, du deaktivierst alle anderen Hintergrundbilder.

Stelle also sicher, dass du das Hintergrundbild löschst.

Du musst auch das Hintergrundbild des Porträtmodus löschen.

Speichere die Änderungen und lösche den Cache. Gehe dann auf das Frontend deiner Webseite, um die neue Hintergrundfarbe zu sehen.

Weitere Einstellungen, die du berücksichtigen solltest, sind die Schriftfarbe, die Schriftfamilie und die Hintergrundunschärfe.

Wir empfehlen auch, darüber nachzudenken, ob du einen Frontend-Login brauchst oder nicht. So können sich die Nutzer in ihre Konten einloggen und bei Bedarf Zugriff auf die Profile erhalten.

Sobald alles fertig ist, klicke auf den Button Änderungen speichern.

Das Maintenance Plugin bietet auch mehrere vorgefertigte Themes mit schönen Hintergrundbildern und professionell gestalteten Layouts und Texten.

Du kannst Themes für die „Coming Soon“-Seite und Wartungslayouts finden, zusammen mit Seiten zum Sammeln von E-Mail-Adressen und anderen Kontaktinformationen.

Du musst die Themes kaufen, um sie nutzen zu können.

Je nach Budget sind sie recht preiswert und sehen toll aus.

Für diejenigen, die kein Theme kaufen möchten, stehen alle oben genannten Einstellungen zur Verfügung. Du kannst auch in das Custom CSS Modul gehen, um deine Wartungsseite und dein Hintergrundbild zu konfigurieren, wie du willst.

Denke daran, dass die Einstellungen der Wartungsseite selten in Kraft treten, es sei denn, du loggst dich aus dem Admin-Account aus und klickst auf die Clear Cache-Button.

Du findest den Clear Cache-Button in der oberen rechten Ecke des Dashboards, wenn du Kinsta benutzt. Wenn du einen anderen Host verwendest, solltest du eines der vielen Caching Plugins auf dem Markt in Betracht ziehen.

Sobald du den Cache geleert und deine Einstellungen gespeichert hast, solltest du ein schönes Hintergrundbild sehen, das die Wartungsseite ergänzt!

Wie man einen WordPress Hintergrund mit einem Page Builder eines Drittanbieters hinzufügt

Unser Artikel über die besten Page Builder bietet eine Liste von Optionen für die Auswahl eines Page Builders mit Drag-and-Drop-Funktionen. WordPress beinhaltet bereits einen Page Builder in Gutenberg, dennoch bevorzugen viele Betreiber von Webseiten andere Lösungen.

Im folgenden Abschnitt wird erklärt, wie du einen Hintergrund mit einigen beliebten Page Buildern implementierst, darunter Elementor, Beaver Builder und Page Builder by SiteOrigin.

Einen WordPress Hintergrund mit Elementor hinzufügen

Elementor, der beliebte Page Builder, der die Produktion von Webseiten drastisch beschleunigen soll, bietet ein kostenloses Plugin mit verschiedenen Tools für Hintergrundbilder.

Außerdem bietet Elementor visuelle Hintergrundflexibilität für verschiedene Teile deiner Webseite, anstatt Hintergründe auf die gesamte Webseite zu beschränken. So kannst du zum Beispiel hinter jedem Bausteinabschnitt einen Hintergrund einfügen und von Seite zu Seite unterschiedliche Hintergründe anzeigen.

Um zu beginnen, installiere und aktiviere das Elementor Plugin.

Elementor verstreut seine Hintergrundeinstellungen über den ganzen Builder, was es einfach macht, ein Element auszuwählen und bei Bedarf einen Hintergrund zu implementieren. Daher kannst du technisch gesehen auf jede Seite oder jeden Beitrag gehen, mit der Erwartung, dass du Zugriff auf einen Hintergrund-Upload-Button hast.

In diesem Fall gehen wir auf die Homepage unserer Webseite, die wir testen. Besuche die Seite deiner Wahl, indem du aus der Liste unter Seiten > Alle Seiten auswählst. Das Gleiche kannst du auch mit Posts machen.

Sobald du dich im Standard-WordPress-Seiteneditor befindest, klicke auf den Button Mit Elementor bearbeiten.

Dadurch verschiebt sich die Ansicht auf deinem Bildschirm zum Elementor Editor. Hier findest du auf der linken Seite ein Menü mit Drag-and-Drop-Modulen, um deine Seite zu erstellen und zu bearbeiten.

Die Hintergrundfunktionalität ist nicht in einem Abschnitt oder Block verfügbar, sondern in den primären Einstellungen für diese Seite.

Klicke daher auf das kleine Einstellungssymbol (es sieht aus wie ein Zahnrad) in der unteren linken Ecke des Editors.

Dies zeigt einen Bereich für allgemeine Seiteneinstellungen.

Klicke auf den Reiter Stil oben im Bereich der Seiteneinstellungen.

Unter Stil suchst du das Feld Hintergrundtyp und klickst auf das Pinselsymbol, um einen Standardhintergrund hinzuzufügen.

Als Nächstes wählst du die Art des Hintergrunds aus, der erscheinen soll. Mit dem Feld Farbe kannst du zum Beispiel einen einfarbigen Hintergrund auswählen. Es gibt auch eine Option „Farbverlauf“ im Feld „Hintergrundtyp„, wenn das mehr dein Stil ist.

Klicke auf die Schaltfläche Bild auswählen unter dem Feld Bild, um deine Mediathek aufzurufen und ein passendes Hintergrundbild für diese Seite auszuwählen.

Wie immer testest du deine Hintergrundbilder und hältst dich an die optimalen Abmessungen und Best Practices (hohe Auflösung und Hochformat für die meisten), dann wählst du das Bild aus, das gut funktioniert und klickst auf die Schaltfläche Medien einfügen.

Das ausgewählte Hintergrundbild erscheint nun in der Elementor Webseite Vorschau auf der rechten Seite. Möglicherweise musst du andere Teile deines Inhalts anpassen, um sicherzustellen, dass Elemente wie Text und Bilder angezeigt werden, wenn sie über dem Hintergrund liegen.

Elementor bietet Einstellungen für das Hintergrundbild wie Position, Anbringung, Wiederholung und Größe des WordPress Hintergrundbildes. Ändere die Einstellungen, um zu bestimmen, ob dein Hintergrund besser als fester Anhang aussieht, oder vielleicht mit einer Ausrichtung oben rechts oder einer anderen Größe.

Drücke den Update-Button, um alle Änderungen zu speichern und den neuen Hintergrund deiner Webseite zu veröffentlichen.

Abschnittshintergründe mit Elementor

Elementor bietet eine erweiterte Hintergrundfunktionalität für die meisten Abschnitte, die zu deinen Seiten hinzugefügt werden.

Alles, was du tun musst, ist einen Abschnitt auf einer Elementor-Seite auszuwählen und die Hintergrundeinstellungen zu ändern, um den Hintergrund auf diesen Bereich zu beschränken.

Zum Beispiel können wir diesen Texteditor-Abschnitt auswählen, um die Einstellungen des Text-Abschnitts zu sehen.

Wähle die Registerkarte „Erweitert“ und suche den Abschnitt „Hintergrund“ in dieser Registerkarte.

Die Einstellungen für den Hintergrund beinhalten Hintergrundtyp, Farbe, Bild und mehr, ähnlich wie die Einstellungen für den allgemeinen Seitenhintergrund, die wir gesehen haben. Der einzige Unterschied ist, dass es diese Einstellungen auf den ausgewählten Bereich beschränkt.

Wähle das Pinselsymbol für Hintergrundtyp und klicke dann auf die Schaltfläche Bild auswählen unter dem Feld Bild.

Wähle ein Bild aus der Mediathek und klicke auf die Schaltfläche Medien einfügen.

Wie du sehen kannst, bleibt das Hintergrundbild innerhalb der Grenzen des Abschnitts, während es sich hinter dem Inhalt befindet, der bereits für diesen Abschnitt erstellt wurde.

Benutze die Selektoren Position, Attachment, Repeat und Size, um zu ändern, wie das Hintergrundbild im Abschnitt dargestellt wird.

Klicke zum Schluss auf die Schaltfläche Aktualisieren, um deine Änderungen zu speichern.

Hinzufügen eines Hintergrundbildes mit Beaver Builder

Das Beaver Builder Plugin enthält eine Lite-Version mit einigen grundlegenden Hintergrund-Tools. Es ist einer der beliebtesten Page Builder auf dem Markt und bietet viele Inhaltsmodule für Elemente wie Videos, Bilder, Absätze und mehr.

Außerdem erlaubt es dir, ein Hintergrundbild, eine Farbe oder ein Video zu implementieren, indem du visuelle Tools und CSS verwendest, um das Hintergrundelement auf deiner gesamten Webseite, einer Seite oder einem einzelnen Abschnitt auf einer Seite zu platzieren.

Installiere zunächst das Beaver Builder Plugin, um loszulegen.

Gehe zu einer beliebigen Seite oder einem Beitrag, um es mit dem Beaver Builder zu bearbeiten.

Du musst zuvor erstellte Seiten in das Beaver Builder-Format konvertieren. Alternativ hast du die Möglichkeit, eine Seite von Grund auf neu zu erstellen und die Seite in Beaver Builder zu bearbeiten.

Um eine aktuelle Seite in Beaver Builder zu konvertieren, öffne den Seiteneditor und klicke auf das Symbol mit den drei Punkten, um das Menü Ansicht in der oberen rechten Ecke zu öffnen.

Scrolle nach unten, um den Link In Beaver Builder konvertieren zu finden und zu wählen.

Es versucht, alle Inhalte auf deiner Seite zu kompilieren und diese Elemente in kompatible Beaver Builder Module zu verschieben.

Um eine Seite von Grund auf neu zu erstellen, gehe zu Seiten > Neu hinzufügen.

Klicke dann auf die Schaltfläche Beaver Builder starten.

Das Beaver Builder Plugin bringt dich zu einer Frontansicht der Webseite. Es nimmt den größten Teil des Bildschirms ein und fungiert als echter Frontend-Editor, in dem du auf die Elemente klickst und die Boxen mit deiner Maus verschiebst.

 

Die erste Möglichkeit, einen Hintergrund über den Beaver Builder hinzuzufügen, ist das Hochladen eines Hintergrunds in einen Abschnittsblock. Dieser kann den größten Teil der Seite einnehmen oder nur einen Bruchteil, abhängig von der Größe deines Sektionsblocks.

 

Sobald du ihn ausgewählt hast, suche die Schaltfläche Zeileneinstellungen (das ⚙ -Symbol).

Klicke auf dieses Symbol, um die Einstellungen für diese Reihe zu öffnen. Du kannst dies auch mit Abschnitten und Spalten und anderen Arten von Blöcken machen.

Oben in der Vorschau deiner Webseite erscheint ein Einstellungsfenster. Klicke auf den Reiter Stil und suche dann nach dem Abschnitt Hintergrund.

Klicke unter Hintergrund auf das Dropdown-Menü, um alle Hintergrundtypen anzuzeigen.

Du hast mehrere Hintergrundtypen zu berücksichtigen, einer davon ist für ein Foto. Die anderen umfassen:

• Farbe
• Farbverlauf
• Video
• Eingebetteter Code

Probiere ruhig die verschiedenen Hintergrundtypen aus.

Du kannst zum Beispiel feststellen, dass ein Hintergrund mit Farbverlauf besser aussieht als ein Bild. Jeder der Hintergrundtypen hat seine eigenen Einstellungen. Der Typ Farbverlauf fragt in diesem Fall nach zwei Farben, damit der Farbverlauf von einer zur anderen geht.

Wenn du dich für den Fotohintergrund entscheidest, kannst du aus der Mediathek wählen oder eine URL für das Bild einfügen. Klicke auf den Link Foto auswählen, wenn du die Fotoquelle aus der Medienbibliothek verwendest.

Finde dein Lieblingshintergrundfoto und klicke auf die Schaltfläche Foto auswählen.

Beaver Builder fügt das Foto in den zuvor gewählten Hintergrundbereich ein. Der Bereich Fotoeinstellungen fragt dich, wie du das Foto formatieren möchtest. Wähle aus Optionen wie Größe, Wiederholung, Position und Anhängen.

Globale und ganzseitige Beaver Builder Hintergrundfotos

Beaver Builder arbeitet mit den standardmäßigen WordPress Design Tools, um die Vorteile der eingebauten Hintergrundfunktionen zu nutzen.

Daher kannst du auf den Reiter Erscheinungsbild > Hintergrund gehen, um einen Fotohintergrund für deine gesamte Webseite zu aktivieren.

Alternativ öffnest du eine beliebige Webseite in Beaver Builder und klickst auf das Dropdown-Menü Tools in der oberen linken Ecke.

Hier klickst du auf die Option Globale Einstellungen.

Das Globale Einstellungspanel bietet die Möglichkeit, deine gesamte Webseite zu verändern, indem es den eingebauten WordPress-Code außer Kraft setzt oder modifiziert. Daher möchten wir einen CSS-Codeblock einfügen, um das Hintergrundbild der gesamten Webseite (global) zu ändern.

Klicke auf den Reiter CSS in den Globalen Einstellungen und füge das folgende Codesegment in das Feld ein:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Es macht mehr Sinn, Beaver Builder für benutzerdefinierte Seitenhintergründe zu verwenden, da jede Seite ihr eigenes Bild als Hintergrund hat.

Öffne in deinem Seiteneditor wieder das Menü Tools.

Wähle die Option Layout CSS & Javascript.

Füge den gleichen Code in den CSS-Tab ein, ändere die URL zu Bild-Text in die tatsächliche URL und passe alle Einstellungen an, die du möchtest:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Füge einen einfachen Zeilen- oder Widget-Hintergrund mit dem Page Builder von SiteOrigin hinzu

Der Page Builder von SiteOrigin ist ein weiteres visuelles Tool zur Erstellung von Webseiten per Drag-and-Drop. Es ist begrenzt in seiner Fähigkeit, Hintergründe für die gesamte Webseite einzufügen (du musst auf das Standard WordPress Custom Background Tool zurückgreifen). Dennoch bietet es Einstellungen zum Hinzufügen von Hintergrundbildern und Farben für Zeilen und Widgets, die von SiteOrigin verwendet werden.

Als erstes musst du das Plugin Page Builder by SiteOrigin herunterladen und aktivieren.

Navigiere zu einer neuen Seite oder überlege dir, ob du eine SiteOrigin-Zeile zu einer aktuellen Seite auf der Webseite hinzufügen möchtest.

Jeder SiteOrigin Bereich fordert dich auf, ein Widget oder eine Zeile hinzuzufügen. Du hast auch die Möglichkeit, durch die vorgefertigten Layouts zu stöbern, wenn du ein Design nicht von Grund auf neu beginnen möchtest.

Die gute Nachricht ist, dass sowohl Widgets als auch Zeilen in SiteOrigin die Möglichkeit haben, Hintergrundbilder einzubinden.

Klicke daher auf die Schaltfläche Widget hinzufügen oder Zeile hinzufügen, um fortzufahren.

In diesem Beispiel schauen wir uns die Widgets-Bibliothek an.

Hier kannst du eines der vielen Widgets auswählen, die SiteOrigin anbietet, von Navigationsmenüs und Seiten bis hin zu Beitragsinhalten und Produktlisten.

Wir wählen das Produkte-Widget für dieses Beispiel, aber du kannst auch eines der vielen anderen Widgets wählen, je nach den Bedürfnissen deines Designs. Außerdem kannst du diese Widgets mit einer Reihe gruppieren und dann ein Hintergrundbild zu dieser Reihe hinzufügen, damit der Hintergrund hinter mehreren Widgets erscheint.

Das neue Widget oder die neue Zeile landet im SiteOrigin-Seiteneditor. Der größte Teil von SiteOrigin verbleibt im WordPress Dashboard, daher gibt es nicht so viel Frontend-Editor wie bei anderen Page Buildern.

Um einen Hintergrund zu einem SiteOrigin-Element hinzuzufügen, scrolle über das Element und klicke auf den Link Bearbeiten.

Ich habe das Produkte-Widget für dieses Beispiel gewählt, aber jedes Widget hat seine eigenen Einstellungen, um zu konfigurieren, wie es auf deiner Webseite aussieht.

Die Hintergrund-Tools befinden sich unterhalb des Design-Dropdown-Menüs. Klicke darauf, um vorwärts zu kommen.

Finde das Feld Hintergrundbild und klicke auf die Schaltfläche Bild auswählen.

Du hast auch die Möglichkeit, eine externe URL für das Hintergrundbild einzufügen.

Die Medienbibliothek zeigt dir die aktuellen Bilder, die du in WordPress hochgeladen hast. Klicke auf das Bild, das für diesen Hintergrund am besten funktioniert und wähle den Done-Button, um es in das SiteOrigin-Modul zu legen.

Das Feld Hintergrundbild zeigt nun eine Miniaturversion des Fotos an.

Scrolle nach unten durch die Einstellungen, um alles zu konfigurieren, von der Anzeige des Hintergrundbildes bis zur Schriftfarbe für den überlagernden Text.

Im Allgemeinen solltest du in der Lage sein, die gewünschten Ergebnisse zu erzielen, indem du die Cover-Anzeige wählst. Es sieht so aus, als ob das SiteOrigin Plugin standardmäßig die Kacheldarstellung auswählt, also musst du das eventuell ändern.

Klicke auf den Done-Button, wenn du deine Einstellungen für den Hintergrund abgeschlossen hast.

Das Widget (in diesem Fall das Produkte-Widget) kommt in den SiteOrigin WordPress Editor für diese Seite. Du kannst dieses Element an eine beliebige Stelle auf der Seite ziehen und neue Widgets und Zeilen über und unter ihm hinzufügen.

Du musst entweder auf die Schaltfläche Vorschau oder Aktualisieren klicken und dann im Frontend der Seite navigieren, um die Ergebnisse zu sehen.

Der aktuelle Hintergrund, den ich hinzugefügt habe, erscheint innerhalb der Beschränkungen des Produkte-Widgets von vorher. Dieser Hintergrund muss natürlich noch etwas bearbeitet werden, damit er hübscher aussieht, aber es ist ein guter Anfang, um den Raum mit einem kreativeren Hintergrundbild zu füllen.

Hinzufügen einzigartiger Hintergrundbilder mit Brizy

Der letzte Page Builder für diese Demonstration, Brizy, bietet stylische Templates und eine hervorragende Frontend-Oberfläche, um ungewöhnliche Designs und schnelle Anpassungen hinzuzufügen.

Der Brizy Page Builder beinhaltet ein umfangreiches Set an Drag-and-Drop-Modulen, die du in deine aktuelle Webseite einbauen kannst. Es erlaubt dir auch, mit einem leeren Template zu beginnen und deine gesamte Webseite mit Brizy zu erstellen.

Es wird dich freuen zu hören, dass Brizy auch ein Hintergrund-Tool für fast jedes Element hat, das du mit dem Page Builder einfügst. Ganz zu schweigen davon, dass Brizy mehrere einzigartige Hintergrundstile bietet, wie z.B. das Hinzufügen eines Looping-Videos zum Hintergrund oder einer kompletten Karte.

Um die Vorteile dieser Hintergrundeinstellungen zu nutzen, installiere und aktiviere das Brizy Plugin, um loszulegen.

Ein Großteil des Brizy-Designprozesses erfordert, dass du mit einem leeren Template beginnst. Brizy wird versuchen, deine älteren Designs in Brizy-Module zu konvertieren, aber wir finden, dass es am besten ist, von vorne anzufangen.

Gehe zu einer Seite oder einem Beitrag in deinem WordPress Dashboard und beginne die Seite mit einem Titel und vielleicht ein paar Inhalten zu erstellen.

Du solltest einen Button zum Bearbeiten mit Brizy sehen. Klicke darauf, um zum vollständigen Brizy Page Builder zu gelangen.

Der Brizy Page Builder zeigt eine vollständige Vorschau deiner Webseite mit Schaltflächen, Text und Bildern. Wenn die Seite leer ist, klicke auf die Schaltfläche Start Building Your Page.

Suche nach den Tabs Layouts und Blöcke in der oberen Menüleiste.

Die Layouts bieten vorgefertigte Webseiten, die mit Demo-Inhalten gefüllt und sofort einsatzbereit sind, wenn du die Inhalte deines Unternehmens anpasst. Die Blöcke sind kleinere Teile von Webseiten, aber sie sind immer noch vorgefertigt und oft einfacher zu benutzen und zu manipulieren, als wenn du einen Block selbst erstellen würdest.

Es spielt keine Rolle, in welche Richtung du gehst. Stöbere durch die Layouts und Blöcke und füge der Seite so viele hinzu, wie du möchtest. Dies sind einfach die Elemente, die du verwenden wirst, um eine komplette Webseite zu gestalten.

Nachdem du ein paar Blöcke oder Layouts auf der Webseite hast, gehe zurück zum Editor-Bildschirm, um deine Arbeit zu betrachten.

Du wirst sehen, dass jeder Blockabschnitt ein Einstellungssymbol auf der oberen rechten Seite des Blocks hat, das normalerweise auftaucht, wenn du über den Abschnitt scrollst.

Klicke auf dieses Symbol für den Block deiner Wahl. Wir fügen einen Hintergrund zu diesem Block hinzu.

Das Panel für die Blockeinstellungen bleibt in der oberen rechten Ecke. Scrolle über die Menüsymbole, um zu sehen, was sie alle tun.

Eines davon ist für Farben, und damit ist ein farbiger Hintergrund gemeint. Du kannst das ändern und einen Farbverlauf hinzufügen, wenn du lieber eine einfarbige oder farbige Hintergrundansicht haben möchtest.

Der Icon-Button auf der linken Seite enthält die Einstellungen für den Hintergrund.

Klicke auf diesen Button, um die Quick Tools zum Hochladen eines Hintergrundbildes für diesen Block zu öffnen.

Brizy bietet drei Medien-Hintergrundartikel an:

• Bilder
• Videos
• Karten

Probiere zuerst den Typ Bild aus, um zu verstehen, wie es mit deinem aktuellen Layout funktioniert.

Klicke auf den Bild-Upload-Bereich, um ein Foto in der Mediathek zu finden und es dem Hintergrund hinzuzufügen.

Für dieses Tutorial haben wir ein Foto einer Holzplatte gefunden und angegeben, dass wir keinen Parallax-Effekt haben möchten.

Dadurch entsteht ein angenehmer Effekt, da der farbige Hintergrund als Overlay dient, wir aber trotzdem die Textur des Holzes dahinter sehen.

Vergiss nicht, dass du das Feld Parallaxe jederzeit anpassen kannst, um das Hintergrundbild als festen, animierten oder scrollenden Hintergrund zu gestalten.

Und so fügst du ein Hintergrundbild mit Brizy ein!

Das Beste an Brizy ist, dass du dich immer wieder durch das Design bewegen und auf den Einstellungsbutton jedes Abschnitts klicken kannst.

Eine Sektion weiter können wir ein weiteres Hintergrundbild einfügen, ohne viel Zeit darauf zu verwenden.

Um die Leistungsfähigkeit der anderen Hintergrundtypen zu demonstrieren, können wir auf den Hintergrundtyp Karte klicken, eine Adresse eingeben und beobachten, wie eine Karte des Ortes direkt hinter dem Vordergrundinhalt erscheint.

Die Karte wird als vollwertiger Hintergrund platziert und verfügt über eine Zoomfunktion, falls es mit den Standardeinstellungen nicht so richtig klappt.

Zu guter Letzt empfehlen wir dir, das Brizy Background Video Tool auszuprobieren, das sich im selben Bereich wie das Image Background Tool befindet. Es funktioniert, indem es eine Video-URL (YouTube oder Vimeo) einfügt und ein komplettes Video direkt hinter dem Vordergrundinhalt rendert. Es bietet sogar die Möglichkeit, das Video in einer Schleife laufen zu lassen und auszuwählen, wann es starten soll, wenn der Nutzer über den Bereich scrollt.

Das animierte Gif unten gibt ein kurzes Beispiel für das Video in Aktion, auch wenn es wahrscheinlich etwas Bearbeitung gebrauchen könnte.

Größe des Hintergrundbildes, Beschaffung und grundlegende Bearbeitung

Wir haben bereits erwähnt, dass es zwar keine perfekte Größe für ein Hintergrundbild gibt, aber wir empfehlen, mit einer Größe von nicht weniger als 1024 x 768 Pixeln zu beginnen und ein gängiges Seitenverhältnis wie 16:9 beizubehalten. Das Seitenverhältnis ist nicht so wichtig wie die tatsächliche Größe und Auflösung des Bildes, da du das Bild zuschneiden kannst oder WordPress dies für dich übernimmt.

Es ist auch wichtig, die richtigen Orte zu finden, an denen du WordPress-Hintergrundbilder kaufen oder ausleihen kannst, wenn du nicht vorhast, deine eigenen Fotos zu machen.

Wo du geeignete Hintergrundbilder findest

Für deine Suche nach Hintergrundbildern schau dir unseren Leitfaden an, wie du Stockfotos finden und hinzufügen kannst, ohne WordPress zu verlassen. Wir haben auch eine Liste von nützlichen Marktplatz-Quellen, um nach hochauflösenden Stockfotos zu suchen, von denen viele kostenlos sind.

Insgesamt empfehlen wir, zu versuchen, selbst Hintergrundbilder zu machen. Wenn das nicht möglich ist oder du keine Erfahrung mit Fotografie oder Grafikdesign hast, solltest du darüber nachdenken, kostenlose Stockfotografie-Ressourcen zu nutzen. Du kannst dich auch dafür entscheiden, für ein Hintergrundbild von einer der vielen Premium Webseiten zu bezahlen, von denen einige eine monatliche Gebühr für das Herunterladen eines Haufens von Fotos verlangen.

Einige Highlights aus diesen Links sind:

• Unsplash – Kostenlos, und keine Namensnennung erforderlich.
• Visual Hunt – Kostenlose Fotos. Für die meisten Bilder ist keine Namensnennung erforderlich.
• Pexels – Kostenlos und ohne Namensnennung.
• Pixabay – Kostenlos und die meisten Bilder erfordern keine Namensnennung.
• iStockphoto – Ein ziemlich günstiges Premium-Abonnement für lizenzfreie Bilder.
• Shutterstock – Lizenzfreie Bilder für eine angemessene Abo-Gebühr.

Wie man das WordPress Hintergrundbild mit Custom CSS ändert

Wie wir gelernt haben, kannst du ein WordPress Hintergrundbild mit den standardmäßig eingebauten WordPress Tools oder einem Plugin hinzufügen. Es spielt keine Rolle, welchen Weg du wählst, solange du das gewünschte Ergebnis erhältst. Es gibt auch die Möglichkeit, benutzerdefinierte CSS zu verwenden, um das Hintergrundbild entweder zu stilisieren oder es deiner Webseite hinzuzufügen.

Wir werden hier nicht auf die Feinheiten von CSS eingehen, da jedes Hintergrundbild und jedes Theme einen anderen Prozess haben wird. Wir empfehlen jedoch, unseren Leitfaden zum Bearbeiten, Hinzufügen und Anpassen von CSS in WordPress zu lesen. Der Artikel enthält nützliche Tipps für das Hinzufügen von Hintergrundbildern zu fast allen Bereichen einer Webseite, von Menüpunkten bis hin zu bestimmten Seitenblöcken.

Häufige Probleme mit einem WordPress Hintergrundbild beheben

Alle WordPress Seiten verfügen über die Möglichkeit, einen Hintergrund hinzuzufügen. Das bedeutet jedoch nicht, dass die Kernfunktion für alle Webseiten funktioniert. Du könntest zum Beispiel feststellen, dass das von dir verwendete Theme keinen Support für benutzerdefinierte Hintergründe bietet. Oder du lädst immer wieder einen Hintergrund hoch, aber er sieht nicht richtig aus (zu groß oder zu unscharf).

Ein Problem mit einem WordPress-Hintergrund ist frustrierend und kommt leider recht häufig vor. Im Folgenden haben wir einige der häufigsten Probleme mit Hintergrundbildern zusammengestellt und die jeweiligen Lösungsansätze aufgezeigt.

Wie man die 5 häufigsten Probleme mit Hintergrundbildern in WordPress behebt

Mein Theme unterstützt kein WordPress Hintergrundbild

Theme-Entwickler haben die Kontrolle über die Custom Backgrounds Funktion in WordPress. Sie können es ein- oder ausschalten, je nachdem, ob sie den Support für benutzerdefinierte Hintergründe aktivieren möchten. Der Hintergrund wird ausgeschaltet, wenn er entweder nicht benötigt wird, oder wenn er mit dem Design des Themes in Konflikt steht.

Wenn du feststellst, dass dein Theme entweder keinen Support für einen benutzerdefinierten Hintergrund bietet oder es deine Möglichkeiten beim Hinzufügen eines Hintergrunds einschränkt, solltest du diese Lösungen in Betracht ziehen:

• Tausche das Theme gegen eines aus, das benutzerdefinierte Hintergründe unterstützt. Achte beim Kauf oder Download von Themes auf benutzerdefinierte Hintergründe in den Funktionslisten.
• Verwende ein Hintergrund Plugin, um die Standardfunktion für benutzerdefinierte Hintergründe zu überschreiben, die blockiert ist.

Obwohl es möglich ist, dein eigenes Coding einzubauen oder in die Theme-Dateien zu gehen, um eigene Hintergründe zu erstellen, raten wir von beiden Optionen ab. Am besten suchst du dir ein Theme, das Hintergründe unterstützt oder fügst ein Plugin hinzu, das Hintergründe zulässt, aber die Funktionalität des Themes nicht zu sehr beeinträchtigt.

Mein WordPress Hintergrundbild ist zu dunkel oder hat die falsche Farbe

Ein abgedunkeltes Hintergrundbild kann von vielen Einstellungen herrühren, die neben dem Hintergrundbild selbst laufen. Meistens hat es mit einem überlagernden Filter oder einem schlecht gefärbten Hintergrund zu tun.

In den meisten Fällen, in denen der Hintergrund verfärbt ist, musst du dein Theme oder Plugin überprüfen, das den Hintergrund selbst steuert.

Suche nach einer Einstellung in der Nähe des Hintergrundfeldes, die nach einem Filter oder Overlay fragt. Vielleicht findest du auch eine Deckkraftfunktion, die du deaktivieren solltest, damit dein Hintergrund richtig angezeigt wird.

Wenn alles andere fehlschlägt, kann es sein, dass das Theme einen Hintergrundfilter fest in die Theme-Dateien einkodiert hat. In diesem Fall kontaktiere den Theme-Entwickler, um eine Idee zu bekommen, was möglich ist, um die Hintergrundfarbe zu korrigieren.

Mein WordPress Hintergrundbild ist nicht an der richtigen Position

Wenn das Hintergrundbild an der falschen Position angezeigt wird, stört es das Gesamtdesign deiner Webseite. Es kann sein, dass der Hintergrund zu weit links oder rechts ist, oder dass das, was der zentrale Fokus des Hintergrunds sein sollte, gar nicht auf dem Bildschirm erscheint.

Zum Glück ist das Verschieben des Hintergrunds nur ein paar Mausklicks entfernt.

Gehe im WordPress Dashboard auf Darstellung > Hintergrund. Finde das Bild, das du derzeit als Hintergrund hochgeladen hast und suche nach dem Feld Position. In diesem Feld kannst du die Positionierung des Hintergrunds verschieben, mit Optionen, um es nach links, rechts, oben, unten oder in die Ecken zu verschieben.

Wir empfehlen dir, auf alle Positionierungsbuttons zu klicken, um die Ergebnisse zu sehen, die sie produzieren. Nachdem du die richtige Position gefunden hast, speichere die Seite.

Mein WordPress Hintergrundbild wiederholt sich immer und immer wieder

Texturen und einfarbige Hintergründe sehen oft besser aus, wenn sie wiederholt werden, da sie die Bildbrüche übersehen. Allerdings sehen viele Bilder furchtbar aus, wenn sie als Hintergrund wiederholt werden, vor allem solche mit vielen Details und unterschiedlichen Farbabstufungen.

Ein Layout mit wiederholten Hintergrundbildern ist praktisch, wenn dein Quellbild nicht groß genug ist, um den gesamten Hintergrund abzudecken, ohne gestreckt auszusehen. Daher wird in WordPress manchmal ein wiederholtes Layout verwendet, um die Auflösung des Bildes zu erhalten.

Die Hauptlösung für dieses Problem befindet sich im Bereich Hintergrund unter Erscheinungsbild > Hintergrund in WordPress. Wenn du ein Foto als Hintergrund hochgeladen hast, versuche es mit Voreinstellungen wie Bildschirm ausfüllen, An Bildschirm anpassen oder Benutzerdefiniert anstelle der Voreinstellung Wiederholen.

Du könntest jedoch feststellen, dass der Versuch, ein kleineres Bild so zu gestalten, dass es den gesamten Hintergrundbildschirm ausfüllt, zu unschönen Ergebnissen führt. In diesem Fall ist die beste Lösung, das Hintergrundbild komplett zu ersetzen und ein großes, hochauflösendes Bild zu suchen, das bereit für die Veröffentlichung im Web ist.

Mein WordPress Hintergrundbild ist gestreckt

Ein gestrecktes Hintergrundbild bedeutet, dass deine benutzerdefinierten Hintergrundeinstellungen versuchen, ein kleineres Bild zu nehmen und den gesamten Bildschirm mit dem Bild zu bedecken.

Dies kann auch bei größeren, hochauflösenden Bildern passieren, wenn sie nicht dem erforderlichen Seitenverhältnis entsprechen. Bei gestreckten Hintergrundbildern solltest du über die Quelldatei nachdenken. Ein anderes Bild zu wählen, das geeignet ist, ist die beste Option.

Ein weiteres Problem ist, dass du die Hintergrundeinstellungen falsch konfiguriert haben könntest. Überprüfe Dinge wie die Position des Hintergrundbildes und dass es im Modus „Fill Screen“ über die Leinwand gestreckt wird. Möglicherweise musst du nur die ursprünglichen Abmessungen beibehalten oder eine Wiederholungsfunktion hinzufügen, damit es klappt.

Andere Tipps zur Fehlerbehebung im Hintergrund

• Theme-Entwickler haben die volle Macht über die benutzerdefinierte Hintergrundfunktion in WordPress. Wenn du ein Theme installiert hast und der Hintergrund nicht funktioniert, kontaktiere am besten den Theme-Entwickler oder installiere ein neues Theme, um zu sehen, ob das Problem damit behoben ist.
• Benutzerdefinierte Hintergrundfarben und -bilder überschreiben oft jeglichen benutzerdefinierten CSS-Code, den du implementierst, um die Größe, die Platzierung oder die Quelle deines Hintergrundbildes zu steuern. Es kann sein, dass du dich an die Hintergrundeinstellungen des Themes halten musst, anstatt benutzerdefiniertes CSS zu verwenden.
• Es kann sein, dass ein Theme mit einem bereits aktivierten benutzerdefinierten Hintergrund verkauft wird. Normalerweise musst du dann nur das Hintergrundbild durch ein neues ersetzen. Manchmal ist es notwendig, die Theme-Dateien anzuzapfen oder benutzerdefinierte CSS zu verwenden, um die Einstellungen des Themes zu überschreiben.

Beste WordPress Hintergrundbild Plugins

Wenn du weitere Bearbeitungsmöglichkeiten für ein Hintergrundbild haben möchtest, dich für Videohintergründe interessierst oder Tools, die seitenbezogene Hintergründe ermöglichen, kannst du die folgenden WordPress Hintergrundbild Plugins in Betracht ziehen:

Simple Full Screen Background Image

Das Simple Full Screen Background Image Plugin unterscheidet sich nicht großartig von dem Standard Tool für Hintergrundbilder in WordPress, außer dass es automatisierte Funktionen für Dinge wie Größenänderung und Skalierung für Browser hinzufügt.

Insgesamt ist dieses Plugin am besten für diejenigen geeignet, die feststellen, dass ihr Theme die Möglichkeit, einen Hintergrund hinzuzufügen, blockiert, oder vielleicht Probleme mit dem eingebauten WordPress Hintergrund Tool haben. Es überschreibt die Einstellungen von WordPress und fügt einen speziellen Hintergrund-Button in deinem WordPress Dashboard hinzu, um sofort ein Bild von deinem Computer hochzuladen.

Das ist alles, was es zu bieten hat!

Das Plugin hat auch eine Premium Version, die verbesserte Skalierung, Support für eine unbegrenzte Anzahl von Hintergründen und einzigartige Effekte und vieles mehr bietet.

AWB – Advanced WordPress Backgrounds Plugin

Das Advanced WordPress Backgrounds Plugin nimmt eine andere Herangehensweise an WordPress-Hintergründe an und ermöglicht es dir, einzigartige Effekte zu nutzen, die deinen Hintergrund aufpeppen. Ein Beispiel dafür ist der Parallaxen-Hintergrund, der sich langsam mit dem Nutzer mitbewegen kann, während er durch deine Webseite scrollt.

Das Plugin bietet auch Support für Videos. Die Videohintergründe werden von Seiten wie YouTube und Vimeo bezogen, oder du kannst sie auch selbst hosten.

Es ist auch möglich, einen einfarbigen oder strukturierten Hintergrund zu haben. Alle diese Hintergrundtypen beinhalten erweiterte Funktionen, die du mit dem einfachen WordPress Background Tool nicht finden kannst. Einige davon sind Scroll- und Skalierungseffekte, Deckkraft-Effekte und benutzerdefinierte Geschwindigkeitsoptionen.

Es unterstützt Gutenberg und kann mit dem Standard WordPress Editor und vielen anderen visuellen Page Buildern zusammenarbeiten. Schließlich kannst du seine benutzerdefinierten CSS-Optionen nutzen, um deinen Hintergründen noch mehr Stil zu verleihen.

Perfect Images + Retina

Das Perfect Images + Retina Plugin ist eine praktische Zwei-in-Eins-Lösung. Es erlaubt dir, die Größe und das Aussehen des WordPress-Hintergrundbildes zu verwalten und gleichzeitig die Thumbnails zu regenerieren und die Bilder zu ersetzen. Die Bildverwaltung ist ziemlich beeindruckend, und es ist besonders für hochauflösende Hintergründe entscheidend.

Das Plugin bietet auch eine Hintergrundfunktion, wenn du dich für die Premium-Version entscheidest. Es generiert ein Retina-Äquivalent für das Hintergrundbild, damit die Bilder auch auf hochauflösenden Displays so aussehen, wie sie sollen.

Maintenance

Maintenance ist ein einfaches und leicht zu bedienendes Plugin für die Gestaltung von Wartungs- und Coming Soon-Seiten. Das Maintenance Plugin hat sowohl eine kostenlose als auch eine Premium-Version, aber die kostenlose reicht aus, um eine Wartungsseite zu aktivieren und ein Hintergrundbild mit überlagerndem Text und Feldern hinzuzufügen.

Du kannst sogar dein eigenes Logo hochladen, Dinge wie Schriftarten und Icons anpassen und verschiedene Templates mit ihren eigenen schönen Hintergrundbildern auswählen. Du kannst auch die vielen vorgefertigten Templates installieren, aber für die meisten davon brauchst du eine Premiumlizenz des Plugins.

Zusammenfassung

Ein einfaches WordPress-Hintergrundbild lässt sich ohne großen Aufwand hinzufügen und auf deiner gesamten Webseite anzeigen. Es ist eine Funktion, die in den WordPress-Core eingebaut ist, so dass es einfach ist, Hintergründe für bestimmte Ereignisse oder Feiertage auszutauschen. Du kannst auch bei einem Hintergrund für das ganze Leben bleiben.

Neben dem Standard-WordPress-Hintergrund kannst du auch benutzerdefinierten CSS-Code, Plugins und Page Builder verwenden, um alle Arten von Hintergründen auf deiner Webseite zu implementieren. Von Bildhintergründen auf bestimmten Seiten bis hin zu Hintergründen für deinen Menü-Button, die Möglichkeiten sind unendlich.

Jetzt ist es an der Zeit, deiner WordPress Seite den Hintergrund hinzuzufügen, den du schon immer haben wolltest.

Haben wir etwas ausgelassen? Bitte hinterlasse einen Kommentar, wenn du Probleme mit dem Hinzufügen oder Verwalten von WordPress Hintergrundbildern hast.