{"id":4557,"date":"2021-12-03T09:45:24","date_gmt":"2021-12-03T09:45:24","guid":{"rendered":"https:\/\/elfsight.com\/fr\/?page_id=4557"},"modified":"2025-07-09T10:13:42","modified_gmt":"2025-07-09T10:13:42","slug":"html","status":"publish","type":"page","link":"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/","title":{"rendered":"Before and After Slider &#8211; HTML"},"content":{"rendered":"<div class=\"application-platform-content-item-description application-platform-content-item\" id=\"description\" data-nav-section=\"description\"> <h2>Description<\/h2> <p> Le Slider Avant et Apr\u00e8s d&rsquo;Elfsight vous aidera \u00e0 composer des photos all\u00e9chantes et efficaces pour votre site Web. Les clients peuvent d\u00e9couvrir tous les effets qu\u2019apportent vos biens ou services. T\u00e9l\u00e9chargez simplement deux photos sur le curseur avant et apr\u00e8s pour HTML et elles seront affich\u00e9es avec un s\u00e9parateur qui se d\u00e9place pour observer le changement. Vous pouvez int\u00e9grer un nombre illimit\u00e9 de diapositives, chacune avec sa propre l\u00e9gende. La direction du diviseur peut \u00eatre horizontale ou verticale et vous pouvez choisir le meilleur rapport d&rsquo;image. Vos utilisateurs n&rsquo;auront d&rsquo;autre choix que d&rsquo;effectuer un achat, d\u00e8s qu&rsquo;ils verront le r\u00e9sultat r\u00e9el | de vos produits ! <\/p> <p><b>Lancer avant etamp; apr\u00e8s le curseur pour atteindre les sommets de votre entreprise plus efficacement\u00a0! <\/b><\/p> <\/div> <div class=\"application-platform-content-item-features application-platform-content-item\" id=\"features\" data-nav-section=\"features\"> <h2>Nous proposons des fonctionnalit\u00e9s pratiques et simples, v\u00e9rifiez-en quelques-unes\u00a0: <\/h2> <ul><li>Fa\u00e7onnez n&rsquo;importe quel nombre d&rsquo;Avant et Apr\u00e8s quelques images<\/li> <li>Ins\u00e9rer des l\u00e9gendes avec les param\u00e8tres de formatage du texte dans chaque diapositive<\/li><li>Deux\u00a0mises en page\u00a0: Liste et Carrousel<\/li><li>D\u00e9placement horizontal ou vertical du s\u00e9parateur<\/li><li>Cliquer et glisser ou simplement survoler pour d\u00e9placer le s\u00e9parateur<\/li><li>Faites glisser sur les appareils tactiles<\/li><\/ul><p><a href=\"#demo\">Testez toute la personnalisation fonctionnalit\u00e9s dans une d\u00e9mo enti\u00e8rement fonctionnelle<\/a><\/p> <\/div> <div class=\"application-platform-content-item-installation application-platform-content-item\" id=\"installation\" data-nav-section=\"installation\"> <h2>Comment int\u00e9grer le curseur Avant et Apr\u00e8s sur mon site Web HTML\u00a0? <\/h2> <div><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/YkoX3lNPpuc\" frameborder=\"0\" allowfullscreen=\"\"><\/iframe> <\/div><p>Remplissez simplement les instructions ci-dessous pour ins\u00e9rer le plugin. <\/p> <ol><li><b>Ex\u00e9cutez notre configurateur gratuit et commencez \u00e0 fa\u00e7onner votre widget personnalis\u00e9. <\/b><br> Recherchez la forme et les fonctionnalit\u00e9s pr\u00e9f\u00e9rables de l&rsquo;outil et appliquez les modifications. <\/li> <li><b>Copiez votre code individuel apparaissant dans la fen\u00eatre sur Elfsight Apps<\/b><br> D\u00e8s que la personnalisation de votre outil personnel est termin\u00e9e, copiez le code exclusif dans la fen\u00eatre qui appara\u00eet et conservez pour d&rsquo;autres besoins. <\/li> <li><b>Commencez \u00e0 utiliser l&rsquo;outil sur votre page d&rsquo;accueil HTML<\/b><br> Placez le code que vous avez copi\u00e9 r\u00e9cemment dans votre page Web et appliquez les modifications. <\/li> <li><b>Vous avez termin\u00e9\u00a0! L&rsquo;int\u00e9gration est enti\u00e8rement r\u00e9alis\u00e9e.<\/b><br> Allez sur votre page pour voir comment fonctionne le plugin. <\/li><\/ol> <p>Si vous avez des questions ou faites face \u00e0 des complications, n&rsquo;h\u00e9sitez pas \u00e0 \u00e9crire \u00e0 notre \u00e9quipe d&rsquo;assistance. Nos consultants sont impatients de vous aider avec toutes les questions que vous pourriez avoir sur le produit. <\/p> <\/div><div class=\"faq\" data-component=\"FAQ\"><div class=\"faq-item\">\r\n\t\t\t\t\t<div class=\"faq-item-question\">\r\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">De quelle mani\u00e8re ajouter un slider Avant et Apr\u00e8s \u00e0 mon site HTML ?<\/h3>\r\n\r\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div class=\"faq-item-answer\">\r\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>La cr\u00e9ation du Le widget se produit sur le site Web Elfsight et vous n&rsquo;avez pas besoin de coder. Ouvrez notre d\u00e9mo en ligne pour cr\u00e9er votre widget personnel, r\u00e9cup\u00e9rez le code et ins\u00e9rez-le dans votre site. <\/p><\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div><div class=\"faq-item\">\r\n\t\t\t\t\t<div class=\"faq-item-question\">\r\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">Les meilleurs exemples d'utilisation de l'int\u00e9gration du curseur d'image avant et apr\u00e8s<\/h3>\r\n\r\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div class=\"faq-item-answer\">\r\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>Nous vous offrons des tonnes d&rsquo;options de personnalisation\u00a0: des widgets pleine taille \u00e0 impl\u00e9menter dans la zone de contenu, les plugins flottants avec fonction de d\u00e9filement, les vignettes pour le pied de page, la section d&rsquo;en-t\u00eate et toutes sortes d&rsquo;opportunit\u00e9s verticales pour les barres lat\u00e9rales et les menus. <\/p><\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div><div class=\"faq-item\">\r\n\t\t\t\t\t<div class=\"faq-item-question\">\r\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">Puis-je cr\u00e9er un curseur de retouche ou de comparaison simple \u00e0 l'aide de votre \u00e9diteur ?<\/h3>\r\n\r\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div class=\"faq-item-answer\">\r\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>Vous pouvez effectuer des modifications sur n&rsquo;importe quel widget. Il existe une multitude de mises en page \u00e0 votre disposition dans l&rsquo;\u00e9diteur, et elles peuvent toutes \u00eatre rapidement ajust\u00e9es selon vos besoins. <\/p><\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":18,"featured_media":0,"parent":1621,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-application-platform.php","meta":{"footnotes":""},"class_list":["post-4557","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Photos avant apr\u00e8s - ajoutez widget Photo avant\/apr\u00e8s curseur sur HTML<\/title>\n<meta name=\"description\" content=\"Int\u00e9grez un Photos avant apr\u00e8s attractif sur votre site. Appliquez la d\u00e9mo d&#039;Elfsight et g\u00e9n\u00e9rez votre widget en quelques minutes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Photos avant apr\u00e8s - ajoutez widget Photo avant\/apr\u00e8s curseur sur HTML\" \/>\n<meta property=\"og:description\" content=\"Int\u00e9grez un Photos avant apr\u00e8s attractif sur votre site. Appliquez la d\u00e9mo d&#039;Elfsight et g\u00e9n\u00e9rez votre widget en quelques minutes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/\" \/>\n<meta property=\"og:site_name\" content=\"Elfsight FR\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-09T10:13:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Photos avant apr\u00e8s - ajoutez widget Photo avant\/apr\u00e8s curseur sur HTML","description":"Int\u00e9grez un Photos avant apr\u00e8s attractif sur votre site. Appliquez la d\u00e9mo d'Elfsight et g\u00e9n\u00e9rez votre widget en quelques minutes.","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:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/","og_locale":"fr_FR","og_type":"article","og_title":"Photos avant apr\u00e8s - ajoutez widget Photo avant\/apr\u00e8s curseur sur HTML","og_description":"Int\u00e9grez un Photos avant apr\u00e8s attractif sur votre site. Appliquez la d\u00e9mo d'Elfsight et g\u00e9n\u00e9rez votre widget en quelques minutes.","og_url":"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/","og_site_name":"Elfsight FR","article_modified_time":"2025-07-09T10:13:42+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/","url":"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/","name":"Photos avant apr\u00e8s - ajoutez widget Photo avant\/apr\u00e8s curseur sur HTML","isPartOf":{"@id":"https:\/\/elfsight.com\/fr\/#website"},"datePublished":"2021-12-03T09:45:24+00:00","dateModified":"2025-07-09T10:13:42+00:00","description":"Int\u00e9grez un Photos avant apr\u00e8s attractif sur votre site. Appliquez la d\u00e9mo d'Elfsight et g\u00e9n\u00e9rez votre widget en quelques minutes.","breadcrumb":{"@id":"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elfsight.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Before and After Slider","item":"https:\/\/elfsight.com\/fr\/before-and-after-slider-widget\/"},{"@type":"ListItem","position":3,"name":"Before and After Slider &#8211; HTML"}]},{"@type":"WebSite","@id":"https:\/\/elfsight.com\/fr\/#website","url":"https:\/\/elfsight.com\/fr\/","name":"Elfsight FR","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elfsight.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"meta_box":{"industry":"","seo_heading":"","heading":"","description":"","cta_heading":"","cta_description":"","application":"1614","h1":"Widget Photos avant apr\u00e8s pour HTML","h1_caption":"Pr\u00e9sentez des comparaisons entre deux images, id\u00e9ales pour mettre en \u00e9vidence les transformations ou pr\u00e9senter sans effort les avantages du produit sur votre site Web HTML.","application_category":[],"applications_title":"","applications_request_title":"","applications_request_button_text":"","hero_text":"","hero_video":"","hero_video_schema_markup":"","selling_points_title":"","selling_points_caption":"","selling_points":[],"selling_points_cta_text":"","features_title":"","features":"","ed_cta_examples_text":"","ed_cta_examples_hidden":"","ed_cta_demo_text":"","ed_cta_demo_hidden":"","why_caption":"","why_editor_title":"","why_editor_text":"","why_team_title":"","why_team_text":"","why_service_title":"","why_service_text":"","template_catalog_visible":"","template_catalog_title":"","template_catalog_text":"","template_catalog_categories_visible":"","demo_title":"Cr\u00e9ez votre widget Slider Avant et Apr\u00e8s","demo_caption":"Configurez votre curseur Avant et Apr\u00e8s et ajoutez-le \u00e0 votre site Web HTML gratuitement\u00a0!","default_faq_hidden":"","app_template_category":[],"platform":"352","template_public_id":"","codecanyon_url":"","codecanyon_item_id":"","codecanyon_price":"","pricing_caption":"","pricing_elfsight_apps_hide_column":"","pricing_elfsight_apps_url":"","pricing_codecanyon_price_caption":"","integration_category":[],"integration_request_title":"","integration_request_cta":"","integration_platform":"","integrations":[],"platform_category":[],"video_schema_markup":"","price":"\u00c0 partir de $0\/mois","trial":"","benefits":[{"text":"Installation gratuite"},{"text":"Support Premium"},{"text":"Garantie de remboursement de 14 jours"},{"text":"L'am\u00e9lioration continue"}],"button_url":"#demo","button_target_blank":"0","button_nofollow":"0","attributes":[{"name":"Nombre d'installations","content":"1,000 - 5,000","_state":"expanded"},{"name":"Adaptif","content":"Oui","_state":"expanded"},{"name":"Navigateurs compatibles","content":"Firefox, Safari, Opera, Chrome, Edge","_state":"expanded"}],"tags":[],"tags_disable_links":"0","hide_more_platforms":"","video_object":"","demo_hide_cta":"0","demo_hide_cloud_options":"0","pricing_title":"","pricing":[{"pricing_icon":"platform","pricing_title":"Applications d'Elfsight","pricing_title_caption":"Solution num\u00e9rique multiplateforme qui fonctionne sur n'importe quel site","pricing_price":"\u00c0 partir de $0\/mois","pricing_price_caption":"Commencez avec un plan gratuit","pricing_benefits":[{"text":"Sites Web illimit\u00e9s"},{"text":"\u00c9quipe d'assistance professionnelle"},{"text":"Service d'installation gratuit"},{"text":"100% personnalisable"}],"pricing_button_text":"Ajouter au site Web","pricing_button_url":"https:\/\/apps.elfsight.com\/sign-up\/","pricing_button_nofollow":"1","_state":"expanded"}],"related_apps_title":"","related_apps_hidden":"1","author":"","image":[],"title":"","job":"","social_networks":[]},"_links":{"self":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/4557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/comments?post=4557"}],"version-history":[{"count":2,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/4557\/revisions"}],"predecessor-version":[{"id":14712,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/4557\/revisions\/14712"}],"up":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/1621"}],"wp:attachment":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/media?parent=4557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}