Gérer une boutique en ligne a le potentiel d'être rentable, mais cela implique souvent de concurrencer de nombreuses entreprises similaires sur votre marché spécifique. Pour vous démarquer de la concurrence, un outil efficace consiste à utiliser un curseur d'images avant/après dans WordPress.
L'utilisation d'un curseur d'images avant/après dans WordPress peut vous aider à présenter les caractéristiques et les avantages uniques de votre produit. Heureusement, cette fonctionnalité est facile à configurer avec un plugin tel que le Before After Image Comparison Slider for Elementor.
Dans cet article, nous allons explorer les raisons pour lesquelles l'utilisation d'un curseur d'images avant/après peut augmenter vos ventes de produits en ligne. De plus, nous vous fournirons un guide simple étape par étape sur la façon d'installer et de tirer le meilleur parti de cette fonctionnalité. Plongeons dans le vif du sujet !
Pourquoi vous devriez envisager d'utiliser un curseur d'images avant/après dans WordPress
Un curseur d'images avant/après peut démontrer à quoi ressemble une situation avec et sans votre produit. C'est une fonctionnalité visuelle qui peut rapidement montrer des avantages tangibles à vos clients.
Cette fonctionnalité est particulièrement bénéfique lorsque votre produit résout un problème. Plutôt que de dire aux clients comment votre article peut résoudre leurs problèmes, vous pouvez simplement le leur montrer.
Par exemple, nous utilisons un curseur d'images avant/après sur notre site Web pour montrer les avantages de notre plugin Advanced Coupons. Il démontre que vous disposez de plus de paramètres et de flexibilité pour personnaliser vos coupons lorsque vous utilisez notre outil WooCommerce :
Un curseur d'images peut distinguer votre boutique en ligne de la concurrence. La plupart des boutiques de commerce électronique utilisent des descriptions et des photos de produits pour promouvoir leurs marchandises. Cependant, très peu d'entre elles utilisent des éléments immersifs tels que des curseurs.
Dans l'ensemble, un curseur d'images est interactif, ce qui peut susciter l'intérêt d'un client potentiel. Il peut faire glisser le curseur selon ses besoins pour explorer pleinement les caractéristiques de votre produit.
Comment afficher un curseur d'images avant/après dans WordPress
Il existe plusieurs façons de configurer un curseur d'images avant/après dans WordPress. Dans ce tutoriel, nous allons travailler avec le Before After Image Comparison Slider for Elementor. Cet outil gratuit s'intègre facilement avec le constructeur de pages Elementor et vous permet de personnaliser vos images de curseur.
Vous pourriez également envisager d'utiliser un autre plugin de curseur. Ce sont deux bonnes options :
- BEAF Pro par Themefic. Cet outil premium comprend plusieurs styles de prévisualisation, une galerie filtrable et différentes options de glissement pour vos images avant/après. Une licence annuelle commence à 12 $ pour un site web.
- Twenty20 Image Before After. Ce plugin réactif utilise un shortcode pour ajouter un simple curseur d'image à votre site WordPress. Il est également entièrement gratuit.
Maintenant, passons à la création d'un curseur d'image avec l'outil Before After Image Comparison Slider. Notez que vous devrez également installer le plugin Elementor si vous ne l'utilisez pas déjà.
Étape 1 : Installer le Before After Image Comparison Slider pour Elementor
Ouvrez votre tableau de bord WordPress et allez dans Plugins > Ajouter. Ensuite, recherchez « before after image comparison » dans la boîte de recherche et sélectionnez le premier plugin qui apparaît :
Cliquez sur le bouton Installer maintenant. Une fois ce processus terminé, sélectionnez Activer pour finaliser la configuration du plugin.
Alternativement, vous pouvez télécharger le plugin sous forme de fichier .zip. Ensuite, vous pouvez le téléverser sur votre site en cliquant sur Téléverser un plugin > Choisir un fichier > Installer maintenant :
Sélectionnez Activer le plugin pour terminer l'installation. Le plugin est maintenant opérationnel sur votre site.
Étape 2 : Téléverser vos images
Vous devriez maintenant voir un élément de menu Before After Slider for the Elementor dans votre tableau de bord WordPress. Cependant, nous allons personnaliser notre curseur à l'aide de l'éditeur Elementor.
Ouvrez la page ou l'article où vous souhaitez utiliser le curseur.
Ensuite, cliquez sur le bouton Modifier avec Elementor en haut de l'écran :
Vous devriez maintenant voir un menu Elementor à gauche. Faites défiler jusqu'en bas jusqu'à ce que vous voyiez WEB BUILDERS ELEMENT. Ouvrez le menu déroulant et faites glisser le Before After Image Comparison Slider sur votre page :
Maintenant, téléversez vos images avant et après en naviguant vers les cases correspondantes et en cliquant sur Choisir une image :
Il vous sera alors demandé de choisir des images dans votre médiathèque ou de les téléverser directement depuis votre ordinateur. Une fois que vous avez ajouté vos images, vous pouvez passer à l'étape finale.
Étape 3 : Configurer votre curseur et enregistrer vos modifications
La plupart des paramètres de configuration du curseur ne sont disponibles qu'avec la version Pro du plugin. Par exemple, si vous souhaitez ajuster l'orientation du curseur, les effets de survol et les paramètres des étiquettes, vous devrez payer pour l'outil premium :
Cependant, vous pouvez modifier les tailles des images en cliquant sur Taille de l'image et en choisissant vos dimensions dans le menu déroulant :
Si vous cliquez sur l'onglet Avancé, vous trouverez des paramètres plus techniques. Par exemple, vous pouvez ajuster les effets de mouvement, l'apparence et les attributs du curseur. Vous pouvez également appliquer du CSS personnalisé :
Lorsque vous êtes satisfait de vos modifications, sélectionnez PUBLIER.
Vous devriez maintenant pouvoir voir votre curseur en action :
Félicitations ! Vous avez créé avec succès un curseur d'image avant/après dans WordPress.
Conclusion
Un curseur d'image permet aux utilisateurs d'interagir avec vos produits et de démontrer les caractéristiques et les avantages de vos articles. De plus, l'utilisation de l'un de ces curseurs peut offrir une expérience plus immersive que de simples descriptions ou photos de produits.
Pour récapituler, vous pouvez utiliser un curseur d'image avant/après dans WordPress en suivant ces étapes :
- Installez le plugin Before After Image Comparison Slider pour Elementor.
- Téléchargez vos images.
- Configurez votre curseur et enregistrez vos modifications.
Avez-vous des questions sur l'utilisation d'un curseur d'image avant/après dans WordPress ? Faites-le nous savoir dans la section des commentaires ci-dessous !
