L’état au survol (hover) est l’état selon lequel un bouton, un texte ou une image varie lorsqu’il est survolé, au passage de la souris. Par exemple, un bouton sur fond bleu foncé peut devenir bleu clair au passage de la souris.
Personnaliser les états au survol
Cet état est uniquement visible sur un environnement desktop. Par définition, un écran tactile ne permet pas d'afficher un état au survol.
Vous pouvez modifier l’état au survol pour des éléments bouton, texte et image. Pour ce faire, sélectionnez l’élément dans votre email. Dans l’onglet “Styles”, accéder à la catégorie « État au survol ».
Pour les boutons et les textes
Vous pouvez modifier la couleur de fond, la couleur du texte, la couleur des bordures et l’opacité de ces éléments.
Si vous souhaitez modifier la couleur des bordures au survol, celles-ci doivent être paramétrées au préalable dans la catégorie « Bordures ».
Pour les images
Vous pouvez modifier l’opacité, la couleur des bordures et la couleur de fond (visible uniquement lorsque l’image n’est pas chargée) de ces éléments.
Afficher une image secondaire lorsque le curseur de la souris survole une image
Vous pouvez utiliser l’élément arrière-plan pour simuler l’apparition d’un visuel secondaire au survol de la souris.
Étape 1 : Ajoutez une image d’arrière-plan
Depuis l’onglet “Elements”, glissez et déposez un arrière-plan.
Étape 2 : Superposer une image
Après avoir double-cliqué dans l’arrière-plan, glissez et déposez une image par dessus. Définissez une hauteur et une largeur parfaitement identiques à votre image d’arrière-plan.
Étape 3 : Configurez l’état au survol (opacité 0%)
Sélectionnez cette image superposée. Dans la catégorie “Etat au survol”, renseignez 0% au niveau de l’opacité.
Résultat : au survol, l’image superposée laisse apparaître l’image d’arrière-plan.
Quelle est la compatibilité de l’état au survol dans les clients email ?
L’état au survol n’existe pas pour les devices mobiles, il est toutefois supporté par la plupart des clients mails sur desktop.
Les cas d’usage
Même si la créativité n’a comme limite que votre imagination, voici plusieurs cas d’usage que l’on observe chez les utilisateurs de l’Email Builder :
- Appliquer une légère opacité sur les boutons,
- Appliquer une couleur de boutons légèrement plus foncée ou légèrement plus claire,
- Appliquer des couleurs opposées (par exemple, un bouton noir avec un texte blanc peut basculer blanc, avec des contours et un texte noirs),
- Utiliser une opacité sur des images superposées à un arrière-plan pour afficher un visuel secondaire.
En bonus : Découvrez notre live de démo et quelques cas d'utilisation par nos clients !