Effets de survol d'image
Une image statique se trouve juste là Ajouter des effets de survol d'image et la même image commence à faire du travail : un titre glisse, une description s'estompe et un clic envoie les gens vers un lien ou ouvre une fenêtre contextuelle complète Le widget Effets de survol d'image pour les vaisseaux Elementor avec plus de 30 animations de survol (décoloration, zoom, diapositive, push, et le reste) et vous les configurez sans écrire une ligne de CSS. Il correspond aux endroits où une image doit porter un titre, une légende et une action : portefeuilles, grilles d'équipe, cartes de service, vitrines de produits.
Choisissez un effet, choisissez ce que fait le clic et stylisez chaque couche pour qu'elle corresponde à votre design Ce que vous vous retrouvez avec une carte image sur laquelle les gens s'arrêtent au lieu de défiler. La vidéo ci-dessous parcourt tout, montre chaque animation et la configuration prend quelques minutes.
Quels sont les effets de survol d’image ?
Un effet de survol d'image est une animation qui se déclenche lorsque quelqu'un déplace la souris sur une image Au lieu de rester à plat, l'image réagit Elle peut zoomer, flouter, changer de couleur ou faire glisser un panneau de texte Vous les verrez également appelés effets de retournement d'image ou des effets de survol de photos, et ils font tous la même chose : prenez une image simple et faites-la lire comme “il y en a plus ici, cliquez sur moi.”
Vous pouvez construire tout cela à la main avec CSS personnalisé Cela signifie écrire les transitions, les amener à se comporter sur mobile, et revenir dans le code à chaque fois que le design change Le widget Master Addons le gère visuellement à l'intérieur d'Elementor, donc vous obtenez effets de survol d'image simples sans ouvrir un éditeur de code Si vous souhaitez voir le reste de la boîte à outils, parcourez le Widgets et extensions Master Addons ou le Fonctionnalités d'animation des éléments.
Plus de 30 animations de survol pré-construites
Les premières impressions se produisent en vol stationnaire Vous obtenez une bibliothèque d'animations CSS qui apportent votre titre et votre description en douceur, de sorte que le texte arrive au lieu de simplement popping sur l'écran Appliquer n'importe quel effet en un clic, puis les parcourir en vélo dans l'éditeur jusqu'à ce que l'on convienne à l'image J'essaie habituellement trois ou quatre avant de m'installer, puisqu'un effet qui a fière allure sur un large paysage photographié peut se sentir sur un portrait serré.
- Fade et zoom : l'image s'estompe ou s'échelonne tandis que le texte s'efface.
- Glisser (haut, bas, gauche, droite) : un panneau de légende glisse depuis n'importe quel bord.
- Pousser et révéler : l'image se déplace pour faire place au titre et à la description.
- Flotter et briller : un petit lift et un balayage de lumière sur l'image.
- Beaucoup de choix : fondre tranquillement à une extrémité, glisse directionnelle audacieuse à l'autre.
- Fonctionne sur CSS : le mouvement reste fluide car il ne s'appuie pas sur des scripts lourds.
- Rapide à tester : échangez les effets dans l'éditeur et voyez immédiatement le changement.
Liens intelligents et contenu contextuel sur Cliquez
Vous décidez de ce qui se passe lorsque quelqu'un clique sur la carte Pointez-la sur n'importe quelle URL avec un lien standard, ou basculez l'action sur Popup et gardez les gens sur la page La popup ne se limite pas non plus au texte : définissez Type de contenu sur Section enregistrée et il intègre n'importe quel modèle Elementor que vous avez déjà construit. Cela transforme une carte d'image en une porte vers une biographie complète, une fiche technique de produit ou un formulaire de contact, et le visiteur ne quitte jamais la page.
- Actions en deux clics : envoyez du trafic avec un lien ou gardez les gens sur place avec une fenêtre contextuelle.
- De vrais modèles dans la popup : utilisez du texte brut ou déposez une mise en page complète de votre bibliothèque.
- Tease, puis dis: l'image est le crochet et le popup porte le détail.
Contrôle complet du contenu et du style
Vous contrôlez la façon dont la carte regarde dans les détails Téléchargez votre image et définissez son opacité et son filtre séparément pour les états normal et de vol stationnaire Ajoutez un en-tête (sélectionnez la bonne balise HTML pour qu'elle aide à la structure de votre page) et une description, puis stylisez chaque pièce de manière autonome avec ses propres couleurs, type, ombres et espacement.
- Titre et description séparés : stylisez chacun pour que la hiérarchie se lise clairement.
- Filtres d'image : le tour en niveaux de gris à couleur en vol stationnaire semble toujours bon et constitue ici un changement unique.
- Cadre de carte: arrière-plan, bordures, coins arrondis, rembourrage et ombre de boîte, il se trouve donc directement dans votre disposition.
Comment ajouter des effets de survol d'image dans Elementor ?
Vous pouvez avoir une carte de vol stationnaire en moins de deux minutes Pas de CSS, pas de codes courts.
- Installez et activez Master Addons, puis modifiez n'importe quelle page avec Elementor.
- Recherchez dans le panneau du widget Effets de survol d'image et faites-le glisser sur votre disposition.
- Téléchargez votre image et ajoutez un titre et une description.
- Ouvrez le dropdown Hover Effect et choisissez l'une des plus de 30 animations.
- Définissez l'action de clic sur Lier ou Popup et choisissez un modèle enregistré pour le contenu contextuel.
- Stylez le titre, la description et le conteneur, puis publiez.
Une chose qui vaut la peine d'être faite avant de publier : prévisualisez la carte sur un téléphone Le survol n'existe pas au toucher, alors vérifiez que le comportement du robinet a du sens (plus d'informations à ce sujet dans la FAQ).Pour chaque paramètre présenté dans l'ordre, suivez le Documentation des effets de survol d'image.
Où utiliser les effets de survol sur les images ?
- Grilles d'équipe : nom et rôle en vol stationnaire, puis une biographie complète dans une fenêtre contextuelle en clic. Voici comment construire une section des membres de l'équipe.
- Portefeuilles et galeries : un titre de projet et un lien de” d'étude de cas “View sur chaque photo.
- Cartes de service : une brève description et un lien vers la page de service.
- Présentations de produits : taquinez l'image du produit, puis ouvrez les spécifications dans une fenêtre contextuelle.
- Carreaux de blog et de catégorie : une légende de survol sur la navigation basée sur l'image.
Pour plus de façons de rassembler du texte et des images, lisez 25 Techniques de texte sur image des élémentsou regardez les widgets d'image associés comme le widget de point d'accès d'image et le Carrousel d'images d'élémentateurs.
Questions fréquemment posées pour les effets de survol d'image
Ces effets de survol fonctionneront-ils sur les appareils mobiles ?
Ils sont construits pour le bureau, où il y a une souris à survoler Sur un écran tactile l'effet se déclenche généralement sur le premier robinet pour afficher le contenu, et le deuxième robinet suit le lien ou ouvre la fenêtre contextuelle Prévoyez donc deux robinets sur mobile, et assurez-vous que le texte reste lisible une fois qu'il s'affiche.
Comment puis-je créer des effets de survol d'image simples sans écrire CSS ?
Déposez le widget Effets de survol d'image sur votre page, téléchargez une image, ajoutez un titre et une description et choisissez une animation dans le dépôt C'est tout, pas de CSS. Le widget écrit le CSS pour vous dans les coulisses, donc même une carte de survol assez impliquée reste facile à assembler.
Puis-je ouvrir une biographie d'équipe ou les détails d'un produit dans une fenêtre contextuelle en un clic ?
Oui. Mettez le nom dans le Titre et le rôle dans la Description, définissez l'action de clic sur Popup et choisissez Type de contenu : section enregistrée Construisez la biographie comme modèle dans Elementor et sélectionnez-la ici Cliquez sur la photo et cette mise en page complète s'ouvre dans la fenêtre contextuelle.
Comment choisir entre un lien et une popup ?
Utilisez un lien lorsque vous souhaitez déplacer le visiteur vers une autre page, comme une page produit ou un article de blog Utilisez une fenêtre contextuelle lorsque vous souhaitez en afficher plus sans quitter la page actuelle : spécifications, une courte biographie, un formulaire de contact ou une vue plus large de l'image.
De nombreuses cartes images animées vont-elles ralentir mon site ?
Les effets s'exécutent sur CSS, donc une poignée sur une page ne pose aucun problème Ce qui ralentit réellement les choses, c'est le poids de l'image, alors compressez d'abord vos images Une fois que vous avez dépassé une vingtaine de cartes sur une page, activez le chargement paresseux et la première peinture reste rapide.
Puis-je utiliser différents effets de survol sur différentes images ?
Les paramètres couvrent une carte à la fois Pour mélanger les effets, ajoutez un widget distinct Effets de survol d'image pour chaque image et configurez-les indépendamment C'est ainsi que vous obtenez une galerie où les cartes n'animent pas toutes de la même manière.
Quel est l'avantage d'une « section enregistrée » dans la fenêtre contextuelle sur texte brut ?
Une section enregistrée vous donne l'éditeur Elementor complet à l'intérieur de la fenêtre contextuelle Au lieu de texte brut, vous pouvez ajouter des images, des boutons, des colonnes, des vidéos ou des formulaires, de sorte que la fenêtre contextuelle ressemble au reste de votre site plutôt qu'à une zone de texte nue.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
