{"id":116765,"date":"2023-07-10T10:54:00","date_gmt":"2023-07-10T07:54:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/"},"modified":"2023-07-10T10:54:00","modified_gmt":"2023-07-10T07:54:00","slug":"tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/","title":{"rendered":"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Was ist in diesem Tutorial?<\/strong><\/h2>\n\n<p>In diesem Tutorial erkl\u00e4ren wir, wie man einen Hero-Bereich erstellt, der das Hintergrundbild \u00e4ndert, wenn man \u00fcber verschiedene Elemente schwebt.\nUm dies zu erreichen, verwenden wir die Container-Funktion von Elementor, f\u00fcgen benutzerdefinierten <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4536\">CSS<\/a>-Code hinzu und erkl\u00e4ren, was wir dabei tun. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong> <\/strong><\/h2>\n\n<h2 class=\"wp-block-heading\"><strong>Was ist ein Held?<br\/><\/strong><\/h2>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" controls=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/04\/Finished.mp4\"><\/video><\/figure>\n\n<p>Ein Hero-Bereich, auch bekannt als Hero-Bild oder Hero-Banner, ist ein prominenter Abschnitt auf einer Website, der typischerweise oben auf der Startseite erscheint.\nEr besteht normalerweise aus einem gro\u00dfen Bild oder Video, begleitet von Text und\/oder anderen visuellen Elementen. <\/p>\n\n<p>Der Zweck des Hero-Bereichs ist es, sofort die Aufmerksamkeit des Besuchers zu erregen und die wichtigste Botschaft oder das Wertversprechen der Website zu vermitteln.\nEs ist eine Gelegenheit f\u00fcr Unternehmen, einen starken ersten Eindruck zu hinterlassen. <\/p>\n\n<p>Zus\u00e4tzlich zum Hauptvisuellen Element kann der Hero-Bereich auch eine Call-to-Action (CTA)-Schaltfl\u00e4che enthalten, die den Besucher dazu auffordert, eine gew\u00fcnschte Aktion auszuf\u00fchren.<\/p>\n\n<p>Ein gut gestalteter Hero-Bereich kann einen erheblichen Einfluss auf den Erfolg einer Website haben, von der Verbesserung der Benutzerbindung und der Konversionsraten bis hin zur Verbesserung der Benutzererfahrung und der Suchmaschinenoptimierung.\nEr ist oft das visuell auff\u00e4lligste und einpr\u00e4gsamste Element einer Website und kann Unternehmen helfen, sich in einem \u00fcberf\u00fcllten Online-Markt abzuheben. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Benutzerbindung verbessern<\/strong><\/h2>\n\n<p>Ein visuell ansprechender und gut gestalteter &amp; entwickelter Hero-Bereich kann die Aufmerksamkeit eines Benutzers erregen und ihn dazu ermutigen, l\u00e4nger auf Ihrer Website zu bleiben, wodurch die Wahrscheinlichkeit steigt, dass er eine gew\u00fcnschte Aktion ausf\u00fchrt, wie z. B. ein Formular ausf\u00fcllt oder einen Kauf t\u00e4tigt.<br\/><br\/>Auch der Hero-Bereich ist oft das Erste, was ein Benutzer sieht, wenn er eine Website besucht, und er kann den Ton f\u00fcr den Rest der Seite angeben.\nEin gut gestalteter Hero-Bereich kann dazu beitragen, die Identit\u00e4t, Pers\u00f6nlichkeit und Werte der Marke zu etablieren und sie von Wettbewerbern abzuheben. <br\/><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Wie man einen Hero-Bereich erstellt, der das Hintergrundbild \u00e4ndert, wenn man \u00fcber verschiedene Elemente schwebt<\/strong><\/h2>\n\n<div class=\"wp-block-group post-alert is-layout-flow wp-block-group-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Hinweis<\/h5>\n\n\n\n<p>Wir werden dieses Design mit Containern erstellen, also aktivieren Sie sie bitte \u00fcber die Einstellungen &gt; Funktionen von <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"Elementor\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"1291\">Elementor<\/a>.<br\/>Wir werden ein wenig CSS verwenden &#8211; aber keine Sorge, ich werde den gesamten Code bereitstellen und Ihnen zeigen, wo Sie ihn einf\u00fcgen m\u00fcssen.<\/p>\n<\/div>\n\n<h3 class=\"wp-block-heading\"><strong>Was brauchen wir, um zu beginnen?<\/strong><\/h3>\n\n<ul class=\"wp-block-list\"><li><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/pro\/\" title=\"Elementor Pro\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"2912\">Elementor Pro<\/a> Plugin<\/li><li>4 Bilder<\/li><\/ul>\n\n<h3 class=\"wp-block-heading\"><br\/>Lassen Sie uns beginnen:<\/h3>\n\n<p>Erstellen Sie eine neue Seite und bearbeiten Sie sie mit Elementor.<\/p>\n\n<p>F\u00fcgen Sie einen Container mit den folgenden Einstellungen ein:<\/p>\n\n<p><\/p>\n\n<ul class=\"wp-block-list\"><li>Inhaltsbreite: Volle Breite<\/li><li>Breite: 100%<\/li><li>Min-H\u00f6he: 100vh<\/li><li>Padding: 0x<\/li><\/ul>\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"937\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image2.png\" alt=\"\" class=\"wp-image-85588\"\/><\/figure>\n\n<p>Weisen Sie dem Container eine Klasse namens: \u201emain-container-slide\u201c zu<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"294\" height=\"685\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image6.png\" alt=\"\" class=\"wp-image-85590\"\/><\/figure>\n\n<p>Gehen Sie zum WordPress-Dashboard und laden Sie die 4 Bilder hoch, die Sie verwenden werden, in den WordPress-Medienbereich.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"805\" height=\"326\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image4.png\" alt=\"\" class=\"wp-image-85591\"\/><\/figure>\n\n<p>Gehen Sie zur\u00fcck zur Seite und f\u00fcgen Sie den folgenden CSS-Code in das benutzerdefinierte CSS-Tab des Containers ein:<br\/><\/p>\n\t\t<div data-elementor-type=\"container\" data-elementor-id=\"85592\" class=\"elementor elementor-85592\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82f2eaf e-flex e-con-boxed e-con e-parent\" data-id=\"82f2eaf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8caf55 elementor-widget elementor-widget-code-highlight\" data-id=\"b8caf55\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.main-container-slide [class*=\"slide\"]:hover {\r\n    background-color: #CE3A3AA1 !important;\r\n}\r\n.main-container-slide:has(.slide1:hover) {\r\n    background-image: url(https:\/\/yousite.com\/image1.jpg) !important;\r\n}\r\n\r\n\r\n.main-container-slide:has(.slide2:hover) {\r\n    background-image: url(https:\/\/yousite.com\/image2.jpg) !important;\r\n}\r\n\r\n\r\n.main-container-slide:has(.slide3:hover) {\r\n    background-image: url(https:\/\/yousite.com\/image3.jpg) !important;\r\n}\r\n\r\n\r\n.main-container-slide:has(.slide4:hover) {\r\n    background-image: url(https:\/\/yousite.com\/image4.jpg) !important;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\n<div class=\"wp-block-group post-alert is-layout-flow wp-block-group-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Hinweis<\/h5>\n\n\n\n<p>Ersetzen Sie \u201ehttps:\/\/yousite.com\/image.jpg\u201c durch die URLs der Bilder, die Sie in jeder Zone verwenden werden.<\/p>\n<\/div>\n\n<p><br\/>Dieses CSS erreicht 2 Dinge:<br\/><br\/>1 &#8211; \u00c4ndert die Hintergrundfarbe beim Hover in jedem Container<\/p>\n\n<p>2 &#8211; \u00c4ndert das Hintergrundbild im .main-container-slide, wenn man \u00fcber die .slide-* Container schwebt.<\/p>\n\n<p><\/p>\n\n<p>Schauen Sie sich mein Beispiel an (ich habe die URLs der Bilder f\u00fcr meine k\u00fcrzlich hochgeladenen Bilder ge\u00e4ndert):<br\/><\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"618\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/csscustom.png\" alt=\"\" class=\"wp-image-85598\"\/><\/figure>\n\n<p><strong>N\u00e4chster Schritt:<br\/><br\/><\/strong>Im Stil-Tab geben Sie diese Einstellungen ein:<\/p>\n\n<ul class=\"wp-block-list\"><li>Hintergrund: Normal<\/li><li>Hintergrundtyp: Klassisch<\/li><li>Farbe: Transparent<\/li><li>Bild: *W\u00e4hlen Sie das erste Bild, das Sie anzeigen m\u00f6chten<\/li><li>Bildgr\u00f6\u00dfe: Voll<\/li><li>Position: Mitte Mitte<\/li><li>Wiederholen: Nicht wiederholen<\/li><li>Anzeigengr\u00f6\u00dfe: Abdecken<\/li><\/ul>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"932\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image7.png\" alt=\"\" class=\"wp-image-85599\"\/><\/figure>\n\n<p><strong>N\u00e4chster Schritt:<br\/><\/strong>F\u00fcgen Sie 1 Container mit diesen Einstellungen ein:<\/p>\n\n<ul class=\"wp-block-list\"><li>Inhaltsbreite: Volle Breite<\/li><li>Breite: 25%<\/li><\/ul>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1327\" height=\"934\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image1.png\" alt=\"\" class=\"wp-image-85600\"\/><\/figure>\n\n<p>Gehen Sie zum Erweitert-Tab und f\u00fcgen Sie dort eine Klasse namens: slide1 hinzu<\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"935\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image3.png\" alt=\"\" class=\"wp-image-85589\"\/><\/figure>\n\n<p><\/p>\n\n<p>Gestalten Sie nun jeden Container mit Ihrem benutzerdefinierten Stil und Ihren Elementen, wie ich es f\u00fcr dieses Beispiel getan habe:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"431\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image8.png\" alt=\"\" class=\"wp-image-85601\"\/><\/figure>\n\n<p>Wie Sie sehen k\u00f6nnen, habe ich den Container nummeriert, R\u00e4nder hinzugef\u00fcgt, um einen Unterschied zwischen den Kategorien auf meiner Seite zu erzeugen; und benutzerdefinierte Inhalte mit einem CTA in jeder Zone.<\/p>\n\n<p><\/p>\n\n<p><strong>N\u00e4chster Schritt:<\/strong><br\/>Sobald Sie Ihren ersten Container fertig haben, duplizieren Sie ihn 3 Mal und \u00e4ndern Sie die CSS-Klasse in jedem Container, um 4 aufeinanderfolgende nummerierte Klassen zu haben:<br\/>slide1, slide2, slide3, slide4<\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" controls=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/cssinsert.mp4\"><\/video><\/figure>\n\n<p><br\/><strong>Und wir sind fertig!<\/strong><\/p>\n\n<p>In diesem Tutorial haben wir gelernt, wie man einen Hero-Bereich mit Elementor, der #1 Website-Plattform f\u00fcr WordPress, erstellt. <\/p>\n\n<p>Wir haben uns darauf konzentriert, einen Hero-Bereich zu erstellen, der das Hintergrundbild \u00e4ndert, wenn man \u00fcber verschiedene Elemente schwebt, und haben die Container-Funktion von Elementor und benutzerdefinierten CSS-Code verwendet, um diese Aufgabe zu erf\u00fcllen.<\/p>\n\n<p>Durch das Befolgen dieses Tutorials k\u00f6nnen Sie das UX\/UI-Design Ihrer Website verbessern und einen visuell ansprechenden und fesselnden Bereich erstellen, der sich vom Rest abhebt.\nMit Elementor kann jeder ohne Programmierkenntnisse eine professionell aussehende Website erstellen.\nInsgesamt bietet dieses Tutorial eine einfache und effektive M\u00f6glichkeit, einen Hero-Bereich zu gestalten, der das Wertversprechen Ihrer Website pr\u00e4sentiert und Ihre Besucher anspricht.  <\/p>\n\n<div class=\"wp-block-group post-alert is-layout-flow wp-block-group-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Hinweis<\/h5>\n\n\n\n<p>:has ist eine optionale Funktion in Firefox &#8211; Benutzer k\u00f6nnen sie zum Testen aktivieren (basierend auf der Browser-Kompatibilit\u00e4tsnotiz): https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/:has<\/p>\n<\/div>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ein gut gestalteter Hero-Bereich kann einen erheblichen Einfluss auf den Erfolg einer Website haben, von der Verbesserung der Benutzerbindung und der Konversionsraten bis hin zur Verbesserung der Benutzererfahrung und der Suchmaschinenoptimierung.<\/p>\n","protected":false},"author":507051,"featured_media":116772,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[291,299,351],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-116765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-de","category-elementor-team-writes-de","category-tips-tricks-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover<\/title>\n<meta name=\"description\" content=\"Ein gut gestalteter Hero-Bereich kann einen erheblichen Einfluss auf den Erfolg einer Website haben, von der Verbesserung der Benutzerbindung und der Konversionsraten bis hin zur Verbesserung der Benutzererfahrung und der Suchmaschinenoptimierung.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover\" \/>\n<meta property=\"og:description\" content=\"Ein gut gestalteter Hero-Bereich kann einen erheblichen Einfluss auf den Erfolg einer Website haben, von der Verbesserung der Benutzerbindung und der Konversionsraten bis hin zur Verbesserung der Benutzererfahrung und der Suchmaschinenoptimierung.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-10T07:54:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\"},\"headline\":\"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover\",\"datePublished\":\"2023-07-10T07:54:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/\"},\"wordCount\":848,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"articleSection\":[\"Elementor\",\"Elementor-Team schreibt\",\"Tipps &amp; Tricks\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/\",\"url\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/\",\"name\":\"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"datePublished\":\"2023-07-10T07:54:00+00:00\",\"description\":\"Ein gut gestalteter Hero-Bereich kann einen erheblichen Einfluss auf den Erfolg einer Website haben, von der Verbesserung der Benutzerbindung und der Konversionsraten bis hin zur Verbesserung der Benutzererfahrung und der Suchmaschinenoptimierung.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/de\/category\/elementor-de\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\",\"url\":\"https:\/\/elementor.com\/blog\/de\/author\/alan-kaler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover","description":"Ein gut gestalteter Hero-Bereich kann einen erheblichen Einfluss auf den Erfolg einer Website haben, von der Verbesserung der Benutzerbindung und der Konversionsraten bis hin zur Verbesserung der Benutzererfahrung und der Suchmaschinenoptimierung.","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:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/","og_locale":"de_DE","og_type":"article","og_title":"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover","og_description":"Ein gut gestalteter Hero-Bereich kann einen erheblichen Einfluss auf den Erfolg einer Website haben, von der Verbesserung der Benutzerbindung und der Konversionsraten bis hin zur Verbesserung der Benutzererfahrung und der Suchmaschinenoptimierung.","og_url":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2023-07-10T07:54:00+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","type":"image\/png"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Verfasst von":"Alan Kaler","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931"},"headline":"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover","datePublished":"2023-07-10T07:54:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/"},"wordCount":848,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","articleSection":["Elementor","Elementor-Team schreibt","Tipps &amp; Tricks"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/","url":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/","name":"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","datePublished":"2023-07-10T07:54:00+00:00","description":"Ein gut gestalteter Hero-Bereich kann einen erheblichen Einfluss auf den Erfolg einer Website haben, von der Verbesserung der Benutzerbindung und der Konversionsraten bis hin zur Verbesserung der Benutzererfahrung und der Suchmaschinenoptimierung.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/de\/tutorial-so-aendern-sie-das-hintergrundbild-eines-helden-beim-hover\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/de\/category\/elementor-de\/"},{"@type":"ListItem","position":3,"name":"Tutorial: So \u00e4ndern Sie das Hintergrundbild eines Helden beim Hover"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/de\/#website","url":"https:\/\/elementor.com\/blog\/de\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/de\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you","url":"https:\/\/elementor.com\/blog\/de\/author\/alan-kaler\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/116765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/users\/507051"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=116765"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/116765\/revisions"}],"predecessor-version":[{"id":116776,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/116765\/revisions\/116776"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media\/116772"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=116765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=116765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=116765"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_persona?post=116765"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_intent?post=116765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}