Attirez l’attention des visiteurs en ajoutant des effets visuels saisissants aux blocs Image.

Vous pouvez ajouter des effets aux blocs Image de votre site pour donner à vos images un aspect plus stylisé. Certains effets ajoutent une animation de sorte que l’image est constamment en mouvement, tandis que d’autres n’apparaissent que lorsque le visiteur fait défiler cette section de votre site. La façon dont vous appliquez ces effets varie selon que vous avez ajouté l’image dans une section de l’Éditeur intuitif ou de l’éditeur classique.

Avant de commencer

• Les effets d’image ajoutent des animations à des images individuelles. Si vous utilisez la version 7.1, vous pouvez appliquer des animations à l’ensemble de votre site à l’aide d’animations à l’échelle du site.
• Les animations sur des blocs Image individuels remplacent les animations à l’échelle du site.
• Ajouter des effets d’image à des fichiers .gif modifiés les convertit en fichiers .jpg statiques.
• Avant d’ajouter des effets visuels à votre site, pensez à consulter nos ressources sur l’accessibilité.

Appliquer des effets à des blocs Image dans l’Éditeur intuitif

Après avoir ajouté une image à un bloc Image dans une section de l’Éditeur intuitif, double-cliquez sur l’image pour ouvrir son éditeur. Ensuite :

1. Cliquez sur Design, puis sur Effet d’image.
2. Choisissez un effet dans le menu. Toutes les modifications que vous apportez à cet effet apparaîtront dans l’aperçu de votre site.
3. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Styles d’effets d’image

Vous pouvez choisir parmi les effets d’image suivants :

• Aucun : aucun effet, mis à part le réglage de l’opacité de la superposition
• Liquide : donne à l’image un effet de vague
• Grain du film : ajoute une superposition statique animée à l’image
• Parallaxe : l’image se déplace lorsque les visiteurs font défiler la page
• Lignes réfractées : réfracte l’image à travers un motif de lignes droites
• Cercles réfractés : réfracte l’image à travers un motif de cercles

Personnalisez votre effet dans le panneau des détails en cliquant sur un effet d’image, puis en cliquant sur l’icône des paramètres.

Cliquez sur n’importe quelle catégorie dans le panneau de détails pour développer le menu déroulant et afficher d’autres options, telles que :

• Personnalisation de la taille et de la forme de l’effet
• Modifier la vitesse et le sens des effets à l’aide de mouvements, comme Liquide

Selon le type d’effet d’image, différents paramètres apparaissent que vous pouvez utiliser pour modifier les composants principaux de l’effet. Pour tester une configuration aléatoire des paramètres, cliquez sur l’icône de sélection aléatoire lorsque vous choisissez un effet ou sur Aléatoire lorsque vous êtes dans le panneau des détails de l’effet.

Nous vous recommandons de tester chaque effet pour mieux voir à quoi il ressemble et comment il fonctionne pour votre site.

Appliquer des effets aux blocs Image dans l’éditeur classique

Après avoir ajouté une image à un bloc Image dans une section de l’éditeur classique, double-cliquez sur l’image pour ouvrir son éditeur. Ensuite :

1. Cliquez sur Design, puis sur Animations.
2. Sélectionnez un effet dans la liste afin de lʼappliquer à lʼimage et au texte. Lorsque vous sélectionnez une option, un aperçu sʼaffiche sur la page.

Styles d’animation des blocs

Choisissez parmi les paramètres suivants pour animer l’ensemble du bloc :

• Aucun : aucune animation, même s’il existe des paramètres d’animation à l’échelle du site
• Valeur par défaut du site : le bloc correspond aux paramètres d’animation du site
• Apparaître en fondu : le bloc apparaît en fondu
• Faire glisser vers le haut : le bloc glisse vers le haut
• Insertion horizontale : le bloc se charge en couches horizontales
• Insertion verticale : le bloc se charge en couches verticales
• Incliner vers le haut : le bloc est agrandi et incliné vers le haut
• Incliner vers le bas : le bloc est agrandi et incliné vers le bas
• Mise au point : le bloc est flou avant de devenir net
• Collision  : l’image et le texte glissent depuis les côtés vers l’intérieur
• Révéler : l’image et le texte glissent depuis le centre vers l’extérieur
• Personnalisé : définissez des animations pour l’image et le texte indépendamment

Cliquez sur Personnaliser pour animer l’image et le texte indépendamment et choisissez l’un des paramètres suivants :

• Aucun
• Apparaître en fondu
• Faire glisser vers le haut
• Faire glisser vers le bas
• Faire glisser vers la droite
• Faire glisser vers la gauche
• Mise au point

Voici un exemple de bloc Image en collage utilisant ces paramètres :

• Animation : personnalisé
• Animation d’image : faire glisser vers la gauche
• Animation de texte : faire glisser vers la droite

Dépannage

Si les effets d’image n’apparaissent pas sur votre site, gardez à l’esprit que :

• ​​Si aucun de vos contenus n’est animé, vérifiez que vous utilisez un navigateur pris en charge.
• Les effets d’image apparaissent uniquement sur les navigateurs et les appareils qui prennent en charge WebGL, un outil qui fonctionne avec le processeur graphique de votre appareil. Pour vérifier si votre navigateur est compatible, rendez-vous sur get.webgl.org. Si le navigateur ne prend pas en charge WebGL, l’arrière-plan de la section reste statique.

Conseil : si votre site utilise la version 7.1, les visiteurs peuvent désactiver certaines fonctionnalités animées via les paramètres de leur appareil. Ainsi, ils rencontreront moins d’animations en visitant votre site. Par exemple, si un utilisateur Mac choisit de réduire les animations à l’écran sur son appareil, les animations que vous aurez activées pour les blocs Image ou les effets d’image d’arrière-plan n’apparaîtront pas animées pour ce visiteur.

Autres animations et effets

Selon la version de votre site et l’endroit où vous ajoutez des effets, vous pouvez utiliser des alternatives telles que des images de bannière, des vidéos d’arrière-plan ou des images d’arrière-plan de section pour appliquer des effets et des animations similaires à vos images.

Pour en savoir plus sur chaque type, consultez les guides associés.