Texte de l'élémenteur sur l'image : plus de 25 effets de survol (tutoriel de widget gratuit)

Ajouter du texte sur une image dans Elementor, ça ressemble à un travail de deux minutes Ensuite, vous l'essayez avec les widgets par défaut et finissez par lutter avec des marges négatives, un positionnement absolu et un widget Heading empilé sur une image d'arrière-plan qui se brise sur mobile Il y a un moyen plus rapide Le gratuit Widget Effets de survol d'image de Master Addons met un en-tête et une description au-dessus de n'importe quelle image et les révèle avec l'une des plus de 25 animations de survol. Vous ne touchez jamais CSS.

Dans ce didacticiel, vous configurerez une section de texte Elementor sur image à partir de zéro : téléchargez l'image, choisissez un effet de survol dans une liste déroulante, stylisez la superposition et décidez de ce qui se passe lorsque quelqu'un clique. Chaque capture d'écran ci-dessous provient directement de l'éditeur Elementor, afin que vous puissiez suivre click by click.

Ce que ce guide couvre :

• Pourquoi le texte sur l'image a besoin d'un widget
• Le widget Effets de survol d'image en un coup d'œil
• Comment ajouter du texte sur une image (étape par étape)
• Stylage de la superposition : couleur, opacité, forme
• Typographie pour le titre et la description
• Cliquez sur actions : ouvrez une fenêtre contextuelle ou liez l'image
• Concevez des conseils qui gardent le texte lisible
• Autres widgets Master Addons pour les effets d'image
• Gratuit vs Pro : ce dont vous avez réellement besoin
• Questions fréquemment posées

Pourquoi le texte sur image nécessite un widget (pas un piratage CSS)

La propre documentation d'Elementor suggère deux solutions de contournement pour le texte sur l'image: définissez l'image comme un fond de section et déposez un widget de titre à l'intérieur, ou poussez un cap vers le haut avec des marges négatives. Les deux fonctionnent pour une légende statique. Ni l'un ni l'autre ne vous donne une révélation de vol stationnaire, une superposition animée ou une action de clic, et l'astuce de marge négative a tendance à s'effondrer aux points d'arrêt des tablettes et des mobiles.

Un widget dédié résout tout cela en un seul endroit :

• Survolez la révélation intégrée. L'image reste propre jusqu'à ce que le visiteur survole, puis le titre et la description s'animent.
• Un panneau de paramètres. L'image, le texte, la couleur de superposition et la typographie vivent dans un seul widget au lieu de trois empilés.
• Réactif par défaut. La superposition s'adapte à l'image, donc rien ne se déplace sur les écrans plus petits.
• Cliquez sur actions. L'image entière peut ouvrir un lien ou une fenêtre contextuelle Les grilles de portefeuille et les cartes de service en dépendent.

C'est pourquoi les mises en page de texte sur image apparaissent partout : des tuiles de portfolio qui révèlent le nom du projet, des cartes d'équipe qui montrent une biographie en vol stationnaire, des bannières de catégories de blog et des grilles de galerie où les légendes encombreraient autrement le design.

Le widget d'effets de survol d'image en un coup d'œil

Effets de survol d'image expédié dans la version gratuite de Master Addons, a bibliothèque de plus de 80 widgets et extensions fonctionnant sur plus de 30 000 sites WordPress actifs. Voici ce que vous obtenez dans ce widget unique :

• Plus de 25 effets de survol nommés (Sadie, Chico, Marley, Ruby et amis), chacun étant une animation de révélation différente
• Un champ de titre avec une balise HTML sélectionnable (H1 à H6), afin que votre texte superposé puisse rester correct SEO
• Un champ de description pour une ligne de support courte
• Contrôle de la couleur d'arrière-plan superposée, de l'opacité de l'image et de l'opacité du vol stationnaire
• Rayon de bordure, remplissage, ombre de boîte et typographie séparée pour le titre et la description
• Comportements en trois clics : rien, ouvrir une fenêtre contextuelle ou suivre un lien

Tout cela fonctionne sans licence Pro. Si vous souhaitez la référence complète des paramètres, le Documentation des effets de survol d'image couvre chaque contrôle.

Comment ajouter du texte sur une image dans Elementor (étape par étape)

Étape 1 : Installez les modules complémentaires principaux

Dans votre tableau de bord WordPress, rendez-vous sur Plugins > Ajouter un nouveau et recherchez les“Master Addons” Installez et activez le plugin gratuit de WordPress.org. Si quelque chose vous fait trébucher, le guide d'installation marche à travers. Vous avez également besoin d'Elementor actif, mais la version gratuite suffit.

Étape 2 : Faites glisser le widget Effets de survol d'image dans votre page

Ouvrez n'importe quelle page avec Elementor et recherchez “ Image Hover Effects” dans le panneau du widget Vous le repèrerez parmi les autres widgets portant le badge MA comme Advanced Image, Image Hotspot et Image Comparison Faites-le glisser dans votre section.

Étape 3 : Téléchargez votre image

L'onglet Contenu s'ouvre avec le Effets et image section. Cliquez Télécharger l'image et choisissez quelque chose dans votre médiathèque Deux paramètres se trouvent juste en dessous :

• Taille de l'image contrôle les dimensions rendues, Fonctionne par défaut pour la plupart des mises en page.
• Résolution d'image sélectionne les charges de taille générées par WordPress. “Full” donne le résultat le plus net. Sur une page avec huit ou dix de ces tuiles, passez à “Large” à la place ; personne ne voit la différence à la taille de la grille et la page se charge sensiblement plus rapidement.

Étape 4 : Choisissez un effet de survol

Voici la partie fun. Ouvrez le Effet de survol déposez et vous obtenez la liste complète des effets nommés : Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey, Oscar, Marley, Ruby, Milo, Dexter, Sarah, Zoe, Chico, Julia, Goliath, Hera, Winston, Selena, Terry, Phoebe, Apollo, Kira, Steve, Moses, Jazz, Ming, Lexi et Duke.

Chaque nom est une combinaison différente d'animation par superposition et de révélation de texte Sadie glisse un dégradé vers le haut depuis le bas Marley dépose le titre avec un soulignement Chico effectue un léger zoom arrière sur l'image et encadre le texte avec une fine bordure L'aperçu de l'éditeur met à jour en direct, alors cliquez sur quelques-uns et passez au-dessus de l'image pour tester Voici Chico à mi-chemin :

Un regroupement rapide pour vous faire découvrir tous :

• Des fondus subtils : Lily, Sadie, Layla, Zoé. Bons choix par défaut pour les portefeuilles.
• Diapositives directionnelles : Chérie, Oscar, Roméo, Sarah. Le texte arrive d'un bord.
• Zoom et échelle : Chico, Bubba, Milo, Julia L'image bouge, ce qui attire le regard.
• Joueur et audacieux : Marley, Ruby, Dexter, Goliath, Apollo Un mouvement plus fort, le meilleur pour les sites créatifs.

Étape 5 : Ajoutez votre titre

Ouvrir le Titre section. Tapez votre titre et choisissez-en un Balise HTML. Cela compte plus qu'il n'y paraît : si l'image se trouve dans une grille de services, H3 correspond généralement mieux à la hiérarchie de vos pages que le H2 par défaut. Les moteurs de recherche lisent cette balise comme n'importe quel autre titre de la page.

Étape 6 : Écrivez la description

Le Description section ajoute la ligne plus petite qui apparaît sous le titre sur hover Gardez-la à une ou deux phrases courtes Les longs paragraphes sont coupés sur des images plus petites et vainquent le point d'une superposition propre.

Styler la superposition : couleur, opacité et forme

Passer au Style onglet. Le Image le panneau contrôle l'apparence de la superposition :

• Couleur d'arrière-plan teinte la superposition qui apparaît sur le vol stationnaire Choisissez une couleur dans la palette de votre marque ; une valeur HEXA comme #DD5555 avec alpha réduit garde la photo visible en dessous.
• Opacité de l'image fixe l'état de repos, et Opacité de vol stationnaire définit à quel point l'image diminue lorsque la superposition apparaît. Un espace entre les deux (disons 0,5 au repos, 0,7 en vol stationnaire) rend la révélation délibérée.
• Filtre d'image et Filtre d'image de survol ajoutez des filtres CSS comme le niveaux de gris ou le flou pour les humeurs avant/après.

En dessous, Rayon Frontière remodèle tout le bloc Les valeurs correspondantes vous donnent des coins arrondis doux ; les valeurs asymétriques (100 en haut à gauche, 0 en haut à droite, 100 en bas à droite, 0 en bas à gauche) créent la forme de feuille que vous voyez sur de nombreux sites d'agences modernes.

Typographie pour le titre et la description

Toujours dans l'onglet Style, le Titre et Description les panneaux obtiennent chacun leurs propres contrôles de couleur, typographie et espacement La famille de polices, la taille, le poids, la transformation, la hauteur de ligne et l'espacement des lettres sont tous ici, plus une option d'ombre de texte pour la description Si votre image est claire, basculez la couleur du titre sur une valeur sombre afin que le texte reste lisible dans les deux états.

Une règle de lisibilité qui mérite d'être respectée : visez un contraste clair entre le texte et tout ce qui se trouve derrière. Si la photo est occupée, appuyez-vous sur la couleur de superposition et l'opacité de l'étape précédente plutôt que de la combattre uniquement avec le poids de la police.

Cliquez sur Actions : ouvrez une fenêtre contextuelle ou créez un lien vers l'image entière

De retour dans l'onglet Contenu, le Liens ou Popup ? le contrôle décide de ce que fait un clic. Trois options se trouvent derrière la petite bascule d'icône : aucune, popup et lien externe.

Popup ouvre une fenêtre de superposition avec le contenu que vous choisissez Choisissez Choisissez un Type de contenu et soit écrire du contenu directement dans l'éditeur WYSIWYG ou charger un modèle Elementor enregistré Les grilles de portefeuille utilisent cela constamment : chaque tuile ouvre une étude de cas sans quitter la page.

Lien transforme l'image entière en une carte cliquable Collez l'URL dans le champ URL du lien et toute la zone de survol y pointe, ce qui bat un petit lien texte pour appuyer sur les cibles sur mobile.

Si vous souhaitez plus de modèles contextuels au-delà de ce widget (intention de sortie, déclencheurs de défilement, popups chronométrés), voyez comment le faire ajouter une popup dans Elementor gratuitement.

Le résultat terminé

Appuyez sur l'aperçu et passez sur votre image La superposition s'estompe, le titre et la description s'avèrent avec l'effet que vous avez choisi, et le curseur signale l'action de clic :

Le temps total de construction est d'environ cinq minutes Et comme chaque choix vit dans les paramètres du widget, vous pouvez échanger l'effet ou recolorer la superposition le mois prochain sans rien reconstruire.

Conseils de conception qui maintiennent le texte au-dessus de l'image lisible

• Un effet par grille. Si vous construisez un portefeuille de 6 tuiles, donnez à chaque tuile le même effet de vol stationnaire Effets mixtes lus comme accidentels.
• Contraste d'abord. Le texte blanc a besoin d'une superposition sombre ; le texte sombre a besoin d'une image claire ou d'une teinte de superposition claire.
• Brèves descriptions. Dix mots ou moins La superposition est un teaser, pas un paragraphe.
• Essai au toucher. Sur les téléphones, le premier clic révèle la superposition et le deuxième clic déclenche l'action clic, alors assurez-vous que l'état révélé semble complet sur un petit écran.
• Faites correspondre votre rayon de bordure au reste de la page Une forme de feuille de 100 px à côté de cartes à coins pointus regarde.

Pour des conseils plus larges en matière de conception de mouvement, notre guide Effets d'animation d'élémenteurs les couvertures lorsque les animations de vol stationnaire, de défilement et d'entrée gagnent chacune leur place, et le Fonctionnalités d'animation Master Addons la page montre ce que le plugin peut animer d'autre.

Autres widgets Master Addons pour les effets d'image

Image Hover Effects est le bon outil pour les révélations de texte, mais quelques widgets frères et sœurs couvrent les cas d'utilisation voisins :

• Image avancée ajoute une inclinaison 3 D, des rubans et des badges à une seule image sans superposition de texte.
• Le Widget Flipbox retourne une carte vers un côté arrière entièrement conçu, mieux lorsque vous avez besoin de boutons ou d'icônes dans l'état révélé.
• Point d'accès de l'image épingle des marqueurs d'infobulle interactifs sur des points spécifiques d'une image, idéaux pour les appels de produits.
• Le Carrousel d'images gère les curseurs multi-images lorsqu'une tuile volante ne suffit pas.
• Comparaison d'images met un curseur avant/après dragable sur deux versions d'un plan.

Gratuit vs Pro : De quoi avez-vous réellement besoin ?

Pour le texte sur image, rien au-delà du plugin gratuit. Les plus de 25 effets de survol, les champs de titre et de description, le style superposé, les popups et les liens sont livrés gratuitement. Maître Addons Pro ajoute le jeu de widgets premium plus large, les kits de modèles et les extras comme le Widget Builder, il vaut donc le détour une fois que vous construisez des sites entiers plutôt qu'une section. Il existe une garantie de remboursement de 14 jours si vous l'essayez et changez d'avis.

Préférez regarder ? voici une procédure rapide dans Elementor :

Foire aux questions

Envelopper

Une section Texte de l'élémenteur sur l'image prend cinq minutes avec le widget approprié : déposez les effets de survol d'image, téléchargez votre photo, choisissez un effet par nom et stylisez la superposition pour qu'elle corresponde à votre marque. Le positionnement et le comportement réactif sont déjà gérés pour vous, et la version gratuite couvre tout ce qui se trouve dans ce guide.

Prenez le plugin gratuit, parcourez le reste du bibliothèque de widgets et d'extensionset si vous restez coincé le documentation widget chaque paramètre est-il tracé.

Lecture connexe: Effets d'animation d'élémenteurs, le widget Elementor Flipbox, et ajout de popups dans Elementor gratuitement.