{"id":371776,"date":"2023-03-27T18:11:00","date_gmt":"2023-03-27T15:11:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371776"},"modified":"2023-03-27T18:18:17","modified_gmt":"2023-03-27T15:18:17","slug":"comment-ajouter-des-photos-avant-et-apres-a-votre-site-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-des-photos-avant-et-apres-a-votre-site-wordpress\/","title":{"rendered":"Comment ajouter des photos avant et apr\u00e8s \u00e0 votre site WordPress"},"content":{"rendered":"\n<p>Les photos avant et apr\u00e8s sont l&rsquo;une des tactiques de marketing les plus efficaces. La route vers les r\u00e9sultats finaux est souvent longue et horrible. Montrer aux gens ce qui se trouve au bout de cette route constitue un argumentaire de vente tr\u00e8s convaincant.<\/p>\n<p>Si vous souhaitez afficher des photos avant et apr\u00e8s sur votre site WordPress, vous n&rsquo;avez pas besoin de Photoshop ni de comp\u00e9tences en conception. Dans ce court tutoriel, nous allons vous montrer <strong>comment cr\u00e9er des photos avant et apr\u00e8s \u00e9l\u00e9gantes<\/strong>.<\/p>\n<h2>Comment fonctionne l&rsquo;effet photo avant et apr\u00e8s\u00a0?<\/h2>\n<p>Il existe de nombreuses fa\u00e7ons de cr\u00e9er une image avant et apr\u00e8s, mais si vous voulez la rendre <strong>rapide et bien con\u00e7ue en m\u00eame temps<\/strong>, installez le plugin <a href=\"https:\/\/wordpress.org\/plugins\/twenty20\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Twenty20 Image Before-After .<\/a> Lorsque vous avez ce plugin, vous pouvez cr\u00e9er de nouvelles photos avant et apr\u00e8s quand vous le souhaitez et les placer sur n&rsquo;importe quelle page de votre site Web.<\/p>\n<p>Au lieu d&rsquo;une image statique, les visiteurs de votre site Web obtiennent un <strong>curseur interactif<\/strong>. Bien s\u00fbr, <strong>ce plugin peut \u00eatre utilis\u00e9 pour des comparaisons ou afficher deux faces d&rsquo;un m\u00eame produit<\/strong>.<\/p>\n<p>Nous allons maintenant vous guider tout au long du processus de configuration du plugin et d&rsquo;ajout de photos avant et apr\u00e8s \u00e0 votre site Web WordPress.<\/p>\n<h2>Affichage de la photo avant et apr\u00e8s dans WordPress<\/h2>\n<p>\u00c9tant donn\u00e9 que le plugin Twenty20 Image Before-After est open-source, vous pouvez le trouver dans le r\u00e9pertoire des plugins WordPress. Allez simplement dans le panneau d&rsquo;administration et cliquez sur <strong>Plugins&gt; Ajouter un nouveau<\/strong>. Vous trouverez le plugin dont vous avez besoin en tapant son nom dans la barre de recherche.<\/p>\n<p>S\u00e9lectionnez le plugin et cliquez sur le bouton &quot;installer&quot;. Une fois que WordPress aura t\u00e9l\u00e9charg\u00e9 et install\u00e9 le plugin, vous verrez un message avec un lien d&rsquo;activation. Cliquez dessus pour activer le plugin. Vous \u00eates maintenant pr\u00eat \u00e0 l&rsquo;utiliser. besoin d&rsquo;un guide vid\u00e9o sur l&rsquo;installation des plugins, voici <a href=\"https:\/\/themewp.inform.click\/fr\/comment-installer-des-plugins-wordpress-en-toute-simplicite\/\" title=\"un guide d\u00e9taill\u00e9 sur l&#039;installation des plugins WordPress\">un guide d\u00e9taill\u00e9 sur l&rsquo;installation des plugins WordPress<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e393081909.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e393081909.jpg\" alt=\"Comment ajouter des photos avant et apr\u00e8s \u00e0 votre site WordPress\"><\/a><\/p>\n<p>Lorsque vous d\u00e9cidez de cr\u00e9er une image de curseur avant et apr\u00e8s, acc\u00e9dez au backend de la page. Vous verrez le shortcode Twenty20.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e393358c40.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e393358c40.jpg\" alt=\"Comment ajouter des photos avant et apr\u00e8s \u00e0 votre site WordPress\"><\/a><\/p>\n<p>Cliquez dessus pour ouvrir la m\u00e9diath\u00e8que WordPress ou t\u00e9l\u00e9chargez les photos dont vous avez besoin. S\u00e9lectionnez deux photos et cliquez sur le bouton Ins\u00e9rer.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e3935db5ab.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e3935db5ab.jpg\" alt=\"Comment ajouter des photos avant et apr\u00e8s \u00e0 votre site WordPress\"><\/a><\/p>\n<p>Lorsque vous faites cela, vous verrez une fen\u00eatre contextuelle avec des champs dans lesquels <strong>vous pouvez ajouter du texte et ajuster la largeur, la valeur de d\u00e9calage, l&rsquo;alignement, l&rsquo;action de d\u00e9clenchement, la direction du curseur,<\/strong> etc. Lorsque vous personnalisez votre photo avant et apr\u00e8s, cliquez sur le bouton Ins\u00e9rer un code court.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e39388644c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e39388644c.jpg\" alt=\"Comment ajouter des photos avant et apr\u00e8s \u00e0 votre site WordPress\"><\/a><\/p>\n<p>Pr\u00e9visualisez la page et v\u00e9rifiez \u00e0 quoi ressemble votre image avant et apr\u00e8s. Lorsque vous faites glisser la poign\u00e9e sur le c\u00f4t\u00e9, l&rsquo;autre image appara\u00eet.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e393bf0e86.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-291312-633e393bf0e86.jpg\" alt=\"Comment ajouter des photos avant et apr\u00e8s \u00e0 votre site WordPress\"><\/a><\/p>\n<p>Ce plugin WordPress de photos avant et apr\u00e8s est <strong>r\u00e9actif et fonctionnel sur tous les appareils<\/strong>. Comme vous pouvez le voir, il dispose d&rsquo;une interface utilisateur simple et propre. <strong>Il prend en charge WP Bakery Visual Composer, Elementor Page Builder et UX Builder par UXThemes<\/strong>.<\/p>\n<p>Maintenant, vous \u00eates pr\u00eat. Avec ce plugin, vous pouvez cr\u00e9er un nombre illimit\u00e9 d&rsquo;images avant et apr\u00e8s! Si vous souhaitez enrichir votre site Web avec des effets photo plus impressionnants, continuez avec cette <a href=\"https:\/\/themewp.inform.click\/fr\/7-meilleurs-plugins-de-slider-wordpress-pour-2022\/\" title=\"liste des meilleurs plugins de curseur WordPress\">liste des meilleurs plugins de curseur WordPress<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voici un guide pour ajouter des photos avant et apr\u00e8s \u00e0 l&rsquo;aide d&rsquo;un simple plugin WordPress. Montrez aux visiteurs de votre site Web le pouvoir de la transformation\u00a0!<\/p>\n","protected":false},"author":1,"featured_media":363616,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-371776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/371776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=371776"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/371776\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/363616"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=371776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=371776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=371776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}