Principaux points à retenir
- Les effets de survol de l'élémenteur pour les images sont en direct dans l'onglet Style du widget Image, sous un onglet Survoler avec quatre commandes : Opacité, Filtres CSS, Durée de transition et Animation de survol.
- Un effet de survol en niveaux de gris vers couleur dans Elementor n'a besoin d'aucun code : définissez Saturation sur 0 sous Filtres CSS dans l'onglet Normal et retour sur 100 dans l'onglet Survol.
- Les préréglages Hover Animation d'Elementor, tels que Grow, déplacent l'image entière et le préréglage Grow met une image à l'échelle 110 % de sa taille en vol stationnaire.
- Le widget Image d'Elementor ne peut pas afficher de titre ou de description sur l'image en vol stationnaire, les superpositions de texte nécessitent donc une solution de contournement de conteneur, un CSS personnalisé ou un widget addon.
- Le widget Master Addons Image Hover Effects comporte 30 effets de survol nommés qui animent un titre et une description sur l'image, choisis parmi une liste déroulante Hover Effect.
Vous pouvez ajouter des effets de survol Elementor à une image de trois façons Le widget Image a des paramètres d'opacité et de filtre CSS pour l'état de survol Il a également des préréglages Hover Animation qui déplacent l'image Pour un titre et une description qui apparaissent sur l'image, vous avez besoin d'un widget construit pour elle, tel que Effets de survol d'image.
Ce guide couvre chaque itinéraire avec les paramètres exacts, testés sur Elementor 4.3. Commencez par les deux premiers si vous souhaitez seulement que l'image réagisse, et passez au troisième si vous souhaitez du texte sur l'image.
Table des matières
Où les paramètres de survol sont dans Elementor
Sélectionnez un widget Image, ouvrez le modeler tab et regardez sous la section Image Sous les contrôles de taille il y a deux onglets, Normal et Hover Tout sur l'onglet Hover s'applique seulement pendant que le pointeur est sur l'image L'élémenteur explique l'idée dans son introduction aux effets de vol stationnaire.
| Contrôle | Ce qu'il fait en vol stationnaire |
|---|---|
| Opacité | Fane l'image dedans ou dehors, de 0 à 1 |
| Filtres CSS | Modifie le flou, la luminosité, le contraste, la saturation et la teinte |
| Transition Durée | Définit le temps que prend le changement, en secondes |
| Animation de survol | Joue un mouvement prédéfini tel que Grow |
Voie 1 : Opacité et filtres CSS
Utilisez des filtres d'opacité et CSS lorsque l'image elle-même doit changer en vol stationnaire L'exemple classique est une photo qui se trouve en noir et blanc et qui devient couleur lorsque le pointeur arrive.
- Sélectionnez le widget Image et ouvrez modeler.
- Sur le normal onglet, cliquez sur le crayon à côté Filtres CSS et traîner Saturation à 0. L'image devient grise.
- Passer au Survole onglet, ouvrez Filtres CSS encore une fois et définissez Saturation sur 100.
- Définir Transition Durée à environ 0,4 pour que la couleur s'efface.
- Facultatif : réglez l'opacité à 0,85 en Normal et 1 en Hover pour un léger éclaircissement.
Les deux mêmes onglets vous donnent un flou qui s'efface, une image sombre qui s'éclaircit ou un décalage de teinte Gardez la transition entre 0,3 et 0,5 seconde Plus court que cela ressemble à un scintillement, et plus long se sent lent.
Voie 2 : Préréglages d'animation de survol
Hover Animation déplace l'image entière lorsque le pointeur est dessus Il s'agit d'une chute en bas de l'onglet Hover, et il n'a besoin d'aucune autre configuration.
- Sélectionnez le widget Image et ouvrez modeler, puis le Survole onglet.
- Ouvrir Animation de survol et choisissez un préréglage. Grandir est celui que la plupart des gens veulent.
- Prévisualisez la page et déplacez le pointeur sur l'image.
Grow agrandit l'image au-delà de ses bords d'origine, afin qu'elle puisse chevaucher ses voisins dans une grille serrée. Si vous souhaitez que l'image zoome à l'intérieur d'un cadre fixe, cela prend quelques lignes de CSS.
Way 3 : Un widget pour le texte sur l'image
Utilisez un widget dédié lorsqu'un titre et une description doivent apparaître sur l'image en vol stationnaire Le widget Image d'Elementor affiche sa légende sous l'image et n'a aucun paramètre pour mettre du texte en haut.
Ces étapes utilisent le widget Effets de survol d'image de Master Addons.
- Modifier la page avec Elementor, recherchez dans le panneau du widget Effets de survol d'image et faites-le glisser sur la page.
- Sous Effets et image: téléchargez l'image.
- Ouvrir le Effet de survol déposez et choisissez l'un des 30 effets. Ils sont répertoriés nommément, à commencer par Lily, Sadie, Roxy et Bubba.
- Tapez le Titre et le description dans leurs propres sections.
- Définir Liens ou Popup ? si un clic doit aller quelque part.
- Dans l'onglet Style, définissez la couleur de superposition, l'opacité de l'image pour la normale et le survol, ainsi que la typographie de chaque couche de texte.
Essayez les effets avant d'installer quoi que ce soit. Le Page de widget d'effets de survol de l'image a huit cartes en direct que vous pouvez survoler, plus la liste complète des 30 effets.
Huit des effets fonctionnent sans licence Pro et 22 nécessitent Master Addons Pro. Chaque widget contient une image, donc une grille de cartes volantes est constituée de plusieurs widgets côte à côte.
Tutoriel vidéo
Cette vidéo de quatre minutes configure le widget Effets de survol d'image à partir d'une page vide.
De quelle manière devriez-vous utiliser ?
Choisissez ce qui doit changer en vol stationnaire : l'image, sa position ou le texte qui s'y trouve.
| Tu veux | Utilisation | Besoins |
|---|---|---|
| Échelle de gris à couleur, floue à nette, faible à brillante | Filtres CSS et opacité sur l'onglet Survoler | Élémenteur |
| L'image à faire croître ou à pulser | Animation de survol | Élémenteur |
| Un zoom qui reste à l'intérieur de son cadre | Une classe CSS et quelques lignes de CSS | Élémenteur et quelque part pour ajouter CSS |
| Un titre et une description sur l'image | Widget Effets de survol d'image | Additions maîtres |
| Une deuxième image qui remplace la première | Widget Image avancé, ou un arrière-plan de conteneur | Master Addons, ou Elementor seul |
Pour le texte et les images combinés d'autres manières, voir Texte de l'élémenteur sur l'image.
Les effets de vol stationnaire fonctionnent-ils sur les téléphones ?
Pas aussi planer, car un écran tactile n'a aucun pointeur avec lequel planer. Les effets d'onglet Style d'Elementor ne se déclenchent pas sur un téléphone, ce qui ne nuit pas à un changement de couleur.
Avec le widget Effets de survol d'image, le premier clic affiche généralement le texte et le deuxième clic suit le lien Si le texte est essentiel, comme un prix ou un nom, mettez-le également quelque part visible sur les petits écrans.
Questions fréquemment posées
Comment ajouter un effet de survol à une image dans Elementor ?
Sélectionnez le widget Image, ouvrez l'onglet Style et passez à l'onglet Survoler Définissez Opacité ou Filtres CSS pour l'état de survol, ou choisissez une Animation de survol telle que Grow Ajoutez une Durée de Transition de 0,3 à 0,5 seconde pour que le changement soit fluide.
Elementor a-t-il des effets de survol d'image sans plugin ?
Oui. Le widget Image dans Elementor dispose de contrôles de survol pour l'opacité, de filtres CSS et d'un préréglage Hover Animation. Ils changent ou déplacent l'image Le texte sur l'image nécessite un widget d'ajout ou un CSS personnalisé.
Comment puis-je faire passer une image du noir et blanc à la couleur en vol stationnaire dans Elementor ?
Dans l'onglet Style du widget Image, ouvrez les Filtres CSS sur l'onglet Normal et réglez la Saturation sur 0. puis ouvrez les Filtres CSS sur l'onglet Survol et réglez la Saturation sur 100. Réglez la Durée de la Transition sur environ 0,4 seconde.
Comment afficher du texte lorsque je survole une image dans Elementor ?
Utilisez un widget fait pour cela Avec Master Addons, ajoutez le widget Effets de survol d'image, téléchargez l'image, tapez un titre et une description et choisissez un effet de survol Le texte reste caché jusqu'à ce que le pointeur soit sur l'image.
Pourquoi mon effet de survol Elementor ne fonctionne pas ?
Vérifiez que le paramètre est sur l'onglet Survol et non sur l'onglet Normal, et que la Durée de transition est supérieure à 0. sur un téléphone ou une tablette il n'y a pas de survol, alors testez avec une souris Si vous utilisez un CSS personnalisé, confirmez que le nom de la classe sur le widget correspond à celui du code.
Réflexions finales
Les effets de survol des éléments pour les images sont de trois sortes L'onglet Style change l'apparence de l'image, Hover Animation la déplace et une superposition de texte a besoin d'un widget Commencez par les commandes intégrées, puisqu'elles ne coûtent rien à essayer.
Lorsque vous souhaitez un titre et une description sur l'image, le Widget Effets de survol d'image a 30 effets prêts à être sélectionnés, et le page de tarification montre quel plan les inclut tous.
Lecture connexe
