Certaines choses sont plus faciles à montrer qu'à raconter : une photo retouchée, une pièce après un remodelage, un design avant et après un nettoyage Le Comparaison d'images widget dans Modules complémentaires principaux pour Elementor empile deux images et laisse tomber une poignée dragable entre elles, afin que les visiteurs glissent pour révéler eux-mêmes la différence.
Vous chargez une image avant et une image après, ajoutez des étiquettes, choisissez une division verticale ou horizontale, puis stylisez la poignée et les étiquettes pour qu'elles correspondent à votre site Ce guide couvre chaque paramètre du widget.
Ce que fait le widget Comparaison d'images #
Le widget montre deux images dans le même cadre, l'une sur l'autre, avec une poignée coulissante vers le bas au milieu Faites glisser la poignée et elle s'essuie entre l'image avant et après Vous pouvez étiqueter chaque côté, retourner la fente de gauche-droite à haut-bas, et décider si la poignée suit un glisser, un clic, ou un survol.
Il y a deux onglets avec lesquels travailler. Contenu contient les deux images, les étiquettes et le comportement du curseur. Style contrôle la disposition, les étiquettes de superposition et la poignée. Les options Elementor Advanced habituelles se trouvent à côté d’elles.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Deux images alignées, de même taille et de même cadrage, donc la diapositive se lit comme une seule scène.
Comment ajouter le widget Comparaison d'images #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Comparaison d'images(ou faites défiler vers la section Addons principaux) (les widgets portent un badge MA violet).Drag it on your page and it loads with two sample images and a slider you can start editing immediate.
Charger les deux images #
Ouvrir le Contenu onglet. Le Images la section a un Avant et un Après tab, et chacun définit sa propre image, son étiquette et sa résolution.
- Avant / Après les onglets : basculez entre les deux côtés pour définir chaque image.
- Choisissez une image : choisissez la photo de ce côté dans la médiathèque.
- Étiquette: une courte légende pour le côté, comme Avant le travail ou Résultats finaux.
- Résolution de l'image : la taille servie, comme Plein ou Grand.
Choisissez chaque image dans la bibliothèque #
Cliquez Choisissez une Image et la médiathèque WordPress s'ouvre Définissez l'image avant sur l'onglet Avant, puis passez à l'onglet Après et choisissez le deuxième. Chose facile à oublier : l'onglet sur lequel vous vous trouvez décide de quel côté vous changez, alors vérifiez-le avant de frapper sélectionnez.
Définir les étiquettes #
Tapez a Étiquette sur chaque onglet et le widget l'imprime comme une superposition sur ce côté de l'image L'étiquette avant se trouve d'un côté, l'étiquette après de l'autre, afin que les visiteurs sachent laquelle est laquelle sans que vous l'épeliez.
Ajustez les paramètres du curseur #
Ouvrir le Paramètres section pour le comportement du curseur C'est là que vous définissez la position de départ, la direction de la fente et ce qui déplace la poignée.
- Rapport visible (%) : où commence la poignée, vous pouvez donc ouvrir sur le côté avant ou après.
- Superposition : afficher ou masquer les étiquettes avant et après.
- Déplacer la poignée : faites glisser ou faites glisser, cliquez ou survolez pour déplacer le curseur.
Basculer l'orientation #
Le Orientation basculer retourne la fente de la verticale à l'horizontale Vertical donne une essuie gauche-droite Horizontal empile l'image avant sur le dessus et l'après en dessous, avec une poignée haut-bas, qui lit généralement mieux pour les photos hautes.
Stylez la disposition, la poignée et les étiquettes #
Ouvrir le Style onglet. Il y a des sections pour Style de mise en page, Surcouche, Poignée, et Étiquette1, donc le curseur correspond à votre conception au lieu de l'apparence par défaut.
- Style de mise en page : type de bordure, rayon et ombre de boîte autour de l'ensemble du curseur.
- Poignée: la couleur, la taille et le style du contrôle de traînée.
- Étiquette: couleur, typographie, arrière-plan, bordure et espacement par face pour les légendes.
Cas d'utilisation courants #
- Retouche photo affichage d'un plan brut à côté de la version retouchée.
- Maison et rénovation avant et après un remodelage ou un nettoyage.
- Conception et dev ancienne disposition contre refonte.
- Santé et forme physique progressez des plans côte à côte.
- Produits un article simple à côté du résultat fini ou stylisé.
Conseils pour travailler avec le widget Comparaison d'images #
- Faites correspondre les deux images. Même taille, angle et recadrage, de sorte que la diapositive se lit comme une seule scène, et non comme deux photos bloquées ensemble.
- Définissez le rapport de départ. Ouvrez à mi-chemin avec le ratio visible pour que les visiteurs puissent dire qu'il y a quelque chose à faire glisser.
- Gardez les étiquettes courtes. Avant et Après, ou deux mots, restez assis plus propre sur l'image qu'une phrase complète.
- Choisissez la bonne gâchette. Traîner les combinaisons de bureau. Hover se sent rapide mais peut prendre les utilisateurs de toucher au dépourvu, alors testez-le sur un téléphone avant de l'expédier.
- Utilisez l'horizontale pour les tirs en hauteur. Une division haut-bas fonctionne mieux pour les images de portrait qu'une lingette étroite gauche-droite.
Voir le tutoriel vidéo #
Préférez suivre à l'écran ? le didacticiel vidéo ci-dessous parcourt l'élément Comparaison d'images du début à la fin, montrant comment fonctionnent les images, les étiquettes, les paramètres du curseur et le style dans l'éditeur Elementor.
Foire aux questions #
Qu'est-ce que le widget Comparaison d'images dans Master Addons ?
C'est un widget Elementor qui empile une image avant et une image après avec une poignée dragable entre elles Les visiteurs glissent la poignée pour essuyer d'une image à l'autre, avec des étiquettes optionnelles de chaque côté, le tout réglé à partir du panneau Elementor sans code.
Comment ajouter des étiquettes avant et après ?
Ouvrez la section Images et tapez une étiquette sur l'onglet Avant et l'onglet Après Chaque étiquette s'imprime sous forme de superposition sur son côté de l'image Vous pouvez les afficher ou les masquer avec la bascule Surcouche dans Paramètres et les styliser dans la section Étiquette de l'onglet Style.
Puis-je rendre le curseur vertical ou horizontal ?
Oui. La section Paramètres a une bascule Orientation La valeur par défaut est une division verticale gauche-droite ; changez-la et les images s'empilent en haut et en bas avec une poignée haut-bas. L'horizontale fonctionne bien pour les images de portrait ou les grandes captures d'écran.
Comment les visiteurs déplacent-ils le curseur de comparaison ?
La liste déroulante Move Handle dans Paramètres définit le déclencheur La poignée peut suivre un glisser ou un glisser de la souris, se déplacer en cliquant ou en effectuant un survol de la piste Le glisser est le plus courant sur le bureau, tandis que le clic est le choix le plus sûr pour les écrans tactiles.
Ai-je besoin d'images de même taille ?
Pour le meilleur résultat, oui. Les deux images se trouvent dans le même cadre, donc la taille, l'angle et le recadrage correspondants font lire la diapositive comme une seule scène. Si les images diffèrent, définissez une résolution d'image fixe afin que les deux soient servies aux mêmes dimensions.
Envelopper #
Le widget Comparaison d'images transforme deux images en une interactive avant et après : charger les deux images, ajouter des étiquettes, définir l'orientation et le handle, puis styliser le curseur pour qu'il corresponde Pour les widgets associés, voir le Widget de point d'accès d'image et le Widget Effets de survol d'image: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
