{"id":40799,"date":"2021-03-25T11:45:59","date_gmt":"2021-03-25T10:45:59","guid":{"rendered":"https:\/\/kinsta.com\/?p=90115"},"modified":"2023-07-27T11:04:49","modified_gmt":"2023-07-27T10:04:49","slug":"wordpress-hintergrundbilder","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/","title":{"rendered":"WordPress Hintergrundbilder: Hinzuf\u00fcgen, Bearbeiten und Anpassen des Themes"},"content":{"rendered":"<p>WordPress Hintergrundbilder gibt es in allen Formen. Du kannst ein Hintergrundbild f\u00fcr deine gesamte Webseite hochladen, es hinter Buttons platzieren oder einen einfarbigen Hintergrund f\u00fcr deine Login-Seite festlegen. Unabh\u00e4ngig davon, wo du sie platzieren willst, ist es wichtig, die Grundlagen des <a href=\"https:\/\/kinsta.com\/de\/blog\/maximale-upload-groesse-dateien-wordpress\/\">Hochladens eines Bildes<\/a> zu verstehen, einschlie\u00dflich eines Hintergrundbildes.<\/p>\n<p>Dieser Artikel erkl\u00e4rt, was ein Hintergrundbild ist und wie du es bearbeiten kannst, um ein besseres Ergebnis zu erzielen. Wir erkl\u00e4ren dir auch, wie du Hintergrundbilder schnell auf deiner Webseite aktivierst und wie du eventuelle <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-fehler\/\">Probleme auf dem Weg dorthin behebst<\/a>.<\/p>\n<p>Aufgeregt? Dann lass uns beginnen!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p><strong>Sieh dir unsere <a href=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\">Videoanleitung<\/a> zum Hinzuf\u00fcgen von WordPress-Hintergrundbildern an:<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\"><\/kinsta-video>\n<h2>Was ist ein WordPress Hintergrundbild?<\/h2>\n<p>Ein WordPress Hintergrundbild dient als vollst\u00e4ndiger Hintergrund deiner Webseite. Man nennt es auch einen benutzerdefinierten Hintergrund.<\/p>\n<figure style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WordPress-Background-Image-Example-e1614937251379.png\" alt=\"Ein Beispiel f\u00fcr ein WordPress Hintergrundbild\" width=\"1100\" height=\"671\"><figcaption class=\"wp-caption-text\">Ein Beispiel f\u00fcr ein WordPress Hintergrundbild<\/figcaption><\/figure>\n<p>Ein Hintergrund kann auch eine einfarbige Farbe sein.<\/p>\n<p>Unabh\u00e4ngig davon, welche Option du w\u00e4hlst, die <strong>functions.php<\/strong> Datei verwaltet das Hintergrundbild in einem WordPress Theme. Es wird auch in der Datei <strong>header.php<\/strong> von WordPress angezeigt.<\/p>\n<p>Dadurch haben die Theme-Entwickler eine gr\u00f6\u00dfere Kontrolle dar\u00fcber, ob die benutzerdefinierte Hintergrundfunktion f\u00fcr dein <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">WordPress Theme<\/a> aktiviert wird oder nicht. Du kannst die Funktion immer noch <strong>ein<\/strong>&#8211; oder <strong>aus <\/strong>schalten, aber das Theme deiner Webseite diktiert normalerweise die Standardeinstellungen.<\/p>\n<p>Es gibt mehrere Arten von Hintergr\u00fcnden, die du in WordPress implementieren kannst. Du kannst dich entweder f\u00fcr einen Standard-Hintergrund f\u00fcr die gesamte Webseite entscheiden oder f\u00fcr einen, der sich hinter bestimmten Elementen wie Sidebars und Artikeln befindet.<\/p>\n<p>Benutzerdefinierte Hintergr\u00fcnde sind auch f\u00fcr bestimmte Stellen auf deiner WordPress Seite m\u00f6glich:<\/p>\n<ul>\n<li>Hinter einer WordPress Seite oder einem Beitrag<\/li>\n<li>Auf einer WordPress Kategorieseite<\/li>\n<li>Innerhalb eines Inhaltsblocks f\u00fcr eine Seite oder einen Beitrag<\/li>\n<li>Auf der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-url-loggst\/\">Login-Seite<\/a><\/li>\n<li>Hinter dem Navigationsmen\u00fc<\/li>\n<li>Auf den Seiten Wartung oder Coming Soon<\/li>\n<\/ul>\n<p>Wenn der Support f\u00fcr benutzerdefinierte Hintergr\u00fcnde in einem Theme aktiviert ist, hat der Nutzer die M\u00f6glichkeit, ein Bild hochzuladen oder eine Farbe zu w\u00e4hlen, die den gesamten Hintergrund deiner Webseite ausf\u00fcllt.<\/p>\n<p>Die Einstellungen befinden sich im WordPress Dashboard unter <strong>Darstellung &gt; Anpassen &gt; Hintergrundbild<\/strong>. Es sind jedoch auch andere Arten von Hintergr\u00fcnden \u00fcber <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Drag and Drop Page Builder<\/a>, Plugins und verschiedene Optionen m\u00f6glich.<\/p>\n<p>Das Hochladen eines Hintergrundbildes in das Dashboard ist nur ein Teil des Prozesses. Danach musst du die Einstellungen f\u00fcr das Hintergrundbild konfigurieren. Manchmal kannst du die Einstellungen so belassen, wie sie sind, w\u00e4hrend es in anderen F\u00e4llen wichtig ist, die Einstellungen neu zu konfigurieren, um sicherzustellen, dass das Bild hervorragend aussieht.<\/p>\n<p>Zu den Einstellungen f\u00fcr ein WordPress-Hintergrundbild geh\u00f6ren:<\/p>\n<ul>\n<li>Hintergrund Farben<\/li>\n<li>Gr\u00f6\u00dfenbestimmung<\/li>\n<li>Bildposition<\/li>\n<li>Ob das Bild wiederholt werden soll oder nicht<\/li>\n<li>Optionen um den Bildschirm zu f\u00fcllen oder das Bild zu strecken<\/li>\n<\/ul>\n<p>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.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><\/span><\/p>\n<h2>Die vielen Stile von Hintergr\u00fcnden<\/h2>\n<p>Ein echter Vorteil eines WordPress-Hintergrundes ist, dass es sich nicht nur um statische <a href=\"https:\/\/kinsta.com\/de\/blog\/bilddateitypen\/\">Bilder<\/a> handelt. Du kannst auf verschiedene Arten von Hintergr\u00fcnden sto\u00dfen, von Videos \u00fcber Fotomuster bis hin zu Diashows.<\/p>\n<figure style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Kinsta-Background-Example-e1615198933785.png\" alt=\"Ein Beispiel f\u00fcr ein Hintergrundbild auf der Webseite von Kinsta\" width=\"1100\" height=\"693\"><figcaption class=\"wp-caption-text\">Ein Beispiel f\u00fcr ein Hintergrundbild auf der Webseite von Kinsta<\/figcaption><\/figure>\n<p>Einzigartige Hintergr\u00fcnde kannst du oft mit Hilfe von CSS oder Plugins (oder beidem) realisieren. Wir zeigen dir beide Methoden in diesem Artikel.<\/p>\n<p>Hier sind einige Hintergrundstile, die du in Betracht ziehen solltest:<\/p>\n<ul>\n<li><strong>Standard Hintergrundbilder:<\/strong> Dies sind statische Bilder (PNG, JPG und andere Bildformate), die sich \u00fcber den Gro\u00dfteil der Webseite erstrecken und hinter dem prim\u00e4ren Inhalt sitzen. Zu ihren Vorteilen geh\u00f6ren Einfachheit, Optionen f\u00fcr hochaufl\u00f6sende Fotos und der standardm\u00e4\u00dfige Support durch den WordPress-Core. Die Nachteile reichen von der Tendenz, die Sichtbarkeit von Elementen im Vordergrund zu beeintr\u00e4chtigen bis hin zur Verlangsamung deiner Webseite durch ein gro\u00dfes, hochaufl\u00f6sendes Bild.<\/li>\n<li><strong>Einfarbige Hintergr\u00fcnde:<\/strong> Das <a href=\"https:\/\/kinsta.com\/de\/blog\/webseiten-farbschemata\/\">einfarbige Hintergrundbild<\/a> ist praktisch, wenn du deiner Webseite etwas Lebendigkeit verleihen m\u00f6chtest, 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\u00dfartig, um dein Branding anzupassen, ohne dass du eigenen Code oder ein Plugin brauchst.<\/li>\n<li><strong>Farbverlauf-Hintergr\u00fcnde:<\/strong> Ein Hintergrund mit Farbverlauf geht von einer Farbe zur anderen \u00fcber. Es ist visuell ansprechender als einfarbige Hintergr\u00fcnde, braucht nicht viel Zeit und kann mit vielen Plugins hinzugef\u00fcgt werden. Der gr\u00f6\u00dfte Nachteil ist, dass der Vordergrund an einem Ende des Farbverlaufs gut zur Geltung kommt, am anderen Ende jedoch nicht.<\/li>\n<li><strong>Muster- oder Textur-Hintergr\u00fcnde:<\/strong> Alle Muster- und Texturhintergr\u00fcnde sind Fotos, aber sie konzentrieren sich auf sich wiederholende Elemente im Bild oder eine Textur in Nahaufnahme, wie eine Holzplatte oder ein St\u00fcck 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\u00df genug ist.<\/li>\n<li><strong>Bild-Slideshow-Hintergr\u00fcnde:<\/strong> Ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-slider\/\">Bild-Slideshow<\/a>-Hintergrund bef\u00e4higt Betreiber von Webseiten, mehrere Arten von Designs oder Fotos im Hintergrund zu teilen, was die Bem\u00fchungen verst\u00e4rkt, die Stimmung anzupassen, wenn ein Kunde durch deine Webseite scrollt. Slideshows k\u00f6nnen jedoch ablenkend wirken oder deine Webseite verlangsamen.<\/li>\n<li><strong>Video-Hintergr\u00fcnde:<\/strong> Videohintergr\u00fcnde sind fesselnd, machen Spa\u00df beim Anschauen und k\u00f6nnen das Wesen deiner Marke gut darstellen. Allerdings f\u00fchren sie auch zu Performance-Problemen, wenn sie nicht richtig gemacht werden und k\u00f6nnten die Aufmerksamkeit deines Verkaufstrichters wegnehmen. Au\u00dferdem m\u00fcssen Hintergrundvideos die perfekte Gr\u00f6\u00dfe haben und zu den richtigen Zeiten abgespielt werden. Sie k\u00f6nnen auch teuer werden, es sei denn, du entscheidest dich f\u00fcr kostenlose Stock-Videos.<\/li>\n<\/ul>\n<h2>Best Practices f\u00fcr die Verwendung von WordPress Hintergrundbildern<\/h2>\n<p>Ein benutzerdefiniertes Hintergrundbild einzustellen scheint eine einfache Aufgabe zu sein. Du l\u00e4dst das Bild einfach an der richtigen Stelle hoch und schaust zu, wie es im Frontend erscheint, richtig?<\/p>\n<p>In den meisten F\u00e4llen ist das der Fall, aber manchmal kann das Hintergrundbild auch ein wenig m\u00fchsam sein. Deshalb empfehlen wir, die <a href=\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\">Best Practices f\u00fcr WordPress<\/a> Hintergrundbilder zu befolgen, um so viele Probleme wie m\u00f6glich zu vermeiden.<\/p>\n<h3>Tipps zur Verwendung von WordPress-Hintergrundbildern<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=RLR1vILiE98\"><\/kinsta-video>\n<h3>Bleibe bei qualitativ hochwertigen Bildern<\/h3>\n<p>Die Aufl\u00f6sung deines beabsichtigten Hintergrundbildes entscheidet oft \u00fcber seine Pr\u00e4sentation. Du denkst vielleicht, dass ein Bild, das du mit deinem Smartphone aufgenommen hast, perfekt f\u00fcr ein Hintergrundbild ist, aber die Chancen stehen gut, dass es von viel h\u00f6herer Qualit\u00e4t sein muss.<\/p>\n<figure style=\"width: 1139px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Unsplash-Free-Stock-Photos.png\" alt=\"Kostenlose Stockfotos auf Unsplash\" width=\"1139\" height=\"729\"><figcaption class=\"wp-caption-text\">Kostenlose Stockfotos auf Unsplash<\/figcaption><\/figure>\n<p>Du kannst f\u00fcr 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\u00dfes Hintergrundbild hochgeladen werden k\u00f6nnen. Du kannst aber auch eine Menge davon auf <a href=\"https:\/\/kinsta.com\/de\/blog\/kiostenlose-bilder-fur-wordpress\/\">kostenlosen Webseiten f\u00fcr Bilder<\/a> finden.<\/p>\n<p>Es kann sein, dass das Hintergrundbild nicht vollst\u00e4ndig auf deiner Webseite zu sehen ist, da ein Gro\u00dfteil davon vom Inhalt verdeckt wird. Dennoch wird das eigentliche Bild \u00fcber den gesamten Bildschirm angezeigt.<\/p>\n<p>Wenn du kein qualitativ hochwertiges Bild verwendest, l\u00e4ufst du Gefahr, einen gestreckten Hintergrund zu sehen.<\/p>\n<h3>Stelle sicher, dass die Hintergrundbilder die richtige Gr\u00f6\u00dfe haben<\/h3>\n<p>Neben der Bildaufl\u00f6sung ist auch die physische Gr\u00f6\u00dfe des Bildes von gro\u00dfer Bedeutung.<\/p>\n<p>Alle <a href=\"https:\/\/kinsta.com\/de\/blog\/responsiven-webdesign\/\">Bildschirme haben unterschiedliche Seitenverh\u00e4ltnisse<\/a>. Und mobile Ger\u00e4te machen es noch komplizierter. Aber das Ziel ist es, ein Bild zu verwenden, das auch auf dem gr\u00f6\u00dften Bildschirm gut aussieht. Ansonsten l\u00e4ufst du Gefahr, dass das Bild wieder einmal gestreckt oder nicht richtig angezeigt wird.<\/p>\n<p>Im Allgemeinen ist es eine gute Regel, sich an eine minimale WordPress-Hintergrundbildgr\u00f6\u00dfe von <strong>1024 x 768<\/strong> Pixeln zu halten. Andere Experten empfehlen jedoch eher eine Gr\u00f6\u00dfe von <strong>1920 x 1080<\/strong> Pixeln. Insgesamt ist es am besten, wenn du bei der Breite zwischen 1000 und 3000 Pixel bleibst, je nachdem, wo es angezeigt werden soll.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/starting-large.png\" alt=\"WordPress Hintergrundbild Abmessungen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">WordPress Hintergrundbild Abmessungen<\/figcaption><\/figure>\n<p>Der n\u00e4chste Faktor, den du ber\u00fccksichtigen musst, ist das Seitenverh\u00e4ltnis. Deckt das Hintergrundbild eine ganze Webseite ab, oder ist es nur das obere Viertel?<\/p>\n<p>Technisch gesehen hat eine Webseite ein Seitenverh\u00e4ltnis im Hochformat (mehr H\u00f6he als Breite). Du kannst also diese Art von Bildern in Betracht ziehen. Allerdings sollten abschnittsweise Hintergr\u00fcnde &#8211; wie die f\u00fcr Header oder <a href=\"https:\/\/kinsta.com\/de\/blog\/banner-werbegrosse\/\">Werbebanner<\/a> &#8211; im Querformat bleiben (l\u00e4ngere Breite als H\u00f6he).<\/p>\n<p>Au\u00dferdem ist das g\u00e4ngigste Seitenverh\u00e4ltnis f\u00fcr Desktops heute <strong>16:9<\/strong>. In der N\u00e4he dieses Ziels zu bleiben, hilft. Ein responsive Theme oder Plugin kann das Hintergrundbild automatisch f\u00fcr die mobile Ansicht anpassen.<\/p>\n<p>Letztendlich sollte das Testen deiner Hintergrundbilder auf einer echten Webseite und mehreren Ger\u00e4tetypen die endg\u00fcltige Entscheidung viel einfacher machen.<\/p>\n<h3>Optimiere vor der Erstellung eines WordPress Hintergrundbildes<\/h3>\n<p>Wie bei allen Bildern, die du in WordPress hochl\u00e4dst, erweist du dir selbst einen schlechten Dienst, wenn du sie nicht <a href=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\">optimierst, bevor du sie im Internet ver\u00f6ffentlichst<\/a>. Dies ist besonders wichtig f\u00fcr Hintergrundbilder, da sie oft auf mehreren Seiten deiner Webseite auftauchen. Au\u00dferdem sind es gro\u00dfe Fotos, die eine betr\u00e4chtliche Fl\u00e4che auf dem Bildschirm einnehmen.<\/p>\n<p>Gr\u00f6\u00dfere Bilder belasten deinen Server in erheblichem Ma\u00dfe. Behalte die Aufl\u00f6sung deines Bildes bei, aber optimiere seine Gr\u00f6\u00dfe, damit deine <a href=\"https:\/\/kinsta.com\/de\/lernen\/wordpress-beschleunigen\/\">Webseite schnell l\u00e4dt<\/a>.<\/p>\n<p>Du hast zwei M\u00f6glichkeiten, Fotos zu optimieren:<\/p>\n<ol>\n<li>Optimiere die Hintergrundbilder (und alle Bilder der Webseite), bevor du sie in WordPress hochl\u00e4dst. Erledige diesen manuellen Prozess mit Hilfe von Tools wie Photoshop Express, GIMP und Pixlr.<\/li>\n<li>Automatisiere den Optimierungsprozess, indem du ein WordPress Plugin installierst, das die Gr\u00f6\u00dfe von Fotos beim Hochladen \u00e4ndert und verkleinert.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\">Lies unsere ausf\u00fchrliche Anleitung zur Bildoptimierung<\/a>, wie du Bilder f\u00fcr eine verbesserte Web-Performance optimierst.<\/p>\n<h3>Pr\u00fcfe auf Hintergrund Support bevor du ein Theme installierst<\/h3>\n<p>Leider unterst\u00fctzen 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.<\/p>\n<p>Wenn du aber wirklich einen Hintergrund auf deiner Webseite haben m\u00f6chtest, ist es ratsam, die Liste der Funktionen zu pr\u00fcfen, wenn du ein neues Theme herunterl\u00e4dst, besonders wenn du vorhast, f\u00fcr ein <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-ein-wordpress-theme\/\">Premium Theme zu bezahlen<\/a>. Viele <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">Webseiten, die Themes verkaufen<\/a>, bieten Informationen dar\u00fcber, ob ein Theme Hintergr\u00fcnde unterst\u00fctzt oder nicht.<\/p>\n<p>Themes, die in der <a href=\"https:\/\/wordpress.org\/themes\/\">WordPress Theme Library<\/a> aufgelistet sind, geben zum Beispiel den Support f\u00fcr benutzerdefinierte Hintergr\u00fcnde als Tags an. M\u00f6glicherweise findest du auch einen Hinweis auf einen benutzerdefinierten Hintergrund in der Theme-Beschreibung.<\/p>\n<figure style=\"width: 1237px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/01\/the-feature-for-custom-background.png\" alt=\"'Custom Background' Support f\u00fcr Themes\" width=\"1237\" height=\"1321\"><figcaption class=\"wp-caption-text\">&#8218;Custom Background&#8216; Support f\u00fcr Themes<\/figcaption><\/figure>\n<p>Andere Theme-Webseiten enthalten in der Regel \u00e4hnliche Informationen \u00fcber benutzerdefinierte Hintergrundbilder. Wenn nicht, wende dich an den <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-entwickler-engagiert\/\">Entwickler<\/a>, um herauszufinden, ob es irgendwie m\u00f6glich ist und ob das \u00dcberschreiben des Hintergrundbildblocks (siehe unten) zu Problemen mit dem Theme f\u00fchrt.<\/p>\n<h3>Erw\u00e4ge die Verwendung eines visuellen Page Builders, um Hintergrundbilder zu vereinfachen<\/h3>\n<p>Page Builder wie Gutenberg, WPBakery, <a href=\"https:\/\/kinsta.com\/de\/blog\/divi-vs-elementor\/\">Divi und Elementor<\/a> bieten beeindruckende Listen von Bl\u00f6cken und Modulen, um Elemente wie Bilder und Textfelder \u00fcberall auf einer Webseite einzuf\u00fcgen.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Elementor Website builder\" width=\"1324\" height=\"435\"><figcaption class=\"wp-caption-text\">Elementor Website builder<\/figcaption><\/figure>\n<p>Ohne einen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Drag-and-Drop Builder<\/a> wird es etwas schwieriger, ein Hintergrundbild zu konfigurieren. Es ist besonders schwierig, Probleme zu beheben, die auftreten k\u00f6nnen.<\/p>\n<p>Page Builder neigen auch dazu, die standardm\u00e4\u00dfige Hintergrundbildfunktion von WordPress zu ersetzen. Du kannst Theme-Einschr\u00e4nkungen oder fehlende Elemente, die bei der Anzeige eines Hintergrundbildes helfen, im Code au\u00dfer Kraft setzen.<\/p>\n<h3>Stelle sicher, dass dein Hintergrundbild legal ist<\/h3>\n<p>Legalit\u00e4t ist immer ein Thema, wenn es um Bilder geht, besonders wenn sie im Internet ver\u00f6ffentlicht werden. Es gibt einen wachsenden Trend in den <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-social-media-plugins\/\">sozialen Medien<\/a>, bei dem die Leute anscheinend davon ausgehen, dass das Hinzuf\u00fcgen einer Quellenangabe zu einem Foto automatisch bedeutet, dass es in Ordnung ist, dieses Foto zu verwenden.<\/p>\n<p>Das ist falsch.<\/p>\n<p>Wer auch immer das Foto macht, dem geh\u00f6rt es. Selbst wenn das Bild von einem schnellen iPhone-Schnappschuss stammt &#8211; in den Vereinigten Staaten und vielen anderen L\u00e4ndern ist das Foto sofort urheberrechtlich gesch\u00fctzt.<\/p>\n<p>Wenn du die legalen Rechte haben m\u00f6chtest, um das Foto eines anderen zu verwenden, braucht es eine schriftliche Erkl\u00e4rung des Copyright-Inhabers, die dir erlaubt, seine Bilder zu verwenden &#8211; eine einfache E-Mail reicht aus. Selbst dann musst du das Foto m\u00f6glicherweise als Quelle angeben, wenn die Person dich darum bittet.<\/p>\n<p>Wir haben einen <a href=\"https:\/\/kinsta.com\/de\/blog\/schutzen-website\/\">umfassenden Leitfaden zum Schutz von Bildern auf deiner Webseite<\/a>, aber der Artikel enth\u00e4lt auch wertvolle Informationen f\u00fcr diejenigen, die Fotos aus anderen Quellen verwenden m\u00f6chten.<\/p>\n<p>Das Schwierige an Hintergrundbildern ist, dass es in der Regel nicht praktisch ist, eine Bildunterschrift hinzuzuf\u00fcgen, da WordPress keinen Platz hat, um eine sichtbare Bildunterschrift f\u00fcr Hintergrundbilder einzubauen. Und nein, du kannst nicht auf einem zuf\u00e4lligen Blogpost oder einer Seite eine Namensnennung hinzuf\u00fcgen und erwarten, dass diese als Anerkennung f\u00fcr ein komplettes Hintergrundbild einer Webseite dient.<\/p>\n<p>Um dich selbst zu sch\u00fctzen und diejenigen zu respektieren, die die Fotos machen, solltest du eine der folgenden M\u00f6glichkeiten in Betracht ziehen, wenn du ein Hintergrundbild f\u00fcr WordPress suchst:<\/p>\n<ul>\n<li>Mache das Foto selbst. Das ist der einfachste Weg, um sicherzustellen, dass du nicht gegen das Urheberrecht eines anderen verst\u00f6\u00dft.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-stockfotos\/#2-pixelrockstar-premium-yet-insanely-affordable\">Bezahle f\u00fcr Fotos<\/a> auf Webseiten wie Shutterstock und iStockPhoto. Diese sind manchmal teuer, aber f\u00fcr ein Hintergrundbild kann es gerade noch in dein Budget passen.<\/li>\n<li>Ziehe eine <a href=\"https:\/\/kinsta.com\/de\/blog\/kiostenlose-bilder-fur-wordpress\/\">kostenlose Webseite f\u00fcr Bilder<\/a> 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.<\/li>\n<li>Kontaktiere den Fotografen oder K\u00fcnstler und frage, ob du es kostenlos verwenden darfst. Das kann alles sein, was du brauchst, vor allem, wenn du etwas als Gegenleistung anbietest.<\/li>\n<li>Denke dar\u00fcber nach, das Hintergrundbild wegzulassen oder einen farbigen Hintergrund statt eines Fotos zu w\u00e4hlen.<\/li>\n<\/ul>\n<h2>Wie setze ich ein Hintergrundbild in WordPress?<\/h2>\n<p>Es gibt verschiedene M\u00f6glichkeiten, ein Hintergrundbild in WordPress zu setzen. Diese Methoden \u00e4ndern sich in der Regel, je nachdem, wo du das Bild platzieren m\u00f6chtest.<\/p>\n<p>Du kannst dich zum Beispiel daf\u00fcr entscheiden, dass du auf deiner gesamten Webseite das gleiche Hintergrundbild haben m\u00f6chtest. Auf der anderen Seite ist es m\u00f6glich, dass du lieber einen Weg finden m\u00f6chtest, um einzigartige Hintergrundbilder f\u00fcr alle deine Seiten zu zeigen.<\/p>\n<p>Da es so viele M\u00f6glichkeiten gibt, werden wir in den folgenden Abschnitten erkl\u00e4ren, wie du ein Hintergrundbild oder eine Farbe hinzuf\u00fcgen kannst:<\/p>\n<ul>\n<li>Die gesamte Webseite<\/li>\n<li>Eine WordPress Seite<\/li>\n<li>Ein WordPress-Beitrag<\/li>\n<li>Ein einzelner <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-0\/\">Inhaltsblock<\/a><\/li>\n<li>Der WordPress-Header<\/li>\n<li>Eine Kategorie-Archivseite<\/li>\n<li>Die WordPress Login-Seite<\/li>\n<li>Das Navigationsmen\u00fc<\/li>\n<li>Eine Wartungsseite<\/li>\n<\/ul>\n<h3 class=\"title style-scope ytd-video-primary-info-renderer\">Hinzuf\u00fcgen eines Hintergrundbildes zur WordPress-Kopfzeile und den Men\u00fcs<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=5bSeC5NQjp0\"><\/kinsta-video>\n<h3>Bevor du anf\u00e4ngst: Aktiviere den Custom Background Support in WordPress (falls n\u00f6tig)<\/h3>\n<p>Theme-Entwickler entscheiden \u00fcber das Schicksal der Hintergrundfunktionen einer Webseite. WordPress hat die Funktionalit\u00e4t in den Core eingebaut, aber ein Theme-Entwickler k\u00f6nnte es abschalten, so dass du keine Dashboard-Einstellung hast, um es einzuschalten.<\/p>\n<p>Wenn du an irgendeinem Punkt in den folgenden Tutorials feststellst, dass dein <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-ein-wordpress-theme\/\">Theme der Grund<\/a> f\u00fcr das Fehlen der Option &#8222;<strong>Benutzerdefinierter Hintergrund<\/strong>&#8220; ist, solltest du die folgenden Schritte in Betracht ziehen, um das Problem schnell zu beheben.<\/p>\n<p>Der wichtigste Support f\u00fcr den benutzerdefinierten Hintergrund in WordPress wird \u00fcber die Datei <strong>functions.php<\/strong> abgewickelt. \u00d6ffne diese Datei und f\u00fcge den folgenden Code ein, falls er fehlt:<\/p>\n<pre><code class=\"language-css\">$defaults = array(\n\u00a0\u00a0\u00a0\u00a0'default-color'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-image'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-repeat'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-position-x'\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-attachment'\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'wp-head-callback'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '_custom_background_cb',\n\u00a0\u00a0\u00a0\u00a0'admin-head-callback'\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'admin-preview-callback' =&gt; ''\n);\nadd_theme_support( 'custom-background', $defaults );<\/code><\/pre>\n<p>Behalte im Hinterkopf, dass das Element, das den Support f\u00fcr den Hintergrund aktiviert, die Funktion <code>add_theme_support()<\/code> mit allem, was sie enth\u00e4lt, ist. Dieser Code schaltet die Hintergrundfunktion im <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress Dashboard<\/a> ein, was du in vielen der folgenden Tutorials in diesem Artikel nutzen kannst.<\/p>\n<p>Es ist auch m\u00f6glich, ein Standard-Hintergrundbild f\u00fcr das gesamte Theme \u00fcber die Datei <strong>functions.php<\/strong> hinzuzuf\u00fcgen. Gehe einfach zu dem Bereich aus dem vorherigen Code mit dem <code>default-image<\/code> Wert und f\u00fcge die URL des Bildes in die Leerstelle zwischen dem <code>' '<\/code> nach dem <code>=&gt;<\/code> ein.<\/p>\n<p>Dies ist ein schneller und einfacher Weg, um benutzerdefinierte Hintergr\u00fcnde innerhalb des WordPress Dashboards einzuschalten.<\/p>\n<p>Wir empfehlen jedoch, das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-andern\/\">Theme zu wechseln<\/a>, wenn es keinen Support f\u00fcr Hintergr\u00fcnde hat. Das Entfernen der benutzerdefinierten Hintergrundfunktion k\u00f6nnte einen eigenen Zweck haben, oder vielleicht fand der Theme-Entwickler, dass es zu viele Probleme mit dem Design verursacht.<\/p>\n<h3>So f\u00fcgst du ein Hintergrundbild zu deiner gesamten WordPress Seite hinzu<\/h3>\n<p>Wenn dein Theme die M\u00f6glichkeit bietet, ein benutzerdefiniertes Hintergrundbild hinzuzuf\u00fcgen (und das tun viele), macht es das f\u00fcr dich viel einfacher.<\/p>\n<p>Um zu beginnen, gehe in dein WordPress Dashboard und klicke auf <strong>Erscheinungsbild &gt; Anpassen<\/strong>.<\/p>\n<figure style=\"width: 1090px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-ize.png\" alt=\"Klicke auf den Link 'Anpassen' unter dem Men\u00fc 'Erscheinungsbild'\" width=\"1090\" height=\"912\"><figcaption class=\"wp-caption-text\">Klicke auf den Link &#8218;Anpassen&#8216; unter dem Men\u00fc &#8218;Erscheinungsbild&#8216;<\/figcaption><\/figure>\n<p>Das bringt dich zum <strong>WordPress Theme Customizer<\/strong>, mit Anpassungseinstellungen auf der linken Seite und einer Webseiten Vorschau auf der rechten Seite.<\/p>\n<p>Hier findest du den Reiter <strong>Hintergrund<\/strong> und klickst ihn an.<\/p>\n<figure style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/background-tab.png\" alt=\"WordPress Hintergrundbild im Editor\" width=\"1885\" height=\"940\"><figcaption class=\"wp-caption-text\">WordPress Hintergrundbild im Editor<\/figcaption><\/figure>\n<p>Wenn du alternativ <strong>Erscheinungsbild &gt; Hintergrund<\/strong> ausw\u00e4hlen kannst, kannst du es f\u00fcr einen direkteren Weg zu dieser Einstellung nutzen.<\/p>\n<figure style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-back.png\" alt=\"Klicke auf den Link 'Hintergrund' unter dem Men\u00fc 'Erscheinungsbild'\" width=\"1302\" height=\"905\"><figcaption class=\"wp-caption-text\">Klicke auf den Link &#8218;Hintergrund&#8216; unter dem Men\u00fc &#8218;Erscheinungsbild&#8216;<\/figcaption><\/figure>\n<p>Der Bereich <strong>Hintergrundanpassung<\/strong> verwaltet die Hintergrundelemente f\u00fcr deine gesamte Webseite.<\/p>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Bild ausw\u00e4hlen<\/strong>, um fortzufahren.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-background.png\" alt=\"Klicke auf den 'Bild ausw\u00e4hlen' Button\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Bild ausw\u00e4hlen&#8216; Button<\/figcaption><\/figure>\n<p>Im Fenster <strong>Bild ausw\u00e4hlen<\/strong> w\u00e4hlst du ein Bild, das gut als Hintergrund f\u00fcr deine <a href=\"https:\/\/kinsta.com\/de\/blog\/webdesign-trends\/\">Marke und das Styling deiner Webseite<\/a> passt. Im Allgemeinen hilft ein neutrales Farbmuster mit einem schwarzen, oder wei\u00dfen, oder grauen Farbton, um sicherzustellen, dass die meisten deiner Texte und Inhalte auch mit dem Hintergrund dahinter gut aussehen.<\/p>\n<p>Sobald du dein Bild ausgew\u00e4hlt hast, klicke auf die Schaltfl\u00e4che <strong>Bild ausw\u00e4hlen<\/strong>, um fortzufahren.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choose-the-im.png\" alt=\"W\u00e4hle das Hintergrundbild\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle das Hintergrundbild<\/figcaption><\/figure>\n<p>Der von dir implementierte Hintergrund erscheint nun in der Vorschau der Webseite.<\/p>\n<p>Sieh nach, ob dein Inhalt immer noch hervorsticht und mit dem gew\u00e4hlten Bild pr\u00e4sentabel aussieht. Manchmal wirst du feststellen, dass du den Hintergrund entweder komplett austauschen oder Dinge wie Text- oder Linkfarben \u00e4ndern musst.<\/p>\n<p>Ein kleines <a href=\"https:\/\/kinsta.com\/de\/blog\/thumbnails-regenerieren\/\">Vorschaubild<\/a> des Hintergrunds erscheint auch in den <strong>Einstellungen<\/strong> und zeigt dir, dass das Bild implementiert wurde.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/thats-where-it-is.png\" alt=\"WordPress Hintergrund Bild Thumbnails\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">WordPress Hintergrund Bild Thumbnails<\/figcaption><\/figure>\n<p>F\u00fcr WordPress-Hintergr\u00fcnde sind ein paar zus\u00e4tzliche Einstellungen verf\u00fcgbar, darunter das Feld <strong>Preset<\/strong>.<\/p>\n<p>Klicke auf das <strong>Preset<\/strong>-Feld, um die Formatierung des Bildes mit voreingestellten Designs und Ausrichtungen zu \u00e4ndern.<\/p>\n<figure style=\"width: 1890px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/preset.png\" alt=\"Die 'Preset' Option f\u00fcr WordPress Hintergrundbilder\" width=\"1890\" height=\"940\"><figcaption class=\"wp-caption-text\">Die &#8218;Preset&#8216; Option f\u00fcr WordPress Hintergrundbilder<\/figcaption><\/figure>\n<p>Du kannst aus den folgenden Voreinstellungen w\u00e4hlen:<\/p>\n<ul>\n<li><strong>Standard<\/strong>: Normalerweise ist dies die gleiche Einstellung wie <strong>Repeat<\/strong>, aber es kann von deinem Theme abh\u00e4ngen. Die Standardeinstellung funktioniert in der Regel am besten, aber es h\u00e4ngt von dem verwendeten Bild ab.<\/li>\n<li><strong>Bildschirm ausf\u00fcllen<\/strong>: Diese Einstellung streckt das Bild, um sicherzustellen, dass alle Teile des Bildschirms abgedeckt werden, auch wenn es bedeutet, das Bild zu beschneiden, sodass es \u00fcber den Bildschirm hinausl\u00e4uft. Es funktioniert gut f\u00fcr viele hochaufl\u00f6sende Bilder, kann aber bei niedrig aufgel\u00f6sten Bildern zu Unsch\u00e4rfen f\u00fchren.<\/li>\n<li><strong>An den Bildschirm anpassen<\/strong>: Dies beh\u00e4lt das Seitenverh\u00e4ltnis des Originalfotos bei und versucht, dieses Verh\u00e4ltnis 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.<\/li>\n<li><strong>Wiederholen<\/strong>: Diese Funktion nutzt Teile der Funktion <strong>Bildschirm ausf\u00fcllen<\/strong>, 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.<\/li>\n<li><strong>Benutzerdefiniert<\/strong>: Diese Einstellung gibt dir die meiste Kontrolle \u00fcber den Hintergrund und bietet mehrere Optionen, um die Gr\u00f6\u00dfe des WordPress-Hintergrundbildes anzupassen, z.B. wie es sich auf der Seite wiederholt, sich dehnt oder bewegt, wenn der Nutzer scrollt.<\/li>\n<\/ul>\n<p>Es gibt keine Regel, welche der Voreinstellungen am besten funktioniert, da es Bilder in verschiedenen Gr\u00f6\u00dfen, Aufl\u00f6sungen und Details gibt. Daher ist es am besten, wenn du mit der Voreinstellung &#8222;<strong>Standard<\/strong>&#8220; beginnst und dann jede der anderen Voreinstellungen ausprobierst, um zu sehen, welche am besten zu deinem Hintergrundbild passt.<\/p>\n<p>Wenn alles andere fehlschl\u00e4gt, w\u00e4hle die Einstellung <strong>Benutzerdefiniert<\/strong>, um deine Auswahl zu pr\u00e4zisieren.<\/p>\n<figure style=\"width: 1406px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fill.png\" alt=\"'Fill Screen' Preset f\u00fcr WordPress Hintergrundbilder\" width=\"1406\" height=\"940\"><figcaption class=\"wp-caption-text\">&#8218;Fill Screen&#8216; Preset f\u00fcr WordPress Hintergrundbilder<\/figcaption><\/figure>\n<p>Die Voreinstellung <strong>An Bildschirm anpassen<\/strong> reicht f\u00fcr dieses Bild nicht ganz aus, vor allem, weil das Originalbild viel l\u00e4nger ist als es breit ist und rechts viel Platz l\u00e4sst. Ich k\u00f6nnte die <strong>Bildposition<\/strong> auf die <strong>Mitte<\/strong> \u00e4ndern, aber es w\u00fcrde h\u00f6chstwahrscheinlich wei\u00dfen Raum an den Seiten hinterlassen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fit-to.png\" alt=\"Die Voreinstellung 'Fit to Screen'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Die Voreinstellung &#8218;Fit to Screen&#8216;<\/figcaption><\/figure>\n<p>Die n\u00e4chste Einstellung, die es zu beachten gilt, ist das <strong>Image Position<\/strong> 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\u00fcllen.<\/p>\n<p>\u00c4hnlich wie bei den <strong>Voreinstellungen<\/strong> ist auch beim <strong>Bild<\/strong> <strong>Position<\/strong> Tool ein Prozess des Ratens und \u00dcberpr\u00fcfens deiner Arbeit erforderlich, da das Originalbild und sein Inhalt bestimmen, wie es aussieht.<\/p>\n<figure style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/moves-around.png\" alt=\"WordPress Hintergrundbild Position\" width=\"1886\" height=\"940\"><figcaption class=\"wp-caption-text\">WordPress Hintergrundbild Position<\/figcaption><\/figure>\n<p>Als N\u00e4chstes gibt es ein Kontrollk\u00e4stchen, um das Hintergrundbild mit der <strong>Seite scrollen<\/strong> zu lassen.<\/p>\n<p>Wenn du dieses K\u00e4stchen anklickst, bleibt das Hintergrundbild am Vordergrundinhalt haften und scrollt mit dem Benutzer mit, wenn dieser sich auf der Seite nach oben oder unten bewegt.<\/p>\n<figure style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/scroll.png\" alt=\"Aktivieren der Option 'Scrollen mit Seite'\" width=\"1885\" height=\"940\"><figcaption class=\"wp-caption-text\">Aktivieren der Option &#8218;Scrollen mit Seite&#8216;<\/figcaption><\/figure>\n<p>Wenn du das K\u00e4stchen deaktivierst, \u00e4ndert sich die generelle Ausrichtung des Hintergrundbildes, aber die dominante Funktion ist es, den Hintergrund statisch zu halten, w\u00e4hrend der Nutzer die Seite herunter scrollt.<\/p>\n<p>Die Inhalte im Vordergrund (wie in diesem Fall die <a href=\"https:\/\/kinsta.com\/de\/blog\/conversions-woocommerce-productseiten\/\">Produkte<\/a>) gleiten \u00fcber das Hintergrundbild, was einen attraktiven Effekt erzeugt.<\/p>\n<figure style=\"width: 1878px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-scroll.png\" alt=\"Deaktivieren der Option 'Mit der Seite scrollen'\" width=\"1878\" height=\"940\"><figcaption class=\"wp-caption-text\">Deaktivieren der Option &#8218;Mit der Seite scrollen&#8216;<\/figcaption><\/figure>\n<h4>Arbeiten mit einer benutzerdefinierten Voreinstellung<\/h4>\n<p>Wenn du dich f\u00fcr eine andere als die <strong>benutzerdefinierte<\/strong> Voreinstellung entscheidest, kannst du nicht so viele zus\u00e4tzliche Einstellungen konfigurieren.<\/p>\n<p>Wenn du jedoch die Voreinstellung Benutzerdefiniert w\u00e4hlst, kannst du mehrere andere Felder ber\u00fccksichtigen.<\/p>\n<p>Zum Beispiel kannst du w\u00e4hlen, ob du den <strong>Bildschirm ausf\u00fcllen<\/strong> oder an den <strong>Bildschirm anpassen<\/strong> m\u00f6chtest, 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 <strong>Seite scrollen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-one.png\" alt=\"Voreinstellungen und Bildgr\u00f6\u00dfen f\u00fcr Hintergrundbilder\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Voreinstellungen und Bildgr\u00f6\u00dfen f\u00fcr Hintergrundbilder<\/figcaption><\/figure>\n<p>Schaue, ob es m\u00f6glich ist, das Originalbild ohne jegliche Bearbeitungen oder Einstellungen zu verwenden. Manchmal ist das Originalfoto nahezu perfekt f\u00fcr die Verwendung als Hintergrund geeignet, warum also mit einem bereits fertigen Bild herumspielen?<\/p>\n<p>Es kann aber auch sein, dass es <a href=\"https:\/\/kinsta.com\/de\/blog\/webseiten-qeschwindigkeitstest\/\">zu gro\u00df f\u00fcr deine Webseite<\/a> ist, oder das Seitenverh\u00e4ltnis nicht ganz passt. Unabh\u00e4ngig davon empfehlen wir dir, mit dieser Einstellung zu experimentieren, um herauszufinden, ob es das Richtige f\u00fcr dich ist.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-repeat-or.png\" alt=\"Einstellen der Gr\u00f6\u00dfe des Hintergrundbildes\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Einstellen der Gr\u00f6\u00dfe des Hintergrundbildes<\/figcaption><\/figure>\n<p>Sobald du dich f\u00fcr deine perfekten Hintergrundeinstellungen entschieden hast (f\u00fcr dieses Tutorial sieht die Option Standard gut aus), klicke auf den Button <strong>Ver\u00f6ffentlichen<\/strong>, um die \u00c4nderungen auf deiner Webseite zu \u00fcbertragen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/publish-to-page.png\" alt=\"Dr\u00fccke den 'Ver\u00f6ffentlichen' Button\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Dr\u00fccke den &#8218;Ver\u00f6ffentlichen&#8216; Button<\/figcaption><\/figure>\n<p>Gehe auf das Frontend deiner Webseite, um den Hintergrund in Aktion zu sehen.<\/p>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-homepage-aendern\/\">Homepage<\/a> 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\u00fcllendes Heldenbild abdeckt.<\/p>\n<p>Wie du die Hintergr\u00fcnde f\u00fcr den Header und das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menu-plugins\/\">Men\u00fc<\/a> konfigurieren kannst, erf\u00e4hrst du in einigen der folgenden Tutorials.<\/p>\n<figure style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-back.png\" alt=\"Das WordPress Hintergrundbild sehen\" width=\"1548\" height=\"1885\"><figcaption class=\"wp-caption-text\">Das WordPress Hintergrundbild sehen<\/figcaption><\/figure>\n<p>Bedenke, dass der allgemeine benutzerdefinierte WordPress-Hintergrund auf jeder Seite und jedem Beitrag deiner Webseite aktiviert wird. Es ist ein globales Feature f\u00fcr alle, die ihre Webseite schnell und einfach mit einem eigenen Design versehen wollen.<\/p>\n<p>Wenn du zum Beispiel die <strong>Shop<\/strong>-Seite auf deiner Webseite aufrufst, siehst du den Hintergrund hinter der Produktauswahl.<\/p>\n<figure style=\"width: 1571px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/every-page.png\" alt=\"Das WordPress Hintergrundbild auf einer anderen Seite\" width=\"1571\" height=\"1266\"><figcaption class=\"wp-caption-text\">Das WordPress Hintergrundbild auf einer anderen Seite<\/figcaption><\/figure>\n<h4>Wie du eine Hintergrundfarbe anstelle eines Bildes f\u00fcr deine gesamte Webseite einstellst<\/h4>\n<p>Der Prozess der Aktivierung einer Hintergrundfarbe f\u00fcr deine gesamte Webseite ist nicht viel anders, als wenn du ein Hintergrundbild aktivierst. Beginne damit, indem du im Dashboard zu <strong>Erscheinungsbild &gt; Hintergrund<\/strong> gehst und dann nach dem Feld <strong>Hintergrundfarbe<\/strong> suchst.<\/p>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Farbe<\/strong> <strong>ausw\u00e4hlen<\/strong>, um weitere Einstellungen zu \u00f6ffnen und verschiedene Farben f\u00fcr deinen Hintergrund auszuw\u00e4hlen.<\/p>\n<figure style=\"width: 1906px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bacgkround-select.jpg\" alt=\"Ausw\u00e4hlen einer Volltonfarbe als Hintergrund\" width=\"1906\" height=\"940\"><figcaption class=\"wp-caption-text\">Ausw\u00e4hlen einer Volltonfarbe als Hintergrund<\/figcaption><\/figure>\n<p>Das Farbpanel bietet dir mehrere Optionen, um dich f\u00fcr eine <a href=\"https:\/\/kinsta.com\/de\/blog\/webseiten-farbschemata\/\">Farbe zu entscheiden<\/a>. Die erste ist die Eingabe oder das Einf\u00fcgen eines Farbcodes. Alle Farben haben einzigartige Farbcodes und du kannst diese Farben und ihre zugeh\u00f6rigen Codes mit einer schnellen Internetsuche finden.<\/p>\n<p>Die andere M\u00f6glichkeit ist, im Farbpanel herumzuklicken, um die perfekte Farbe f\u00fcr den Hintergrund zu finden. Es gibt sogar allgemeine Farbfelder am unteren Ende des Panels, wenn du lieber eine der einfacheren Farben nehmen m\u00f6chtest.<\/p>\n<p>Um eine Hintergrundfarbe zu aktivieren, stelle sicher, dass die Farbe ausgew\u00e4hlt ist und in der Vorschau <strong>Farbe ausw\u00e4hlen<\/strong> angezeigt wird.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bg-col.jpg\" alt=\"Ausw\u00e4hlen einer 'Hintergrundfarbe'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Ausw\u00e4hlen einer &#8218;Hintergrundfarbe&#8216;<\/figcaption><\/figure>\n<p>Du solltest den farbigen Hintergrund in der Vorschau des <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/\">WordPress Customizers<\/a> sehen. Ist das nicht der Fall, hast du h\u00f6chstwahrscheinlich einen Bildhintergrund installiert, der den Farbhintergrund \u00fcberschreibt.<\/p>\n<p>Alles, was du tun musst, um den farbigen Hintergrund zu sehen, ist auf den Entfernen-Button unter der <strong>Vorschau<\/strong> des <strong>Hintergrundbildes<\/strong> zu klicken.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/remove-image.jpg\" alt=\"WordPress Hintergrundbild entfernen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">WordPress Hintergrundbild entfernen<\/figcaption><\/figure>\n<p>Jetzt erscheint die Farbe auf deiner gesamten Webseite, hinter dem Inhalt. \u00c4hnlich wie bei einem Bildhintergrund ist es ratsam, deine Webseite zu \u00fcberpr\u00fcfen, um sicherzustellen, dass alle Texte, Bilder und Links auch mit dem neuen Hintergrund sichtbar sind.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/once-removed.jpg\" alt=\"Vorschau eines einfarbig orangenen WordPress Hintergrunds\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Vorschau eines einfarbig orangenen WordPress Hintergrunds<\/figcaption><\/figure>\n<h3>Wie man ein Hintergrundbild zu einer WordPress Seite hinzuf\u00fcgt<\/h3>\n<p>Aber was ist, wenn du ein Bild in WordPress einf\u00fcgen m\u00f6chtest, das als Hintergrund auf einer einzelnen WordPress Seite angezeigt wird? Im vorherigen Abschnitt wurden die globalen Einstellungen f\u00fcr ein seitenweites Hintergrundbild beschrieben.<\/p>\n<h3>Schau dir unseren <a href=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\">Video-Leitfaden<\/a> zum Hinzuf\u00fcgen von Hintergrundbildern zu WordPress-Seiten, Beitr\u00e4gen und Inhaltsbl\u00f6cken an<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\"><\/kinsta-video>\n<p>Viele Leute f\u00fcgen gerne Hintergr\u00fcnde zu ihren Seiten hinzu, weil man damit ein bestimmtes Theme oder Gef\u00fchl auf einer Seite einbauen kann, das zum Inhalt passt. Zum Beispiel k\u00f6nnte eine &#8222;<a href=\"https:\/\/kinsta.com\/de\/uber-uns\/\">\u00dcber uns<\/a>&#8222;-Seite einen Los Angeles-Hintergrund haben, wenn das Unternehmen in LA ist. Oder eine Einleitung zu einem Buch eines Autors k\u00f6nnte einen Hintergrund enthalten, der zum Thema der Geschichte passt.<\/p>\n<p>In diesem Abschnitt zeigen wir dir, wie du ein WordPress-Hintergrundbild zu einer Seite hinzuf\u00fcgst, indem wir eine prim\u00e4re Methode und ein paar Alternativen vorstellen, wenn es dich nicht st\u00f6rt, Geld f\u00fcr ein Plugin auszugeben oder dich f\u00fcr einen Page Builder zu entscheiden.<\/p>\n<p><strong>Hinweis<\/strong>: Es spielt keine Rolle, ob du den Gutenberg oder den klassischen WordPress Editor verwendest.<\/p>\n<p>F\u00fcr seitenbezogene Hintergr\u00fcnde scheinen diese Methoden am besten zu funktionieren:<\/p>\n<ul>\n<li>Hinzuf\u00fcgen eines einzigartigen Seitenhintergrunds mit <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">benutzerdefiniertem CSS<\/a>.<\/li>\n<li>Verwendung eines Plugins, das individuelle Seitenhintergr\u00fcnde erm\u00f6glicht.<\/li>\n<li>Einen individuellen Hintergrund auf jeder Seite mit Hilfe eines Page Builders einbinden.<\/li>\n<\/ul>\n<p>Um dein eigenes CSS zu einer Seite hinzuzuf\u00fcgen, musst du die Klassen-ID f\u00fcr diese Seite herausfinden und eine Hintergrund-URL im Custom CSS Modul in den WordPress Seiteneinstellungen aufrufen. Gl\u00fccklicherweise ist es nicht so schwierig, die Klassen-ID einer Seite herauszufinden, da wir sie nachschlagen k\u00f6nnen oder du sie vielleicht schon kennst.<\/p>\n<p>Gehe zu der Seite auf deiner Webseite, auf der du einen Hintergrund f\u00fcr diese Seite haben m\u00f6chtest.<\/p>\n<figure style=\"width: 1473px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/this-is-the-page.png\" alt=\"Hinzuf\u00fcgen eines seitenbezogenen WordPress Hintergrundbildes\" width=\"1473\" height=\"835\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen eines seitenbezogenen WordPress Hintergrundbildes<\/figcaption><\/figure>\n<p>Klicke mit der rechten Maustaste auf eine beliebige Stelle der Seite, um ein Dropdown-Men\u00fc auf deinem Bildschirm zu \u00f6ffnen. W\u00e4hle das Inspect Tool am unteren Ende des Dropdown-Men\u00fcs.<\/p>\n<p>Das Inspektionsmodul zeigt die Codierung der Seite selbst an, zusammen mit benutzerdefiniertem CSS, das global f\u00fcr deine Webseite verwendet wird. Es ist ein n\u00fctzlicher Bereich, um Informationen \u00fcber eine Seite oder einen Beitrag auf deiner Webseite zu finden.<\/p>\n<figure style=\"width: 1106px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inspect-the-page.png\" alt=\"Inspektion einer Webseite\" width=\"1106\" height=\"825\"><figcaption class=\"wp-caption-text\">Inspektion einer Webseite<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>Benutze die Suchfunktion und gib <code>body<\/code> oder <code>class<\/code> ein, um die Codezeile mit dem <code>page-id<\/code> Tag zu finden.<\/p>\n<p>In diesem Fall ist die ID <code>page-id-352<\/code>, aber deine wird sich unterscheiden.<\/p>\n<p>Du willst den gesamten Teil des Codes mit dem Keyword <code>page-id-#<\/code> kopieren, einschlie\u00dflich der Bindestriche.<\/p>\n<figure style=\"width: 1251px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/body-class.png\" alt=\"Finden der Seiten-ID in WordPress\" width=\"1251\" height=\"657\"><figcaption class=\"wp-caption-text\">Finden der Seiten-ID in WordPress<\/figcaption><\/figure>\n<p>Wenn du die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-post-id-erhalten\/\">Seiten-ID<\/a> irgendwo gespeichert hast, um sie in den n\u00e4chsten Schritten zu verwenden, gehe zur\u00fcck in dein WordPress Dashboard und klicke auf <strong>Erscheinungsbild &gt; Anpassen<\/strong>.<\/p>\n<figure style=\"width: 1348px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/custom-is-s-s.png\" alt=\"Gehe zum Theme Customizer\" width=\"1348\" height=\"905\"><figcaption class=\"wp-caption-text\">Gehe zum Theme Customizer<\/figcaption><\/figure>\n<p>W\u00e4hle im WordPress Customizer den Reiter <strong>Additional CSS<\/strong> aus.<\/p>\n<figure style=\"width: 1508px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css.png\" alt=\"Abschnitt 'Zus\u00e4tzliches CSS' im Customizer\" width=\"1508\" height=\"916\"><figcaption class=\"wp-caption-text\">Abschnitt &#8218;Zus\u00e4tzliches CSS&#8216; im Customizer<\/figcaption><\/figure>\n<p>In diesem Bereich kannst du jedes benutzerdefinierte CSS eingeben oder einf\u00fcgen, um Elemente auf deiner Webseite zu manipulieren. In diesem Fall ist es praktisch, um das Standard-Hintergrundbild zu \u00fcberschreiben und ein Hintergrundbild f\u00fcr eine Seite zu aktivieren und f\u00fcr die anderen nicht.<\/p>\n<p>F\u00fcge den folgenden Code in das Feld Additional CSS ein, aber denke daran, das &#8222;<strong>#<\/strong>&#8220; durch die tats\u00e4chliche Nummer zu ersetzen, die du als Seiten-ID aus den vorherigen Schritten gezogen hast. Au\u00dferdem musst du eine echte Bild-URL anstelle des F\u00fclltextes einf\u00fcgen, den wir dort drin haben (<code>http:\/\/YOURIMAGEURL.jpeg<\/code>).<\/p>\n<pre><code class=\"language-html\">body.page-id-# { \nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\"); \nbackground-position: center center; \nbackground-size: cover; \nbackground-repeat: no-repeat; \nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>In diesem Beispiel ist die Seiten-ID als 352 eingetragen und wir haben eine Hintergrundbild-URL aus <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-medienbibliothek\/\">unserer Medienbibliothek<\/a> eingef\u00fcgt.<\/p>\n<p>Falls n\u00f6tig, \u00e4ndere bitte die benutzerdefinierten Hintergrundeinstellungen, wenn du Probleme hast, das Hintergrundbild des Bildschirms einzupassen. Vielleicht m\u00f6chtest du zum Beispiel Elemente wie die Gr\u00f6\u00dfe des WordPress-Hintergrundbildes, den Anhang oder die Position \u00e4ndern. Wenn nicht, lass sie alle so, wie sie im Beispielcode sind.<\/p>\n<figure style=\"width: 1485px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insert-it.png\" alt=\"Hinzuf\u00fcgen von benutzerdefiniertem CSS zu einer WordPress Seite\" width=\"1485\" height=\"923\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen von benutzerdefiniertem CSS zu einer WordPress Seite<\/figcaption><\/figure>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>, wenn du mit dem benutzerdefinierten CSS zufrieden bist.<\/p>\n<figure style=\"width: 1512px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-the-thing.png\" alt=\"Klicke auf den 'Ver\u00f6ffentlichen' Button\" width=\"1512\" height=\"827\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Ver\u00f6ffentlichen&#8216; Button<\/figcaption><\/figure>\n<p>Mit diesem benutzerdefinierten CSS enth\u00e4lt die angegebene Seite ein Hintergrundbild unter Verwendung der Gr\u00f6\u00dfen- und Positionierungseinstellungen des Codes. Keine andere Seite auf deiner Webseite wird den gleichen Hintergrund zeigen, es sei denn, du wiederholst das CSS f\u00fcr verschiedene <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-post-id-erhalten\/\">Seiten-IDs<\/a>.<\/p>\n<figure style=\"width: 1335px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-just-for-page.png\" alt=\"Das Hintergrundbild wird nun auf der Seite angezeigt\" width=\"1335\" height=\"899\"><figcaption class=\"wp-caption-text\">Das Hintergrundbild wird nun auf der Seite angezeigt<\/figcaption><\/figure>\n<p>Wie bereits erw\u00e4hnt, gibt es auch andere M\u00f6glichkeiten, einen einzigartigen Hintergrund auf einer WordPress Seite zu platzieren, z.B. mit einem Page Builder oder einem Plugin, das Hintergrundbilder auf einzelnen Seiten erm\u00f6glicht.<\/p>\n<p>Der billigste und schnellste Weg, ein Hintergrundbild auf einer individuellen Seite zu platzieren, ist jedoch die oben gezeigte Methode mit CSS-Code.<\/p>\n<h3>Wie man ein Hintergrundbild zu einem WordPress Beitrag hinzuf\u00fcgt<\/h3>\n<p>Die meisten Hintergrundbilder werden hinter WordPress-Seiten oder jeder Seite auf einer Webseite eingef\u00fcgt.<\/p>\n<p>Die standardm\u00e4\u00dfige benutzerdefinierte Hintergrundfunktion in WordPress hat nichts mit einzelnen Beitr\u00e4gen zu tun, abgesehen davon, dass dieser Hintergrund auch f\u00fcr die Blogposts angezeigt wird. Das ist nicht ideal f\u00fcr alle Organisationen, da verschiedene Blogbeitr\u00e4ge drastisch unterschiedliche Themen haben k\u00f6nnen.<\/p>\n<p>Solche Blogs k\u00f6nnten von ihren eigenen einzigartigen Hintergrundbildern profitieren. Allerdings haben WordPress-Beitr\u00e4ge keine eigene Einstellung f\u00fcr das Hintergrundbild, was es ein wenig schwieriger macht.<\/p>\n<p>Daher haben wir ein paar Optionen, die du beim Hinzuf\u00fcgen eines Hintergrundbildes zu einem Beitrag ber\u00fccksichtigen kannst (du wirst feststellen, dass sie die gleichen sind wie bei der Arbeit mit seitenbezogenen Hintergrundbildern):<\/p>\n<ul>\n<li>F\u00fcge ein Hintergrundbild mit benutzerdefiniertem CSS ein.<\/li>\n<li>Verwende ein Plugin, um einen Hintergrund f\u00fcr einzelne Beitr\u00e4ge zu implementieren.<\/li>\n<li>Installiere einen Visual Page Builder f\u00fcr Beitragshintergr\u00fcnde.<\/li>\n<\/ul>\n<p>Wie im vorherigen Abschnitt \u00fcber einzigartige Seitenhintergr\u00fcnde, kannst du einen postspezifischen Hintergrund mit einem Page Builder oder einem Plugin hinzuf\u00fcgen.<\/p>\n<p>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\u00fcr einen einzelnen Post durchf\u00fchren musst.<\/p>\n<p>Wenn du ein benutzerdefiniertes CSS verwendest, um einen postspezifischen Hintergrund zu implementieren, verwendest du den gleichen Code wie f\u00fcr den Seitenhintergrund, mit einem Unterschied: Du musst die ID des Posts finden und nicht die ID der Seite.<\/p>\n<p>\u00d6ffne also das Frontend eines WordPress-Beitrags, in den du einen Hintergrund einf\u00fcgen m\u00f6chtest.<\/p>\n<figure style=\"width: 1294px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-actual-post.png\" alt=\"WordPress Hintergrundbild f\u00fcr Beitr\u00e4ge\" width=\"1294\" height=\"883\"><figcaption class=\"wp-caption-text\">WordPress Hintergrundbild f\u00fcr Beitr\u00e4ge<\/figcaption><\/figure>\n<p>Klicke mit der rechten Maustaste auf den Beitrag und w\u00e4hle die Option Inspect. Suche innerhalb des Codes nach dem Abschnitt body class. Suche nach dem <code>postid-#<\/code> Teil &#8211; das ist die Post-ID, die du in das benutzerdefinierte CSS einf\u00fcgen musst.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/find-post-id-1.png\" alt=\"find post id\" width=\"735\" height=\"767\"><\/p>\n<p>Du wirst feststellen, dass die Formatierung der Post-ID in diesem Beispiel etwas anders ist als die der Seiten-ID, da der <code>postid-#<\/code> Tag keinen Bindestrich zwischen &#8222;post&#8220; und &#8222;id&#8220; hat, wie es bei <code>page-id-#<\/code> der Fall ist. Au\u00dferdem sind das keine festen Regeln. Du kannst verschiedene Formate f\u00fcr die Tags finden.<\/p>\n<p>Gehe nun in dein WordPress Dashboard und klicke auf <strong>Erscheinungsbild &gt; Anpassen<\/strong>. Navigiere zum Reiter <strong>Zus\u00e4tzliches CSS<\/strong>.<\/p>\n<figure style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css-s.png\" alt=\"Gio zum Abschnitt 'Zus\u00e4tzliche CSS'\" width=\"1190\" height=\"842\"><figcaption class=\"wp-caption-text\">Gio zum Abschnitt &#8218;Zus\u00e4tzliche CSS&#8216;<\/figcaption><\/figure>\n<p>F\u00fcge den folgenden Code in dieses benutzerdefinierte CSS-Feld ein:<\/p>\n<pre><code class=\"language-html\">body.postid-# { \nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\"); \nbackground-position: center center; \nbackground-size: cover; \nbackground-repeat: no-repeat; \nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Danach nimmst du die Post ID Nummer, die du vorher von dem gew\u00fcnschten Post gefunden hast. Ersetze das &#8222;#&#8220; im CSS-Code durch die Nummer. \u00c4ndere auch den <code>http:\/\/YOURIMAGEURL.jpeg<\/code> Text mit der echten URL des Hintergrundbildes, das du anzeigen m\u00f6chtest, und behalte die Anf\u00fchrungszeichen drum herum.<\/p>\n<figure style=\"width: 1141px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-css-typed-in.png\" alt=\"Hinzuf\u00fcgen des benutzerdefinierten CSS f\u00fcr eine bestimmte Post-ID\" width=\"1141\" height=\"820\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen des benutzerdefinierten CSS f\u00fcr eine bestimmte Post-ID<\/figcaption><\/figure>\n<p>Achte darauf, dass du auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong> klickst, bevor du den Reiter Zus\u00e4tzliches CSS verl\u00e4sst, da dies deine \u00c4nderungen auf der Webseite speichert und du den Hintergrund im Frontend sehen kannst.<\/p>\n<figure style=\"width: 1161px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-but.png\" alt=\"Dr\u00fccke den 'Ver\u00f6ffentlichen' Button, um die \u00c4nderungen zu speichern\" width=\"1161\" height=\"816\"><figcaption class=\"wp-caption-text\">Dr\u00fccke den &#8218;Ver\u00f6ffentlichen&#8216; Button, um die \u00c4nderungen zu speichern<\/figcaption><\/figure>\n<p>Mit diesen CSS-\u00c4nderungen kannst du nun zur\u00fcck zum Frontend des WordPress-Blogposts gehen, um den neuen Hintergrund zu sehen. <a href=\"https:\/\/kinsta.com\/de\/blog\/webseiten-qeschwindigkeitstest\/\">Teste<\/a> die anderen Blogeintr\u00e4ge und Seiten auf deiner Webseite, um zu sehen, dass keiner der anderen einen Hintergrund hat, es sei denn, du implementierst den gleichen Code f\u00fcr diese Beitrags-IDs.<\/p>\n<figure style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-post-now-has-it.png\" alt=\"Siehe das Hintergrundbild auf dem Beitrag\" width=\"1316\" height=\"883\"><figcaption class=\"wp-caption-text\">Siehe das Hintergrundbild auf dem Beitrag<\/figcaption><\/figure>\n<h3>Wie man ein Hintergrundbild zu einem individuellen Inhaltsblock hinzuf\u00fcgt<\/h3>\n<p>Die individuellen Inhaltsbl\u00f6cke des WordPress <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a>-Blockeditors erm\u00f6glichen eine Vielzahl von Optionen f\u00fcr die Darstellung von Inhalten, darunter Textfelder, Bilder und Galerien.<\/p>\n<p>Diese unterteilen deinen Inhalt in einzelne Abschnitte. So kannst du eine Hintergrundfarbe oder ein Bild nur f\u00fcr diesen Block hinzuf\u00fcgen.<\/p>\n<p>Nehmen wir an, du schreibst einen Blogbeitrag \u00fcber den Status der Bekleidungsindustrie im Einzelhandel. Du m\u00f6chtest den Beitrag mit einem Call-to-Action beenden oder beginnen, damit die Leute sich f\u00fcr <a href=\"https:\/\/kinsta.com\/webinars\/\">dein n\u00e4chstes Webinar anmelden<\/a>. Es w\u00fcrde Sinn machen, diesen Abschnitt mit einer Hintergrundfarbe oder einem Bild hervorzuheben.<\/p>\n<p>Leider bietet der WordPress Block-Editor keine allumfassende Einstellung, bei der du jedem Block einen Hintergrund hinzuf\u00fcgen kannst. Einige Bl\u00f6cke haben jedoch die Option, einen farbigen Hintergrund einzubauen.<\/p>\n<p>Es gibt auch einen Block, der Cover-Block genannt wird und der am ehesten die M\u00f6glichkeit bietet, ein Hintergrundbild f\u00fcr einen Block in einem Beitrag oder einer Seite hinzuzuf\u00fcgen. Das Cover erlaubt es, Text und einige Medienelemente zu \u00fcberlagern, was es f\u00fcr unser Endziel geeignet macht.<\/p>\n<p>Im Folgenden findest du die Techniken, die du verwenden kannst, um ein Bild oder einen farbigen Hintergrund f\u00fcr einen einzelnen WordPress-Block einzustellen.<\/p>\n<h4>Einstellen eines farbigen Hintergrunds f\u00fcr einen Block<\/h4>\n<p>Der einfachste Weg, einem einzelnen Block etwas Lebendigkeit zu verleihen, ist das Hinzuf\u00fcgen eines farbigen Hintergrunds. Es ist nicht so schick wie ein Bildhintergrund, aber der Farbhintergrund ist tats\u00e4chlich die einzige Art von Hintergrund im WordPress-Blockeditor, die f\u00fcr die Standardbl\u00f6cke zur Verf\u00fcgung steht.<\/p>\n<p><strong>Hinweis<\/strong>: Einige Bl\u00f6cke haben \u00fcberhaupt keine Hintergrundeinstellungen. In diesem Fall ist es am besten, wenn du einen Cover-Block verwendest und andere Bl\u00f6cke dar\u00fcber legst, wie weiter unten in diesem Artikel beschrieben.<\/p>\n<p>Der <strong>Absatzblock<\/strong> hat zum Beispiel eine Einstellung, um einen farbigen Hintergrund zu aktivieren.<\/p>\n<p>Um diesen zu aktivieren, w\u00e4hle den Block aus und suche dann die <strong>Farbeinstellungen<\/strong> unter der Registerkarte <strong>Block<\/strong> auf der rechten Seite.<\/p>\n<figure style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-block.png\" alt=\"\u00c4ndern des Hintergrunds 'Farbeinstellungen'\" width=\"1901\" height=\"885\"><figcaption class=\"wp-caption-text\">\u00c4ndern des Hintergrunds &#8218;Farbeinstellungen&#8216;<\/figcaption><\/figure>\n<p>Dieser Bereich zeigt die Felder <strong>Textfarbe<\/strong> und <strong>Hintergrundfarbe<\/strong>.<\/p>\n<p>Gehe zum Bereich <strong>Hintergrundfarbe<\/strong> und w\u00e4hle eine Farbe aus der Liste der verf\u00fcgbaren Optionen. Du kannst auch den Link <strong>Benutzerdefinierte Farbe<\/strong> w\u00e4hlen, um deinen eigenen Farbcode einzuf\u00fcgen oder eine einzigartige Farbe zu w\u00e4hlen.<\/p>\n<p>Wie du sehen kannst, wird der Hintergrund des Absatzblocks in eine andere Farbe umgewandelt &#8211; in diesem Fall blau.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-back.png\" alt=\"Auswahl einer Hintergrundfarbe\" width=\"1900\" height=\"896\"><figcaption class=\"wp-caption-text\">Auswahl einer Hintergrundfarbe<\/figcaption><\/figure>\n<h4>Hinzuf\u00fcgen eines farbigen Hintergrunds zu jedem WordPress Block<\/h4>\n<p>Wie bereits erw\u00e4hnt, haben nicht alle WordPress Bl\u00f6cke diese eingebaute Hintergrundfunktion. Was solltest du tun, wenn du eine Galerie oder ein anderes Blockelement erstellen m\u00f6chtest, das keine Hintergrundoption bietet?<\/p>\n<p>Die schnellste L\u00f6sung ist die Verwendung der <strong>Gruppenblock<\/strong>-Funktion in WordPress.<\/p>\n<p>Dazu w\u00e4hlst du mehrere Bl\u00f6cke aus, die sich bereits in deinem Inhalt befinden. F\u00fcr dieses Beispiel w\u00e4hle ich einen <strong>Absatz<\/strong>-Block und einen <strong>Galerie<\/strong>-Block gleichzeitig aus.<\/p>\n<p>Klicke auf das gestapelte quadratische Symbol im Men\u00fc, das erscheint.<\/p>\n<figure style=\"width: 1561px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-both.png\" alt=\"Der Abschnitt 'Unser Team' auf einer Seite\" width=\"1561\" height=\"940\"><figcaption class=\"wp-caption-text\">Der Abschnitt &#8218;Unser Team&#8216; auf einer Seite<\/figcaption><\/figure>\n<p>W\u00e4hle die Option <strong>Gruppe<\/strong> im Dropdown-Men\u00fc.<\/p>\n<p>Damit werden alle Bl\u00f6cke, die du gerade ausgew\u00e4hlt hast, zu <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-3\/#editing-experience\">einer Gruppe zusammengefasst<\/a>, sodass du sie gemeinsam verschieben oder bearbeiten kannst, anstatt einzelne Bl\u00f6cke.<\/p>\n<figure style=\"width: 1575px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/group-theme.png\" alt=\"Gruppiere die Abschnitte als einen Block\" width=\"1575\" height=\"927\"><figcaption class=\"wp-caption-text\">Gruppiere die Abschnitte als einen Block<\/figcaption><\/figure>\n<p>Damit wird die <strong>Gruppe<\/strong> als eigener Block festgelegt. Es bedeutet, dass du auf den Reiter <strong>Blockeinstellungen<\/strong> auf der rechten Seite der Seite gehen kannst, um seine Einstellungen zu finden.<\/p>\n<p>Suche nach dem Tab <strong>Farbeinstellungen<\/strong> und klicke darauf.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-sets.png\" alt=\"\u00c4ndere die 'Farbeinstellungen' f\u00fcr den gruppierten Block\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">\u00c4ndere die &#8218;Farbeinstellungen&#8216; f\u00fcr den gruppierten Block<\/figcaption><\/figure>\n<p>\u00c4hnlich wie ein Standard-Absatzblock hat auch der Gruppenblock eine Funktion f\u00fcr die Hintergrundfarbe.<\/p>\n<p>W\u00e4hle die Farbe aus, die dir in dieser Situation am besten gef\u00e4llt, um zu sehen, dass alles innerhalb dieser Gruppe nun diese Hintergrundfarbe haben sollte.<\/p>\n<p>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\u00fcr ihn zu aktivieren.<\/p>\n<figure style=\"width: 1454px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-color-in-group.png\" alt=\"Einstellung der Hintergrundfarbe als Blau\" width=\"1454\" height=\"894\"><figcaption class=\"wp-caption-text\">Einstellung der Hintergrundfarbe als Blau<\/figcaption><\/figure>\n<h4>Hinzuf\u00fcgen eines Bildhintergrundes zu einem WordPress Block<\/h4>\n<p>WordPress Bl\u00f6cke gibt es sowohl in Seiten als auch in Beitr\u00e4gen. Daher k\u00f6nnen wir diese Taktik in beiden Bl\u00f6cken implementieren. Du kannst so ziemlich jeden Inhalt \u00fcber dem Hintergrund des gruppierten Blocks einf\u00fcgen &#8211; oder nur in einem WordPress Block.<\/p>\n<p>Um mit diesem Prozess zu beginnen, klicke auf den Button <strong>Block hinzuf\u00fcgen<\/strong> oder das &#8222;<strong>+<\/strong>&#8222;-Symbol und suche nach dem <strong>Cover<\/strong>-Block.<\/p>\n<p>W\u00e4hle diesen Block aus, um ihn in deinen Beitrag oder deine Seite einzuf\u00fcgen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/go-for-cov.png\" alt=\"Block f\u00fcr ein Titelbild hinzuf\u00fcgen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Block f\u00fcr ein Titelbild hinzuf\u00fcgen<\/figcaption><\/figure>\n<p>Du musst dann auf die Schaltfl\u00e4che <strong>Upload oder Medien ausw\u00e4hlen<\/strong> klicken, mit der du nach Bildern suchen kannst, die du als Hintergrund verwenden kannst.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-med.png\" alt=\"Klicke auf den 'Select Media' Button\" width=\"1865\" height=\"836\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Select Media&#8216; Button<\/figcaption><\/figure>\n<p>W\u00e4hle das gew\u00fcnschte Bild aus und klicke auf die Schaltfl\u00e4che <strong>Ausw\u00e4hlen<\/strong>.<\/p>\n<figure style=\"width: 1777px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/sel.png\" alt=\"W\u00e4hle das gew\u00fcnschte Bild aus und klicke auf die Schaltfl\u00e4che Ausw\u00e4hlen.\" width=\"1777\" height=\"834\"><figcaption class=\"wp-caption-text\">W\u00e4hle das gew\u00fcnschte Bild aus und klicke auf die Schaltfl\u00e4che Ausw\u00e4hlen.<\/figcaption><\/figure>\n<p>Jetzt kannst du das Bild als Hintergrund f\u00fcr den Cover-Block sehen.<\/p>\n<p>Du kannst auf den Block klicken, um mit der Eingabe des Absatzes zu beginnen, denn die prim\u00e4re Funktion ist das \u00dcberlagern von Text.<\/p>\n<p>Das Tolle am Cover-Block ist, dass er mehrere <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/\">Formatierungsoptionen<\/a> bietet, so dass du in Sekundenschnelle von einer \u00dcberschrift zu einem Absatzformat wechseln kannst.<\/p>\n<figure style=\"width: 1902px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-res-ult.png\" alt=\"WordPress Hintergrundbild im Abschnitt\" width=\"1902\" height=\"892\"><figcaption class=\"wp-caption-text\">WordPress Hintergrundbild im Abschnitt<\/figcaption><\/figure>\n<p>Um weitere Bl\u00f6cke auf diesem Hintergrund hinzuzuf\u00fcgen, klicke auf das &#8222;<strong>+<\/strong>&#8222;-Symbol im Cover-Block selbst. Es kann sein, dass du die Eingabetaste einmal dr\u00fccken musst, um den Button zu sehen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/blurring.png\" alt=\"Klicke auf das Pluszeichen innerhalb des Blockabschnitts\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Klicke auf das Pluszeichen innerhalb des Blockabschnitts<\/figcaption><\/figure>\n<p>\u00c4hnlich wie das Hinzuf\u00fcgen eines Inhaltsblocks in einem regul\u00e4ren Artikel, erlaubt dir der Cover-Block, durch alle m\u00f6glichen Inhaltsbl\u00f6cke in WordPress zu scrollen.<\/p>\n<p>Das bedeutet, dass du ein Bild, eine <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-fotogalerie-plugins\/\">Galerie<\/a>, Spalten oder jede Art von WordPress-Block innerhalb des Cover-Blocks platzieren kannst, was es zur idealen L\u00f6sung f\u00fcr Bildhintergr\u00fcnde mit einem individuellen Block macht.<\/p>\n<figure id=\"attachment_91286\" aria-describedby=\"caption-attachment-91286\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-91286 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/search-for-block-1.png\" alt=\"Suche nach Block\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-91286\" class=\"wp-caption-text\">Suche nach Block<\/figcaption><\/figure>\n<p>In diesem Beispiel habe ich ein Bild eingef\u00fcgt und es ein wenig formatiert, damit es im Titelblock akzeptabel aussieht.<\/p>\n<p>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\u00e4hrend du sie in den Cover-Block einf\u00fcgst.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-block-complete.png\" alt=\"Ein Block Beispiel mit WordPress Hintergrundbild\" width=\"1920\" height=\"883\"><figcaption class=\"wp-caption-text\">Ein Block Beispiel mit WordPress Hintergrundbild<\/figcaption><\/figure>\n<p>Irgendwann m\u00f6chtest du vielleicht das Hintergrundbild selbst bearbeiten oder anpassen. Wenn das der Fall ist, w\u00e4hle den Block Cover aus und gehe dann zum Tab Blockeinstellungen auf der rechten Seite der Seite.<\/p>\n<p>Hier findest du eine Vielzahl von Einstellungen, die du f\u00fcr das Hintergrundbild vornehmen kannst, darunter die folgenden:<\/p>\n<ul>\n<li>Fester Hintergrund<\/li>\n<li>Wiederholter Hintergrund<\/li>\n<li>Brennpunkt-Picker<\/li>\n<li>Abmessungen<\/li>\n<li>\u00dcberlagerung<\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menu-plugins\/#responsive-menu\">Deckkraft<\/a><\/li>\n<li>Erweitert<\/li>\n<\/ul>\n<figure style=\"width: 1680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-clock-sets.png\" alt=\"\u00c4ndern der Blockeinstellungen\" width=\"1680\" height=\"940\"><figcaption class=\"wp-caption-text\">\u00c4ndern der Blockeinstellungen<\/figcaption><\/figure>\n<p>Eine der wichtigsten Einstellungen, die du beachten solltest, befindet sich am unteren Ende des <strong>Blockeinstellungen-Panels<\/strong>.<\/p>\n<p>Scrolle nach unten, um den Abschnitt <strong>Overlay<\/strong> zu finden. \u00d6ffne den Bereich, um eine Liste von Farb\u00fcberlagerungen und Optionen zu sehen, mit denen du diese Farben einfarbig oder mit Farbverl\u00e4ufen machen kannst.<\/p>\n<p>Dies ist eine gro\u00dfartige Option, um deine Hintergrundfarbe leicht zu ver\u00e4ndern, damit sie zu deiner Marke passt oder deinen Vordergrundinhalt hervorhebt. Du kannst auch die <strong>Deckkraft<\/strong> einstellen, um sicherzustellen, dass das Farb-Overlay den Hintergrund nicht v\u00f6llig \u00fcberdeckt.<\/p>\n<figure style=\"width: 1905px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/new-color.png\" alt=\"\u00c4ndern der Hintergrundfarbe des Blocks\" width=\"1905\" height=\"895\"><figcaption class=\"wp-caption-text\">\u00c4ndern der Hintergrundfarbe des Blocks<\/figcaption><\/figure>\n<p>Als Alternative kannst du das <a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">Stackable Page Builder Gutenberg Blocks Plugin<\/a> in Betracht ziehen, um fortgeschrittenere Tools f\u00fcr Hintergr\u00fcnde auf einzelnen Bl\u00f6cken zu \u00f6ffnen.<\/p>\n<h3>Wie man ein Hintergrundbild hinter den WordPress Header setzt<\/h3>\n<p>Bis jetzt haben wir dar\u00fcber gesprochen, wie du ein Hintergrundbild zu deiner gesamten WordPress Seite hinzuf\u00fcgst, zusammen mit Methoden f\u00fcr Hintergr\u00fcnde auf bestimmten Bereichen wie WordPress Bl\u00f6cken, Beitr\u00e4gen und Seiten. Aber was ist mit dem Bereich, der dein Men\u00fc und dein Logo enth\u00e4lt?<\/p>\n<p>Manchmal ist ein Hintergrund hinter deinem Header alles, was du brauchst.<\/p>\n<p>Das Einstellen eines Hintergrundbildes f\u00fcr den Header verleiht <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-andern\/\">deiner Webseite eine neue Ausstrahlung<\/a>, vor allem, wenn es einen Feiertag oder einen gro\u00dfen Verkauf gibt, den du hervorheben kannst.<\/p>\n<p>Um zu beginnen, gehe im WordPress Dashboard auf <strong>Darstellung &gt; Header<\/strong>.<\/p>\n<p><strong>Hinweis<\/strong>: Du kannst die Header-Einstellungen auch unter <strong>Erscheinungsbild &gt; Anpassen &gt; Header<\/strong> finden.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/head-here.png\" alt=\"WordPress Dashboard &gt; Erscheinungsbild &gt; Kopfzeile\" width=\"1920\" height=\"910\"><figcaption class=\"wp-caption-text\">WordPress Dashboard &gt; Erscheinungsbild &gt; Kopfzeile<\/figcaption><\/figure>\n<p>Du solltest nun eine Vorschau deiner Homepage auf der rechten Seite des Bildschirms sehen, zusammen mit den Header-Einstellungen auf der linken Seite davon.<\/p>\n<p>Das Header-Modul erkl\u00e4rt die bevorzugten Abmessungen f\u00fcr 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.<\/p>\n<p>Unter dem Titel <strong>Aktuelle Kopfzeile<\/strong> klickst du auf die Schaltfl\u00e4che <strong>Neues Bild hinzuf\u00fcgen<\/strong>.<\/p>\n<figure style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/add-news.png\" alt=\"Klicke auf die Schaltfl\u00e4che 'Neues Bild hinzuf\u00fcgen'.\" width=\"1886\" height=\"940\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;Neues Bild hinzuf\u00fcgen&#8216;.<\/figcaption><\/figure>\n<p>Kopfzeilen sind knifflig, weil du sicherstellen willst, dass alle <a href=\"https:\/\/kinsta.com\/de\/blog\/ankerlinks\/\">Links<\/a> und Textelemente (ganz zu schweigen von deinem Logo) kristallklar auf dem Hintergrundbild aussehen.<\/p>\n<p>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\u00fcpunkte und dein Logo zu sehen.<\/p>\n<p>W\u00e4hle ein Bild aus, das f\u00fcr dich ideal aussieht, und klicke dann auf den Button <strong>Ausw\u00e4hlen und zuschneiden<\/strong>, um fortzufahren.<\/p>\n<figure style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-func.png\" alt=\"W\u00e4hle ein Bild\" width=\"1860\" height=\"880\"><figcaption class=\"wp-caption-text\">W\u00e4hle ein Bild<\/figcaption><\/figure>\n<p>Wir m\u00f6gen das eingebaute Crop Tool, da es automatisch die richtigen Ma\u00dfe f\u00fcr das Header-Hintergrundbild liefert. Das sollte den Prozess beschleunigen, verglichen mit der vorherigen Bearbeitung eines Fotos in Photoshop oder \u00e4hnlichem.<\/p>\n<p>Verschiebe das Zuschneidefeld an die Stelle, die f\u00fcr dein Hintergrundbild am sinnvollsten ist. Ziehe ruhig eine der Ecken, wenn du das Bild noch mehr beschneiden m\u00f6chtest.<\/p>\n<p>Sobald du den perfekten Zuschnitt hast, klicke auf die Schaltfl\u00e4che <strong>Bild zuschneiden<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-im.png\" alt=\"Das Bild beschneiden\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Das Bild beschneiden<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>Du wirst feststellen, dass das Header-Hintergrundbild nicht in den Rest des Seiteninhalts \u00fcberl\u00e4uft. Stattdessen verbleibt es im Header, hinter allem, was sich dort gerade befindet, wie Logo, Tagline, Men\u00fc und <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-suche\/\">Suchleiste<\/a>.<\/p>\n<figure style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-actual-thing.png\" alt=\"W\u00e4hle das Hintergrundbild der Kopfzeile\" width=\"1901\" height=\"940\"><figcaption class=\"wp-caption-text\">W\u00e4hle das Hintergrundbild der Kopfzeile<\/figcaption><\/figure>\n<p>Eine weitere Option f\u00fcr deinen Header-Hintergrund ist es, mehrere Bilder hochzuladen und sie zuf\u00e4llig rotieren zu lassen, um deiner Webseite ein wenig Glanz und \u00dcberraschung zu verleihen, sobald ein Nutzer auf der Startseite landet.<\/p>\n<p>Damit dies funktioniert, musst du zun\u00e4chst mehrere Bilder in die Header-Einstellungen hochladen. Klicke auf den Button <strong>Neues Bild hinzuf\u00fcgen<\/strong>, um diesen Prozess abzuschlie\u00dfen.<\/p>\n<p>Sobald du mehr als ein Bild hast, klicke auf den <strong>Randomize Uploaded Headers<\/strong> Button, um die Funktion zu aktivieren, die jedes Mal einen anderen Header-Hintergrund zeigt.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/random.png\" alt=\"Mehr Kopfzeilen hinzuf\u00fcgen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Mehr Kopfzeilen hinzuf\u00fcgen<\/figcaption><\/figure>\n<p>Es kann sein, dass du feststellst, dass es durch das Hinzuf\u00fcgen eines Hintergrundbildes im Header schwierig wird, einige der Header-Elemente zu sehen, wie z.B. dein Men\u00fc oder einen Warenkorb.<\/p>\n<p>Wenn das der Fall ist, empfehlen wir dir, das Kopfzeilenbild nicht sofort zu l\u00f6schen. Gehe stattdessen zu den Feldern <strong>Textfarbe<\/strong> und <strong>Linkfarbe<\/strong>, um zu sehen, ob Anpassungen helfen k\u00f6nnen.<\/p>\n<p>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 \u00e4ndern.<\/p>\n<p>Das andere Feld ist f\u00fcr die Linkfarbe. Du wirst h\u00f6chstwahrscheinlich mehr \u00c4nderungen sehen, wenn du diese Farbe anpasst, da es alle Men\u00fcpunkte beinhaltet, die mit anderen Seiten verlinkt sind.<\/p>\n<figure style=\"width: 1921px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/lino-color.png\" alt=\"Textfarbe \u00fcber dem WordPress Hintergrundbild\" width=\"1921\" height=\"941\"><figcaption class=\"wp-caption-text\">Textfarbe \u00fcber dem WordPress Hintergrundbild<\/figcaption><\/figure>\n<p>Hier ist ein Beispiel daf\u00fcr, was passiert, wenn du eine neue Farbe f\u00fcr die <strong>Textfarbe<\/strong> und die <strong>Linkfarbe<\/strong> ausw\u00e4hlst. Du kannst sehen, dass sich die Tagline und der Name der Webseite ge\u00e4ndert haben, das Men\u00fc wurde wei\u00df und auch die meisten anderen Header-Elemente wie das Einkaufswagen-Symbol.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/text-and-link.png\" alt=\"\u00dcberpr\u00fcfen der Header Elemente\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">\u00dcberpr\u00fcfen der Header Elemente<\/figcaption><\/figure>\n<p>Wenn du kein Hintergrundbild f\u00fcr deine Kopfzeile verwenden m\u00f6chtest, hast du auch die M\u00f6glichkeit, einen einfarbigen Hintergrund zu verwenden.<\/p>\n<p>Hierf\u00fcr findest du das Feld Hintergrundfarbe im gleichen Bereich der Kopfzeileneinstellungen.<\/p>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Farbe ausw\u00e4hlen<\/strong> und w\u00e4hle aus dem Farbpanel, um das Ergebnis in der Vorschau zu sehen. Du kannst auch die Textfarben \u00e4ndern, wenn du eine Hintergrundfarbe verwendest.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/do-the-back-color.png\" alt=\"Einstellen einer Hintergrundfarbe\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Einstellen einer Hintergrundfarbe<\/figcaption><\/figure>\n<p>Nachdem du getestet hast, was f\u00fcr deinen Header am besten funktioniert, und dich f\u00fcr das perfekte Hintergrundbild entschieden hast, klicke auf den Button <strong>Ver\u00f6ffentlichen<\/strong>, damit alle die \u00c4nderungen sehen k\u00f6nnen.<\/p>\n<p>Wenn du Probleme mit der Darstellung der \u00c4nderungen im Frontend hast, solltest du deinen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cache-loschen\/\">WordPress-Cache leeren<\/a>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/hit-pub.png\" alt=\"Klicke auf den 'Ver\u00f6ffentlichen' Button\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Ver\u00f6ffentlichen&#8216; Button<\/figcaption><\/figure>\n<h3 class=\"title style-scope ytd-video-primary-info-renderer\">Hinzuf\u00fcgen von Hintergrundbildern zu WordPress-Kategorien und Login-Seiten<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=7z3l5tsU3nU\"><\/kinsta-video>\n<h3>Wie man ein Hintergrundbild zu einer WordPress Kategorie hinzuf\u00fcgt<\/h3>\n<p>Eine WordPress-Kategorie-Archivseite fasst alle Beitr\u00e4ge zusammen, die unter einer bestimmten Kategorie gelistet sind. Zum Beispiel haben viele Webseiten Kategorien f\u00fcr benutzerdefinierte Beitragstypen wie Produkte. Standardm\u00e4\u00dfig haben alle Webseiten in WordPress Kategorien f\u00fcr Beitr\u00e4ge. Diejenigen, die du nicht kategorisierst, werden mit der Kategorie <strong>Uncategorized<\/strong> getaggt.<\/p>\n<p>Da die Archivseiten der Kategorien \u00e4hnliche Inhalte b\u00fcndeln, macht es Sinn, ein entsprechendes Hintergrundbild auf diesen Seiten einzubinden, um die Kategorie besser zu pr\u00e4sentieren. Als Beispiel k\u00f6nntest du einen technisch orientierten Hintergrund f\u00fcr eine Webdesign-Kategorie oder einen Muschel- oder Strand-Muster-Hintergrund f\u00fcr eine Reise-Kategorie verwenden.<\/p>\n<p>Die benutzerdefinierte CSS-Methode (unten beschrieben) ist die g\u00fcnstigste Option. Du kannst aber auch einen Blick in die verschiedenen Page Builder und Plugins werfen, um zu sehen, welche von ihnen Hintergr\u00fcnde auf Kategorieseiten erm\u00f6glichen.<\/p>\n<p>Um diese Aufgabe mit CSS zu erledigen, \u00f6ffne dein WordPress Dashboard und gehe zu <strong>Erscheinungsbild &gt; Anpassen<\/strong>.<\/p>\n<p>W\u00e4hle den Reiter <strong>Zus\u00e4tzliches CSS<\/strong>, um das Modul zu \u00f6ffnen, das es dir erlaubt, dein eigenes CSS einzugeben.<\/p>\n<figure style=\"width: 1538px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/additonal.png\" alt=\"Gehe zum Abschnitt 'Zus\u00e4tzliches CSS'\" width=\"1538\" height=\"940\"><figcaption class=\"wp-caption-text\">Gehe zum Abschnitt &#8218;Zus\u00e4tzliches CSS&#8216;<\/figcaption><\/figure>\n<p>\u00d6ffne eine deiner Kategorie-Archivseiten auf deiner WordPress Seite. Normalerweise haben diese Seiten URLs wie diese: <code>http:\/\/yourwebsitedomain.com\/category\/travel<\/code>. Du musst den <strong>Reiseteil<\/strong> in die Kategorie \u00e4ndern, die du auf deiner Webseite hast und den <strong>yourwebsitedoman<\/strong>-Teil in deinen tats\u00e4chlichen Domain-Namen \u00e4ndern.<\/p>\n<p>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.<\/p>\n<figure style=\"width: 1433px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insepting.png\" alt=\"Klicke mit der rechten Maustaste auf die Webseite und w\u00e4hle 'Inspizieren'.\" width=\"1433\" height=\"812\"><figcaption class=\"wp-caption-text\">Klicke mit der rechten Maustaste auf die Webseite und w\u00e4hle &#8218;Inspizieren&#8216;.<\/figcaption><\/figure>\n<p>Suche nach &#8222;body&#8220; oder &#8222;class&#8220;, um die CSS-Klasse f\u00fcr Kategorieseiten zu finden, zusammen mit der Klasse f\u00fcr diese Kategorie im Besonderen.<\/p>\n<p>In diesem Fall ist unsere CSS-Klasse &#8222;category-travel&#8220;, da ich eine Kategorie namens &#8222;Travel&#8220; auf der Webseite habe.<\/p>\n<p>Speichere den CSS-Tag f\u00fcr sp\u00e4ter.<\/p>\n<figure style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/travel-cat.png\" alt=\"Notiere dir die aufgelistete Kategorie\" width=\"986\" height=\"771\"><figcaption class=\"wp-caption-text\">Notiere dir die aufgelistete Kategorie<\/figcaption><\/figure>\n<p>Danach navigierst du zur\u00fcck zum Abschnitt <strong>Zus\u00e4tzliches CSS<\/strong> in deinem WordPress Customizer.<\/p>\n<p>F\u00fcge den folgenden Code in das Feld ein, tausche die Klasse <code>category-travel<\/code> mit deiner eigenen aus und f\u00fcge eine echte Bild-URL an der Stelle ein, an der <code>http:\/\/YOURIMAGEURL.jpeg<\/code> steht.<\/p>\n<pre><code class=\"language-html\">body.category-travel {\nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\");\nbackground-position: center center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\nbackground-attachment: fixed;\n}<\/code><\/pre>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-it-is.png\" alt=\"F\u00fcge die benutzerdefinierte Codierung f\u00fcr das WordPress Hintergrundbild hinzu\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">F\u00fcge die benutzerdefinierte Codierung f\u00fcr das WordPress Hintergrundbild hinzu<\/figcaption><\/figure>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>, um die \u00c4nderungen zu speichern.<\/p>\n<figure style=\"width: 1160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/go-and-pub.png\" alt=\"Hinzuf\u00fcgen des 'Custom CSS' Codes\" width=\"1160\" height=\"778\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen des &#8218;Custom CSS&#8216; Codes<\/figcaption><\/figure>\n<p>Zum Schluss gehst du zur\u00fcck 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\u00fcck zum Panel Zus\u00e4tzliches CSS, um Elemente wie die Position, Gr\u00f6\u00dfe und Wiederholungsfunktion des Hintergrundes anzupassen.<\/p>\n<figure style=\"width: 1597px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-cat-page.png\" alt=\"Geh auf die Kategorieseite und sieh dir den Hintergrund an\" width=\"1597\" height=\"904\"><figcaption class=\"wp-caption-text\">Geh auf die Kategorieseite und sieh dir den Hintergrund an<\/figcaption><\/figure>\n<h3>Wie du ein Hintergrundbild zu deiner WordPress Login-Seite hinzuf\u00fcgst<\/h3>\n<p>Die WordPress Login-Seite hat zwei Versionen: eine f\u00fcr normale Benutzer, die auf deine Webseite kommen und sich registrieren und einloggen wollen, und die andere f\u00fcr interne Benutzer, wie Admins und Autoren.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-url-loggst\/\">Diese Login-Seiten<\/a> sind von der Hauptarbeit deiner Webseite getrennt (die meisten Dateien befinden sich in der Datei <strong>wp-login.php<\/strong>). Das Tool f\u00fcr das benutzerdefinierte Hintergrundbild wird also nicht in die Login-Module einflie\u00dfen.<\/p>\n<p>Dies kannst du mit einem Plugin namens <a href=\"https:\/\/wordpress.org\/plugins\/loginpress\/\">Custom Login Page Customizer<\/a> erreichen. Um loszulegen, installiere und aktiviere das Plugin auf deiner WordPress Seite.<\/p>\n<figure style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/Custom-Login-Page-Customizer.png\" alt=\"LoginPress Plugin\" width=\"1329\" height=\"434\"><figcaption class=\"wp-caption-text\">LoginPress Plugin<\/figcaption><\/figure>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Auf der linken Seite erscheint ein neuer Tab im WordPress Dashboard Men\u00fc f\u00fcr LoginPress.<\/span><\/p>\n<p>Gehe zu <strong>LoginPress &gt; Einstellungen<\/strong>.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/loginpresss.png\" alt=\"Gehe zu den LoginPress Einstellungen\" width=\"1900\" height=\"912\"><figcaption class=\"wp-caption-text\">Gehe zu den LoginPress Einstellungen<\/figcaption><\/figure>\n<p>Hier kannst du die Einstellungen des Plugins anpassen, bevor du deinen Hintergrund hinzuf\u00fcgst und jeden anderen Teil deiner Anmeldeseite anpasst.<\/p>\n<p>Zum Beispiel bietet es Einstellungen, um Benutzer automatisch zu erinnern, benutzerdefinierte Passwortfelder anzuzeigen und Sitzungen nach einer bestimmten Zeitspanne ablaufen zu lassen.<\/p>\n<figure style=\"width: 1413px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-sets.png\" alt=\"\u00c4ndern der LoginPress Einstellungen\" width=\"1413\" height=\"940\"><figcaption class=\"wp-caption-text\">\u00c4ndern der LoginPress Einstellungen<\/figcaption><\/figure>\n<p>Um einen eigenen Bildhintergrund f\u00fcr die Login-Seite zu aktivieren, klicke auf <strong>LoginPress &gt; Customizer<\/strong>.<\/p>\n<figure style=\"width: 1352px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/customizer-o.png\" alt=\"Gehe zu 'LoginPress &gt; Customizer'\" width=\"1352\" height=\"940\"><figcaption class=\"wp-caption-text\">Gehe zu &#8218;LoginPress &gt; Customizer&#8216;<\/figcaption><\/figure>\n<p>Dies f\u00fchrt dich zum WordPress Customizer, wo eine neue Seite f\u00fcr die LoginPress Tools hinzugef\u00fcgt wurde. Hier findest du Tabs f\u00fcr Themes, Logo, Hintergrund und mehr.<\/p>\n<p>Es ist auch m\u00f6glich, die Login-Seite anzupassen, indem du auf die Buttons in der visuellen Vorschau klickst.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/setting-to-go.png\" alt=\"Einstellen eines LoginPress Themes\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Einstellen eines LoginPress Themes<\/figcaption><\/figure>\n<p>Wir werden nicht auf alle anderen Einstellungen eingehen, da wir uns im Moment haupts\u00e4chlich auf den Hintergrund konzentrieren.<\/p>\n<p>Klicke auf den Reiter <strong>Hintergrund<\/strong>, um fortzufahren.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-the-back.png\" alt=\"Gehe auf den Reiter 'LoginPress' Hintergrund\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Gehe auf den Reiter &#8218;LoginPress&#8216; Hintergrund<\/figcaption><\/figure>\n<p>Als erstes musst du dich entscheiden, ob du einen farbigen Hintergrund oder einen Bildhintergrund haben m\u00f6chtest.<\/p>\n<p>Wenn du einen farbigen Hintergrund m\u00f6chtest, suche das Feld <strong>Hintergrundfarbe<\/strong> und klicke auf <strong>Farbe<\/strong> <strong>ausw\u00e4hlen<\/strong>. Daraufhin \u00f6ffnet sich ein Farbfeld, in dem du genau die Farbe ausw\u00e4hlen kannst, die f\u00fcr dein Unternehmen sinnvoll ist.<\/p>\n<p>Wie du sehen kannst, wird die \u00c4nderung auch in der WordPress Customizer Vorschau wirksam.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-color.png\" alt=\"W\u00e4hle die 'LoginPress' Hintergrundfarbe\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle die &#8218;LoginPress&#8216; Hintergrundfarbe<\/figcaption><\/figure>\n<p>Direkt unter der Einstellung f\u00fcr die <strong>Hintergrundfarbe<\/strong> gibt es einen Abschnitt f\u00fcr das <strong>Hintergrundbild<\/strong>.<\/p>\n<p>Aktiviere den Schalter <strong>Enable Background Image<\/strong>, um eine Sammlung von vorgefertigten Hintergrundbildern anzuzeigen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enable-this.png\" alt=\"Aktiviere das WordPress Hintergrundbild\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aktiviere das WordPress Hintergrundbild<\/figcaption><\/figure>\n<p>In der kostenlosen Version gibt es nicht viele zur Auswahl, aber das Plugin f\u00fcgt mehr hinzu, wenn du dich f\u00fcr ein Upgrade auf die Premium-Version entscheidest.<\/p>\n<p>Probiere diese vorgefertigten Hintergr\u00fcnde aus, um zu sehen, ob sie f\u00fcr deine Marke geeignet sind.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/changing-the-back.png\" alt=\"Einstellen einer Hintergrundgalerie\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Einstellen einer Hintergrundgalerie<\/figcaption><\/figure>\n<p>Der wahrscheinlichere Weg ist, dein eigenes Bild als Hintergrund f\u00fcr die Anmeldeseite hochzuladen.<\/p>\n<p>Suche nach der \u00dcberschrift Hintergrundbild und klicke auf die Schaltfl\u00e4che <strong>Bild ausw\u00e4hlen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-image-s-s-s.png\" alt=\"W\u00e4hle die Option 'Bild ausw\u00e4hlen'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle die Option &#8218;Bild ausw\u00e4hlen&#8216;<\/figcaption><\/figure>\n<p>Du gelangst zur WordPress-Mediathek und kannst entweder ein Bild von deinem Computer hochladen oder eines der Bilder ausw\u00e4hlen, die bereits in WordPress vorhanden sind.<\/p>\n<p>W\u00e4hle dein gew\u00fcnschtes Foto aus und klicke auf die Schaltfl\u00e4che <strong>Bild ausw\u00e4hlen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choosing-that.png\" alt=\"W\u00e4hle das WordPress Login Hintergrundbild\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle das WordPress Login Hintergrundbild<\/figcaption><\/figure>\n<p>Das aktivierte Hintergrundbild erscheint als Thumbnail im Customizer Panel und in der aktuellen Vorschau deiner Login-Seite.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-result-s-s.png\" alt=\"Setze die Optionen f\u00fcr das Hintergrundbild\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Setze die Optionen f\u00fcr das Hintergrundbild<\/figcaption><\/figure>\n<p>Du hast nun die M\u00f6glichkeit, auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong> zu klicken und bei dem zu bleiben, was auf dem Bildschirm zu sehen ist. Oder du scrollst runter zu den zus\u00e4tzlichen Einstellungen, um sicherzustellen, dass die beste Ansicht des hochgeladenen Bildes gerade aktiv ist.<\/p>\n<p>Klicke auf das Dropdown-Feld &#8222;<strong>Hintergrundwiederholung<\/strong>&#8220; und teste Optionen wie &#8222;<strong>Wiederholen<\/strong>&#8222;, &#8222;<strong>Nicht<\/strong> <strong>wiederholen<\/strong>&#8220; und &#8222;<strong>Repeat-x<\/strong>&#8220; aus.<\/p>\n<p>Je nach Gr\u00f6\u00dfe deines Fotos, kann es sein, dass sich das Bild ein wenig bewegt.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/repeating.png\" alt=\"W\u00e4hle die 'Hintergrund Wiederholung' Einstellungen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle die &#8218;Hintergrund Wiederholung&#8216; Einstellungen<\/figcaption><\/figure>\n<p>Als N\u00e4chstes kannst du das Hintergrundbild \u00fcber die Option Position ausw\u00e4hlen noch weiter verschieben.<\/p>\n<p>Standardm\u00e4\u00dfig 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\u00fcr dein Hintergrundbild am besten funktioniert.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-pos.png\" alt=\"W\u00e4hle die Position Hintergrund\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle die Position Hintergrund<\/figcaption><\/figure>\n<p>Das Dropdown-Men\u00fc f\u00fcr die Gr\u00f6\u00dfe des WordPress-Hintergrundbildes bietet Einstellungen daf\u00fcr, wie das Bild den Bildschirm abdeckt und passt seine Gr\u00f6\u00dfe mit jeder voreingestellten Option an.<\/p>\n<p>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.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enabling.png\" alt=\"Setze die Gr\u00f6\u00dfe des WordPress Hintergrundbildes\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Setze die Gr\u00f6\u00dfe des WordPress Hintergrundbildes<\/figcaption><\/figure>\n<p>Und das ist alles, was es zum Hochladen und Aktivieren eines Hintergrundbildes f\u00fcr deine Login-Seite braucht!<\/p>\n<p>Die letzte Einstellung ist da, wenn du ein Video als Hintergrund statt eines Bildes zeigen m\u00f6chtest. Aktiviere diese Einstellung, wenn du ein interessantes Video hast, das mit deinem Gesch\u00e4ft zu tun hat und nicht zu viel Aufmerksamkeit von den Leuten ablenkt, die sich auf deiner Webseite einloggen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/video-on.png\" alt=\"Aktivieren von 'Hintergrund Video'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aktivieren von &#8218;Hintergrund Video&#8216;<\/figcaption><\/figure>\n<p>Sobald alles fertig ist, klicke auf den <strong>Ver\u00f6ffentlichen<\/strong>-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.<\/p>\n<h3>Wie du ein Hintergrundbild zu deinem Navigationsmen\u00fc hinzuf\u00fcgst<\/h3>\n<p>Du hast vielleicht schon einige Webseiten mit ausgefallenen Men\u00fcs gesehen, die Hintergrundbilder oder Icons enthalten. Dies ist eine g\u00e4ngige Praxis in der eCommerce Welt, wo die Marke vielleicht ein Mega-Men\u00fc mit Kategorien und Hintergrundbildern f\u00fcr jede Kategorie-Schaltfl\u00e4che hat.<\/p>\n<p>Wenn du daran interessiert bist, Hintergr\u00fcnde zu deinem Men\u00fc hinzuzuf\u00fcgen, schau dir <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menu-plugins\/\">unseren Artikel \u00fcber die besten WordPress Men\u00fc Plugins an<\/a>. Viele dieser Men\u00fc Plugins bieten die M\u00f6glichkeit, Bild- und Farbhintergr\u00fcnde in dein Men\u00fc einzubauen.<\/p>\n<p>Da es mehrere Plugins gibt, um einen bestimmten Hintergrund f\u00fcr Navigationsmen\u00fcs hinzuzuf\u00fcgen, stellen wir dir Tutorials f\u00fcr zwei zur Verf\u00fcgung, von denen eines Hintergr\u00fcnde hinter deinen Untermen\u00fcs erm\u00f6glicht. Im Gegensatz dazu f\u00fcgt das andere einen Hintergrund f\u00fcr dein mobiles Men\u00fc hinzu.<\/p>\n<p>Um ein Hintergrundbild zu verschiedenen Untermen\u00fcs hinzuzuf\u00fcgen, installiere und aktiviere das <a href=\"https:\/\/wordpress.org\/plugins\/wp-megamenu\/\">WP Mega Menu Plugin<\/a>. Dieses Plugin erm\u00f6glicht es dir, ein Mega-Men\u00fc mit mehreren Dropdown-Ebenen zu aktivieren und zu verwalten. Es ist ideal f\u00fcr gro\u00dfe Onlineshops, aber es erf\u00fcllt den Zweck auch f\u00fcr kleinere Men\u00fcs, besonders wenn du ein Hintergrundbild oder Icons hinzuf\u00fcgen m\u00f6chtest.<\/p>\n<figure style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/wp-mega-menu.png\" alt=\"WP Mega Menu Plugin\" width=\"1402\" height=\"374\"><figcaption class=\"wp-caption-text\">WP Mega Menu Plugin<\/figcaption><\/figure>\n<p>Beginne damit, den WP Mega Menu Reiter im WordPress Dashboard zu finden.<\/p>\n<p>Klicke auf den Men\u00fcpunkt <strong>Themes<\/strong>.<\/p>\n<figure style=\"width: 1240px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themes-s-s.png\" alt=\"Gehe zum 'Themes' Panel\" width=\"1240\" height=\"905\"><figcaption class=\"wp-caption-text\">Gehe zum &#8218;Themes&#8216; Panel<\/figcaption><\/figure>\n<p>Hier siehst du eine Liste der Standard-Themes, die das Plugin f\u00fcr dein Men\u00fc erstellt hat.<\/p>\n<p>Du kannst auf eines der Themes klicken, um es zu bearbeiten oder dein eigenes Design von Grund auf hinzuf\u00fcgen.<\/p>\n<figure style=\"width: 1867px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/see-themes.png\" alt=\"Die vielen Mega Men\u00fc Themes\" width=\"1867\" height=\"841\"><figcaption class=\"wp-caption-text\">Die vielen Mega Men\u00fc Themes<\/figcaption><\/figure>\n<p>Jedes Theme hat seine eigenen Einstellungen, in denen du Elemente wie den Theme-Titel, die Men\u00fcleisten-Optionen und das Markenlogo festlegen kannst. So gut wie jeder Teil deines Men\u00fcs ist anpassbar, vom Dropdown-Men\u00fc bis zu den Untermen\u00fcs.<\/p>\n<p>F\u00fcr den Men\u00fchintergrund musst du jedoch nur wissen, welches Theme du w\u00e4hlen m\u00f6chtest.<\/p>\n<figure style=\"width: 1757px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/main-sets.png\" alt=\"Setze die Einstellungen f\u00fcr das Mega Menu Theme\" width=\"1757\" height=\"843\"><figcaption class=\"wp-caption-text\">Setze die Einstellungen f\u00fcr das Mega Menu Theme<\/figcaption><\/figure>\n<p>Gehe im Dashboard auf <strong>Erscheinungsbild &gt; Men\u00fcs<\/strong>.<\/p>\n<figure style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/app-menu.png\" alt=\"Gehe zu 'Erscheinungsbild &gt; Men\u00fcs'\" width=\"1470\" height=\"737\"><figcaption class=\"wp-caption-text\">Gehe zu &#8218;Erscheinungsbild &gt; Men\u00fcs&#8216;<\/figcaption><\/figure>\n<p>Du wirst ein neues Modul sehen, das zu den <strong>Mega-Men\u00fc-Einstellungen<\/strong> verlinkt.<\/p>\n<p>Klicke darauf, um das Mega-Men\u00fc zu <strong>aktivieren<\/strong> und w\u00e4hle dann aus, was dir auf deiner Webseite am besten gef\u00e4llt.<\/p>\n<p>Zum Schluss klickst du auf die Schaltfl\u00e4che <strong>Speichern<\/strong>.<\/p>\n<figure style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/enable-it-s.png\" alt=\"Klicke auf den 'Aktivieren' Button\" width=\"1471\" height=\"901\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Aktivieren&#8216; Button<\/figcaption><\/figure>\n<p>Richte nun deine Aufmerksamkeit auf den Bereich der <strong>Men\u00fcstruktur<\/strong>.<\/p>\n<p>Wenn du \u00fcber einen deiner aktuellen Men\u00fcpunkte scrollst, erscheint ein <strong>WP Mega Menu<\/strong> Button. Hier kannst du das Layout und Design f\u00fcr jeden Dropdown-Bereich anpassen.<\/p>\n<p>Klicke auf den <strong>WP Mega Menu<\/strong> Button f\u00fcr jeden Men\u00fcpunkt, den du m\u00f6chtest. In diesem Fall f\u00fcgen wir ein Dropdown-Mega-Men\u00fc zum Shop-Tab hinzu.<\/p>\n<p><strong>Hinweis<\/strong>: Wir gehen davon aus, dass du bereits ein Men\u00fc auf deiner WordPress Seite konfiguriert hast. Lies unsere <a href=\"https:\/\/kinsta.com\/de\/blog\/dropdown-menu-wordpress\/\">WordPress Dropdown-Men\u00fc Anleitung<\/a>, wenn du Hilfe dabei brauchst.<\/p>\n<figure style=\"width: 1455px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/selected-on.png\" alt=\"F\u00fcge das Mega-Men\u00fc zu deiner Webseite hinzu\" width=\"1455\" height=\"857\"><figcaption class=\"wp-caption-text\">F\u00fcge das Mega-Men\u00fc zu deiner Webseite hinzu<\/figcaption><\/figure>\n<p>In dem neuen Popup-Fenster legst du den Schalter um, um das Mega-Men\u00fc f\u00fcr diesen bestimmten Men\u00fcpunkt einzuschalten.<\/p>\n<p>Du kannst dann eine Dropdown-Reihe hinzuf\u00fcgen 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 \u00fcber den Men\u00fcpunkt Shop scrollt.<\/p>\n<figure style=\"width: 1855px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row.png\" alt=\"Klicke auf den 'Jetzt hinzuf\u00fcgen' Button\" width=\"1855\" height=\"918\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Jetzt hinzuf\u00fcgen&#8216; Button<\/figcaption><\/figure>\n<p>Um diesem Dropdown-Bereich einen Hintergrund hinzuzuf\u00fcgen, klicke auf die Schaltfl\u00e4che <strong>Optionen<\/strong> in der unteren linken Ecke.<\/p>\n<figure style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/options-s-s.png\" alt=\"W\u00e4hle den Link 'Optionen'\" width=\"1701\" height=\"916\"><figcaption class=\"wp-caption-text\">W\u00e4hle den Link &#8218;Optionen&#8216;<\/figcaption><\/figure>\n<p>Finde das Feld <strong>Hintergrundbild hochladen<\/strong>.<\/p>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Hochladen<\/strong>, um das richtige Foto in deiner Mediathek zu finden, um es als Hintergrund zu verwenden.<\/p>\n<figure style=\"width: 1751px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-bg-up.png\" alt=\"W\u00e4hle den 'Upload Image' Button\" width=\"1751\" height=\"785\"><figcaption class=\"wp-caption-text\">W\u00e4hle den &#8218;Upload Image&#8216; Button<\/figcaption><\/figure>\n<p>Nachdem du es in der Mediathek ausgew\u00e4hlt hast, wird ein Miniaturbild angezeigt.<\/p>\n<p>Es gibt noch ein paar andere Einstellungen, die du beachten solltest, wenn du willst.<\/p>\n<figure style=\"width: 1768px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-image-uploaded.png\" alt=\"\u00dcberpr\u00fcfe das Vorschaubild\" width=\"1768\" height=\"728\"><figcaption class=\"wp-caption-text\">\u00dcberpr\u00fcfe das Vorschaubild<\/figcaption><\/figure>\n<p>Achte darauf, dass du auf den <strong>\u00c4nderungen speichern<\/strong> Button unten im <strong>Optionen<\/strong> Panel klickst.<\/p>\n<figure style=\"width: 1767px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-them-s-s.png\" alt=\"Klicke auf die Schaltfl\u00e4che '\u00c4nderungen speichern'\" width=\"1767\" height=\"864\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;\u00c4nderungen speichern&#8216;<\/figcaption><\/figure>\n<p>Du musst auch auf Men\u00fc speichern zur\u00fcck im Bereich Men\u00fcstruktur des WordPress Dashboards klicken.<\/p>\n<figure style=\"width: 1887px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-menu-s.png\" alt=\"Klicke auf die Schaltfl\u00e4che 'Men\u00fc speichern'\" width=\"1887\" height=\"877\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;Men\u00fc speichern&#8216;<\/figcaption><\/figure>\n<p>Nun navigierst du zum Frontend deiner Webseite, um das Men\u00fc zu sehen. Wenn du \u00fcber das Element scrollst, das wir gerade angepasst haben, solltest du einen Dropdown-Bereich mit dem Hintergrund sehen.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-shop-bg.png\" alt=\"Das Men\u00fc hat jetzt ein Hintergrundbild\" width=\"1900\" height=\"867\"><figcaption class=\"wp-caption-text\">Das Men\u00fc hat jetzt ein Hintergrundbild<\/figcaption><\/figure>\n<p>Eine weitere M\u00f6glichkeit, ein Hintergrundbild zu einem Men\u00fc hinzuzuf\u00fcgen, ist die Verwendung eines mobilen, responsive Men\u00fcs, das angezeigt wird, wenn jemand \u00fcber ein mobiles Ger\u00e4t auf deine Webseite zugreift.<\/p>\n<p>Du kannst mit Hilfe des <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-mobile-plugin\/#wp-mobile-menu\">WP Mobile Menu<\/a> Plugins einen Hintergrund hinter dem mobilen Men\u00fc platzieren.<\/p>\n<figure style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WP-Mobile-Menu.png\" alt=\"WP Mobile Menu plugin\" width=\"1640\" height=\"433\"><figcaption class=\"wp-caption-text\">WP Mobile Menu Plugin<\/figcaption><\/figure>\n<p>Nachdem du das WP Mobile Menu Plugin installiert und aktiviert hast, gehe im WordPress Dashboard auf Mobile Menu Options.<\/p>\n<figure style=\"width: 1361px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/mobile-menu-options.png\" alt=\"Gehe auf den Link 'Mobile Men\u00fc Optionen'\" width=\"1361\" height=\"906\"><figcaption class=\"wp-caption-text\">Gehe auf den Link &#8218;Mobile Men\u00fc Optionen&#8216;<\/figcaption><\/figure>\n<p>Das Plugin bietet mehrere M\u00f6glichkeiten, dein mobiles Men\u00fc zu konfigurieren. Die allgemeine Voraussetzung ist, dass du eines der Men\u00fcformate aktivierst und angibst, welches WordPress-Men\u00fc du f\u00fcr dieses mobile Men\u00fc verwenden m\u00f6chtest.<\/p>\n<p>Zum Beispiel k\u00f6nnen wir auf den Schalter <strong>Enable Left Menu<\/strong> klicken (was ein mobiles Men\u00fc auf der linken Seite des Bildschirms aktiviert) und die Option <strong>Main Menu<\/strong> aus dem <strong>Left Menu<\/strong> Dropdown ausw\u00e4hlen. Dies verbindet unser aktuelles Hauptmen\u00fc mit dem mobilen Men\u00fc, so dass die Besucher die gleichen Tabs sehen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/turn-on-a-menu.png\" alt=\"Setze die mobilen Men\u00fcoptionen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Setze die mobilen Men\u00fcoptionen<\/figcaption><\/figure>\n<p>Es h\u00e4ngt von der Art des mobilen Men\u00fcs ab, das du erstellst, aber da wir ein Men\u00fc auf der linken Seite erstellen, k\u00f6nnen wir auf den Reiter Linkes Men\u00fc klicken, um die entsprechenden Einstellungen zum Hinzuf\u00fcgen eines Hintergrunds zu \u00f6ffnen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/left-menu.png\" alt=\"W\u00e4hle die Einstellungen im linken Men\u00fc\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle die Einstellungen im linken Men\u00fc<\/figcaption><\/figure>\n<p>Scrolle nach unten zum Feld <strong>Panel Background Image<\/strong> und klicke auf das &#8222;<strong>+<\/strong>&#8220; Zeichen, um die Medienbibliothek zu \u00f6ffnen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-panel.png\" alt=\"Hinzuf\u00fcgen eines Hintergrundbildes f\u00fcr das mobile Men\u00fc\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen eines Hintergrundbildes f\u00fcr das mobile Men\u00fc<\/figcaption><\/figure>\n<p>W\u00e4hle ein Bild aus deiner Mediathek aus und f\u00fcge es dem Feld hinzu.<\/p>\n<p>Du solltest eine Miniaturversion des Hintergrundbildes als Best\u00e4tigung sehen.<\/p>\n<p>W\u00e4hle die Schaltfl\u00e4che <strong>\u00c4nderungen speichern<\/strong>, um den Hintergrund zu aktivieren.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-the-change.png\" alt=\"\u00dcberpr\u00fcfe das Hintergrundbild mit dem Vorschaubild\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">\u00dcberpr\u00fcfe das Hintergrundbild mit dem Vorschaubild<\/figcaption><\/figure>\n<p>Da das Plugin mobile Men\u00fcs generiert, kann es sein, dass das Men\u00fc nur angezeigt wird, wenn dein Browser auf eine schmale Breite eingestellt ist oder wenn du deine Webseite mit einem Telefon oder Tablet aufrufst.<\/p>\n<p>Das neue Men\u00fc wird unter einem Hamburger-Icon (drei horizontale Linien) zusammengefasst.<\/p>\n<p>Klicke darauf, um das neue Men\u00fc mit dem Hintergrund zu testen.<\/p>\n<figure style=\"width: 1196px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/click-on-it-now.png\" alt=\"Klicke auf das Hamburger Men\u00fc Symbol\" width=\"1196\" height=\"844\"><figcaption class=\"wp-caption-text\">Klicke auf das Hamburger Men\u00fc Symbol<\/figcaption><\/figure>\n<p>Wie im Screenshot zu sehen, wird der Hintergrund hinter dem gesamten mobilen Men\u00fc f\u00fcr alle sichtbar platziert.<\/p>\n<figure style=\"width: 1195px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-finished-product-background.png\" alt=\"Mobiles Men\u00fc mit einem Hintergrundbild\" width=\"1195\" height=\"826\"><figcaption class=\"wp-caption-text\">Mobiles Men\u00fc mit einem Hintergrundbild<\/figcaption><\/figure>\n<h3>Wie man ein WordPress Hintergrundbild zu einer Wartungsseite hinzuf\u00fcgt<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-wartung\/\">Alle Webseiten m\u00fcssen gelegentlich gewartet werden<\/a>, und manchmal dauert diese Wartung so lange, dass die Anzeige einer Wartungsseite hilft.<\/p>\n<p>Hintergrundbilder spielen eine gro\u00dfe Rolle bei der Arbeit mit <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-wartungsmodus\/\">Wartungsseiten<\/a>. Die meisten Wartungsseiten bestehen aus einem bildschirmf\u00fcllenden Hintergrundbild und vielleicht etwas Text oder Links mit weiteren Ressourcen.<\/p>\n<p>Wenn du bereits eine Wartungsseite hast und es kein Hintergrundbild enth\u00e4lt, solltest du die folgenden Schritte in Betracht ziehen, um eine sch\u00f6ne Umgebung f\u00fcr den Fall zu erzeugen, dass du deine Webseite f\u00fcr eine gewisse Zeit von der \u00d6ffentlichkeit abschalten musst.<\/p>\n<p>Du kannst ein Hintergrundbild zu einer Wartungsseite mit Hilfe des <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">Maintenance Plugins<\/a> hinzuf\u00fcgen. Installiere und aktiviere das Plugin auf deiner Webseite.<\/p>\n<figure style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance.png\" alt=\"Maintenance plugin \" width=\"1328\" height=\"431\"><figcaption class=\"wp-caption-text\">Maintenance plugin<\/figcaption><\/figure>\n<p>Sobald es aktiviert ist, findest du oben im Dashboard den Button <strong>Wartung ist ein\/aus.<\/strong><\/p>\n<p>Klicke auf den Button, um zur Einstellungsseite des Plugins Wartung zu gelangen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/off.png\" alt=\"Klicke auf den Link Maintenance ist aus'.\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Klicke auf den Link Maintenance ist aus&#8216;.<\/figcaption><\/figure>\n<p>Eine weitere M\u00f6glichkeit, um auf die Einstellungsseite zu gelangen, ist ein Klick auf den Men\u00fcpunkt <strong>Wartung<\/strong> im Seitenmen\u00fc des Dashboards.<\/p>\n<figure style=\"width: 1614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-on-bottom.png\" alt=\"Klicke auf den Men\u00fcpunkt 'Wartung'\" width=\"1614\" height=\"909\"><figcaption class=\"wp-caption-text\">Klicke auf den Men\u00fcpunkt &#8218;Wartung&#8216;<\/figcaption><\/figure>\n<p>Die Einstellungsseite des Plugins bietet eine Reihe von Optionen, die du anpassen kannst, aber der wichtigste Bereich ist das Modul <strong>Allgemeine Einstellungen<\/strong>. Hier kannst du eine \u00dcberschrift und eine Beschreibung eingeben, die beide als Text \u00fcber den Hintergrund gelegt werden, den wir gleich einf\u00fcgen.<\/p>\n<p>Der Seitentitel wird im Browser-Tab angezeigt, also solltest du auch diesen anpassen.<\/p>\n<p>Du kannst das Maintenance Plugin f\u00fcr alles verwenden, von Wartungsseiten bis hin zu &#8222;Coming Soon&#8220;-Seiten. Du k\u00f6nntest also etwas wie &#8222;Unsere Webseite wird gewartet&#8220; einf\u00fcgen, oder du k\u00f6nntest ein paar Informationen \u00fcber dein Unternehmen zeigen und ein Formular einf\u00fcgen, in das die Besucher ihre E-Mail-Adressen eintragen k\u00f6nnen.<\/p>\n<figure style=\"width: 1622px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-ss.png\" alt=\"Hinzuf\u00fcgen einer \u00dcberschrift f\u00fcr die Wartungsseite\" width=\"1622\" height=\"940\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen einer \u00dcberschrift f\u00fcr die Wartungsseite<\/figcaption><\/figure>\n<p>Im weiteren Verlauf bietet das Plugin die M\u00f6glichkeit, dein Logo hochzuladen, das sich ebenfalls \u00fcber das Hintergrundbild legt.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-up.png\" alt=\"Taste 'Logo hochladen'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Taste &#8218;Logo hochladen&#8216;<\/figcaption><\/figure>\n<p>Klicke auf den Button <strong>Logo hochladen<\/strong> und w\u00e4hle dein Logo aus, um dessen Vorschaubild im Dashboard zu sehen.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-in.png\" alt=\"Logo f\u00fcr die Wartungsseite\" width=\"1618\" height=\"940\"><figcaption class=\"wp-caption-text\">Logo f\u00fcr die Wartungsseite<\/figcaption><\/figure>\n<p>Das Feld Hintergrundbild fordert dich auf, auf das Feld Hintergrundbild hochladen zu klicken.<\/p>\n<p>Lade entweder ein Bild von deinem Computer hoch oder durchsuche deine Mediathek, um einen passenden Hintergrund f\u00fcr die Wartungsseite zu finden.<\/p>\n<p><strong>Hinweis<\/strong>: Die besten Wartungshintergrundbilder sind gro\u00df, hochaufl\u00f6send und im Querformat. Eine &#8222;Hochformat&#8220;-Hintergrundalternative ist in den Einstellungen unten verf\u00fcgbar.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/upload-back.png\" alt=\"Klicke auf die Schaltfl\u00e4che 'Hintergrund hochladen'\" width=\"1616\" height=\"940\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;Hintergrund hochladen&#8216;<\/figcaption><\/figure>\n<p>Sobald du den Hintergrund ausgew\u00e4hlt hast, erscheint es als kleinere Miniaturvorschau im Dashboard.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-one.png\" alt=\"Die Miniaturansicht des Hintergrundbildes\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Die Miniaturansicht des Hintergrundbildes<\/figcaption><\/figure>\n<p>Obwohl ein Hintergrundbild im Querformat f\u00fcr 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.<\/p>\n<p>Daher wird ein breiteres Hintergrundbild nicht so sch\u00f6n aussehen. Aus diesem Grund bietet das Plugin ein Hintergrundbild im Hochformat an, das als Alternative dient und responsive eingef\u00fcgt wird, sobald ein Nutzer die Seite mit einem hochformatigen Bildschirm besucht.<\/p>\n<p>Es ist wichtig, dass du ein Bild in dieses Feld einf\u00fcgst, also klicke auf den Button <strong>Upload image for portrait device orientation<\/strong>.<\/p>\n<figure style=\"width: 1615px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port.png\" alt=\"Lade ein hochformatiges Hintergrundbild hoch\" width=\"1615\" height=\"912\"><figcaption class=\"wp-caption-text\">Lade ein hochformatiges Hintergrundbild hoch<\/figcaption><\/figure>\n<p>Diesmal suchst du dir ein Bild, das h\u00f6her als breit ist (Hochformat). Du kannst das urspr\u00fcngliche Hintergrundbild jederzeit zuschneiden, um es in ein Hochformat zu verwandeln, oder du hast die M\u00f6glichkeit, ein komplett anderes Bild hochzuladen, um die Stelle zu f\u00fcllen.<\/p>\n<p>Markiere das gew\u00fcnschte Bild und klicke auf die Schaltfl\u00e4che <strong>Bild ausw\u00e4hlen<\/strong>, um es in das Dashboard einzuf\u00fcgen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port-mode.png\" alt=\"W\u00e4hle das Hintergrundbild\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle das Hintergrundbild<\/figcaption><\/figure>\n<p>All diese Einstellungen bedeuten nichts, wenn du den Wartungsmodus nicht aktivierst.<\/p>\n<p>Um dies zu tun, suche den Schalter Wartung Ein\/Aus oben auf der Seite Einstellungen.<\/p>\n<figure style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/offff.png\" alt=\"Einstellung der Wartungsseite 'Ein' oder 'Aus'\" width=\"1620\" height=\"940\"><figcaption class=\"wp-caption-text\">Einstellung der Wartungsseite &#8218;Ein&#8216; oder &#8218;Aus&#8216;<\/figcaption><\/figure>\n<p>Lege den Regler um, so dass er auf &#8222;Ein&#8220; steht, und w\u00e4hle dann die Schaltfl\u00e4che &#8222;<strong>\u00c4nderungen speichern<\/strong>&#8222;.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-theme.png\" alt=\"Aktiviere die Wartungsseite\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aktiviere die Wartungsseite<\/figcaption><\/figure>\n<p>Gehe in das Frontend deiner Webseite, um sicherzustellen, dass das Hintergrundbild und die Wartungsseite richtig angezeigt werden.<\/p>\n<p>Es besteht eine gute Chance, dass es das nicht tut.<\/p>\n<p>Daf\u00fcr gibt es zwei Gr\u00fcnde: Erstens musst du dich aus dem WordPress Admin-Konto ausloggen, um die Webseite im Wartungsmodus zu sehen. Zweitens musst du m\u00f6glicherweise den <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cache-loschen\/\">Cache der Webseite leeren<\/a>, um die \u00c4nderung des Inhalts zu aktualisieren.<\/p>\n<figure style=\"width: 1270px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/nothing-show.png\" alt=\"Siehe die Webseite im 'Wartungsmodus'\" width=\"1270\" height=\"836\"><figcaption class=\"wp-caption-text\">Siehe die Webseite im &#8218;Wartungsmodus&#8216;<\/figcaption><\/figure>\n<p>Wenn ich mich zum Beispiel aus dem Admin-Account auslogge, erscheint jetzt die Wartungsseite, wenn ich auf eine beliebige Seite gehe.<\/p>\n<p>Das Hintergrundbild ist da, zusammen mit meinen Anpassungen wie dem Logo und der Textbeschreibung.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-page.png\" alt=\"Das Hintergrundbild auf der Wartungsseite\" width=\"1920\" height=\"1040\"><figcaption class=\"wp-caption-text\">Das Hintergrundbild auf der Wartungsseite<\/figcaption><\/figure>\n<p>Wenn du au\u00dferdem die Gr\u00f6\u00dfe des Browserfensters auf Hochformat \u00e4nderst, wird der Hintergrund im Hochformat angezeigt.<\/p>\n<p>Du solltest den Hochformatmodus auch sehen, wenn du die Webseite auf einem Telefon oder Tablet besuchst.<\/p>\n<figure style=\"width: 889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/portrait-example.png\" alt=\"Das Hintergrundbild im Hochformat\" width=\"889\" height=\"1006\"><figcaption class=\"wp-caption-text\">Das Hintergrundbild im Hochformat<\/figcaption><\/figure>\n<p>Eine weitere Art von Hintergrundbild mit dem Plugin ist ein Preloader Image. Dieses l\u00e4dt ein schnelles Bild mit einem animierten Effekt, bevor die eigentliche Wartungsseite, der Hintergrund und der Inhalt angezeigt werden.<\/p>\n<p>Wie beim regul\u00e4ren Hintergrundbild klickst du auf den <strong>Upload Preloader<\/strong> Button, um ein Bild zu finden, das gut aussieht und f\u00fcgst es dem Dashboard hinzu.<\/p>\n<p>Auch hier klickst du auf die Schaltfl\u00e4che <strong>\u00c4nderungen speichern<\/strong> und leerst den Cache.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/preload.png\" alt=\"Klicke auf den 'Upload Preloader' Button\" width=\"1616\" height=\"940\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Upload Preloader&#8216; Button<\/figcaption><\/figure>\n<p>Standardm\u00e4\u00dfig dreht sich der <strong>Preloader Image<\/strong> Effekt f\u00fcr einen Moment und dann verschwindet er, um die Wartungsseite und das Hintergrundbild zu pr\u00e4sentieren.<\/p>\n<p>Es liegt ganz bei dir, ob du diesen Effekt beibehalten m\u00f6chtest oder nicht.<\/p>\n<figure style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/2021-02-03_11-55-51.gif\" alt=\"Hinzuf\u00fcgen eines Intro-Effekts zum Hintergrundbild\" width=\"1280\" height=\"720\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen eines Intro-Effekts zum Hintergrundbild<\/figcaption><\/figure>\n<p>In den Einstellungen des Plugins Wartung kannst du mit verschiedenen anderen Hintergrundelementen experimentieren.<\/p>\n<p>Vielleicht m\u00f6chtest du zum Beispiel eine Hintergrundfarbe anstelle eines Hintergrundbildes hinzuf\u00fcgen.<\/p>\n<p>Wenn das der Fall ist, gehe zum Feld <strong>Hintergrundfarbe<\/strong> und w\u00e4hle eine Farbe, die zu deiner Marke passt.<\/p>\n<figure style=\"width: 1617px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-col.png\" alt=\"\u00d6ffne das Feld f\u00fcr die Hintergrundfarbe\" width=\"1617\" height=\"940\"><figcaption class=\"wp-caption-text\">\u00d6ffne das Feld f\u00fcr die Hintergrundfarbe<\/figcaption><\/figure>\n<p>Die Hintergrundfarbe wird f\u00fcr die Wartungsseite nicht angezeigt, es sei denn, du deaktivierst alle anderen Hintergrundbilder.<\/p>\n<p>Stelle also sicher, dass du das Hintergrundbild l\u00f6schst.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-s.png\" alt=\"Entfernen des Hintergrundbildes\" width=\"1618\" height=\"940\"><figcaption class=\"wp-caption-text\">Entfernen des Hintergrundbildes<\/figcaption><\/figure>\n<p>Du musst auch das Hintergrundbild des Portr\u00e4tmodus l\u00f6schen.<\/p>\n<figure style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-both.png\" alt=\"Lege das Hintergrundbild f\u00fcr den Portrait Modus fest\" width=\"1620\" height=\"940\"><figcaption class=\"wp-caption-text\">Lege das Hintergrundbild f\u00fcr den Portrait Modus fest<\/figcaption><\/figure>\n<p>Speichere die \u00c4nderungen und l\u00f6sche den Cache. Gehe dann auf das Frontend deiner Webseite, um die neue Hintergrundfarbe zu sehen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-color.png\" alt=\"\u00dcberpr\u00fcfe das Frontend deiner Webseite\" width=\"1920\" height=\"1040\"><figcaption class=\"wp-caption-text\">\u00dcberpr\u00fcfe das Frontend deiner Webseite<\/figcaption><\/figure>\n<p>Weitere Einstellungen, die du ber\u00fccksichtigen solltest, sind die Schriftfarbe, die Schriftfamilie und die Hintergrundunsch\u00e4rfe.<\/p>\n<p>Wir empfehlen auch, dar\u00fcber nachzudenken, ob du einen Frontend-Login brauchst oder nicht. So k\u00f6nnen sich die Nutzer in ihre Konten einloggen und bei Bedarf Zugriff auf die Profile erhalten.<\/p>\n<p>Sobald alles fertig ist, klicke auf den Button <strong>\u00c4nderungen speichern<\/strong>.<\/p>\n<figure style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-setttings.png\" alt=\"Lege die Schriftfarbe fest\" width=\"1366\" height=\"926\"><figcaption class=\"wp-caption-text\">Lege die Schriftfarbe fest<\/figcaption><\/figure>\n<p>Das Maintenance Plugin bietet auch mehrere vorgefertigte Themes mit sch\u00f6nen Hintergrundbildern und professionell gestalteten Layouts und Texten.<\/p>\n<p>Du kannst Themes f\u00fcr die &#8222;Coming Soon&#8220;-Seite und Wartungslayouts finden, zusammen mit Seiten zum Sammeln von E-Mail-Adressen und anderen Kontaktinformationen.<\/p>\n<p>Du musst die Themes kaufen, um sie nutzen zu k\u00f6nnen.<\/p>\n<figure style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themess.png\" alt=\"Kauf eines Premium Themes\" width=\"1471\" height=\"940\"><figcaption class=\"wp-caption-text\">Kauf eines Premium Themes<\/figcaption><\/figure>\n<p>Je nach Budget sind sie recht preiswert und sehen toll aus.<\/p>\n<figure style=\"width: 1775px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/example-3.png\" alt=\"Ein Beispiel f\u00fcr ein Template\" width=\"1775\" height=\"924\"><figcaption class=\"wp-caption-text\">Ein Beispiel f\u00fcr ein Template<\/figcaption><\/figure>\n<p>F\u00fcr diejenigen, die kein Theme kaufen m\u00f6chten, stehen alle oben genannten Einstellungen zur Verf\u00fcgung. Du kannst auch in das Custom CSS Modul gehen, um deine Wartungsseite und dein Hintergrundbild zu konfigurieren, wie du willst.<\/p>\n<figure style=\"width: 1391px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/other-setss.png\" alt=\"Gehe zum Modul 'Custom CSS'\" width=\"1391\" height=\"940\"><figcaption class=\"wp-caption-text\">Gehe zum Modul &#8218;Custom CSS&#8216;<\/figcaption><\/figure>\n<p>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 <strong>Clear Cache<\/strong>-Button.<\/p>\n<p>Du findest den <strong>Clear Cache<\/strong>-Button in der oberen rechten Ecke des Dashboards, wenn du Kinsta benutzt. Wenn du einen anderen Host verwendest, solltest du eines der vielen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cache-loschen\/\">Caching Plugins auf dem Markt<\/a> in Betracht ziehen.<\/p>\n<figure style=\"width: 1830px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/clear-cache-sss.png\" alt=\"Klicke auf den 'Cache l\u00f6schen' Button\" width=\"1830\" height=\"777\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Cache l\u00f6schen&#8216; Button<\/figcaption><\/figure>\n<p>Sobald du den Cache geleert und deine Einstellungen gespeichert hast, solltest du ein sch\u00f6nes Hintergrundbild sehen, das die Wartungsseite erg\u00e4nzt!<\/p>\n<figure style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/regular-programing.png\" alt=\"\u00dcberpr\u00fcfe die Wartungsseite\" width=\"1701\" height=\"888\"><figcaption class=\"wp-caption-text\">\u00dcberpr\u00fcfe die Wartungsseite<\/figcaption><\/figure>\n<h3>Wie man einen WordPress Hintergrund mit einem Page Builder eines Drittanbieters hinzuf\u00fcgt<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Unser Artikel \u00fcber die besten Page Builder<\/a> bietet eine Liste von Optionen f\u00fcr 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\u00f6sungen.<\/p>\n<p>Im folgenden Abschnitt wird erkl\u00e4rt, wie du einen Hintergrund mit einigen beliebten Page Buildern implementierst, darunter Elementor, Beaver Builder und Page Builder by SiteOrigin.<\/p>\n<h4>Einen WordPress Hintergrund mit Elementor hinzuf\u00fcgen<\/h4>\n<p>Elementor, der beliebte Page Builder, der die Produktion von Webseiten drastisch beschleunigen soll, bietet ein kostenloses Plugin mit verschiedenen Tools f\u00fcr Hintergrundbilder.<\/p>\n<p>Au\u00dferdem bietet Elementor visuelle Hintergrundflexibilit\u00e4t f\u00fcr verschiedene Teile deiner Webseite, anstatt Hintergr\u00fcnde auf die gesamte Webseite zu beschr\u00e4nken. So kannst du zum Beispiel hinter jedem Bausteinabschnitt einen Hintergrund einf\u00fcgen und von Seite zu Seite unterschiedliche Hintergr\u00fcnde anzeigen.<\/p>\n<p>Um zu beginnen, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/#elementor\">installiere und aktiviere das Elementor Plugin<\/a>.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Elementor Plugin\" width=\"1324\" height=\"435\"><figcaption class=\"wp-caption-text\">Elementor Plugin<\/figcaption><\/figure>\n<p>Elementor verstreut seine Hintergrundeinstellungen \u00fcber den ganzen Builder, was es einfach macht, ein Element auszuw\u00e4hlen 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.<\/p>\n<p>In diesem Fall gehen wir auf die Homepage unserer Webseite, die wir testen. Besuche die Seite deiner Wahl, indem du aus der Liste unter <strong>Seiten &gt; Alle Seiten<\/strong> ausw\u00e4hlst. Das Gleiche kannst du auch mit <strong>Posts<\/strong> machen.<\/p>\n<p>Sobald du dich im Standard-WordPress-Seiteneditor befindest, klicke auf den Button <strong>Mit Elementor bearbeiten<\/strong>.<\/p>\n<figure style=\"width: 1889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-with.png\" alt=\"Klicke auf das 'Mit Elementor bearbeiten' Plugin\" width=\"1889\" height=\"880\"><figcaption class=\"wp-caption-text\">Klicke auf das &#8218;Mit Elementor bearbeiten&#8216; Plugin<\/figcaption><\/figure>\n<p>Dadurch verschiebt sich die Ansicht auf deinem Bildschirm zum Elementor Editor. Hier findest du auf der linken Seite ein Men\u00fc mit Drag-and-Drop-Modulen, um deine Seite zu erstellen und zu bearbeiten.<\/p>\n<p>Die Hintergrundfunktionalit\u00e4t ist nicht in einem Abschnitt oder Block verf\u00fcgbar, sondern in den prim\u00e4ren <strong>Einstellungen<\/strong> f\u00fcr diese Seite.<\/p>\n<p>Klicke daher auf das kleine Einstellungssymbol (es sieht aus wie ein Zahnrad) in der unteren linken Ecke des Editors.<\/p>\n<figure style=\"width: 1526px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/settings-gear.png\" alt=\"Klicke auf das Symbol f\u00fcr die Einstellungen\" width=\"1526\" height=\"935\"><figcaption class=\"wp-caption-text\">Klicke auf das Symbol f\u00fcr die Einstellungen<\/figcaption><\/figure>\n<p>Dies zeigt einen Bereich f\u00fcr allgemeine Seiteneinstellungen.<\/p>\n<p>Klicke auf den Reiter <strong>Stil<\/strong> oben im Bereich der <strong>Seiteneinstellungen<\/strong>.<\/p>\n<figure style=\"width: 1861px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/style-of.png\" alt=\"Gehe zum Reiter 'Stil'\" width=\"1861\" height=\"910\"><figcaption class=\"wp-caption-text\">Gehe zum Reiter &#8218;Stil&#8216;<\/figcaption><\/figure>\n<p>Unter Stil suchst du das Feld <strong>Hintergrundtyp<\/strong> und klickst auf das <strong>Pinselsymbol<\/strong>, um einen Standardhintergrund hinzuzuf\u00fcgen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/classic.png\" alt=\"Einstellung des Feldes 'Hintergrund Typ'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Einstellung des Feldes &#8218;Hintergrund Typ&#8216;<\/figcaption><\/figure>\n<p>Als N\u00e4chstes w\u00e4hlst du die Art des Hintergrunds aus, der erscheinen soll. Mit dem Feld <strong>Farbe<\/strong> kannst du zum Beispiel einen einfarbigen Hintergrund ausw\u00e4hlen. Es gibt auch eine Option &#8222;<strong>Farbverlauf<\/strong>&#8220; im Feld &#8222;<strong>Hintergrundtyp<\/strong>&#8222;, wenn das mehr dein Stil ist.<\/p>\n<figure style=\"width: 1826px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-color.png\" alt=\"Das Feld f\u00fcr die Hintergrundfarbe einstellen\" width=\"1826\" height=\"940\"><figcaption class=\"wp-caption-text\">Das Feld f\u00fcr die Hintergrundfarbe einstellen<\/figcaption><\/figure>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Bild ausw\u00e4hlen<\/strong> unter dem Feld Bild, um deine <strong>Mediathek<\/strong> aufzurufen und ein passendes Hintergrundbild f\u00fcr diese Seite auszuw\u00e4hlen.<\/p>\n<figure style=\"width: 1560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-image-s-s.png\" alt=\"Klicke auf die Schaltfl\u00e4che 'Bild ausw\u00e4hlen'.\" width=\"1560\" height=\"857\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;Bild ausw\u00e4hlen&#8216;.<\/figcaption><\/figure>\n<p>Wie immer testest du deine Hintergrundbilder und h\u00e4ltst dich an die optimalen Abmessungen und Best Practices (hohe Aufl\u00f6sung und Hochformat f\u00fcr die meisten), dann w\u00e4hlst du das Bild aus, das gut funktioniert und klickst auf die Schaltfl\u00e4che <strong>Medien einf\u00fcgen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inserting.png\" alt=\"Klicke auf die Schaltfl\u00e4che 'Medien einf\u00fcgen'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;Medien einf\u00fcgen&#8216;<\/figcaption><\/figure>\n<p>Das ausgew\u00e4hlte Hintergrundbild erscheint nun in der Elementor Webseite Vorschau auf der rechten Seite. M\u00f6glicherweise musst du andere Teile deines Inhalts anpassen, um sicherzustellen, dass Elemente wie Text und Bilder angezeigt werden, wenn sie \u00fcber dem Hintergrund liegen.<\/p>\n<p>Elementor bietet Einstellungen f\u00fcr das Hintergrundbild wie Position, Anbringung, Wiederholung und Gr\u00f6\u00dfe des WordPress Hintergrundbildes. \u00c4ndere die Einstellungen, um zu bestimmen, ob dein Hintergrund besser als fester Anhang aussieht, oder vielleicht mit einer Ausrichtung oben rechts oder einer anderen Gr\u00f6\u00dfe.<\/p>\n<p>Dr\u00fccke den <strong>Update<\/strong>-Button, um alle \u00c4nderungen zu speichern und den neuen Hintergrund deiner Webseite zu ver\u00f6ffentlichen.<\/p>\n<figure style=\"width: 1728px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/updateing.png\" alt=\"Hinzuf\u00fcgen eines neuen Hintergrunds\" width=\"1728\" height=\"890\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen eines neuen Hintergrunds<\/figcaption><\/figure>\n<h5>Abschnittshintergr\u00fcnde mit Elementor<\/h5>\n<p>Elementor bietet eine erweiterte Hintergrundfunktionalit\u00e4t f\u00fcr die meisten Abschnitte, die zu deinen Seiten hinzugef\u00fcgt werden.<\/p>\n<p>Alles, was du tun musst, ist einen Abschnitt auf einer Elementor-Seite auszuw\u00e4hlen und die Hintergrundeinstellungen zu \u00e4ndern, um den Hintergrund auf diesen Bereich zu beschr\u00e4nken.<\/p>\n<p>Zum Beispiel k\u00f6nnen wir diesen <strong>Texteditor<\/strong>-Abschnitt ausw\u00e4hlen, um die Einstellungen des Text-Abschnitts zu sehen.<\/p>\n<figure style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-the-right-one.png\" alt=\"W\u00e4hle den Textabschnitt mit Elementor\" width=\"1329\" height=\"940\"><figcaption class=\"wp-caption-text\">W\u00e4hle den Textabschnitt mit Elementor<\/figcaption><\/figure>\n<p>W\u00e4hle die Registerkarte &#8222;<strong>Erweitert<\/strong>&#8220; und suche den Abschnitt &#8222;<strong>Hintergrund<\/strong>&#8220; in dieser Registerkarte.<\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-ad.png\" alt=\"Gehe zum Abschnitt 'Hintergrund'\" width=\"1440\" height=\"831\"><figcaption class=\"wp-caption-text\">Gehe zum Abschnitt &#8218;Hintergrund&#8216;<\/figcaption><\/figure>\n<p>Die Einstellungen f\u00fcr den <strong>Hintergrund<\/strong> beinhalten <strong>Hintergrundtyp<\/strong>, <strong>Farbe<\/strong>, <strong>Bild<\/strong> und mehr, \u00e4hnlich wie die Einstellungen f\u00fcr den allgemeinen Seitenhintergrund, die wir gesehen haben. Der einzige Unterschied ist, dass es diese Einstellungen auf den ausgew\u00e4hlten Bereich beschr\u00e4nkt.<\/p>\n<p>W\u00e4hle das <strong>Pinselsymbol<\/strong> f\u00fcr <strong>Hintergrundtyp<\/strong> und klicke dann auf die Schaltfl\u00e4che <strong>Bild ausw\u00e4hlen<\/strong> unter dem Feld <strong>Bild<\/strong>.<\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choosing-it.png\" alt=\"Klicke auf die Schaltfl\u00e4che 'Bild ausw\u00e4hlen'.\" width=\"1440\" height=\"811\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;Bild ausw\u00e4hlen&#8216;.<\/figcaption><\/figure>\n<p>W\u00e4hle ein Bild aus der <strong>Mediathek<\/strong> und klicke auf die Schaltfl\u00e4che <strong>Medien<\/strong> <strong>einf\u00fcgen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inset-media-3.png\" alt=\"W\u00e4hle das Bild aus und klicke auf die Schaltfl\u00e4che 'Medien einf\u00fcgen'.\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle das Bild aus und klicke auf die Schaltfl\u00e4che &#8218;Medien einf\u00fcgen&#8216;.<\/figcaption><\/figure>\n<p>Wie du sehen kannst, bleibt das Hintergrundbild innerhalb der Grenzen des Abschnitts, w\u00e4hrend es sich hinter dem Inhalt befindet, der bereits f\u00fcr diesen Abschnitt erstellt wurde.<\/p>\n<p>Benutze die Selektoren <strong>Position<\/strong>, <strong>Attachment<\/strong>, <strong>Repeat<\/strong> und <strong>Size<\/strong>, um zu \u00e4ndern, wie das Hintergrundbild im Abschnitt dargestellt wird.<\/p>\n<p>Klicke zum Schluss auf die Schaltfl\u00e4che <strong>Aktualisieren<\/strong>, um deine \u00c4nderungen zu speichern.<\/p>\n<figure style=\"width: 1752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-t-e.png\" alt=\"Klicke auf 'Aktualisieren' um die \u00c4nderungen zu sehen\" width=\"1752\" height=\"940\"><figcaption class=\"wp-caption-text\">Klicke auf &#8218;Aktualisieren&#8216; um die \u00c4nderungen zu sehen<\/figcaption><\/figure>\n<h4>Hinzuf\u00fcgen eines Hintergrundbildes mit Beaver Builder<\/h4>\n<p>Das Beaver Builder Plugin enth\u00e4lt eine Lite-Version mit einigen grundlegenden Hintergrund-Tools. Es ist einer der beliebtesten Page Builder auf dem Markt und bietet viele Inhaltsmodule f\u00fcr Elemente wie Videos, Bilder, Abs\u00e4tze und mehr.<\/p>\n<p>Au\u00dferdem 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.<\/p>\n<p>Installiere zun\u00e4chst das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/#beaver-builder\">Beaver Builder Plugin<\/a>, um loszulegen.<\/p>\n<figure style=\"width: 1331px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bb-s.png\" alt=\"Beaver Builder Plugin\" width=\"1331\" height=\"435\"><figcaption class=\"wp-caption-text\">Beaver Builder Plugin<\/figcaption><\/figure>\n<p>Gehe zu einer beliebigen Seite oder einem Beitrag, um es mit dem Beaver Builder zu bearbeiten.<\/p>\n<p>Du musst zuvor erstellte Seiten in das Beaver Builder-Format konvertieren. Alternativ hast du die M\u00f6glichkeit, eine Seite von Grund auf neu zu erstellen und die Seite in Beaver Builder zu bearbeiten.<\/p>\n<p>Um eine aktuelle Seite in Beaver Builder zu konvertieren, \u00f6ffne den Seiteneditor und klicke auf das Symbol mit den drei Punkten, um das Men\u00fc Ansicht in der oberen rechten Ecke zu \u00f6ffnen.<\/p>\n<figure style=\"width: 1903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/three-dots.png\" alt=\"Gehe zum Einstellungsmen\u00fc der Seite\" width=\"1903\" height=\"854\"><figcaption class=\"wp-caption-text\">Gehe zum Einstellungsmen\u00fc der Seite<\/figcaption><\/figure>\n<p>Scrolle nach unten, um den Link In <strong>Beaver Builder konvertieren<\/strong> zu finden und zu w\u00e4hlen.<\/p>\n<p>Es versucht, alle Inhalte auf deiner Seite zu kompilieren und diese Elemente in kompatible Beaver Builder Module zu verschieben.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/convert-to-beaver.png\" alt=\"Klicke auf den Link 'Zu Beaver Builder konvertieren'\" width=\"1616\" height=\"821\"><figcaption class=\"wp-caption-text\">Klicke auf den Link &#8218;Zu Beaver Builder konvertieren&#8216;<\/figcaption><\/figure>\n<p>Um eine Seite von Grund auf neu zu erstellen, gehe zu <strong>Seiten &gt; Neu hinzuf\u00fcgen<\/strong>.<\/p>\n<p>Klicke dann auf die Schaltfl\u00e4che <strong>Beaver Builder starten<\/strong>.<\/p>\n<figure style=\"width: 1854px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/launch-bb.png\" alt=\"Klicke auf die Schaltfl\u00e4che 'Beaver Builder starten'.\" width=\"1854\" height=\"884\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;Beaver Builder starten&#8216;.<\/figcaption><\/figure>\n<p>Das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/#beaver-builder\">Beaver Builder<\/a> Plugin bringt dich zu einer Frontansicht der Webseite. Es nimmt den gr\u00f6\u00dften Teil des Bildschirms ein und fungiert als echter Frontend-Editor, in dem du auf die Elemente klickst und die Boxen mit deiner Maus verschiebst.<\/p>\n<p>\u00a0<\/p>\n<p>Die erste M\u00f6glichkeit, einen Hintergrund \u00fcber den Beaver Builder hinzuzuf\u00fcgen, ist das Hochladen eines Hintergrunds in einen Abschnittsblock. Dieser kann den gr\u00f6\u00dften Teil der Seite einnehmen oder nur einen Bruchteil, abh\u00e4ngig von der Gr\u00f6\u00dfe deines Sektionsblocks.<\/p>\n<p>\u00a0<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Sobald du ihn ausgew\u00e4hlt hast, suche die Schaltfl\u00e4che <strong>Zeileneinstellungen<\/strong> (das <\/span><strong style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">\u2699<\/strong><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"> -Symbol).<\/span><\/p>\n<p>Klicke auf dieses Symbol, um die Einstellungen f\u00fcr diese Reihe zu \u00f6ffnen. Du kannst dies auch mit Abschnitten und Spalten und anderen Arten von Bl\u00f6cken machen.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/row-sets.png\" alt=\"Bearbeiten der Zeileneinstellungen\" width=\"1900\" height=\"813\"><figcaption class=\"wp-caption-text\">Bearbeiten der Zeileneinstellungen<\/figcaption><\/figure>\n<p>Oben in der Vorschau deiner Webseite erscheint ein Einstellungsfenster. Klicke auf den Reiter <strong>Stil<\/strong> und suche dann nach dem Abschnitt Hintergrund.<\/p>\n<p>Klicke unter <strong>Hintergrund<\/strong> auf das Dropdown-Men\u00fc, um alle Hintergrundtypen anzuzeigen.<\/p>\n<figure style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/finishing.png\" alt=\"Gehe zum Reiter 'Stil'\" width=\"1316\" height=\"775\"><figcaption class=\"wp-caption-text\">Gehe zum Reiter &#8218;Stil&#8216;<\/figcaption><\/figure>\n<p>Du hast mehrere Hintergrundtypen zu ber\u00fccksichtigen, einer davon ist f\u00fcr ein Foto. Die anderen umfassen:<\/p>\n<ul>\n<li>Farbe<\/li>\n<li>Farbverlauf<\/li>\n<li>Video<\/li>\n<li>Eingebetteter Code<\/li>\n<\/ul>\n<figure style=\"width: 1315px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-type.png\" alt=\"Setze den Typ f\u00fcr das WordPress Hintergrundbild\" width=\"1315\" height=\"742\"><figcaption class=\"wp-caption-text\">Setze den Typ f\u00fcr das WordPress Hintergrundbild<\/figcaption><\/figure>\n<p>Probiere ruhig die verschiedenen Hintergrundtypen aus.<\/p>\n<p>Du kannst zum Beispiel feststellen, dass ein Hintergrund mit Farbverlauf besser aussieht als ein Bild. Jeder der Hintergrundtypen hat seine eigenen Einstellungen. Der Typ <strong>Farbverlauf<\/strong> fragt in diesem Fall nach zwei Farben, damit der Farbverlauf von einer zur anderen geht.<\/p>\n<figure style=\"width: 1780px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-gradient.png\" alt=\"Abschnitt '\u00dcber das Unternehmen'\" width=\"1780\" height=\"837\"><figcaption class=\"wp-caption-text\">Abschnitt &#8218;\u00dcber das Unternehmen&#8216;<\/figcaption><\/figure>\n<p>Wenn du dich f\u00fcr den Fotohintergrund entscheidest, kannst du aus der Mediathek w\u00e4hlen oder eine URL f\u00fcr das Bild einf\u00fcgen. Klicke auf den Link <strong>Foto ausw\u00e4hlen<\/strong>, wenn du die Fotoquelle aus der Medienbibliothek verwendest.<\/p>\n<figure style=\"width: 1811px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-photo.png\" alt=\"Klicke auf den Link 'Foto ausw\u00e4hlen'\" width=\"1811\" height=\"795\"><figcaption class=\"wp-caption-text\">Klicke auf den Link &#8218;Foto ausw\u00e4hlen&#8216;<\/figcaption><\/figure>\n<p>Finde dein Lieblingshintergrundfoto und klicke auf die Schaltfl\u00e4che <strong>Foto ausw\u00e4hlen<\/strong>.<\/p>\n<figure style=\"width: 1871px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-a-phot.png\" alt=\"W\u00e4hle die Medien\" width=\"1871\" height=\"894\"><figcaption class=\"wp-caption-text\">W\u00e4hle die Medien<\/figcaption><\/figure>\n<p>Beaver Builder f\u00fcgt das Foto in den zuvor gew\u00e4hlten Hintergrundbereich ein. Der Bereich Fotoeinstellungen fragt dich, wie du das Foto formatieren m\u00f6chtest. W\u00e4hle aus Optionen wie <strong>Gr\u00f6\u00dfe<\/strong>, <strong>Wiederholung<\/strong>, <strong>Position<\/strong> und <strong>Anh\u00e4ngen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-sets.png\" alt=\"Setze die Gr\u00f6\u00dfe des Hintergrundbildes\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Setze die Gr\u00f6\u00dfe des Hintergrundbildes<\/figcaption><\/figure>\n<h5>Globale und ganzseitige Beaver Builder Hintergrundfotos<\/h5>\n<p>Beaver Builder arbeitet mit den standardm\u00e4\u00dfigen WordPress Design Tools, um die Vorteile der eingebauten Hintergrundfunktionen zu nutzen.<\/p>\n<p>Daher kannst du auf den Reiter <strong>Erscheinungsbild &gt; Hintergrund<\/strong> gehen, um einen Fotohintergrund f\u00fcr deine gesamte Webseite zu aktivieren.<\/p>\n<p>Alternativ \u00f6ffnest du eine beliebige Webseite in Beaver Builder und klickst auf das Dropdown-Men\u00fc <strong>Tools<\/strong> in der oberen linken Ecke.<\/p>\n<p>Hier klickst du auf die Option <strong>Globale Einstellungen<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/global.png\" alt=\"Globale Einstellungen' f\u00fcr Beaver Builder\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Globale Einstellungen&#8216; f\u00fcr Beaver Builder<\/figcaption><\/figure>\n<p>Das Globale Einstellungspanel bietet die M\u00f6glichkeit, deine gesamte Webseite zu ver\u00e4ndern, indem es den eingebauten WordPress-Code au\u00dfer Kraft setzt oder modifiziert. Daher m\u00f6chten wir einen CSS-Codeblock einf\u00fcgen, um das Hintergrundbild der gesamten Webseite (global) zu \u00e4ndern.<\/p>\n<p>Klicke auf den Reiter CSS in den Globalen Einstellungen und f\u00fcge das folgende Codesegment in das Feld ein:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Ersetze den Text <strong>URL to Image<\/strong> durch die URL zum gew\u00fcnschten Hintergrundfoto. Du kannst auch Dinge wie Wiederholungsfunktion, Anhang und Hintergrundgr\u00f6\u00dfe mit dem CSS-Code \u00e4ndern.<\/p>\n<\/div>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/css-to-bg.png\" alt=\"Gehe zum Reiter CSS\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Gehe zum Reiter CSS<\/figcaption><\/figure>\n<p>Es macht mehr Sinn, Beaver Builder f\u00fcr benutzerdefinierte Seitenhintergr\u00fcnde zu verwenden, da jede Seite ihr eigenes Bild als Hintergrund hat.<\/p>\n<p>\u00d6ffne in deinem Seiteneditor wieder das Men\u00fc <strong>Tools<\/strong>.<\/p>\n<p>W\u00e4hle die Option <strong>Layout CSS &#038; Javascript<\/strong>.<\/p>\n<figure style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/layout.png\" alt=\"Layout CSS &#038; JavaScript Taste\" width=\"1370\" height=\"881\"><figcaption class=\"wp-caption-text\">Layout CSS &#038; JavaScript Taste<\/figcaption><\/figure>\n<p>F\u00fcge den gleichen Code in den CSS-Tab ein, \u00e4ndere die <strong>URL zu Bild<\/strong>-Text in die tats\u00e4chliche URL und passe alle Einstellungen an, die du m\u00f6chtest:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Wie du sehen kannst, \u00e4ndert sich der gesamte Hintergrund in das URL-Bild, das du in der CSS-Codierung hast. Beachte, dass das <strong>Layout CSS \/ Javascript Panel<\/strong> nur die aktuelle Seite steuert. Du wirst den Hintergrund auf keiner anderen Seite als dieser sehen.<\/p>\n<\/div>\n<div><\/div>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/only-this-page.png\" alt=\"Hinzuf\u00fcgen von benutzerdefiniertem CSS\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen von benutzerdefiniertem CSS<\/figcaption><\/figure>\n<h4>F\u00fcge einen einfachen Zeilen- oder Widget-Hintergrund mit dem Page Builder von SiteOrigin hinzu<\/h4>\n<p>Der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/#siteorigin\">Page Builder von SiteOrigin<\/a> ist ein weiteres visuelles Tool zur Erstellung von Webseiten per Drag-and-Drop. Es ist begrenzt in seiner F\u00e4higkeit, Hintergr\u00fcnde f\u00fcr die gesamte Webseite einzuf\u00fcgen (du musst auf das Standard WordPress Custom Background Tool zur\u00fcckgreifen). Dennoch bietet es Einstellungen zum Hinzuf\u00fcgen von Hintergrundbildern und Farben f\u00fcr Zeilen und Widgets, die von SiteOrigin verwendet werden.<\/p>\n<p>Als erstes musst du das Plugin Page Builder by SiteOrigin herunterladen und aktivieren.<\/p>\n<figure style=\"width: 1520px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/siteor.png\" alt=\"Page Builder by SiteOrigin Plugin\" width=\"1520\" height=\"493\"><figcaption class=\"wp-caption-text\">Page Builder by SiteOrigin Plugin<\/figcaption><\/figure>\n<p>Navigiere zu einer neuen Seite oder \u00fcberlege dir, ob du eine SiteOrigin-Zeile zu einer aktuellen Seite auf der Webseite hinzuf\u00fcgen m\u00f6chtest.<\/p>\n<p>Jeder SiteOrigin Bereich fordert dich auf, ein <strong>Widget <\/strong>oder eine<strong> Zeile hinzuzuf\u00fcgen<\/strong>. Du hast auch die M\u00f6glichkeit, durch die <strong>vorgefertigten Layouts<\/strong> zu st\u00f6bern, wenn du ein Design nicht von Grund auf neu beginnen m\u00f6chtest.<\/p>\n<p>Die gute Nachricht ist, dass sowohl Widgets als auch Zeilen in SiteOrigin die M\u00f6glichkeit haben, Hintergrundbilder einzubinden.<\/p>\n<p>Klicke daher auf die Schaltfl\u00e4che <strong>Widget hinzuf\u00fcgen<\/strong> oder <strong>Zeile hinzuf\u00fcgen<\/strong>, um fortzufahren.<\/p>\n<figure style=\"width: 1896px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row-or-widget.png\" alt=\"Ein neues Widget oder eine Reihe hinzuf\u00fcgen\" width=\"1896\" height=\"822\"><figcaption class=\"wp-caption-text\">Ein neues Widget oder eine Reihe hinzuf\u00fcgen<\/figcaption><\/figure>\n<p>In diesem Beispiel schauen wir uns die <strong>Widgets<\/strong>-Bibliothek an.<\/p>\n<p>Hier kannst du eines der vielen Widgets ausw\u00e4hlen, die SiteOrigin anbietet, von Navigationsmen\u00fcs und Seiten bis hin zu Beitragsinhalten und Produktlisten.<\/p>\n<p>Wir w\u00e4hlen das <strong>Produkte<\/strong>-Widget f\u00fcr dieses Beispiel, aber du kannst auch eines der vielen anderen Widgets w\u00e4hlen, je nach den <a href=\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\">Bed\u00fcrfnissen deines Designs<\/a>. Au\u00dferdem kannst du diese Widgets mit einer Reihe gruppieren und dann ein Hintergrundbild zu dieser Reihe hinzuf\u00fcgen, damit der Hintergrund hinter mehreren Widgets erscheint.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-a-widg.png\" alt=\"W\u00e4hle das 'Produkte' Widget\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">W\u00e4hle das &#8218;Produkte&#8216; Widget<\/figcaption><\/figure>\n<p>Das neue <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/\">Widget<\/a> oder die neue Zeile landet im SiteOrigin-Seiteneditor. Der gr\u00f6\u00dfte Teil von SiteOrigin verbleibt im WordPress Dashboard, daher gibt es nicht so viel Frontend-Editor wie bei anderen Page Buildern.<\/p>\n<p>Um einen Hintergrund zu einem SiteOrigin-Element hinzuzuf\u00fcgen, scrolle \u00fcber das Element und klicke auf den Link <strong>Bearbeiten<\/strong>.<\/p>\n<figure style=\"width: 1516px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-the-row.png\" alt=\"Klicke auf den 'Bearbeiten' Link\" width=\"1516\" height=\"808\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Bearbeiten&#8216; Link<\/figcaption><\/figure>\n<p>Ich habe das <strong>Produkte<\/strong>-Widget f\u00fcr dieses Beispiel gew\u00e4hlt, aber jedes Widget hat seine eigenen Einstellungen, um zu konfigurieren, wie es auf deiner Webseite aussieht.<\/p>\n<p>Die Hintergrund-Tools befinden sich unterhalb des <strong>Design<\/strong>-Dropdown-Men\u00fcs. Klicke darauf, um vorw\u00e4rts zu kommen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/design-it.png\" alt=\"Der 'Design' Reiter f\u00fcr das WordPress Hintergrundbild\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Der &#8218;Design&#8216; Reiter f\u00fcr das WordPress Hintergrundbild<\/figcaption><\/figure>\n<p>Finde das Feld <strong>Hintergrundbild<\/strong> und klicke auf die Schaltfl\u00e4che <strong>Bild ausw\u00e4hlen<\/strong>.<\/p>\n<p>Du hast auch die M\u00f6glichkeit, eine <strong>externe URL<\/strong> f\u00fcr das Hintergrundbild einzuf\u00fcgen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-bg-image.png\" alt=\"Auswahl des Hintergrundbildes und der Farbe\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Auswahl des Hintergrundbildes und der Farbe<\/figcaption><\/figure>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-medienbibliothek\/\">Medienbibliothek<\/a> zeigt dir die aktuellen Bilder, die du in WordPress hochgeladen hast. Klicke auf das Bild, das f\u00fcr diesen Hintergrund am besten funktioniert und w\u00e4hle den <strong>Done<\/strong>-Button, um es in das SiteOrigin-Modul zu legen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-it-o-o.png\" alt=\"Klicke auf den 'Done' Button\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Klicke auf den &#8218;Done&#8216; Button<\/figcaption><\/figure>\n<p>Das Feld Hintergrundbild zeigt nun eine Miniaturversion des Fotos an.<\/p>\n<p>Scrolle nach unten durch die Einstellungen, um alles zu konfigurieren, von der <strong>Anzeige des Hintergrundbildes<\/strong> bis zur <strong>Schriftfarbe<\/strong> f\u00fcr den \u00fcberlagernden Text.<\/p>\n<p>Im Allgemeinen solltest du in der Lage sein, die gew\u00fcnschten Ergebnisse zu erzielen, indem du die Cover-Anzeige w\u00e4hlst. Es sieht so aus, als ob das SiteOrigin Plugin standardm\u00e4\u00dfig die Kacheldarstellung ausw\u00e4hlt, also musst du das eventuell \u00e4ndern.<\/p>\n<p>Klicke auf den <strong>Done<\/strong>-Button, wenn du deine Einstellungen f\u00fcr den Hintergrund abgeschlossen hast.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/adding-in.png\" alt=\"Die WordPress 'Hintergrundbild' Einstellungen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Die WordPress &#8218;Hintergrundbild&#8216; Einstellungen<\/figcaption><\/figure>\n<p>Das Widget (in diesem Fall das Produkte-Widget) kommt in den SiteOrigin WordPress <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/\">Editor<\/a> f\u00fcr diese Seite. Du kannst dieses Element an eine beliebige Stelle auf der Seite ziehen und neue Widgets und Zeilen \u00fcber und unter ihm hinzuf\u00fcgen.<\/p>\n<p>Du musst entweder auf die Schaltfl\u00e4che <strong>Vorschau<\/strong> oder <strong>Aktualisieren<\/strong> klicken und dann im Frontend der Seite navigieren, um die Ergebnisse zu sehen.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-or-prev.png\" alt=\"Gehe zum Abschnitt 'Produkte'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Gehe zum Abschnitt &#8218;Produkte&#8216;<\/figcaption><\/figure>\n<p>Der aktuelle Hintergrund, den ich hinzugef\u00fcgt habe, erscheint innerhalb der Beschr\u00e4nkungen des <strong>Produkte<\/strong>-Widgets von vorher. Dieser Hintergrund muss nat\u00fcrlich noch etwas bearbeitet werden, damit er h\u00fcbscher aussieht, aber es ist ein guter Anfang, um den Raum mit einem kreativeren Hintergrundbild zu f\u00fcllen.<\/p>\n<figure style=\"width: 1390px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/not-the-pret.png\" alt=\"Der Abschnitt Hintergrund\" width=\"1390\" height=\"711\"><figcaption class=\"wp-caption-text\">Der Abschnitt Hintergrund<\/figcaption><\/figure>\n<h4>Hinzuf\u00fcgen einzigartiger Hintergrundbilder mit Brizy<\/h4>\n<p>Der letzte Page Builder f\u00fcr diese Demonstration, Brizy, bietet stylische Templates und eine hervorragende Frontend-Oberfl\u00e4che, um ungew\u00f6hnliche Designs und schnelle Anpassungen hinzuzuf\u00fcgen.<\/p>\n<p>Der Brizy Page Builder beinhaltet ein umfangreiches Set an <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Drag-and-Drop<\/a>-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.<\/p>\n<p>Es wird dich freuen zu h\u00f6ren, dass Brizy auch ein Hintergrund-Tool f\u00fcr fast jedes Element hat, das du mit dem Page Builder einf\u00fcgst. Ganz zu schweigen davon, dass Brizy mehrere einzigartige Hintergrundstile bietet, wie z.B. das Hinzuf\u00fcgen eines Looping-Videos zum Hintergrund oder einer kompletten Karte.<\/p>\n<p>Um die Vorteile dieser Hintergrundeinstellungen zu nutzen, <a href=\"https:\/\/wordpress.org\/plugins\/brizy\/\">installiere und aktiviere das Brizy Plugin<\/a>, um loszulegen.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brizy.png\" alt=\"Das Brizy Page Builder Plugin\" width=\"1324\" height=\"434\"><figcaption class=\"wp-caption-text\">Das Brizy Page Builder Plugin<\/figcaption><\/figure>\n<p>Ein Gro\u00dfteil des Brizy-Designprozesses erfordert, dass du mit einem leeren <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-template-hierarchie\/\">Template<\/a> beginnst. Brizy wird versuchen, deine \u00e4lteren Designs in Brizy-Module zu konvertieren, aber wir finden, dass es am besten ist, von vorne anzufangen.<\/p>\n<p>Gehe zu einer <strong>Seite<\/strong> oder einem <strong>Beitrag<\/strong> in deinem WordPress Dashboard und beginne die Seite mit einem Titel und vielleicht ein paar Inhalten zu erstellen.<\/p>\n<p>Du solltest einen Button zum <strong>Bearbeiten mit Brizy<\/strong> sehen. Klicke darauf, um zum vollst\u00e4ndigen Brizy Page Builder zu gelangen.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brixy-ed.png\" alt=\"Klicke auf die Schaltfl\u00e4che 'Weiter zur Bearbeitung mit Brizy'\" width=\"1865\" height=\"815\"><figcaption class=\"wp-caption-text\">Klicke auf die Schaltfl\u00e4che &#8218;Weiter zur Bearbeitung mit Brizy&#8216;<\/figcaption><\/figure>\n<p>Der Brizy Page Builder zeigt eine vollst\u00e4ndige Vorschau deiner Webseite mit Schaltfl\u00e4chen, Text und Bildern. Wenn die Seite leer ist, klicke auf die Schaltfl\u00e4che <strong>Start Building Your Page<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/start-building.png\" alt=\"Klicke auf das Plus-Symbol, um mit dem Aufbau deiner Seite zu beginnen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Klicke auf das Plus-Symbol, um mit dem Aufbau deiner Seite zu beginnen<\/figcaption><\/figure>\n<p>Suche nach den Tabs <strong>Layouts und Bl\u00f6cke<\/strong> in der oberen Men\u00fcleiste.<\/p>\n<p>Die Layouts bieten vorgefertigte Webseiten, die mit Demo-Inhalten gef\u00fcllt und sofort einsatzbereit sind, wenn du die Inhalte deines Unternehmens anpasst. Die Bl\u00f6cke 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\u00fcrdest.<\/p>\n<p>Es spielt keine Rolle, in welche Richtung du gehst. St\u00f6bere durch die Layouts und Bl\u00f6cke und f\u00fcge der Seite so viele hinzu, wie du m\u00f6chtest. Dies sind einfach die Elemente, die du verwenden wirst, um eine komplette Webseite zu gestalten.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/blocks-and-layouts.png\" alt=\"Sektionen Layouts und Bl\u00f6cke\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Sektionen Layouts und Bl\u00f6cke<\/figcaption><\/figure>\n<p>Nachdem du ein paar Bl\u00f6cke oder Layouts auf der Webseite hast, gehe zur\u00fcck zum Editor-Bildschirm, um deine Arbeit zu betrachten.<\/p>\n<p>Du wirst sehen, dass jeder Blockabschnitt ein Einstellungssymbol auf der oberen rechten Seite des Blocks hat, das normalerweise auftaucht, wenn du \u00fcber den Abschnitt scrollst.<\/p>\n<p>Klicke auf dieses Symbol f\u00fcr den Block deiner Wahl. Wir f\u00fcgen einen Hintergrund zu diesem Block hinzu.<\/p>\n<figure style=\"width: 1583px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/every-one.png\" alt=\"Klicke auf das Symbol 'Einstellungen'.\" width=\"1583\" height=\"815\"><figcaption class=\"wp-caption-text\">Klicke auf das Symbol &#8218;Einstellungen&#8216;.<\/figcaption><\/figure>\n<p>Das Panel f\u00fcr die <strong>Blockeinstellungen<\/strong> bleibt in der oberen rechten Ecke. Scrolle \u00fcber die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-icon-fonts\/\">Men\u00fcsymbole<\/a>, um zu sehen, was sie alle tun.<\/p>\n<p>Eines davon ist f\u00fcr <strong>Farben<\/strong>, und damit ist ein farbiger Hintergrund gemeint. Du kannst das \u00e4ndern und einen Farbverlauf hinzuf\u00fcgen, wenn du lieber eine einfarbige oder farbige Hintergrundansicht haben m\u00f6chtest.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/colors-is-possible.png\" alt=\"Die 'Farbe' Taste f\u00fcr den Hintergrund\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Die &#8218;Farbe&#8216; Taste f\u00fcr den Hintergrund<\/figcaption><\/figure>\n<p>Der Icon-Button auf der linken Seite enth\u00e4lt die Einstellungen f\u00fcr den <strong>Hintergrund<\/strong>.<\/p>\n<p>Klicke auf diesen Button, um die Quick Tools zum Hochladen eines Hintergrundbildes f\u00fcr diesen Block zu \u00f6ffnen.<\/p>\n<figure style=\"width: 1551px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/abck-gro.png\" alt=\"WordPress Hintergrundbild Button\" width=\"1551\" height=\"692\"><figcaption class=\"wp-caption-text\">WordPress Hintergrundbild Button<\/figcaption><\/figure>\n<p>Brizy bietet drei Medien-Hintergrundartikel an:<\/p>\n<ul>\n<li>Bilder<\/li>\n<li>Videos<\/li>\n<li>Karten<\/li>\n<\/ul>\n<p>Probiere zuerst den Typ Bild aus, um zu verstehen, wie es mit deinem aktuellen Layout funktioniert.<\/p>\n<p>Klicke auf den <strong>Bild-Upload<\/strong>-Bereich, um ein Foto in der Mediathek zu finden und es dem Hintergrund hinzuzuf\u00fcgen.<\/p>\n<figure style=\"width: 1572px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-add.png\" alt=\"WordPress Hintergrundbild Typ\" width=\"1572\" height=\"725\"><figcaption class=\"wp-caption-text\">WordPress Hintergrundbild Typ<\/figcaption><\/figure>\n<p>F\u00fcr dieses Tutorial haben wir ein Foto einer Holzplatte gefunden und angegeben, dass wir keinen <a href=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-theme\/#customizing-the-twenty-twenty-theme\">Parallax-Effekt<\/a> haben m\u00f6chten.<\/p>\n<p>Dadurch entsteht ein angenehmer Effekt, da der farbige Hintergrund als Overlay dient, wir aber trotzdem die Textur des Holzes dahinter sehen.<\/p>\n<p>Vergiss nicht, dass du das Feld Parallaxe jederzeit anpassen kannst, um das Hintergrundbild als festen, animierten oder scrollenden Hintergrund zu gestalten.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/in-place.png\" alt=\"Hintergrundbild ohne Parallaxe\" width=\"1865\" height=\"940\"><figcaption class=\"wp-caption-text\">Hintergrundbild ohne Parallaxe<\/figcaption><\/figure>\n<p>Und so f\u00fcgst du ein Hintergrundbild mit Brizy ein!<\/p>\n<p>Das Beste an Brizy ist, dass du dich immer wieder durch das Design bewegen und auf den <strong>Einstellungsbutton<\/strong> jedes Abschnitts klicken kannst.<\/p>\n<p>Eine Sektion weiter k\u00f6nnen wir ein weiteres Hintergrundbild einf\u00fcgen, ohne viel Zeit darauf zu verwenden.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/another-section.png\" alt=\"Ein weiteres Hintergrundbild hinzuf\u00fcgen\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Ein weiteres Hintergrundbild hinzuf\u00fcgen<\/figcaption><\/figure>\n<p>Um die Leistungsf\u00e4higkeit der anderen Hintergrundtypen zu demonstrieren, k\u00f6nnen wir auf den Hintergrundtyp <strong>Karte<\/strong> klicken, eine Adresse eingeben und beobachten, wie eine Karte des Ortes direkt hinter dem Vordergrundinhalt erscheint.<\/p>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-karten-plugin\/\">Karte<\/a> wird als vollwertiger Hintergrund platziert und verf\u00fcgt \u00fcber eine Zoomfunktion, falls es mit den Standardeinstellungen nicht so richtig klappt.<\/p>\n<figure style=\"width: 1800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-map.png\" alt=\"Eine Karte als WordPress Hintergrundbild hinzuf\u00fcgen\" width=\"1800\" height=\"797\"><figcaption class=\"wp-caption-text\">Eine Karte als WordPress Hintergrundbild hinzuf\u00fcgen<\/figcaption><\/figure>\n<p>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 (<a href=\"https:\/\/kinsta.com\/de\/blog\/youtube-statistiken\/\">YouTube<\/a> oder Vimeo) einf\u00fcgt und ein komplettes Video direkt hinter dem Vordergrundinhalt rendert. Es bietet sogar die M\u00f6glichkeit, das Video in einer Schleife laufen zu lassen und auszuw\u00e4hlen, wann es starten soll, wenn der Nutzer \u00fcber den Bereich scrollt.<\/p>\n<figure style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/video-now.png\" alt=\"URL f\u00fcr WordPress Hintergrundbild\" width=\"1548\" height=\"820\"><figcaption class=\"wp-caption-text\">URL f\u00fcr WordPress Hintergrundbild<\/figcaption><\/figure>\n<p>Das animierte Gif unten gibt ein kurzes Beispiel f\u00fcr das Video in Aktion, auch wenn es wahrscheinlich etwas Bearbeitung gebrauchen k\u00f6nnte.<\/p>\n<figure style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-video.gif\" alt=\"Hintergrund mit Video\" width=\"1280\" height=\"720\"><figcaption class=\"wp-caption-text\">Hintergrund mit Video<\/figcaption><\/figure>\n<h2>Gr\u00f6\u00dfe des Hintergrundbildes, Beschaffung und grundlegende Bearbeitung<\/h2>\n<p>Wir haben bereits erw\u00e4hnt, dass es zwar keine perfekte Gr\u00f6\u00dfe f\u00fcr ein Hintergrundbild gibt, aber wir empfehlen, mit einer Gr\u00f6\u00dfe von nicht weniger als <strong>1024 x 768<\/strong> Pixeln zu beginnen und ein g\u00e4ngiges Seitenverh\u00e4ltnis wie <strong>16:9<\/strong> beizubehalten. Das Seitenverh\u00e4ltnis ist nicht so wichtig wie die tats\u00e4chliche Gr\u00f6\u00dfe und Aufl\u00f6sung des Bildes, da du das Bild zuschneiden kannst oder WordPress dies f\u00fcr dich \u00fcbernimmt.<\/p>\n<p>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.<\/p>\n<h3>Wo du geeignete Hintergrundbilder findest<\/h3>\n<p>F\u00fcr deine Suche nach Hintergrundbildern schau dir unseren Leitfaden an, wie du <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-stockfotos\/\">Stockfotos finden und hinzuf\u00fcgen kannst, ohne WordPress zu verlassen<\/a>. Wir haben auch eine <a href=\"https:\/\/kinsta.com\/de\/blog\/kiostenlose-bilder-fur-wordpress\/\">Liste von n\u00fctzlichen Marktplatz-Quellen<\/a>, um nach hochaufl\u00f6senden Stockfotos zu suchen, von denen viele kostenlos sind.<\/p>\n<p>Insgesamt empfehlen wir, zu versuchen, selbst Hintergrundbilder zu machen. Wenn das nicht m\u00f6glich ist oder du keine Erfahrung mit Fotografie oder Grafikdesign hast, solltest du dar\u00fcber nachdenken, kostenlose Stockfotografie-Ressourcen zu nutzen. Du kannst dich auch daf\u00fcr entscheiden, f\u00fcr ein Hintergrundbild von einer der vielen Premium Webseiten zu bezahlen, von denen einige eine monatliche Geb\u00fchr f\u00fcr das Herunterladen eines Haufens von Fotos verlangen.<\/p>\n<p>Einige Highlights aus diesen Links sind:<\/p>\n<ul>\n<li><a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> &#8211; Kostenlos, und keine Namensnennung erforderlich.<\/li>\n<li><a href=\"https:\/\/visualhunt.com\/\">Visual Hunt<\/a> &#8211; Kostenlose Fotos. F\u00fcr die meisten Bilder ist keine Namensnennung erforderlich.<\/li>\n<li><a href=\"https:\/\/www.pexels.com\/\">Pexels<\/a> &#8211; Kostenlos und ohne Namensnennung.<\/li>\n<li><a href=\"https:\/\/pixabay.com\/\">Pixabay<\/a> &#8211; Kostenlos und die meisten Bilder erfordern keine Namensnennung.<\/li>\n<li><a href=\"https:\/\/www.istockphoto.com\/\">iStockphoto<\/a> &#8211; Ein ziemlich g\u00fcnstiges Premium-Abonnement f\u00fcr lizenzfreie Bilder.<\/li>\n<li><a href=\"https:\/\/www.shutterstock.com\/\">Shutterstock<\/a> &#8211; Lizenzfreie Bilder f\u00fcr eine angemessene Abo-Geb\u00fchr.<\/li>\n<\/ul>\n<h3>Wie man das WordPress Hintergrundbild mit Custom CSS \u00e4ndert<\/h3>\n<p>Wie wir gelernt haben, kannst du ein WordPress Hintergrundbild mit den standardm\u00e4\u00dfig eingebauten WordPress Tools oder einem Plugin hinzuf\u00fcgen. Es spielt keine Rolle, welchen Weg du w\u00e4hlst, solange du das gew\u00fcnschte Ergebnis erh\u00e4ltst. Es gibt auch die M\u00f6glichkeit, benutzerdefinierte CSS zu verwenden, um das Hintergrundbild entweder zu stilisieren oder es deiner Webseite hinzuzuf\u00fcgen.<\/p>\n<p>Wir werden hier nicht auf die Feinheiten von CSS eingehen, da jedes Hintergrundbild und jedes Theme einen anderen Prozess haben wird. Wir empfehlen jedoch, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">unseren Leitfaden zum Bearbeiten, Hinzuf\u00fcgen und Anpassen von CSS in WordPress zu lesen<\/a>. Der Artikel enth\u00e4lt n\u00fctzliche Tipps f\u00fcr das Hinzuf\u00fcgen von Hintergrundbildern zu fast allen Bereichen einer Webseite, von Men\u00fcpunkten bis hin zu bestimmten Seitenbl\u00f6cken.<\/p>\n<h2>H\u00e4ufige Probleme mit einem WordPress Hintergrundbild beheben<\/h2>\n<p>Alle WordPress Seiten verf\u00fcgen \u00fcber die M\u00f6glichkeit, einen Hintergrund hinzuzuf\u00fcgen. Das bedeutet jedoch nicht, dass die Kernfunktion f\u00fcr alle Webseiten funktioniert. Du k\u00f6nntest zum Beispiel feststellen, dass das von dir verwendete Theme keinen Support f\u00fcr benutzerdefinierte Hintergr\u00fcnde bietet. Oder du l\u00e4dst immer wieder einen Hintergrund hoch, aber er sieht nicht richtig aus (zu gro\u00df oder zu unscharf).<\/p>\n<p>Ein Problem mit einem WordPress-Hintergrund ist frustrierend und kommt leider recht h\u00e4ufig vor. Im Folgenden haben wir einige der h\u00e4ufigsten Probleme mit Hintergrundbildern zusammengestellt und die jeweiligen L\u00f6sungsans\u00e4tze aufgezeigt.<\/p>\n<h3 class=\"title style-scope ytd-video-primary-info-renderer\">Wie man die 5 h\u00e4ufigsten Probleme mit Hintergrundbildern in WordPress behebt<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=kVmAoW9kBZg\"><\/kinsta-video>\n<h3>Mein Theme unterst\u00fctzt kein WordPress Hintergrundbild<\/h3>\n<p>Theme-Entwickler haben die Kontrolle \u00fcber die Custom Backgrounds Funktion in WordPress. Sie k\u00f6nnen es ein- oder ausschalten, je nachdem, ob sie den Support f\u00fcr benutzerdefinierte Hintergr\u00fcnde aktivieren m\u00f6chten. Der Hintergrund wird ausgeschaltet, wenn er entweder nicht ben\u00f6tigt wird, oder wenn er mit dem Design des Themes in Konflikt steht.<\/p>\n<p>Wenn du feststellst, dass dein Theme entweder keinen Support f\u00fcr einen benutzerdefinierten Hintergrund bietet oder es deine M\u00f6glichkeiten beim Hinzuf\u00fcgen eines Hintergrunds einschr\u00e4nkt, solltest du diese L\u00f6sungen in Betracht ziehen:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">Tausche das Theme gegen eines aus<\/a>, das benutzerdefinierte Hintergr\u00fcnde unterst\u00fctzt. Achte beim Kauf oder Download von Themes auf benutzerdefinierte Hintergr\u00fcnde in den Funktionslisten.<\/li>\n<li>Verwende ein Hintergrund Plugin, um die Standardfunktion f\u00fcr benutzerdefinierte Hintergr\u00fcnde zu \u00fcberschreiben, die blockiert ist.<\/li>\n<\/ul>\n<p>Obwohl es m\u00f6glich ist, dein eigenes Coding einzubauen oder in die Theme-Dateien zu gehen, um eigene Hintergr\u00fcnde zu erstellen, raten wir von beiden Optionen ab. Am besten suchst du dir ein Theme, das Hintergr\u00fcnde unterst\u00fctzt oder f\u00fcgst ein Plugin hinzu, das Hintergr\u00fcnde zul\u00e4sst, aber die Funktionalit\u00e4t des Themes nicht zu sehr beeintr\u00e4chtigt.<\/p>\n<h3>Mein WordPress Hintergrundbild ist zu dunkel oder hat die falsche Farbe<\/h3>\n<p>Ein abgedunkeltes Hintergrundbild kann von vielen Einstellungen herr\u00fchren, die neben dem Hintergrundbild selbst laufen. Meistens hat es mit einem \u00fcberlagernden Filter oder einem schlecht gef\u00e4rbten Hintergrund zu tun.<\/p>\n<p>In den meisten F\u00e4llen, in denen der Hintergrund verf\u00e4rbt ist, musst du dein Theme oder Plugin \u00fcberpr\u00fcfen, das den Hintergrund selbst steuert.<\/p>\n<p>Suche nach einer Einstellung in der N\u00e4he 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.<\/p>\n<p>Wenn alles andere fehlschl\u00e4gt, kann es sein, dass das Theme einen Hintergrundfilter fest in die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-dateien\/\">Theme-Dateien<\/a> einkodiert hat. In diesem Fall kontaktiere den Theme-Entwickler, um eine Idee zu bekommen, was m\u00f6glich ist, um die Hintergrundfarbe zu korrigieren.<\/p>\n<h3>Mein WordPress Hintergrundbild ist nicht an der richtigen Position<\/h3>\n<p>Wenn das Hintergrundbild an der falschen Position angezeigt wird, st\u00f6rt 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.<\/p>\n<p>Zum Gl\u00fcck ist das Verschieben des Hintergrunds nur ein paar Mausklicks entfernt.<\/p>\n<p>Gehe im WordPress Dashboard auf <strong>Darstellung &gt; Hintergrund<\/strong>. Finde das Bild, das du derzeit als Hintergrund hochgeladen hast und suche nach dem Feld <strong>Position<\/strong>. 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.<\/p>\n<p>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.<\/p>\n<h3>Mein WordPress Hintergrundbild wiederholt sich immer und immer wieder<\/h3>\n<p>Texturen und einfarbige Hintergr\u00fcnde sehen oft besser aus, wenn sie wiederholt werden, da sie die Bildbr\u00fcche \u00fcbersehen. Allerdings sehen viele Bilder furchtbar aus, wenn sie als Hintergrund wiederholt werden, vor allem solche mit vielen Details und unterschiedlichen Farbabstufungen.<\/p>\n<p>Ein Layout mit wiederholten Hintergrundbildern ist praktisch, wenn dein Quellbild nicht gro\u00df genug ist, um den gesamten Hintergrund abzudecken, ohne gestreckt auszusehen. Daher wird in WordPress manchmal ein wiederholtes Layout verwendet, um die Aufl\u00f6sung des Bildes zu erhalten.<\/p>\n<p>Die Hauptl\u00f6sung f\u00fcr dieses Problem befindet sich im Bereich Hintergrund unter <strong>Erscheinungsbild &gt; Hintergrund<\/strong> in WordPress. Wenn du ein Foto als Hintergrund hochgeladen hast, versuche es mit Voreinstellungen wie <strong>Bildschirm ausf\u00fcllen<\/strong>, An <strong>Bildschirm anpassen<\/strong> oder <strong>Benutzerdefiniert<\/strong> anstelle der Voreinstellung <strong>Wiederholen<\/strong>.<\/p>\n<p>Du k\u00f6nntest jedoch feststellen, dass der Versuch, ein kleineres Bild so zu gestalten, dass es den gesamten Hintergrundbildschirm ausf\u00fcllt, zu <a href=\"https:\/\/kinsta.com\/de\/blog\/hotlinking\/\">unsch\u00f6nen Ergebnissen<\/a> f\u00fchrt. In diesem Fall ist die beste L\u00f6sung, das Hintergrundbild komplett zu ersetzen und ein gro\u00dfes, hochaufl\u00f6sendes Bild zu suchen, das bereit f\u00fcr die Ver\u00f6ffentlichung im Web ist.<\/p>\n<h3>Mein WordPress Hintergrundbild ist gestreckt<\/h3>\n<p>Ein gestrecktes Hintergrundbild bedeutet, dass deine benutzerdefinierten Hintergrundeinstellungen versuchen, ein kleineres Bild zu nehmen und den gesamten Bildschirm mit dem Bild zu bedecken.<\/p>\n<p>Dies kann auch bei <a href=\"https:\/\/kinsta.com\/de\/blog\/facebook-marketingerfolg\/#add-highquality-images\">gr\u00f6\u00dferen, hochaufl\u00f6senden Bildern<\/a> passieren, wenn sie nicht dem erforderlichen Seitenverh\u00e4ltnis entsprechen. Bei gestreckten Hintergrundbildern solltest du \u00fcber die Quelldatei nachdenken. Ein anderes Bild zu w\u00e4hlen, das geeignet ist, ist die beste Option.<\/p>\n<p>Ein weiteres Problem ist, dass du die Hintergrundeinstellungen falsch konfiguriert haben k\u00f6nntest. \u00dcberpr\u00fcfe Dinge wie die Position des Hintergrundbildes und dass es im Modus &#8222;<strong>Fill Screen<\/strong>&#8220; \u00fcber die Leinwand gestreckt wird. M\u00f6glicherweise musst du nur die urspr\u00fcnglichen Abmessungen beibehalten oder eine <strong>Wiederholungsfunktion<\/strong> hinzuf\u00fcgen, damit es klappt.<\/p>\n<h3>Andere Tipps zur Fehlerbehebung im Hintergrund<\/h3>\n<ul>\n<li>Theme-Entwickler haben die volle Macht \u00fcber 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.<\/li>\n<li>Benutzerdefinierte Hintergrundfarben und -bilder \u00fcberschreiben oft jeglichen benutzerdefinierten CSS-Code, den du implementierst, um die Gr\u00f6\u00dfe, 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.<\/li>\n<li>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 <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-dateien\/\">Theme-Dateien anzuzapfen<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">benutzerdefinierte CSS<\/a> zu verwenden, um die Einstellungen des Themes zu \u00fcberschreiben.<\/li>\n<\/ul>\n<h2>Beste WordPress Hintergrundbild Plugins<\/h2>\n<p>Wenn du weitere Bearbeitungsm\u00f6glichkeiten f\u00fcr ein Hintergrundbild haben m\u00f6chtest, dich f\u00fcr Videohintergr\u00fcnde interessierst oder Tools, die seitenbezogene Hintergr\u00fcnde erm\u00f6glichen, kannst du die folgenden WordPress Hintergrundbild Plugins in Betracht ziehen:<\/p>\n<h3>Simple Full Screen Background Image<\/h3>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Simple-Full-Screen-Background-Image.png\" alt=\"Simple Full Screen Background Image Plugin\" width=\"1324\" height=\"433\"><figcaption class=\"wp-caption-text\">Simple Full Screen Background Image Plugin<\/figcaption><\/figure>\n<p>Das <a href=\"https:\/\/wordpress.org\/plugins\/simple-full-screen-background-image\/\">Simple Full Screen Background Image<\/a> Plugin unterscheidet sich nicht gro\u00dfartig von dem Standard Tool f\u00fcr Hintergrundbilder in WordPress, au\u00dfer dass es automatisierte Funktionen f\u00fcr Dinge wie Gr\u00f6\u00dfen\u00e4nderung und Skalierung f\u00fcr Browser hinzuf\u00fcgt.<\/p>\n<p>Insgesamt ist dieses Plugin am besten f\u00fcr diejenigen geeignet, die feststellen, dass ihr Theme die M\u00f6glichkeit, einen Hintergrund hinzuzuf\u00fcgen, blockiert, oder vielleicht Probleme mit dem eingebauten WordPress Hintergrund Tool haben. Es \u00fcberschreibt die Einstellungen von WordPress und f\u00fcgt einen speziellen Hintergrund-Button in deinem <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress Dashboard<\/a> hinzu, um sofort ein Bild von deinem Computer hochzuladen.<\/p>\n<p>Das ist alles, was es zu bieten hat!<\/p>\n<p>Das Plugin hat auch eine Premium Version, die verbesserte Skalierung, Support f\u00fcr eine unbegrenzte Anzahl von Hintergr\u00fcnden und einzigartige Effekte und vieles mehr bietet.<\/p>\n<h3>AWB &#8211; Advanced WordPress Backgrounds Plugin<\/h3>\n<figure style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Advanced-WordPress-Backgrounds.png\" alt=\"AWB - Advanced WordPress Backgrounds plugin\" width=\"1328\" height=\"430\"><figcaption class=\"wp-caption-text\">AWB &#8211; Advanced WordPress Backgrounds plugin<\/figcaption><\/figure>\n<p>Das <a href=\"https:\/\/wordpress.org\/plugins\/advanced-backgrounds\/\">Advanced WordPress Backgrounds<\/a> Plugin nimmt eine andere Herangehensweise an WordPress-Hintergr\u00fcnde an und erm\u00f6glicht es dir, einzigartige Effekte zu nutzen, die deinen Hintergrund aufpeppen. Ein Beispiel daf\u00fcr ist der Parallaxen-Hintergrund, der sich langsam mit dem Nutzer mitbewegen kann, w\u00e4hrend er durch deine Webseite scrollt.<\/p>\n<p>Das Plugin bietet auch Support f\u00fcr Videos. Die Videohintergr\u00fcnde werden von Seiten wie YouTube und Vimeo bezogen, oder du kannst sie auch <a href=\"https:\/\/kinsta.com\/de\/blog\/video-hosting\/\">selbst hosten<\/a>.<\/p>\n<p>Es ist auch m\u00f6glich, 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.<\/p>\n<p>Es unterst\u00fctzt Gutenberg und kann mit dem Standard WordPress Editor und vielen anderen visuellen Page Buildern zusammenarbeiten. Schlie\u00dflich kannst du seine benutzerdefinierten CSS-Optionen nutzen, um deinen Hintergr\u00fcnden noch mehr Stil zu verleihen.<\/p>\n<h3>Perfect Images + Retina<\/h3>\n<figure style=\"width: 1323px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Perfect-Images-Retina.png\" alt=\"Perfect Images + Retina plugin\" width=\"1323\" height=\"431\"><figcaption class=\"wp-caption-text\">Perfect Images + Retina plugin<\/figcaption><\/figure>\n<p>Das <a href=\"https:\/\/wordpress.org\/plugins\/wp-retina-2x\/\">Perfect Images + Retina<\/a> Plugin ist eine praktische Zwei-in-Eins-L\u00f6sung. Es erlaubt dir, die Gr\u00f6\u00dfe und das Aussehen des WordPress-Hintergrundbildes zu verwalten und gleichzeitig die <a href=\"https:\/\/kinsta.com\/de\/blog\/thumbnails-regenerieren\/\">Thumbnails zu regenerieren<\/a> und die Bilder zu ersetzen. Die Bildverwaltung ist ziemlich beeindruckend, und es ist besonders f\u00fcr hochaufl\u00f6sende Hintergr\u00fcnde entscheidend.<\/p>\n<p>Das Plugin bietet auch eine Hintergrundfunktion, wenn du dich f\u00fcr die Premium-Version entscheidest. Es generiert ein Retina-\u00c4quivalent f\u00fcr das Hintergrundbild, damit die Bilder auch auf hochaufl\u00f6senden Displays so aussehen, wie sie sollen.<\/p>\n<h3>Maintenance<\/h3>\n<figure style=\"width: 1325px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance-s-s.png\" alt=\"Wartungs Plugin mit WordPress Hintergrundbild\" width=\"1325\" height=\"434\"><figcaption class=\"wp-caption-text\">Wartungs Plugin mit WordPress Hintergrundbild<\/figcaption><\/figure>\n<p>Maintenance ist ein einfaches und leicht zu bedienendes Plugin f\u00fcr die Gestaltung von Wartungs- und Coming Soon-Seiten. Das <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">Maintenance<\/a> Plugin hat sowohl eine kostenlose als auch eine Premium-Version, aber die kostenlose reicht aus, um eine Wartungsseite zu aktivieren und ein Hintergrundbild mit \u00fcberlagerndem Text und Feldern hinzuzuf\u00fcgen.<\/p>\n<p>Du kannst sogar dein eigenes Logo hochladen, Dinge wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-fonts\/\">Schriftarten<\/a> und Icons anpassen und verschiedene Templates mit ihren eigenen sch\u00f6nen Hintergrundbildern ausw\u00e4hlen. Du kannst auch die vielen vorgefertigten Templates installieren, aber f\u00fcr die meisten davon brauchst du eine Premiumlizenz des Plugins.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Ein einfaches WordPress-Hintergrundbild l\u00e4sst sich ohne gro\u00dfen Aufwand hinzuf\u00fcgen und auf deiner gesamten Webseite anzeigen. Es ist eine Funktion, die in den <a href=\"https:\/\/kinsta.com\/de\/docs\/support\/umfang-des-supports\/managed-wordpress-support-umfang\/#what-is-wordpress-core\">WordPress-Core<\/a> eingebaut ist, so dass es einfach ist, Hintergr\u00fcnde f\u00fcr bestimmte Ereignisse oder Feiertage auszutauschen. Du kannst auch bei einem Hintergrund f\u00fcr das ganze Leben bleiben.<\/p>\n<p>Neben dem Standard-WordPress-Hintergrund kannst du auch benutzerdefinierten CSS-Code, Plugins und Page Builder verwenden, um alle Arten von Hintergr\u00fcnden auf deiner Webseite zu implementieren. Von Bildhintergr\u00fcnden auf bestimmten Seiten bis hin zu Hintergr\u00fcnden f\u00fcr deinen Men\u00fc-Button, die M\u00f6glichkeiten sind unendlich.<\/p>\n<p>Jetzt ist es an der Zeit, deiner WordPress Seite den Hintergrund hinzuzuf\u00fcgen, den du schon immer haben wolltest.<\/p>\n<p><em>Haben wir etwas ausgelassen? Bitte hinterlasse einen Kommentar, wenn du Probleme mit dem Hinzuf\u00fcgen oder Verwalten von WordPress Hintergrundbildern hast.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress Hintergrundbilder gibt es in allen Formen. Du kannst ein Hintergrundbild f\u00fcr deine gesamte Webseite hochladen, es hinter Buttons platzieren oder einen einfarbigen Hintergrund f\u00fcr deine &#8230;<\/p>\n","protected":false},"author":117,"featured_media":40808,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[28,132],"topic":[947,988,1012],"class_list":["post-40799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdev","tag-wptips","topic-bild-optimierung","topic-webdesign","topic-wordpress-website-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress-Hintergrundbilder: Wie man sie hinzuf\u00fcgt, bearbeitet und anpasst<\/title>\n<meta name=\"description\" content=\"Das Hinzuf\u00fcgen eines WordPress-Hintergrundbildes muss nicht so schwierig sein. Lerne in dieser ausf\u00fchrlichen Anleitung, wie du sie aktivierst, bearbeitest und anpasst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Hintergrundbilder: Hinzuf\u00fcgen, Bearbeiten und Anpassen des Themes\" \/>\n<meta property=\"og:description\" content=\"Das Hinzuf\u00fcgen eines WordPress-Hintergrundbildes muss nicht so schwierig sein. Lerne in dieser ausf\u00fchrlichen Anleitung, wie du sie aktivierst, bearbeitest und anpasst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-25T10:45:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T10:04:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Das Hinzuf\u00fcgen eines WordPress-Hintergrundbildes muss nicht so schwierig sein. Lerne in dieser ausf\u00fchrlichen Anleitung, wie du sie aktivierst, bearbeitest und anpasst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"112\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"WordPress Hintergrundbilder: Hinzuf\u00fcgen, Bearbeiten und Anpassen des Themes\",\"datePublished\":\"2021-03-25T10:45:59+00:00\",\"dateModified\":\"2023-07-27T10:04:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/\"},\"wordCount\":18252,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png\",\"keywords\":[\"webdev\",\"wptips\"],\"articleSection\":[\"Die besten WordPress Tutorials\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/\",\"name\":\"WordPress-Hintergrundbilder: Wie man sie hinzuf\u00fcgt, bearbeitet und anpasst\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png\",\"datePublished\":\"2021-03-25T10:45:59+00:00\",\"dateModified\":\"2023-07-27T10:04:49+00:00\",\"description\":\"Das Hinzuf\u00fcgen eines WordPress-Hintergrundbildes muss nicht so schwierig sein. Lerne in dieser ausf\u00fchrlichen Anleitung, wie du sie aktivierst, bearbeitest und anpasst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png\",\"width\":1460,\"height\":730,\"caption\":\"Wordpress Hintergrundbilder\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bild-Optimierung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/bild-optimierung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WordPress Hintergrundbilder: Hinzuf\u00fcgen, Bearbeiten und Anpassen des Themes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WordPress-Hintergrundbilder: Wie man sie hinzuf\u00fcgt, bearbeitet und anpasst","description":"Das Hinzuf\u00fcgen eines WordPress-Hintergrundbildes muss nicht so schwierig sein. Lerne in dieser ausf\u00fchrlichen Anleitung, wie du sie aktivierst, bearbeitest und anpasst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/","og_locale":"de_DE","og_type":"article","og_title":"WordPress Hintergrundbilder: Hinzuf\u00fcgen, Bearbeiten und Anpassen des Themes","og_description":"Das Hinzuf\u00fcgen eines WordPress-Hintergrundbildes muss nicht so schwierig sein. Lerne in dieser ausf\u00fchrlichen Anleitung, wie du sie aktivierst, bearbeitest und anpasst.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2021-03-25T10:45:59+00:00","article_modified_time":"2023-07-27T10:04:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Das Hinzuf\u00fcgen eines WordPress-Hintergrundbildes muss nicht so schwierig sein. Lerne in dieser ausf\u00fchrlichen Anleitung, wie du sie aktivierst, bearbeitest und anpasst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Salman Ravoof","Gesch\u00e4tzte Lesezeit":"112\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"WordPress Hintergrundbilder: Hinzuf\u00fcgen, Bearbeiten und Anpassen des Themes","datePublished":"2021-03-25T10:45:59+00:00","dateModified":"2023-07-27T10:04:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/"},"wordCount":18252,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png","keywords":["webdev","wptips"],"articleSection":["Die besten WordPress Tutorials"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/","name":"WordPress-Hintergrundbilder: Wie man sie hinzuf\u00fcgt, bearbeitet und anpasst","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png","datePublished":"2021-03-25T10:45:59+00:00","dateModified":"2023-07-27T10:04:49+00:00","description":"Das Hinzuf\u00fcgen eines WordPress-Hintergrundbildes muss nicht so schwierig sein. Lerne in dieser ausf\u00fchrlichen Anleitung, wie du sie aktivierst, bearbeitest und anpasst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/03\/wordpress-hintergrundbilder.png","width":1460,"height":730,"caption":"Wordpress Hintergrundbilder"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-hintergrundbilder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Bild-Optimierung","item":"https:\/\/kinsta.com\/de\/thema\/bild-optimierung\/"},{"@type":"ListItem","position":3,"name":"WordPress Hintergrundbilder: Hinzuf\u00fcgen, Bearbeiten und Anpassen des Themes"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/40799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=40799"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/40799\/revisions"}],"predecessor-version":[{"id":59305,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/40799\/revisions\/59305"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/translations\/jp"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40799\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/40808"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=40799"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=40799"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=40799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}