Slider de comparaison d'images d'élémenteur : comment créer une vitrine avant après

Les images statiques côte à côte ne rendent pas justice à votre travail Un montage photo, une rénovation de maison, une transformation de produit, ils méritent tous mieux que deux images assises l'une à côté de l'autre Un curseur de comparaison d'images Elementor corrige cela. Les visiteurs glissent une poignée sur l'image pour révéler eux-mêmes les versions avant et après, et ce peu d'interaction les maintient sur votre page plus longtemps.

J'utilise le widget Master Addons Image Comparison sur les pages de destination des clients, et il obtient systématiquement plus d'engagement que les captures d'écran statiques Ce tutoriel couvre la configuration, la personnalisation et quelques choses qui méritent d'être connues avant que le widget ne soit gratuit, il se trouve à l'intérieur du panneau d'Elementor comme n'importe quel autre widget, et vous pouvez le faire fonctionner en deux minutes environ.

Ce que ce guide couvre :

• Qu'est-ce qu'un curseur de comparaison d'images
• Qui a besoin d'un curseur avant/après
• Ce que vous obtenez avec le widget gratuit
• Comment en créer un (étape par étape)
• Conseils pour une meilleure comparaison
• Dépannage des problèmes courants
• Addons principaux vs alternatives
• Pourquoi Maître Addons
• Commencer
• Questions fréquemment posées

Qu'est-ce qu'un curseur de comparaison d'images ?

Un curseur de comparaison d'images superpose deux images l'une sur l'autre avec un diviseur dragable entre elles Les utilisateurs le glissent vers la gauche et la droite (ou de haut en bas) pour révéler une image sur l'autre Vous définissez une image“avant” et une image“après” dans l'éditeur, et le widget gère le reste.

Vous les avez probablement vus sur des portfolios de photographies, des sites Web dentaires ou des pages immobilières montrant des projets de rénovation Au lieu de regarder passivement deux photos distinctes, les visiteurs interagissent physiquement avec la comparaison Cette interaction augmente le temps passé sur la page, ce qui aide votre RÉFÉRENCEMENT et abaisse les taux de rebond.

Qui a besoin d'un curseur avant après en élément ?

Quiconque veut montrer une transformation Ce sont les cas d'utilisation que je rencontre le plus souvent :

Concepteurs et agences Web

Les refontes de sites Web sont superbes dans un curseur de comparaison. Laisser un client potentiel glisser entre l'ancien et le nouveau design crée plus de confiance qu'une capture d'écran plate ne le fera jamais. Vous pouvez associer cela au Widget Effets de survol d'image si vous souhaitez une variété visuelle supplémentaire sur les pages du portfolio.

Photographes et rédacteurs photo

Probablement l'ajustement le plus naturel Si vous faites un travail de retouche, de classement des couleurs ou de restauration, un curseur de comparaison d'images permet aux clients potentiels de voir exactement ce que vous pouvez faire. Fichier brut à gauche, version éditée à droite. Cela dit plus que n’importe quelle légende.

Magasins E-Commerce

Vendre des soins de la peau, des produits de nettoyage ou quoi que ce soit avec des résultats visibles ? Un comparaison avant après image sur votre page produit est plus convaincant qu'un paragraphe de copie J'ai vu ce travail particulièrement bien pour les produits cosmétiques et de rénovation domiciliaire où la différence visuelle est dramatique.

Immobilier et Architecture

Les projets de rénovation sont un match naturel Prenez une photo avant le début des travaux, prenez-en une autre quand c'est fait, déposez les deux dans le widget de comparaison Votre portfolio devient plus interactif, et les visiteurs ont tendance à passer plus de temps à parcourir vos projets.

Marqueurs numériques

Tableaux de bord d'analyse, performances publicitaires, graphiques de trafic du site Web. Afficher les “avant de travailler avec nous” et “après avoir travaillé avec nous” résultats avec un curseur glisser-comparer Fonctionne mieux que de coller deux captures d'écran dans une étude de cas.

Widget de comparaison d'images Master Addons : ce que vous obtenez

Il existe plusieurs façons d'ajouter un avant après slider dans Elementor. Certains nécessitent des plugins autonomes, d'autres ont besoin de code personnalisé et certains sont verrouillés derrière les abonnements addon premium. Les modules complémentaires principaux incluent le Widget de comparaison d'images dans la version gratuite. Il convient de noter que la plupart des addons concurrents (Ultimate Addons, PowerPack, The Plus Addons) placent cette fonctionnalité derrière un paywall.

Le widget comprend notamment

• Intégration des éléments natifs : Faites glisser et déposez depuis le panneau Élémenteur Pas de codes courts, pas de page de paramètres séparée Installer à partir du Repo de plugin WordPress et il apparaît immédiatement dans votre liste de widgets.
• Utilisation gratuite : Le widget de comparaison d'images fait partie de la version gratuite Aucune licence Pro requise.
• Plusieurs styles de contrôle : Poignée de curseur (traînée), mouvement de la souris (débordement) ou clic. Les orientations de comparaison horizontale et verticale sont prises en charge.
• Étiquettes personnalisées : Changez les “Before” et“After” text en tout ce que vous voulez, dans n'importe quelle langue Les couleurs de l'étiquette, la typographie et le positionnement sont tous réglables.
• Réactif: Fonctionne sur ordinateur, tablette et mobile Les gestes tactiles et glissés fonctionnent sur les appareils mobiles.

Maître Addons a Plus de 80 widgets et extensions total. Le widget de comparaison d'images est un widget qui revient beaucoup dans les projets de pages de destination et de portfolio.

Comment créer un curseur avant après dans Elementor (étape par étape)

Avant de commencer, vous avez besoin des deux Élémenteur et Master Addons installés et activés Les deux sont gratuits Aller à Plugins > Ajouter un nouveau: recherchez chaque nom de plugin, installez et activez.

Étape 1 : Activer le widget de comparaison d'images

Le widget Comparaison d'images est activé par défaut Si vous avez désactivé certains widgets pour maintenir votre panneau incliné, vérifiez qu'il est toujours activé Accédez à Modules complémentaires principaux > Modules complémentaires et extensions dans votre tableau de bord WordPress et confirmez la comparaison d'images est basculé. Le Documentation de comparaison d'images a les détails complets de configuration Pendant que vous êtes dans ce tableau de bord, vous pourriez remarquer d'autres widgets qui valent la peine d'être allumés, comme Titre animé ou Galerie Slider.

Étape 2 : Ouvrez une page dans Elementor

Créez une nouvelle page ou ouvrez-en une existante avec Elementor J'ai créé une nouvelle page de destination pour ce tutoriel, mais le curseur de comparaison tombe dans n'importe quelle page existante de la même manière.

Étape 3 : Ajouter le widget de comparaison d'images

Dans le panneau Elementor à gauche, recherchez “Image Comparison” (vous verrez l'icône Master Addons à côté).Dragagez le widget dans votre page où vous voulez que le curseur apparaisse.

Étape 4 : Téléchargez vos images avant et après

Cliquez sur le widget et vous verrez deux champs de téléchargement d'image : un pour l'image précédente, un pour l'image suivante. Téléchargez les deux et l'aperçu se met à jour immédiatement avec la poignée du diviseur au centre.

Préparations rapides : les deux images doivent avoir les mêmes dimensions. Si l'un est 1200×800 et l'autre 900×600, la mise en page va se détourner Les recadrer à la même taille avant de télécharger Cela fait voyager les gens plus que toute autre chose.

Étape 5 : Personnalisez le texte de l'étiquette

Les étiquettes par défaut disent “Before“” et After,” mais vous pouvez les changer en n'importe quoiVendre un produit ? Utiliser “Sans” et “Avec.” Afficher une rénovation ? Essayer “Jour 1” et“Finished.” Les champs des étiquettes acceptent n'importe quel texte, y compris les caractères non anglais, donc la localisation n'est pas un problème.

Étape 6 : Configurer les paramètres du curseur

Sous l'onglet Contenu, il y a quelques paramètres supplémentaires qui méritent d'être ajustés :

• Orientation: Basculer entre la comparaison horizontale (gauche/droite) et verticale (haut/bas).Horizontal est la valeur par défaut et fonctionne pour la plupart des cas.
• Rapport de visibilité : Contrôle où commence le diviseur Réglez-le à 50 % pour un fractionnement centré, ou décalez-le pour afficher plus d'une image initialement.
• Superposition : Activer ou désactiver une superposition de couleurs sur les images.
• Type de poignée : Choisissez entre le glisser de la souris ou le survol de la souris pour comparaison Le glisser nécessite que le visiteur clique et glisse Le survol se révèle sur le mouvement de la souris, ce qui semble plus fluide mais peut être désorientant sur certaines mises en page.

Étape 7 : Stylez le curseur

Passez à l'onglet Style pour la personnalisation visuelle Vous pouvez modifier la couleur du diviseur, ajouter une bordure autour du conteneur de comparaison, ajuster la typographie des étiquettes (famille de polices, taille, poids), ajouter des ombres de boîte et contrôler l'espacement Passez quelques minutes ici pour correspondre à la conception de votre site Il y a suffisamment de contrôle pour que vous ne vous retrouviez pas avec un curseur d'apparence générique.

Appuyez sur Publier et sur votre avant après slider est en direct Environ deux minutes du début à la fin, en supposant que vos images sont prêtes.

Conseils pour une meilleure comparaison d'images

Le widget gère le côté technique, mais la comparaison elle-même n'est aussi bonne que votre configuration. Quelques choses que j'ai apprises en les construisant sur des sites clients :

Faites correspondre vos dimensions d'image

Je l'ai déjà mentionné, mais c'est l'erreur que je vois le plus souvent Si votre image avant est 1920×1080 et votre image après est 800×600, le curseur va les forcer à s'aligner et le résultat semble déformé Recadrer les deux images aux mêmes dimensions de pixels exactes avant de les télécharger à chaque fois.

Gardez la composition similaire

Prenez les deux photos sous le même angle, la même distance, le même cadrage Si votre photo avant est un plan large et que l'après est un gros plan, le contraste ne décroche pas comme vous le souhaitez Le curseur est le meilleur lorsque la seule différence entre les deux images est le changement réel.

Centrer la Transformation

Mettez le changement le plus visible près du centre de l'image C'est là que commence le diviseur, c'est donc la première chose que les gens remarquent lorsqu'ils interagissent avec le curseur Si le changement est décalé d'un côté, ajustez le rapport de visibilité pour attirer l'attention sur lui.

N'en faites pas trop

Une comparaison solide par section de page suffit J'ai vu des pages avec cinq ou six curseurs empilés les uns sur les autres, et cela édulcore l'impact Choisissez votre meilleure paire avant-après et présentez celle-là Si vous avez plusieurs comparaisons, organisez-les dans un Galerie d'images filtrables ou Carrousel d'images au lieu de cela.

Ajouter un CTA à proximité

Si la comparaison se trouve sur une page de vente ou de portefeuille, déposez un bouton d'appel à l'action juste en dessous. Quelqu'un qui vient de traverser une transformation impressionnante est déjà engagé. Un bouton “Get a Free Quote” ou “Shop Now” juste là a tendance à bien se convertir.

Dépannage : quand le curseur ne se comporte pas

La plupart des configurations fonctionnent simplement, mais quelques choses font trébucher les gens. Voici comment réparer ceux qui me sont demandés.

• Le curseur n'apparaît pas. Neuf fois sur dix le widget s'est désactivé Aller à Addons principaux, puis Addons et Extensions« Et confirmez que la comparaison d'images est activée. S'il est activé et qu'il manque toujours, effacez votre cache (LiteSpeed, WP Rocket ou Cloudflare) afin qu'une ancienne copie de la page cesse de servir. ».
• La poignée ne traînera pas. Il s'agit presque toujours d'un conflit JavaScript ou d'un plugin de mise en cache qui combinait ou différait le script du widget Exclure les scripts Master Addons de JS combinent et défèrent, efface le cache et teste à nouveau.
• Les deux images semblent étirées ou mal alignées. Ce sont des dimensions différentes. Recadrer à la fois à des dimensions de pixels identiques et re-télécharger, c'est la cause la plus courante.
• Il fonctionne sur ordinateur mais pas sur mobile. Vérifiez qu'aucun conteneur parent n'a un style caché par débordement coupant la zone tactile, et que rien ne repose sur le curseur attrapant le balayage Le toucher fonctionne hors de la boîte, donc une défaillance par glissement est presque toujours un problème de mise en page ou d'indice z.
• Les étiquettes avant et après sont coupées. Raccourcir le texte de l'étiquette ou réduire la taille de la police de l'étiquette sous l'onglet Style ; les étiquettes très longues peuvent se répandre en dehors de l'image sur de petits écrans.

Si aucun de ces éléments ne le corrige, publiez les détails dans le Forum de support Master Addons avec votre thème et vos plugins actifs, c'est généralement un conflit qui s'avère rapide à cerner.

Widget de comparaison d'images par rapport aux alternatives

Un aperçu rapide de la façon dont Master Addons se compare aux autres curseur de comparaison d'images WordPress options pour Elementor :

La grande différence est la disponibilité gratuite Si vous ne voulez pas payer pour un addon Pro juste pour obtenir un curseur avant et après, Master Addons et ElementsKit sont vos options Master Addons comprend également techniques de superposition de texte et effets de survol d'image dans le niveau gratuit, vous obtenez donc un ensemble plus large d'outils d'image sans mise à niveau.

Pourquoi des modules complémentaires principaux pour votre comparaison d'images ?

Le widget de comparaison d'images est l'un des plus de 80 éléments et extensions Modules complémentaires principaux pour Elementor. Beaucoup d'utilisateurs l'installent pour un widget et finissent par en utiliser plusieurs autres sur le même projet C'est comme ça que j'ai commencé avec lui aussi.

Au-delà des widgets individuels, vous obtenez un Constructeur de thèmes pour les en-têtes, pieds de page et pages d'archives personnalisés. Il y a un Créateur Popup avec intention de sortie et déclencheurs de défilement. Et un Bibliothèque de modèles avec les sections prédéfinies, vous pouvez importer en un clic.

V3.0.0 est sensiblement plus rapide que les anciennes versions, le plugin est activement maintenu, et il est exécuté sur plus de 40 000 sites WordPress. Maître Addons Pro ajoute le Widget Builder, le mode White Label et la prise en charge premium si vous en avez besoin.

Commencez

Mise en place d'un curseur de comparaison d'images avant après dans Elementor prend quelques minutes avec Master Addons Aucun code, aucun achat d'addon premium, aucun plugin de comparaison séparé à installer Le widget est gratuit, fonctionne avec n'importe quelle configuration d'Elementor, et la personnalisation couvre tout, du texte de l'étiquette à la couleur du diviseur.

Téléchargez Master Addons gratuitement et essayez le widget Comparaison d'images sur votre prochain projet Si vous avez besoin de plus dans vos builds Elementor, consultez les plans Pro.

Lecture connexe: Tutoriel sur le carrousel d'images d'élémenteurs | Plugins de galerie filtrables par élément | 25 techniques de texte d'élément sur image

Préférez regarder ? voici une procédure rapide dans Elementor :

Foire aux questions