Comment faire un curseur de comparaison d'images dans WordPress

Comment faire un curseur de comparaison d'images dans WordPress

Étape 1: Installez et activez les addons Elemento pour Elementor

Avant l'installation, assurez-vous que WooCommerce et Elementor sont activés dans votre tableau de bord.

Téléchargez le plugin : Visitez la page du plugin Elemento Addons et téléchargez le plugin.

Accédez à votre tableau de bord WordPress → Plugins → Ajouter nouveau → Télécharger le plugin.

Téléchargez le fichier téléchargé et cliquez sur «Installer maintenant».

Une fois installé, cliquez sur «Activer» pour activer le plugin.

Pour installer Elemento Addons, veuillez regarder ci-dessous le didacticiel vidéo:

Étape 2: Créez ou modifiez une page avec Elementor :

Accédez aux pages> Ajouter nouveau si vous démarrez frais, ou modifiez une page existante ou ajoutez un curseur à n'importe quelle page selon les besoins.

Cliquez sur Modifier avec Elementor pour lancer le Builder de Page Elementor.

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

Dans l'éditeur Elementor, recherchez les widgets d'addons Elemento dans la barre latérale ou recherchez une comparaison d'images dans le panneau Widget.

Faites glisser et déposez le widget de comparaison d'image n'importe où sur la page.

Étape 4: Téléchargez vos images

Ici, vous pouvez voir le widget de comparaison d'images nouvellement ajouté dans l'image ci-dessous.

Utilisez la barre latérale gauche pour modifier la section des images Comparez en ajoutant des images dans la section d'image.

J'ai inclus des exemples d'images pour votre référence.

Étape 5: Personnalisez le curseur

Vous pouvez modifier et personnaliser les paramètres à l'aide de la barre latérale gauche.

Vous pouvez modifier et personnaliser les paramètres à l'aide du menu sur le côté gauche.

Étape 6: Publiez la page

Une fois que vous êtes satisfait de vos paramètres, cliquez sur Publier pour rendre votre curseur de comparaison d'image en direct.

Lorsque vous êtes satisfait de vos ajustements, cliquez sur «Publier» pour rendre votre curseur de comparaison d'image visible aux autres.

Vous pouvez afficher la page en cliquant sur la «page Afficher».

Vous pouvez voir le curseur de comparaison d'images en direct de votre côté.

Shop Mania WooCommerce Thème

Cherchez-vous un beau thème riche en fonctionnalités pour améliorer votre boutique WooCommerce?

Nous recommandons fortement le thème de la boutique Mania pour une expérience de magasinage transparente et visuellement attrayante.

Son design élégant, ses options de personnalisation faciles et sa compatibilité WooCommerce font de la boutique Mania un excellent choix pour les magasins visant à améliorer la satisfaction des clients et à augmenter les conversions. Vous pouvez le vérifier ici.

Caractéristiques de la manie de la boutique:

• Sites prêts à l'emploi: importez facilement des sites de démonstration et personnalisez-les pour répondre aux besoins de votre magasin.
• Plusieurs modèles de panier de produits: choisissez parmi cinq modèles de panier de haute qualité pour correspondre à la conception de votre magasin.
• Vue rapide: permettez aux utilisateurs de prévisualiser les détails du produit sans quitter la page actuelle.
• Barbaire latérale hors canneaux: affichez des produits et des widgets supplémentaires sans encombrer la page d'accueil.
• Chariot flottant: améliorez l'expérience utilisateur avec un panier d'achat flottant pratique.
• Effets de survol du produit: comprend le zoom, le fondu, le swap d'image et les effets de diapositive pour les affichages de produits interactifs.
• Styles d'en-tête mobiles: conceptions d'en-tête optimisées adaptées à une expérience mobile transparente.
• Disposés personnalisables à un seul produit: dispositions flexibles de la galerie, y compris les options de grille et de curseur.
• Styles avancés de paiement et de panier: pages de paiement et de panier personnalisés pour une expérience fluide et sans distraction.