{"id":111537,"date":"2023-07-10T10:54:00","date_gmt":"2023-07-10T07:54:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/"},"modified":"2023-07-10T10:54:00","modified_gmt":"2023-07-10T07:54:00","slug":"tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/","title":{"rendered":"Tutoriel : Comment changer l’image de fond d’un h\u00e9ros, au survol"},"content":{"rendered":"\n

Que contient ce tutoriel ?<\/strong><\/h2>\n\n

Dans ce tutoriel, nous expliquerons comment cr\u00e9er une section h\u00e9ros qui change l’image de fond lorsque vous survolez diff\u00e9rents \u00e9l\u00e9ments.\nPour ce faire, nous utiliserons la fonctionnalit\u00e9 de conteneur d’Elementor, ajouterons du code CSS<\/a> personnalis\u00e9 et expliquerons ce que nous faisons au fur et \u00e0 mesure. <\/p>\n\n

<\/strong><\/h2>\n\n

Qu’est-ce qu’un h\u00e9ros ?
<\/strong><\/h2>\n\n

Am\u00e9liorer l’engagement des utilisateurs<\/strong><\/h2>\n\n

Une section h\u00e9ros visuellement attrayante et bien con\u00e7ue & d\u00e9velopp\u00e9e peut capter l’attention d’un utilisateur et l’encourager \u00e0 rester plus longtemps sur votre site web, augmentant ainsi les chances qu’il effectue une action souhait\u00e9e, comme remplir un formulaire ou effectuer un achat.

De plus, la section h\u00e9ros est souvent la premi\u00e8re chose qu’un utilisateur voit lorsqu’il visite un site web, et elle peut donner le ton pour le reste du site.\nUne section h\u00e9ros bien con\u00e7ue peut aider \u00e0 \u00e9tablir l’identit\u00e9, la personnalit\u00e9 et les valeurs de la marque, contribuant ainsi \u00e0 la diff\u00e9rencier des concurrents.
<\/p>\n\n

Comment cr\u00e9er une section h\u00e9ros qui change l’image de fond lorsque vous survolez diff\u00e9rents \u00e9l\u00e9ments<\/strong><\/h2>\n\n
\n
Note<\/h5>\n\n\n\n

Nous allons construire ce design avec des conteneurs, alors veuillez les activer via les Param\u00e8tres > Fonctionnalit\u00e9s d’Elementor.
Nous utiliserons un peu de CSS<\/a>, mais ne vous inqui\u00e9tez pas, je fournirai tout le code et vous guiderai sur o\u00f9 l’ins\u00e9rer.<\/p>\n<\/div>\n\n

De quoi avons-nous besoin pour commencer ?<\/strong><\/h3>\n\n
  • Plugin Elementor Pro<\/li>
  • 4 Images<\/li><\/ul>\n\n


    Commen\u00e7ons :<\/h3>\n\n

    Cr\u00e9ez une nouvelle page et \u00e9ditez-la avec Elementor.<\/p>\n\n

    Ins\u00e9rez un conteneur avec les param\u00e8tres suivants :<\/p>\n\n

    <\/p>\n\n

    • Largeur du contenu : Pleine largeur<\/li>
    • Largeur : 100%<\/li>
    • Hauteur minimale : 100vh<\/li>
    • Marge int\u00e9rieure : 0x<\/li><\/ul>\n\n
      \"\"<\/figure>\n\n

      Attribuez une classe au conteneur appel\u00e9e : \u201cmain-container-slide\u201d<\/p>\n\n

      \"\"<\/figure>\n\n

      Allez dans le tableau de bord WordPress et t\u00e9l\u00e9chargez les 4 images que vous utiliserez dans la zone de m\u00e9dias de WordPress.<\/p>\n\n

      \"\"<\/figure>\n\n

      Retournez \u00e0 la page et ins\u00e9rez le code CSS suivant dans l’onglet CSS personnalis\u00e9 du conteneur :
      <\/p>\n\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t.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\">Note<\/h5>\n\n\n\n<p>Remplacez \u201chttps:\/\/yousite.com\/image.jpg\u201d par les <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/fr\/quest-ce-quune-urlstructure-syntaxe-meilleures-pratiques\/\" title=\"What is a URL? Structure, Syntax &#038; Best Practices\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"23899\">URL<\/a> des images que vous utiliserez dans chaque zone.<\/p>\n<\/div>\n\n<p><br \/>Ce CSS r\u00e9alise 2 choses :<br \/><br \/>1 &#8211; Change la couleur de fond au survol dans chaque conteneur<\/p>\n\n<p>2 &#8211; Change l&rsquo;image de fond dans le .main-container-slide lorsque vous survolez les conteneurs .slide-*.<\/p>\n\n<p><\/p>\n\n<p>Regardez mon exemple (j&rsquo;ai chang\u00e9 les URL des images pour mes images r\u00e9cemment t\u00e9l\u00e9charg\u00e9es) :<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>\u00c9tape suivante :<br \/><br \/><\/strong>Dans l&rsquo;onglet Style, entrez ces param\u00e8tres :<\/p>\n\n<ul class=\"wp-block-list\"><li>Fond : Normal<\/li><li>Type de fond : Classique<\/li><li>Couleur : Transparent<\/li><li>Image : *Choisissez la premi\u00e8re image que vous souhaitez afficher<\/li><li>Taille de l&rsquo;image : Pleine<\/li><li>Position : Centre Centre<\/li><li>R\u00e9p\u00e9tition : Sans r\u00e9p\u00e9tition<\/li><li>Taille d&rsquo;affichage : Couverture<\/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>\u00c9tape suivante :<br \/><\/strong>Ajoutez 1 conteneur \u00e0 l&rsquo;int\u00e9rieur avec ces param\u00e8tres :<\/p>\n\n<ul class=\"wp-block-list\"><li>Largeur du contenu : Pleine largeur<\/li><li>Largeur : 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>Allez dans l&rsquo;onglet Avanc\u00e9 et ajoutez-y une classe appel\u00e9e : slide1<\/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>Maintenant, concevez chaque conteneur avec votre style et vos \u00e9l\u00e9ments personnalis\u00e9s, comme je l&rsquo;ai fait pour cet exemple :<\/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>Comme vous pouvez le voir, j&rsquo;ai num\u00e9rot\u00e9 le conteneur, ajout\u00e9 des bordures pour g\u00e9n\u00e9rer une diff\u00e9rence entre les cat\u00e9gories de mon site ; et du contenu personnalis\u00e9 avec un CTA dans chaque zone.<\/p>\n\n<p><\/p>\n\n<p><strong>\u00c9tape suivante :<\/strong><br \/>Une fois que vous avez termin\u00e9 votre premier conteneur, dupliquez-le 3 fois et changez la classe CSS sur chaque conteneur pour avoir 4 classes num\u00e9rot\u00e9es s\u00e9quentiellement :<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>Et nous avons termin\u00e9 !<\/strong><\/p>\n\n<p>Dans ce tutoriel, nous avons appris \u00e0 cr\u00e9er une section h\u00e9ros avec Elementor, la plateforme de site web n\u00b01 pour WordPress. <\/p>\n\n<p>Nous nous sommes concentr\u00e9s sur la cr\u00e9ation d&rsquo;une section h\u00e9ros qui change l&rsquo;image de fond lorsque vous survolez diff\u00e9rents \u00e9l\u00e9ments et avons utilis\u00e9 la fonctionnalit\u00e9 de conteneur d&rsquo;Elementor et du code CSS personnalis\u00e9 pour accomplir cette t\u00e2che.<\/p>\n\n<p>En suivant ce tutoriel, vous pouvez am\u00e9liorer le design UX\/UI de votre site web et cr\u00e9er une section visuellement attrayante et engageante qui se d\u00e9marque des autres.\nUtiliser Elementor permet \u00e0 quiconque de cr\u00e9er un site web professionnel sans aucune exp\u00e9rience en codage.\nDans l&rsquo;ensemble, ce tutoriel fournit un moyen simple et efficace de concevoir une section h\u00e9ros qui met en valeur la proposition de valeur de votre site web et engage vos visiteurs.  <\/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\">Note<\/h5>\n\n\n\n<p>:has est une fonctionnalit\u00e9 optionnelle dans Firefox &#8211; Les utilisateurs peuvent l&rsquo;activer pour les tests (bas\u00e9 sur la note de compatibilit\u00e9 du navigateur) : https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/:has<\/p>\n<\/div>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Une section h\u00e9ros bien con\u00e7ue peut avoir un impact significatif sur le succ\u00e8s d&rsquo;un site web, en am\u00e9liorant l&rsquo;engagement des utilisateurs et les taux de conversion, ainsi qu&rsquo;en optimisant l&rsquo;exp\u00e9rience utilisateur et le r\u00e9f\u00e9rencement.<\/p>\n","protected":false},"author":507051,"featured_media":107525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[246,230,232],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-111537","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conseils-astuces-fr","category-elementor-fr","category-lequipe-elementor-ecrit-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tutoriel : Comment changer l&#039;image de fond d&#039;un h\u00e9ros, au survol<\/title>\n<meta name=\"description\" content=\"Une section h\u00e9ros bien con\u00e7ue peut avoir un impact significatif sur le succ\u00e8s d&#039;un site web, en am\u00e9liorant l&#039;engagement des utilisateurs et les taux de conversion, ainsi qu&#039;en optimisant l&#039;exp\u00e9rience utilisateur et le r\u00e9f\u00e9rencement.\" \/>\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\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutoriel : Comment changer l&#039;image de fond d&#039;un h\u00e9ros, au survol\" \/>\n<meta property=\"og:description\" content=\"Une section h\u00e9ros bien con\u00e7ue peut avoir un impact significatif sur le succ\u00e8s d&#039;un site web, en am\u00e9liorant l&#039;engagement des utilisateurs et les taux de conversion, ainsi qu&#039;en optimisant l&#039;exp\u00e9rience utilisateur et le r\u00e9f\u00e9rencement.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/\" \/>\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=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/b1549508a459ad0cfb282fb1c7a71931\"},\"headline\":\"Tutoriel : Comment changer l&rsquo;image de fond d&rsquo;un h\u00e9ros, au survol\",\"datePublished\":\"2023-07-10T07:54:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/\"},\"wordCount\":991,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/New-Features-Spotlight_Blog-cover.png\",\"articleSection\":[\"Conseils &amp; Astuces\",\"Elementor\",\"L\u2019\u00e9quipe Elementor \u00e9crit\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/\",\"name\":\"Tutoriel : Comment changer l'image de fond d'un h\u00e9ros, au survol\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/#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\":\"Une section h\u00e9ros bien con\u00e7ue peut avoir un impact significatif sur le succ\u00e8s d'un site web, en am\u00e9liorant l'engagement des utilisateurs et les taux de conversion, ainsi qu'en optimisant l'exp\u00e9rience utilisateur et le r\u00e9f\u00e9rencement.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/#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\\\/fr\\\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/category\\\/elementor-fr\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tutoriel : Comment changer l&#8217;image de fond d&#8217;un h\u00e9ros, au survol\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/fr\\\/#\\\/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\\\/fr\\\/#\\\/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\\\/fr\\\/#\\\/schema\\\/person\\\/b1549508a459ad0cfb282fb1c7a71931\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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\\\/fr\\\/author\\\/alan-kaler\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutoriel : Comment changer l'image de fond d'un h\u00e9ros, au survol","description":"Une section h\u00e9ros bien con\u00e7ue peut avoir un impact significatif sur le succ\u00e8s d'un site web, en am\u00e9liorant l'engagement des utilisateurs et les taux de conversion, ainsi qu'en optimisant l'exp\u00e9rience utilisateur et le r\u00e9f\u00e9rencement.","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\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/","og_locale":"fr_FR","og_type":"article","og_title":"Tutoriel : Comment changer l'image de fond d'un h\u00e9ros, au survol","og_description":"Une section h\u00e9ros bien con\u00e7ue peut avoir un impact significatif sur le succ\u00e8s d'un site web, en am\u00e9liorant l'engagement des utilisateurs et les taux de conversion, ainsi qu'en optimisant l'exp\u00e9rience utilisateur et le r\u00e9f\u00e9rencement.","og_url":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/","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":{"\u00c9crit par":"Alan Kaler","Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931"},"headline":"Tutoriel : Comment changer l&rsquo;image de fond d&rsquo;un h\u00e9ros, au survol","datePublished":"2023-07-10T07:54:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/"},"wordCount":991,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","articleSection":["Conseils &amp; Astuces","Elementor","L\u2019\u00e9quipe Elementor \u00e9crit"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/","url":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/","name":"Tutoriel : Comment changer l'image de fond d'un h\u00e9ros, au survol","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/#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":"Une section h\u00e9ros bien con\u00e7ue peut avoir un impact significatif sur le succ\u00e8s d'un site web, en am\u00e9liorant l'engagement des utilisateurs et les taux de conversion, ainsi qu'en optimisant l'exp\u00e9rience utilisateur et le r\u00e9f\u00e9rencement.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/#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\/fr\/tutoriel-comment-changer-limage-de-fond-dun-heros-au-survol\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/fr\/category\/elementor-fr\/"},{"@type":"ListItem","position":3,"name":"Tutoriel : Comment changer l&#8217;image de fond d&#8217;un h\u00e9ros, au survol"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/fr\/#website","url":"https:\/\/elementor.com\/blog\/fr\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/fr\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/#\/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\/fr\/#\/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\/fr\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"fr-FR","@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\/fr\/author\/alan-kaler\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/111537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/users\/507051"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=111537"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/111537\/revisions"}],"predecessor-version":[{"id":148840,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/111537\/revisions\/148840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/media\/107525"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=111537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=111537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=111537"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/marketing_persona?post=111537"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/marketing_intent?post=111537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}