Une image qui révèle un titre et une légende en vol stationnaire transforme une galerie plate en quelque chose que les gens veulent toucher. Le Effets de survol d'image widget dans Modules complémentaires principaux pour Elementor enveloppe n'importe quelle image dans une animation de survol CSS, donc un en-tête, une description et un lien glissent, s'estompent ou zooment lorsque le curseur atterrit dessus.
Vous choisissez l'un des effets nommés, déposez une image, ajoutez le texte superposé, puis stylisez les couleurs et les filtres Aucun CSS personnalisé n'est nécessaire Ce guide couvre chaque paramètre du widget.
Ce que fait le widget Effets de survol d'image #
Le widget prend une image et laisse tomber une superposition animée par-dessus Survolez-la et il peut révéler un titre, une description, et un bouton ou un lien, le mouvement provenant d'un effet prédéfini Les effets nommés (Sadie, Lily, Roxy, et bien plus encore) animent chacun l'image et le texte à leur manière.
Trois onglets l'exécutent. Contenu contient l'effet, l'image et le texte superposé. Style gère l'opacité de l'image, les filtres, les bordures ainsi que les couleurs du titre et de la description. Avancé est l'espacement et la visibilité habituels des éléments.
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.
- Une image, plus le texte du titre et de la légende que vous souhaitez afficher en vol stationnaire.
Comment ajouter le widget Effets de survol d'image #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Effets de survol d'image(ou faites défiler vers la section Addons principaux) (les widgets portent un badge MA violet).Drag it on the page and it loads with a sample image and overlay you can edit.
Choisissez l'effet et l'image #
Ouvrir le Contenu onglet. Le Effets et image la section est l'endroit où vous définissez l'animation de survol et chargez l'image.
- Effet de survol : l'animation nommée utilisée en vol stationnaire (plus d'informations sur ce prochain).
- Télécharger l'image : choisissez l'image dans la médiathèque.
- Taille de l'image et résolution de l'image : la récolte et la résolution ont servi.
- Liens ou Popup?: faites de l'image entière un lien ou ouvrez-la dans une fenêtre contextuelle.
Choisissez un effet de vol stationnaire #
Le Effet de survol dropdown porte une longue liste d'effets CSS nommés Chacun anime l'image et le texte superposé différemment, d'un fondu doux à une légende qui glisse dans.
- Sadie, Lily, Layla : fadez le titre et la légende sur une image sombre.
- Roxy, Bubba, Roméo : faites glisser une bordure ou un panneau avec le texte.
- Chérie, Oscar, Marley : révéler un soulignement ou une légende émouvante.
- Variantes de zoom et de flou : mettez à l'échelle ou adoucissez l'image derrière le texte.
Sélectionnez l'image #
Cliquez Télécharger l'image pour ouvrir la médiathèque, choisissez ou téléchargez votre image. Quel que soit l’effet que vous avez choisi, il s’exécute au-dessus de cette image.
Ajouter le titre #
Ouvrir le Titre section pour le titre qui s'affiche en vol stationnaire Tapez le texte et définissez la balise HTML pour qu'elle se lise correctement pour le référencement.
- Titre: le texte de titre, avec une option Écrire avec AI.
- Balise HTML : le niveau de cap, H1 à H6.
Ajouter la description et le lien #
De retour dans le Effets et image section, le Type de contenu et Contenu les champs définissent la légende qui s'affiche sous le titre C'est là que va la ligne de support, et un bouton si vous en voulez une.
- Type de contenu : choisissez du texte, ou un bouton, pour le contenu de superposition.
- Contenu: le texte de la légende, édité dans une boîte WYSIWYG complète.
- Liens ou Popup?: pointez l'image sur une URL ou ouvrez-la dans une fenêtre contextuelle.
Stylez l'image et superposez #
Ouvrir le Style onglet. Le Image la section contrôle l'apparence de l'image avant et pendant le vol stationnaire, et c'est de là que provient réellement une grande partie de l'effet.
- Opacité de l'image et opacité du survol : comme l'image est visible au repos et en vol stationnaire.
- Filtre d'image et filtre d'image de survol : flou, luminosité et contraste pour chaque état.
- Frontière, rayon de frontière, ombre de boîte : le cadre autour de l'image.
Sous la section Image, séparez Titre et Description les sections traitent la couleur et la typographie du texte superposé.
Cas d'utilisation courants #
- Portefeuilles révéler le nom et le lien d'un projet en vol stationnaire.
- Grilles d'équipe affichage d'un nom et d'un rôle sur chaque photo.
- Carreaux de service avec un titre et une courte légende par image.
- Vignettes blog cela fait surface le titre du message en vol stationnaire.
- Galeries de produits appairage d'une image avec un nom et un bouton.
Conseils pour travailler avec le widget Effets de survol d'image #
- Utilisez des images claires. La superposition assombrit l'image, de sorte qu'une prise de vue occupée peut rendre le texte difficile à lire. Une image plus calme avec de la place au milieu fonctionne mieux.
- Gardez la légende courte. Une ligne sous le titre se lit mieux qu'un paragraphe entassé dans la superposition.
- Faites correspondre l'effet au contenu. Les fondus subtils conviennent à un portfolio ; les diapositives audacieuses conviennent à une promo.
- Définissez la bonne balise de titre. Utilisez H2 ou H3 pour les titres de galerie, et non H1, sauf s'il s'agit du titre principal de la page.
- Test sur mobile. Il n'y a pas de vol stationnaire au toucher, donc vérifier la superposition a toujours du sens lorsque quelqu'un tape à la place.
Voir le tutoriel vidéo #
Préférez suivre à l'écran ? le didacticiel vidéo ci-dessous parcourt l'élément Effets de survol d'image du début à la fin, montrant comment fonctionnent les effets, le texte superposé et le style dans l'éditeur Elementor.
Foire aux questions #
Qu'est-ce que le widget Effets de survol d'image dans Master Addons ?
C'est un widget Elementor qui ajoute une animation de survol CSS à une image En survol, il révèle un titre, une légende et un lien facultatif, le mouvement provenant d'un effet préréglé nommé Tout est défini à partir du panneau Elementor sans code.
Combien d'effets de survol le widget inclut-il ?
Le dropdown Hover Effect contient une longue liste d'effets CSS nommés, tels que Sadie, Lily, Roxy, Bubba, Romeo, Layla, Honey et Oscar. Chacun anime l'image et superpose le texte d'une manière différente, vous choisissez donc celui qui correspond à votre conception.
Puis-je ajouter un lien ou un bouton à l'image ?
Oui. L'option Liens ou Popup fait de l'image entière un lien ou l'ouvre dans une fenêtre contextuelle, et le champ Type de contenu peut ajouter un bouton à l'intérieur de la superposition. Cela fait de chaque image un chemin cliquable vers un projet, un produit ou une page.
Puis-je afficher un titre et une légende en vol stationnaire ?
Oui. La section En-tête définit le titre et sa balise HTML, et le champ Contenu ajoute une description en dessous. Les deux apparaissent dans le cadre de l'animation en vol stationnaire, de sorte que l'image reste propre jusqu'à ce que quelqu'un la survole.
Les effets de survol de l'image fonctionnent-ils sur mobile ?
Le survol est une interaction de bureau, donc les appareils tactiles n'ont pas de véritable survol De nombreux effets affichent toujours la superposition sur le robinet, mais vous devez tester sur un téléphone et garder le texte clé visible ou joignable, surtout si l'image est également un lien.
Envelopper #
Le widget Effets de survol d'image transforme une image statique en une image interactive : choisissez un effet, chargez l'image, ajoutez un titre et une légende, puis stylisez l'opacité, les filtres et le texte. Pour les widgets associés, voir le Widget de boîte d'informations et le Widget Flipbox: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
