{"id":112874,"date":"2023-07-10T10:54:00","date_gmt":"2023-07-10T07:54:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/"},"modified":"2023-07-10T10:54:00","modified_gmt":"2023-07-10T07:54:00","slug":"handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/","title":{"rendered":"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Wat staat er in deze tutorial?<\/strong><\/h2>\n\n<p>In deze tutorial leggen we uit hoe je een heldensectie maakt die de achtergrondafbeelding verandert als je met de muis over verschillende elementen beweegt.\nOm dit te bereiken gebruiken we de containerfunctie van Elementor, voegen we aangepaste <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-code<\/a> toe en leggen we gaandeweg uit wat we doen. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong> <\/strong><\/h2>\n\n<h2 class=\"wp-block-heading\"><strong>Wat is een 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>Een heldensectie, ook wel bekend als heldenafbeelding of heldenbanner, is een prominente sectie op een website die meestal bovenaan de homepage staat.\nHet bestaat meestal uit een grote afbeelding of video, vergezeld van tekst en\/of andere visuele elementen. <\/p>\n\n<p>Het doel van de heldensectie is om onmiddellijk de aandacht van de bezoeker te trekken en de belangrijkste boodschap of waardepropositie van de website over te brengen.\nHet is een kans voor bedrijven om een sterke eerste indruk te maken. <\/p>\n\n<p>Naast het belangrijkste visuele element kan de heldensectie ook een call-to-action (CTA) knop bevatten, die de bezoeker aanspoort om een gewenste actie te ondernemen.<\/p>\n\n<p>Een goed ontworpen heldensectie kan een grote invloed hebben op het succes van een website, van het verbeteren van de betrokkenheid van gebruikers en conversiepercentages tot het verbeteren van de gebruikerservaring en zoekmachineoptimalisatie.\nHet is vaak het meest opvallende en gedenkwaardige element van een website en het kan bedrijven helpen om op te vallen in een overvolle online markt. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Gebruikersbetrokkenheid verbeteren<\/strong><\/h2>\n\n<p>Een visueel aantrekkelijke en goed ontworpen en ontwikkelde heldensectie kan de aandacht van een gebruiker trekken en hen aanmoedigen om langer op je website te blijven, waardoor de kans groter wordt dat ze een gewenste actie ondernemen, zoals het invullen van een formulier of het doen van een aankoop.<br\/><br\/>Ook het heldengedeelte is vaak het eerste wat een gebruiker ziet als hij een website bezoekt, en het kan de toon zetten voor de rest van de site.\nEen goed ontworpen heldensectie kan helpen om de identiteit, persoonlijkheid en waarden van het merk vast te stellen en het te onderscheiden van concurrenten. <br\/><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Hoe maak je een heldensectie die de achtergrondafbeelding verandert wanneer je met de muis over verschillende elementen beweegt?<\/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\">Opmerking<\/h5>\n\n\n\n<p>We gaan dit ontwerp bouwen met Containers, dus activeer ze via de Instellingen &gt; Functies van Elementor.<br\/>We gaan een beetje CSS gebruiken, maar maak je geen zorgen, ik zal je alle code geven en je begeleiden waar je die moet invoegen.<\/p>\n<\/div>\n\n<h3 class=\"wp-block-heading\"><strong>Wat hebben we nodig om te beginnen?<\/strong><\/h3>\n\n<ul class=\"wp-block-list\"><li>Elementor Pro Plugin<\/li><li>4 Afbeeldingen<\/li><\/ul>\n\n<h3 class=\"wp-block-heading\"><br\/>Laten we beginnen:<\/h3>\n\n<p>Maak een nieuwe pagina en bewerk deze met Elementor.<\/p>\n\n<p>Plaats een container met de volgende instellingen:<\/p>\n\n<p><\/p>\n\n<ul class=\"wp-block-list\"><li>Breedte inhoud: Volledige breedte<\/li><li>Breedte: 100%<\/li><li>Min-hoogte: 100vh<\/li><li>Opvulling: 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>Stel een klasse in voor de container genaamd: &#8220;main-container-slide&#8221;.<\/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>Ga naar het dashboard van WordPress en upload de 4 afbeeldingen die je gaat gebruiken naar het mediagebied van WordPress.<\/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>Ga terug naar de pagina en voeg de volgende CSS-code in op het tabblad Aangepaste CSS van de container:<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\">Opmerking<\/h5>\n\n\n\n<p>Vervang &#8220;https:\/\/yousite.com\/image.jpg&#8221; door de url&#8217;s van de afbeeldingen die je in elke zone wilt gebruiken.<\/p>\n<\/div>\n\n<p><br\/>Deze CSS bereikt 2 dingen:<br\/><br\/>1 &#8211; Verandert de achtergrondkleur bij zweven in elke container.<\/p>\n\n<p>2 &#8211; Verandert de achtergrondafbeelding in de .main-container-slide wanneer je met de muis over de .slide-* containers beweegt.<\/p>\n\n<p><\/p>\n\n<p>Kijk eens naar mijn voorbeeld (ik heb de url&#8217;s van de afbeeldingen veranderd voor mijn recent ge\u00fcploade afbeeldingen):<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>Volgende stap:<br\/><br\/><\/strong>Voer in het tabblad Stijl de volgende instellingen in:<\/p>\n\n<ul class=\"wp-block-list\"><li>Achtergrond: Normaal<\/li><li>Type achtergrond: Klassiek<\/li><li>Kleur: Transparant<\/li><li>Afbeelding: *Kies de eerste afbeelding die je wilt laten zien<\/li><li>Afbeeldingsformaat: Volledig<\/li><li>Positie: Midden<\/li><li>Herhalen: niet herhalen<\/li><li>Formaat weergeven: Omslag<\/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>Volgende stap:<br\/><\/strong>Voeg 1 container toe met deze instellingen:<\/p>\n\n<ul class=\"wp-block-list\"><li>Breedte inhoud: Volledige breedte<\/li><li>Breedte: 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>Ga naar het tabblad Geavanceerd en voeg daar een class toe met de naam: dia1<\/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>Ontwerp nu elke container met je eigen stijl en items, zoals ik heb gedaan voor dit voorbeeld:<\/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>Zoals je kunt zien, heb ik de container genummerd, randen toegevoegd om een verschil te maken tussen de categorie\u00ebn op mijn site; en aangepaste inhoud met een CTA in elke zone.<\/p>\n\n<p><\/p>\n\n<p><strong>Volgende stap:<\/strong><br\/>Zodra je je eerste container klaar hebt, dupliceer je deze 3 keer en verander je de CSS-klasse op elke container in 4 opeenvolgend genummerde klassen:<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>En we zijn klaar!<\/strong><\/p>\n\n<p>In deze tutorial hebben we geleerd hoe je een heldensectie kunt maken met Elementor, het #1 website platform voor WordPress.  <\/p>\n\n<p>We richtten ons op het maken van een heldensectie die de achtergrondafbeelding verandert wanneer je met de muis over verschillende elementen beweegt en gebruikten de containerfunctie van Elementor en aangepaste CSS-code om deze taak te volbrengen.<\/p>\n\n<p>Door deze tutorial te volgen, kun je het UX\/UI-ontwerp van je website verbeteren en een visueel aantrekkelijk en boeiend onderdeel maken dat zich onderscheidt van de rest.\nMet Elementor kan iedereen gemakkelijk een professioneel uitziende website maken zonder enige ervaring met codering.\nAl met al biedt deze handleiding een eenvoudige en effectieve manier om een heldensectie te ontwerpen die de waardepropositie van je website laat zien en je bezoekers aanspreekt.  <\/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\">Opmerking<\/h5>\n\n\n\n<p>:heeft het is een optionele functie in Firefox &#8211; Gebruikers kunnen het inschakelen om te testen (gebaseerd op de Browser Compatibiliteits Notitie): https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/:has<\/p>\n<\/div>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Een goed ontworpen heldensectie kan een grote invloed hebben op het succes van een website, van het verbeteren van de betrokkenheid van gebruikers en conversiepercentages tot het verbeteren van de gebruikerservaring en zoekmachineoptimalisatie.<\/p>\n","protected":false},"author":507051,"featured_media":112875,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[290,298,350],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-112874","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-nl","category-elementor-team-writes-nl","category-tips-tricks-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan<\/title>\n<meta name=\"description\" content=\"Een goed ontworpen heldensectie kan een grote invloed hebben op het succes van een website, van het verbeteren van de betrokkenheid van gebruikers en conversiepercentages tot het verbeteren van de gebruikerservaring en zoekmachineoptimalisatie.\" \/>\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\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan\" \/>\n<meta property=\"og:description\" content=\"Een goed ontworpen heldensectie kan een grote invloed hebben op het succes van een website, van het verbeteren van de betrokkenheid van gebruikers en conversiepercentages tot het verbeteren van de gebruikerservaring en zoekmachineoptimalisatie.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/\" \/>\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=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/person\\\/b1549508a459ad0cfb282fb1c7a71931\"},\"headline\":\"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan\",\"datePublished\":\"2023-07-10T07:54:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/\"},\"wordCount\":861,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/New-Features-Spotlight_Blog-cover.png\",\"articleSection\":[\"Elementor\",\"Elementor-team schrijft\",\"Tips en trucs\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/\",\"name\":\"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/#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\":\"Een goed ontworpen heldensectie kan een grote invloed hebben op het succes van een website, van het verbeteren van de betrokkenheid van gebruikers en conversiepercentages tot het verbeteren van de gebruikerservaring en zoekmachineoptimalisatie.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/#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\\\/nl\\\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/category\\\/elementor-nl\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/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\\\/nl\\\/#\\\/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\\\/nl\\\/#\\\/schema\\\/person\\\/b1549508a459ad0cfb282fb1c7a71931\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"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\\\/nl\\\/author\\\/alan-kaler\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan","description":"Een goed ontworpen heldensectie kan een grote invloed hebben op het succes van een website, van het verbeteren van de betrokkenheid van gebruikers en conversiepercentages tot het verbeteren van de gebruikerservaring en zoekmachineoptimalisatie.","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\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/","og_locale":"nl_NL","og_type":"article","og_title":"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan","og_description":"Een goed ontworpen heldensectie kan een grote invloed hebben op het succes van een website, van het verbeteren van de betrokkenheid van gebruikers en conversiepercentages tot het verbeteren van de gebruikerservaring en zoekmachineoptimalisatie.","og_url":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/","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":{"Geschreven door":"Alan Kaler","Geschatte leestijd":"4 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931"},"headline":"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan","datePublished":"2023-07-10T07:54:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/"},"wordCount":861,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","articleSection":["Elementor","Elementor-team schrijft","Tips en trucs"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/","url":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/","name":"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/#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":"Een goed ontworpen heldensectie kan een grote invloed hebben op het succes van een website, van het verbeteren van de betrokkenheid van gebruikers en conversiepercentages tot het verbeteren van de gebruikerservaring en zoekmachineoptimalisatie.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/#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\/nl\/handleiding-hoe-je-de-achtergrondafbeelding-van-een-held-wijzigt-als-je-erboven-gaat-staan\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/nl\/category\/elementor-nl\/"},{"@type":"ListItem","position":3,"name":"Handleiding: Hoe je de achtergrondafbeelding van een held wijzigt als je erboven gaat staan"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/nl\/#website","url":"https:\/\/elementor.com\/blog\/nl\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/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\/nl\/#\/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\/nl\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","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\/nl\/author\/alan-kaler\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/112874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/users\/507051"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=112874"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/112874\/revisions"}],"predecessor-version":[{"id":112876,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/112874\/revisions\/112876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media\/112875"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=112874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=112874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=112874"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=112874"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=112874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}