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.
Cette page est la référence des paramètres Pour les démos live des effets et ce qui est gratuit ou Pro, voir le Widget d'effets de survol d'image d'élémenteur page.
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 elle peut révéler un titre, une description, et un bouton ou un lien, le mouvement provenant d'un effet prédéfini Il y a 30 effets nommés Huit sont gratuits (Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey et Oscar) et 22 autres sont livrés avec Master Addons Pro.
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 une fenêtre contextuelle (le contenu popup a besoin de Pro).
Choisissez un effet de vol stationnaire #
Le Effet de survol listes déroulantes 30 effets CSS nommés Les huit premiers sont libres et les autres sont marqués Pro. 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 (Pro) : 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 la rubrique Si votre site utilise l'IA Elementor, le lien Écrire avec l'IA d'Elementor apparaît également ici.
- Balise HTML : le niveau de cap, H1 à H6.
Ajouter la description et le lien #
Ouvrir le Description section pour ajouter la légende qui s'affiche sous le titre en vol stationnaire Retour en Effets et image, si vous réglez Liens ou Popup ? à Popup, le Type de contenu et Contenu les champs décident de ce que la popup montre Le contenu popup a besoin de Pro.
- Type de contenu : ce que la fenêtre contextuelle affiche : une image, du texte, une section enregistrée, un widget enregistré ou un modèle de page enregistré (Pro).
- Contenu: le texte contextuel, é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 frontalier (Pro), 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 ?
Trente. Huit sont gratuits (Sadie, Lily, Roxy, Bubba, Romeo, Layla, Honey et Oscar) et les 22 autres sont livrés avec Master Addons Pro. Chacun anime l'image et superpose le texte d'une manière différente.
Puis-je ajouter un lien ou un bouton à l'image ?
Oui. L'option Liens ou Popup peut faire de l'image entière un lien dans la version gratuite Avec Pro, il peut ouvrir une popup à la place, en affichant une image, du texte ou un modèle Elementor enregistré.
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 Description ajoute une légende 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.
