Recherche populaire entêtemenumégabas de pagemetforme

Échange d'images

Table des matières

Aperçu #

Image Échanger est un moyen simple de modifier l'affichage de n'importe quelle image lorsque vous passez la souris dessus et de revenir à l'image d'origine en sortant la souris de l'image. Voici un article complet pour expliquer chaque méthode en détail. Suivez le processus étape par étape pour connecter le Échange d'images.

Plugin requis : #

  1. Élémentor : Télécharger le plug-in.
  2. ElementsKit Lite : Télécharger le plug-in.
  3. ElementsKit Pro : Obtenez le plugin.

Étape 1: Activer le widget d'échange d'images #

Tout d’abord, vous devez activer le widget depuis le tableau de bord WordPress. Pour activer le widget Échange d'images :

  1. Aller vers ElementsKit > Widgets.
  2. Trouvez le Image Échanger dans la liste et activez le widget.
  3. Clique sur le SAUVEGARDER LES MODIFICATIONS.

Étape 2 : glissez et déposez le widget #

Après cela, ouvrez l'éditeur Elementor, puis faites glisser et déposez le widget ElementsKit Image Swap dans la zone de conception.

Étape 3: Configurer l'échange d'images widget #

Au cours de cette étape, vous pouvez ajouter les images recto et verso, définir la taille de l'image, choisir le style d'échange, etc.

  1. Image avant : Téléchargez la première image comme image de face.
  2. Image arrière : Téléchargez la deuxième image comme image arrière.
  3. Taille de l'image: Sélectionnez une taille d'image parmi les options proposées.
télécharger des images recto et verso pour le widget d'échange d'images
  1. Style d'échange : Le widget ElementsKit Image Swap est livré avec 21 styles d'échange. Vous pouvez choisir n’importe lequel des styles.
Style d'échange disponible dans le widget d'échange d'images ElementsKit
  1. Tigrou : Choisissez comment déclencher l'effet d'échange parmi les options suivantes.
    1. Flotter: L'effet d'échange se déclenchera lorsque vous passerez la souris sur l'image.
    2. Cliquez sur: L'effet d'échange se déclenchera lorsque vous cliquerez sur l'image.
  2. Indicateurs : Il indique l'image active (image exposée) et l'image au dos.
  3. Lien: Vous pouvez ajouter une URL aux images.
Choisissez le style de déclenchement et activez l'indicateur dans le widget d'échange d'images Elementor

Étape 4 : Personnaliser le widget d'échange d'images #

Vous pouvez désormais personnaliser les styles d’image et d’indicateur.

4.1 Image #

  1. Hauteur fixe : Ajustez la hauteur de l'image.
  2. Durée de la transition : Définissez le temps de transition entre l’échange d’images.
ajuster la hauteur et la durée de transition dans le widget d'échange d'images Elementor

4.2 Indicateurs #

  1. Couleur normale : Définissez la couleur de l'indicateur.
  2. Couleur active : Choisissez une couleur d’indicateur actif.
Changer les couleurs des indicateurs du widget d'échange d'images Elementor
  1. Taille: Ajustez la taille des indicateurs.
  2. Espacement: L'espace entre les deux indicateurs.
  3. Style: Deux styles sont disponibles pour les indicateurs : Horizontal et Vertical.
  4. Position: Ajustez la position des indicateurs. Position X : Pour changer la position horizontale, Position Y : Pour changer la verticale.
Personnaliser les indicateurs du widget d'échange d'images

Enfin, vous pouvez ajouter le widget d'échange d'images à votre site Web. Voici comment cela fonctionne :

Comment fonctionne le widget d'échange d'images Elementor

Comme le widget Image Swap, ElementsKit est livré avec des centaines d'éléments avancés pour Elementor. Obtenez ElementsKit et utilisez ces éléments pour créer des sites Web WordPress dotés de nombreuses fonctionnalités.

Obtenir le plugin ElementsKit
Quels sont tes sentiments
Mis à jour le 28 janvier 2024