{"id":372041,"date":"2023-04-25T13:04:00","date_gmt":"2023-04-25T10:04:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=372041"},"modified":"2023-04-25T13:04:01","modified_gmt":"2023-04-25T10:04:01","slug":"le-moyen-le-plus-simple-dajouter-le-curseur-avant-et-apres","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/le-moyen-le-plus-simple-dajouter-le-curseur-avant-et-apres\/","title":{"rendered":"Le moyen le plus simple d’ajouter le curseur Avant et Apr\u00e8s"},"content":{"rendered":"\n

Les images avant et apr\u00e8s sont largement utilis\u00e9es \u00e0 des fins de marketing dans un tr\u00e8s large \u00e9ventail d’industries<\/strong>. Il n’y a pas de mots qui peuvent mieux d\u00e9crire l’effet d’un certain processus qu’une image qui montre pr\u00e9cis\u00e9ment \u00e0 quoi ressemblait quelqu’un ou quelque chose avant et apr\u00e8s ce processus. M\u00eame dans les entreprises qui ne tournent pas autour de produits dont les effets sont visibles, il est possible d’utiliser cette fonctionnalit\u00e9 de mani\u00e8re humoristique.<\/p>\n

Disons que vous dirigez un restaurant – vous pourriez montrer \u00e0 quoi ressemble une personne avant de manger dans votre palais et \u00e0 quel point elle est ravie apr\u00e8s avoir go\u00fbt\u00e9 vos d\u00e9lices. Les possibilit\u00e9s avant et apr\u00e8s les offres de curseur en termes de description des avantages et des avantages de vos produits\/services sont illimit\u00e9es<\/strong>. Tout d\u00e9pend de votre imagination.<\/p>\n

Tout comme l’ ajout d’un effet de parallaxe<\/a> \u00e0 vos pages donne \u00e0 votre site Web un aspect moderne, le curseur avant et apr\u00e8s le rend difficile \u00e0 oublier car les images racontent plus de 1000 mots.<\/p>\n

De plus, vous pouvez ajouter vous-m\u00eame cette fonctionnalit\u00e9 \u00e0 votre site Web. Dans cet article, nous allons vous montrer comment cr\u00e9er un curseur avant et apr\u00e8s avec le populaire widget de comparaison avant\/apr\u00e8s<\/a> gratuit .<\/p>\n

Restez \u00e0 l’\u00e9coute pour en savoir plus sur\u00a0:<\/p>\n<\/p>\n

Ajout du curseur Avant et Apr\u00e8s avec Qi Addons pour Elementor<\/h2>\n

Qi Addons for Elementor<\/a> est un outil intuitif qui vous permet d’ajouter<\/strong> sans effort une large gamme d’\u00e9l\u00e9ments magnifiques \u00e0 votre site Web. Il est livr\u00e9 avec une interface tr\u00e8s pratique et conviviale<\/strong>, et les d\u00e9butants comme les utilisateurs avanc\u00e9s le trouveront facile \u00e0 utiliser. Ce qui est particuli\u00e8rement g\u00e9nial avec Qi, c’est le fait qu’en plus de tant de fonctionnalit\u00e9s utiles, il vous offre \u00e9galement une touche d’\u00e9l\u00e9gance contemporaine.<\/p>\n

Le processus d’installation<\/a> des modules compl\u00e9mentaires QI pour Elementor n’est pas diff\u00e9rent de toute autre installation de plug-in. Si vous avez des questions \u00e0 ce sujet, assurez-vous de v\u00e9rifier le lien que nous avons fourni ci-dessus, et vous pouvez \u00e9galement nous \u00e9crire dans la section des commentaires.<\/p>\n

\"Le<\/a><\/p>\n

Comme il s’agit d’un plugin Elementor, assurez-vous de passer \u00e0 l’\u00e9diteur Elementor lors de la cr\u00e9ation d’un nouveau message<\/strong>. Tous les widgets Qi Addons seront clairement affich\u00e9s dans le menu des \u00e9l\u00e9ments de gauche<\/strong>. Faites simplement d\u00e9filer le menu pour les trouver.<\/p>\n

Le widget Slider Avant et Apr\u00e8s<\/a> offre un moyen simple et efficace d’afficher deux images dans le m\u00eame cadre<\/strong>. Trouvez-le dans le menu de la barre lat\u00e9rale \u00e0 gauche, en tapant le nom du widget dans le champ de recherche ou en parcourant les widgets dans le menu.<\/p>\n

\"Le<\/a><\/p>\n

Pour ajouter le curseur de comparaison Avant\/Apr\u00e8s, faites glisser et d\u00e9posez l’\u00e9l\u00e9ment Elementor \u00e0 l’endroit souhait\u00e9. Lorsque le widget est ajout\u00e9, tous les param\u00e8tres seront sur le c\u00f4t\u00e9 gauche<\/strong> et dans les onglets Contenu et Style se trouvent toutes les options li\u00e9es au curseur<\/strong>.<\/p>\n

\"Le<\/a><\/p>\n

Maintenant, vous devez ajouter les images avant et apr\u00e8s au curseur<\/strong>. Tout d’abord, nous ajoutons l’image avant – survolez le champ de l’image et l’option Choisir une image s’affichera ou cliquez simplement sur la petite ic\u00f4ne plus au milieu du champ.<\/p>\n

\"Le<\/a><\/p>\n

Vous pouvez choisir une image dans la m\u00e9diath\u00e8que ou t\u00e9l\u00e9charger une image dans votre m\u00e9diath\u00e8que si n\u00e9cessaire<\/strong>. Faites simplement glisser et d\u00e9posez l’image s\u00e9lectionn\u00e9e et placez-la dans la m\u00e9diath\u00e8que si elle n’y est pas d\u00e9j\u00e0, puis s\u00e9lectionnez-la et choisissez.<\/p>\n

\"Le<\/a><\/p>\n

Apr\u00e8s avoir ins\u00e9r\u00e9 les images souhait\u00e9es, vous pouvez continuer \u00e0 personnaliser le curseur avant\/apr\u00e8s en modifiant le texte qui s’affichera dans le cercle au milieu du curseur<\/strong>. Vous pouvez \u00e9crire une instruction ici, ou un message plus accrocheur, cela d\u00e9pend de vous et du style de votre site Web. Vous pouvez \u00e9galement choisir si vous souhaitez que le texte soit align\u00e9 verticalement ou horizontalement.<\/p>\n

Si vous souhaitez ajuster l’endroit o\u00f9 la bordure entre l’image avant et apr\u00e8s appara\u00eetra sur le curseur, vous pouvez saisir la valeur de d\u00e9calage souhait\u00e9e dans le champ<\/strong>. La valeur par d\u00e9faut est de 50\u00a0%, ce qui signifie que la bordure par d\u00e9faut se trouve en plein milieu de l’image. Voici \u00e0 quoi peut ressembler le curseur si vous ajustez le d\u00e9calage\u00a0:<\/p>\n

\"Le<\/a><\/p>\n

Il est maintenant temps d’affiner le curseur avant-apr\u00e8s. Voyons ce que vous pouvez personnaliser d’autre pour donner au curseur l’apparence dont vous avez besoin. Cliquez sur l’onglet Style pour explorer plus d’options<\/strong>.<\/p>\n

\"Le<\/a><\/p>\n

Si vous souhaitez d\u00e9placer la poign\u00e9e circulaire du centre de l’image, utilisez simplement le curseur pour r\u00e9gler la valeur D\u00e9calage sup\u00e9rieur de la poign\u00e9e<\/strong>. Vous verrez imm\u00e9diatement les changements en direct afin que vous puissiez facilement d\u00e9cider ce qui vous convient le mieux. Vous ajusterez \u00e9galement la taille du cercle de la m\u00eame mani\u00e8re, ainsi que la bordure entre la version avant\/apr\u00e8s de l’image<\/strong>.<\/p>\n

\"Le<\/a><\/p>\n

Vous pouvez \u00e9galement cliquer sur la couleur du texte Nabdle pour cr\u00e9er votre nuance de couleur pour le texte dans le cercle<\/strong>, choisissez \u00e9galement la police du texte de la m\u00eame mani\u00e8re<\/strong>. Enfin, vous pouvez \u00e9galement personnaliser la couleur du cercle<\/strong> de la m\u00eame mani\u00e8re.<\/p>\n

\"Le<\/a><\/p>\n

Explorer les options avanc\u00e9es<\/h2>\n

Dans l’onglet Avanc\u00e9, vous trouverez de nombreuses autres options pour rendre le curseur plus attrayant et accrocheur. Ces options ne sont pas exclusives \u00e0 ce widget uniquement, ce sont des options Elementor par d\u00e9faut que vous pouvez \u00e9galement utiliser pour modifier d’autres widgets sur une page.<\/p>\n

Illustrons quelques-uns des plus int\u00e9ressants. N’h\u00e9sitez pas \u00e0 tester toutes les options, car vous verrez toutes les modifications que vous apportez en direct, afin que vous puissiez savoir instantan\u00e9ment ce que chaque option fait au curseur et si cela fonctionne pour vous.<\/p>\n

\"Le<\/a><\/p>\n

Si vous ouvrez le menu Avanc\u00e9, vous verrez les options de r\u00e9glage de la marge et du remplissage<\/strong>. Vous remarquerez une petite ic\u00f4ne d’ordinateur portable \u00e0 c\u00f4t\u00e9 de chaque option qui vous permet de d\u00e9finir diff\u00e9rentes valeurs de marge et de rembourrage sur diff\u00e9rents appareils – ordinateur portable, tablette ou mobile.<\/p>\n

\"Le<\/a><\/p>\n

Les effets de mouvement sont particuli\u00e8rement int\u00e9ressants et vous avez un tr\u00e8s large choix de plus de 35 effets de mouvement parmi lesquels choisir. Vous avez \u00e9galement la possibilit\u00e9 de d\u00e9finir diff\u00e9rentes animations \u00e0 afficher sur diff\u00e9rents appareils<\/strong>. Apr\u00e8s avoir choisi le type d’animation, vous pouvez \u00e9galement ajuster sa dur\u00e9e et son retard si vous le jugez n\u00e9cessaire.<\/p>\n

\"Le<\/a><\/p>\n

Cliquez maintenant sur l’ onglet Transformer pour d\u00e9couvrir d’autres effets que vous pouvez utiliser<\/strong>. De la rotation \u00e0 l’inclinaison et au retournement horizontal et vertical, vous pouvez faire beaucoup de choses pour modifier l’affichage du curseur.<\/p>\n

\"Le<\/a><\/p>\n

Dans l’onglet Bordure, vous trouverez des options qui vous permettront de d\u00e9corer le c\u00f4t\u00e9 en ajoutant des bordures d’image d’ombre dans les couleurs que vous s\u00e9lectionnez<\/strong>. Vous pouvez \u00e9galement choisir d’ajouter un effet d’ombre autour de la zone de diapositive et de d\u00e9finir la sortie de l’effet d’ombre.<\/p>\n

\"Le<\/a><\/p>\n

Les options de l’onglet Masque sont tr\u00e8s pratiques. Vous pouvez d\u00e9finir ici que le curseur s’affiche sous diff\u00e9rentes formes<\/strong> – cercle, fleur, croquis, triangle, goutte, hexagone ou m\u00eame ajouter une forme personnalis\u00e9e. Il est \u00e9galement possible d’ajuster la taille et la position de la forme s\u00e9lectionn\u00e9e.<\/p>\n

\"Le<\/a><\/p>\n

Portez une attention particuli\u00e8re \u00e0 l’ onglet Responsive<\/strong>, car c’est tr\u00e8s vous pouvez choisir que le curseur ne s’affiche pas sur les appareils s\u00e9lectionn\u00e9s<\/strong>.<\/p>\n

\"Le<\/a><\/p>\n

Voici \u00e0 quoi ressemble le curseur sur la page apr\u00e8s l’avoir ajust\u00e9 \u00e0 nos besoins\u00a0:<\/p>\n

\"Le<\/a><\/p>\n

Pour plus d’informations, regardez cette vid\u00e9o :<\/p>\n