Comment afficher les photos avant et après dans WordPress

Les images sont une partie importante du marketing de contenu avec le pouvoir d’attirer plus d’audience sur votre site et d’améliorer l’expérience globale de l’utilisateur. Ils peuvent divertir, informer, inspirer et engager les utilisateurs à la fois, c’est pourquoi vous devez vous efforcer de faire de votre mieux pour incorporer des images attrayantes et pertinentes dans le contenu de votre site Web.

Maintenant, bien que les images soient suffisamment puissantes telles quelles, parfois, le simple fait de mettre des visuels sur votre site ne suffit pas à maintenir l’intérêt des visiteurs. C’est pourquoi nous vous suggérons d’aller plus loin et d’envisager d’ajouter des images interactives à votre site. C’est non seulement une façon géniale de amener votre public à s’engager davantage avec votre contenu, mais il peut aussi aidez-les à en savoir plus sur votre marque ou votre entreprise dans son ensemble. Prenez des images avant et après, par exemple. Ces types d’images sont utilisées côte à côte pour montrer de petites différences entre deux images et, en tant que telles, elles sont souvent utilisées comme de simples images statiques. Cependant, en ajoutant un effet de curseur soigné à ces deux images, vous autoriserez instantanément plus d’interactivité et rendrez les choses plus excitantes pour les utilisateurs.

Si vous souhaitez apprendre à ajouter un effet de curseur avant et après dans WordPress, vous serez heureux d’apprendre que c’est assez simple à faire si vous utilisez l’aide d’un plugin approprié. Nous vous montrerons toutes les étapes nécessaires pour ajouter cette fonctionnalité utile à votre site WordPress en utilisant le widget Slider de comparaison avant/après du plugin Qi Addons for Elementor, alors assurez-vous de lire la suite.

Qu’est-ce qu’un curseur d’image avant et après et pourquoi est-il utile

Comme nous l’avons déjà mentionné au début, les images avant et après se composent généralement de deux images placées côte à côte pour mettre en valeur et souligner tout type de différence ou de progrès. Maintenant, en ajoutant un effet de curseur à ces deux images, vous donnez aux utilisateurs la possibilité de découvrir la taille complète des deux images en déplaçant la poignée du curseur et de les comparer de manière amusante et engageante. Par exemple, si le curseur est placé horizontalement, les utilisateurs pourront révéler la première image en déplaçant le curseur avec leur souris complètement vers la droite. De la même manière, la deuxième image s’affichera une fois qu’ils auront déplacé le curseur complètement vers la gauche.

Ce type d’effet de curseur peut être utile pour quiconque veut impressionner et inspirer son public, ou simplement présenter la valeur et l’efficacité de leurs produits ou services de manière interactive. Par conséquent, ce type d’effet peut être utilisé par toutes sortes d’entreprises, qu’elles soient grandes ou petites, liées à la photographie, au design, à la beauté, à la santé ou à autre chose.

Dites que vous avez un programme de remise en forme que vous souhaitez présenter à vos clients potentiels. Vous pourrez potentiellement booster vos ventes en affichant des photos avant et après de personnes qui ont réussi à perdre du poids et/ou à prendre plus de muscle après avoir utilisé votre programme. Bref, vous attirerez l’intérêt des utilisateurs en leur permettant de voir les preuves visuelles de vos réclamations.

Ajout d’un curseur d’image avant et après avec les modules complémentaires Qi pour le plugin Elementor

Maintenant, bien qu’il existe de nombreux plugins différents sur le Web qui vous permettront d’ajouter ce type de curseur d’image à votre site, nous avons décidé de le démontrer à l’aide de notre plugin Qi Addons for Elementor. L’une des nombreuses choses qui distinguent ce plugin est le fait qu’il est livré avec un ensemble de 60 widgets flexibles qui vous permettent de concevoir et de personnaliser toutes sortes d’éléments et de sections – de la typographie et des éléments créatifs aux fonctionnalités commerciales et WooCommerce. En bref, vous pouvez utiliser les modules complémentaires Qi pour Elementor pour à peu près n’importe quel type de site Web, entièrement gratuit.

Parmi ces 60 widgets, le widget Avant/Après Comparaison Slider peut être utilisé pour créer des curseurs de comparaison interactifs et ajouter des images en toute simplicité. Il vous permet de choisir parmi deux types d’orientation – horizontal et vertical, d’ajouter vos images avant et après afin que les utilisateurs puissent faire glisser la poignée du curseur et découvrir chaque image, personnaliser le texte de la poignée, la couleur, la typographie, etc.

Avant de commencer, nous devons vous rappeler que Qi Addons for Elementor est le plugin créé pour le Élémentor constructeur de pages. Par conséquent, vous devez d’abord avoir installé Elementor sur votre site avant de procéder à l’installation et à l’utilisation du plugin Qi Addons for Elementor.

De plus, si vous préférez regarder des vidéos, nous avons créé un didacticiel vidéo sur le même sujet, alors n’hésitez pas à le consulter :

Tout d’abord, dirigez-vous vers le backend dans votre éditeur de page/publication et, dans la barre latérale d’Elementor, recherchez le widget Curseur de comparaison avant/après. Ensuite, faites-le simplement glisser vers le côté droit de votre écran.

Comme vous pouvez le voir, le widget par défaut a un alignement horizontal et suffisamment d’espace réservé pour deux images.

Dans le Teneur onglet, vous pourrez cliquer sur la petite icône de la corbeille et supprimer les images par défaut de vos images Avant et Après.

Ensuite, vous pouvez ajouter le vôtre en cliquant n’importe où sur les champs d’image.

Frappez le Insérer un média bouton une fois que vous avez sélectionné votre image Avant. Ensuite, répétez le même processus pour votre image After.

Étant donné que vous ne pouvez pas faire glisser le séparateur dans le backend, vous devez vous rendre au début de votre page pour voir à quoi cela ressemble. Vous pouvez simplement l’ouvrir dans un autre onglet pour plus de commodité.

Assurez-vous de rafraîchir votre page pour que le nouvel élément s’affiche. Faites glisser votre séparateur de droite à gauche (ou vice versa) pour voir à quoi ressemble votre curseur d’image (comme nous l’avons fait ci-dessous) :

Juste en dessous de l’option qui vous permet de sélectionner vos images, il y a le Gérer le texte option. C’est en fait le texte qui apparaîtra sur votre intercalaire. Le nôtre est réglé sur Glisser par défaut, mais vous pouvez changer le vôtre en tout ce que vous voulez.

Ensuite, le Orientation L’option peut être utilisée pour changer votre curseur de Horizontal à Verticale.

Et voilà, notre curseur a maintenant une orientation verticale.

Une fois que vous Mettre à jour votre curseur, vous pourrez voir à quoi ressemble l’effet de traînée avec les paramètres fraîchement personnalisés.

Maintenant que nous vous avons montré à quoi peut ressembler l’orientation verticale, nous allons rétablir cette option sur Horizontal et frappe Mettre à jour. Bien sûr, vous devriez choisir celui qui vous convient le mieux.

Les Décalage par défaut L’option vous permet d’ajuster la position de départ du séparateur entre vos images. Il est défini sur 50 pour cent par défaut, ce qui signifie qu’il est positionné juste au milieu.

La définition d’une valeur différente ici déplacera la position du diviseur vers la gauche ou vers la droite. En le réglant sur quelque chose d’un peu plus petit, comme 45% (comme nous l’avons fait), vous pouvez instantanément voir que sa position est maintenant déplacée vers la gauche. Nous avons conservé ce paramètre pour notre position de diviseur, mais comme pour toute autre option, vous pouvez choisir n’importe quelle autre valeur.

Passons à l’onglet Style – il y a quelques options ici liées au style de votre curseur. Le premier est le Décalage supérieur de la poignée. A savoir, il vous permet de changer la position de la poignée du diviseur. Vous pouvez soit utiliser le curseur pour l’ajuster, soit saisir une nouvelle valeur. Nous avons changé la valeur en pourcentages pour la nôtre et l’avons fixée à 16%.

Juste en dessous, il y a la possibilité d’ajuster la poignée Taille du cercle. Les mêmes règles s’appliquent également à cette option – vous pouvez déplacer le curseur vers la gauche ou la droite pour ajuster la taille ou simplement entrer la valeur souhaitée.

Les Taille de la bordure L’option vous permet d’ajuster la largeur de la ligne de séparation. Nous avons laissé la nôtre par défaut, mais si vous le souhaitez, vous pouvez ajuster cette option de la même manière que les deux précédentes.

Maintenant le Couleur du texte L’option change la couleur du texte de votre poignée. Vous pouvez facilement le changer en n’importe quelle couleur que vous préférez en utilisant le Pipette à couleurs (soit en utilisant le curseur de couleur, soit en entrant un code hexadécimal).

En cliquant sur le Typographie de poignée L’option ouvre un tout nouvel ensemble d’options liées à la typographie. Ici, vous pourrez modifier l’apparence du texte à l’intérieur du séparateur.

Vous pourrez choisir une famille de polices (soit en faisant défiler la liste des polices, soit en saisissant la vôtre), modifier la taille de la police (en utilisant le curseur ou en saisissant une valeur personnalisée), définir la police Poids, utilisez le texte Transformer option, Style, Décoration, et plus.

Finalement, le Couleur de la poignée L’option vous permettra de changer la couleur du diviseur et du cercle de la poignée. C’est utile car cela peut vous permettre de faire correspondre ces éléments avec la palette de couleurs que vous avez sur vos images ou le reste de la conception de votre site.

Le dernier, Avancée L’onglet propose quelques options pratiques liées au positionnement, à la réactivité, aux animations d’entrée, etc. Néanmoins, comme il est également présent dans tous les autres widgets Elementor, nous ne les couvrirons pas dans ce didacticiel.

Après avoir touché le Mettre à jour , actualisez la page avec votre curseur pour voir à quoi cela ressemble en direct.

Envelopper les choses

Afficher des images avant et après sur votre site WordPress est un moyen amusant et interactif pour vos visiteurs de comparer deux images différentes et de leur permettre de voir les avantages visuels de vos produits et services. En les laissant utiliser l’effet curseur pour révéler les différences entre vos images, vous augmentez le potentiel d’engagement de votre public avec votre marque, ce qui ne peut que conduire à plus de ventes à long terme. Ainsi, peu importe si vous souhaitez présenter les résultats de l’utilisation de vos produits de nettoyage, produits de soin de la peau, résultats de perte de poids de votre programme de remise en forme ou d’alimentation, ou toute autre chose, un curseur d’image avant et après est une solution.

L’ajout d’un effet de curseur à vos images avant et après est aussi simple que possible si vous utilisez l’aide d’un widget de comparaison avant/après du plugin Qi Addons for Elementor. Il est super intuitif et contient de nombreuses options de personnalisation qui vous permettent de créer un curseur d’aspect unique qui correspond le mieux à la conception globale de votre page. Allez-y et suivez nos instructions et vous pourrez afficher vos belles photos avant et après sur votre site WordPress en un rien de temps.