Améliorez les images et attirez l’attention des visiteurs en appliquant des effets de survol de la souris.

Les effets de survol permettent d’afficher des informations ou de créer un mouvement lorsque le curseur survole une image. Vous pouvez ainsi ajouter des interactions et des animations à votre site, par exemple révéler des titres et des légendes sans empiéter sur une image ni prendre trop de place sur la page.

Vous pouvez utiliser les effets de survol sur n’importe quel site, avec les blocs Image et les blocs Galerie en Diaporama. Selon la version et le template de votre site, ce dernier peut également prendre en charge les effets de survol dans d’autres zones de votre site. Ce guide explique chaque zone en détail.

Conseil : la plupart des appareils mobiles ne prennent pas en charge les effets de survol. L’expérience de vos visiteurs peut donc varier en fonction de l’appareil qu’ils utilisent pour visiter votre site.

Blocs Image

Les blocs Image ajoutés aux sections de l’Éditeur intuitif ne prennent pas en charge les effets de survol ni les légendes intégrées. Créez des légendes en utilisant un bloc Texte pour ajouter du texte adjacent ou superposé à un bloc Image.

Vous pouvez afficher une légende d’image en cas de survol dans les blocs Image Inline.

1. Créez ou ouvrez un bloc Image.
2. Cliquez sur l'onglet Création, puis sélectionnez Inline.
3. Cliquez sur l'onglet Contenu, puis sélectionnez Superposition de légende au survol dans le menu déroulant Légende.
4. Passez le curseur sur le bloc Image. Dans la superposition de légende en noir qui apparaît, cliquez sur Écrire une légende ici... et saisissez votre légende.
5. Après avoir enregistré la page, la légende apparaît quand on la survole. Utilisez les ajustements de style pour personnaliser la légende de l’image.

Blocs Galerie en Diaporama

Vous pouvez afficher le titre et la description des images en cas de survol dans un bloc Galerie en diaporama.

• Les effets de survol sont disponibles uniquement pour le design du bloc Galerie en diaporama.
• Les titres et les descriptions ne s’affichent pas sur les appareils mobiles dont la largeur d’écran est inférieure à 480 pixels.
• Les légendes configurées pour apparaître au survol peuvent s’afficher sur les appareils de grande taille (comme les tablettes) ou sur les appareils plus petits (en mode paysage). Selon l’appareil mobile, les légendes s’afficheront soit systématiquement, soit au toucher (court ou long) de l’écran.

Pour ajouter du texte et activer les effets de survol :

1. Créez ou ouvrez un bloc Galerie en diaporama.
2. Dans l’onglet Contenu, survolez une image avec votre souris et cliquez sur .
3. Entrez un titre et une description. Vous pouvez également ajouter une URL de destination (facultatif).
4. Cliquez sur Enregistrer.
5. Cliquez sur l’onglet Design.
6. Cochez Afficher le titre et la description.
7. Sélectionnez un emplacement dans le menu déroulant Position du titre et de la description.
8. Cliquez sur Afficher au survol.
9. Cliquez sur Appliquer.

Pages Portfolio

Dans les pages Portfolio, certaines dispositions prennent en charge les effets de survol. Dans l’éditeur des pages Portfolio, choisissez l’une des dispositions suivantes :

• Survol : Arrière-plan - Affiche le titre des projets avec la disposition Empilée ou Inline. En cas de survol d’un titre, l’image mise en avant du projet remplace l’arrière-plan de la section.
• Survol : Fixe - Affiche le titre des projets avec la disposition Empilée ou Inline. En cas de survol d’un titre, l’image mise en avant du projet s’affiche en plus petit dans une position fixe dans la section.
• Survol : Suivre le curseur - Affiche le titre des projets avec la disposition Empilée ou Inline. En cas de survol d’un titre, l’image mise en avant du projet s’affiche en plus petit et suit le déplacement du curseur. 

Pour en savoir plus, consultez l’article Pages Portfolio. 

Pages Boutique

Les effets de survol fonctionnent différemment selon la version de votre site.

Pages Galerie (version 7.0)

Certains templates prennent en charge les effets de survol sur les pages Galerie. Vous pouvez activer et modifier ces effets dans le panneau Styles du site.

Le titre et la description des images s’affichent lors de survol dans les designs Diaporama et Grille de ces familles de templates :

• Adirondack
• Aviator
• Bedford
• Brine
• Farro
• Five
• Galapagos
• Native
• Pacific
• Skye
• York

Activer et personnaliser l’effet de survol

Lorsque la page Galerie est affichée, ouvrez le panneau Styles du site et faites-le défiler vers le bas jusqu’à Styles de la galerie. Cliquez sur Design de la galerie, puis sélectionnez Diaporama ou Grille.

• Diaporama : sélectionnez Afficher en cas de survol dans le menu déroulant Superposition des informations de galerie. Les titres et les descriptions seront affichés en cas de survol. Les légendes configurées pour apparaître au survol peuvent s’afficher sur les appareils mobiles de taille suffisante, comme les tablettes, ou sur les appareils plus petits (en mode paysage). Selon l’appareil mobile, les légendes s’afficheront soit systématiquement, soit au toucher (court ou long) de l’écran.
• Grille : les titres et les descriptions apparaîtront en cas de survol lorsque l’image est ouverte dans une lightbox, sauf si l’image comporte une URL de destination. Pour en savoir plus, consultez l’article Activer l’affichage des images dans une lightbox.

Autres effets sur une page Galerie selon les templates

Les pages Galerie proposent des effets de survol spéciaux dans ces familles de templates :

• Forte – Lorsque vous survolez le carrousel de la page Galerie, les flèches de navigation sont affichées. Lorsque vous survolez les légendes, ces dernières glissent vers le haut pour permettre de lire des descriptions plus longues.
• Momentum – Navigation par flèches en cas de survol en plein écran.
• Tremont – Les légendes sont affichées en cas de survol.
• Wexley – Lorsque vous survolez les images sur une page Galerie, le titre de l’image et une superposition de couleurs s’affichent.

Pages Index (version 7.0)

Les pages Index proposent des effets de survol spéciaux dans ces familles de templates :

• Avenue – Lorsque vous survolez une miniature, son opacité change. Vous pouvez également afficher le titre de navigation de la page au survol.
• Flatiron – Lorsque vous survolez une miniature, un zoom et un panoramique sont effectués sur l’image.
• Montauk – Lorsque vous survolez une miniature, son opacité change.
• Tremont – Lorsque vous survolez le titre d’une page dans la navigation de l’index, l’image mise en avant de la page s’affiche sous forme d’image d’arrière-plan.
• York – En cas de survol, les images miniatures peuvent s’estomper et le titre des miniatures peut s’afficher.

Consultez le guide de chaque famille pour en savoir plus.