Améliorez le contenu de votre site à l’aide d’effets de style spéciaux.

Pour ajouter des effets visuels saisissants au contenu de votre site, activez des animations à l'échelle du site qui apparaissent lorsque les visiteurs font défiler vos pages. Vous pouvez également ajouter des animations et d'autres effets sur les images à des éléments spécifiques, tels qu'un arrière-plan de section ou un bloc Image.

Ce guide indique comment configurer des animations à l'échelle du site et où trouver d'autres zones où il est possible d'ajouter des effets.

Les animations à l’échelle du site sont disponibles dans la version 7.1. Dans la version 7.0, cela dépend de votre template. Certains templates de la version 7.0 comportent des options d’animation spécifiques au template, comme les pages Blog avec la famille de template Bedford. Pour trouver le template de votre site, consultez l’article Quels sont la version et le template de mon site ?.

Avant de commencer

• Les animations insérées dans chaque bloc Image, bloc Citation et autres zones remplacent les animations à l’échelle du site. 
• Certaines pages de collection, comme les pages Blog, les pages Boutique et les pages Portfolio, ont toujours des animations discrètes lorsque la page se charge, même lorsque les animations à l’échelle du site sont désactivées.
• Avant d’ajouter des effets visuels à votre site, pensez à consulter nos ressources sur l’accessibilité.

Regarder une vidéo

Activer des animations à l'échelle du site

Les animations à l’échelle du site s’appliquent à la plupart des zones de votre site, avec des effets plus ou moins visibles selon les zones. Ces animations affectent principalement la façon dont les images, le texte et les autres blocs apparaissent lorsque vous faites défiler une page. Certaines animations s’affichent également lorsqu’un visiteur survole des liens et des boutons.

Nous vous recommandons d’activer un style d’animation, puis de tester son rendu sur différentes pages de votre site. Essayez chaque style jusqu’à ce que vous trouviez celui qui convient le mieux pour votre contenu.

Pour activer les animations à l’échelle du site :

1. Ouvrez le panneau Animations. 
2. Cliquez sur un style d’animation.
3. Choisissez une vitesse d’animation Lente, Moyenne ou Rapide.
4. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Styles d'animation à l'échelle du site

Choisissez parmi les styles d'animation suivants :

• Aucun : désactive les animations à l’échelle du site
• Fondu : le contenu apparaît en fondu sur la page
• Échelle : le contenu s’anime et passe d’une taille plus petite à sa taille finale, créant un effet de zoom
• Diapositive : le contenu glisse du bas vers le haut pour atteindre sa place, accentuant l’effet de défilement vers le bas de la page
• Rogner : le contenu glisse ligne par ligne à partir de la gauche
• Flex : ajoute des animations uniques aux titres, aux textes des liens, aux boutons et aux pages Portfolio, et souligne au survol les liens de la navigation principale

Supprimer les animations à l'échelle du site

Pour désactiver les animations à l'échelle du site :

1. Ouvrez le panneau Animations.
2. Choisissez Aucun.
3. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Autres animations et effets sur les images et les textes

Vous pouvez activer d’autres animations et effets pour des éléments spécifiques de votre site. Pour en savoir plus sur chaque type, consultez les guides associés :

• Motif d'arrière-plan de section (version 7.1 uniquement)
• Images et effets d'arrière-plan de section (version 7.1 uniquement)
• Vidéos d’arrière-plan
• Ajouter des effets et des animations à des blocs Image
• Blocs Citation
• Blocs Défilement

Dépannage

Si les animations n’apparaissent pas sur votre site, voici quelques aspects à prendre en compte :

• Certains contenus prennent uniquement en charge le style d’animation Fondu. Si vous sélectionnez un autre style et que le contenu ne peut pas le prendre en charge, il apparaît en fondu à la place.
• Si aucun de vos contenus n’est animé, assurez-vous d’utiliser un navigateur pris en charge.
• Les animations à l’échelle du site et les arrière-plans de section ne sont disponibles que sur la version 7.1.
• Découvrez comment d’autres professionnels utilisent l’animation pour améliorer les sites de leurs clients sur notre blog Circle.