Éditeur Studio : Ajouter des animations aux icônes de boutons
5 min
Dans cet article
- Ajouter une animation d'icône prédéfinie
- Créer des animations d'icône personnalisées
- Concevoir le design de l'icône
- Exigences et directives relatives aux icônes personnalisées
Utiliser des boutons stylisés? Les animations d'icônes créent des effets attrayants, ce qui rend les sites de vos clients interactifs dans les moindres détails.
Choisissez parmi la variété d'icônes animées prédéfinies de Wix Studio pour un effet prêt à l'emploi, ou combinez une icône de début et de fin pour créer une animation personnalisée. Vous pouvez même importer vos propres fichiers SVG pour personnaliser votre site.
Comment fonctionnent les animations d'icône de bouton ?
Ajouter une animation d'icône prédéfinie
Choisissez l'une de nos animations d'icônes pour une modification rapide. Une fois que vous avez sélectionné l'effet que vous souhaitez, vous pouvez configurer la durée.
Pour ajouter une icône animée prédéfinie :
- Accédez à votre éditeur.
- Cliquez sur le bouton stylisé correspondant.
- Cliquez sur Paramètres.
- Cliquez sur Animation sous Type d'icône.
- Choisissez ce que vous voulez faire ensuite :
- Sélectionnez l'icône souhaitée sous Choisir une icône
- Cliquez sur l'icône Ajouter
pour explorer notre gamme complète d'icônes animées dans le gestionnaire de médias.
- (Facultatif) Faites glisser le curseur pour modifier la durée de l'animation.
Suggestion :
Survolez nos icônes prédéfinies pour prévisualiser leur animation.
Créer des animations d'icône personnalisées
Créez vos propres animations d'icônes pour les boutons du site de votre client. En sélectionnant à la fois une icône de début et une icône de fin, vous pouvez créer une animation fluide et unique au site de votre client. Combinez des icônes de Wix ou utilisez 2 de vos propres fichiers SVG.
Pour créer des animations personnalisées :
- Accédez à votre éditeur.
- Cliquez sur le bouton stylisé correspondant.
- Cliquez sur Paramètres.
- Sélectionnez Animation sous Type d'icône.
- Cliquez sur l'icône Ajouter
et sélectionnez Créer un nouveau. - Configurez vos icônes de début et de fin :
- Cliquez sur Ajouter une icône.
sous Icône Démarrer. - Sélectionnez un fichier dans l'onglet Médias de Wix , ou importez / sélectionnez le vôtre dans Fichiers du site.
- Cliquez sur Choose file.
- Répétez les étapes a-c pour l'icône de fin.
- Cliquez sur Ajouter une icône.
- (Facultatif) Cliquez sur Retour en haut et utilisez le curseur pour définir la Durée.
Suggestions :
- Vous pouvez combiner votre propre fichier avec une icône de Wix.
- Utilisez la boîte d'aperçu pour vous assurer que l'effet est comme vous le souhaitez.
Concevoir le design de l'icône
Personnalisez l'icône pour l'adapter à votre vision du design, à l'identité visuelle unique de votre client et au bouton particulier. Redimensionnez l'icône, modifiez sa couleur et faites-la pivoter pour rendre le bouton plus dynamique.
Vous pouvez personnaliser l'état de survol du bouton, ce qui vous donne la possibilité d'ajouter un niveau d'interactivité supplémentaire – par exemple, faites pivoter l'icône ou changez les couleurs au survol.
Pour personnaliser le design de l'icône :
- Accédez à votre éditeur.
- Cliquez sur le bouton stylisé correspondant.
- Cliquez sur l'icône Ouvrir l'Inspecteur
en haut à droite de l'éditeur.
- Sélectionnez l'état concerné sous Design: Normal ou Survol.
- Cliquez sur Icône sous Design.
- Utilisez les options disponibles pour concevoir l'icône :
- Redimensionnez l'icône.
- Modifiez la couleur de l'icône et ajustez l'opacité.
- Faites pivoter l'icône sous un angle différent.
Exigences et directives relatives aux icônes personnalisées
Les icônes personnalisées ont des exigences. Pour importer et utiliser vos propres fichiers, ils doivent :
- Couleur unie (#000000) uniquement
- Dans un format SVG
- Pas plus de 250KB
Remarque :
Si vous avez créé vos fichiers SVG dans Abe Optimator ou Figma, ils doivent être convertis en un chemin composé avant de les exporter.
Vous devez également garder à l'esprit lors de la création d'icônes. Nous vous recommandons de suivre les directives ci-dessous pour assurer l'animation la plus fluide possible.
- Assurez-vous que les icônes de début et de fin ont la même position de départ.
- Vérifiez que les deux icônes ont le même nombre de points.
- Utilisez des icônes remplies (sans détours).
- Utilisez plusieurs formes plus petites pour créer une icône SVG, par opposition à une forme plus grande.
- Mettez à l’échelle les formes lorsque vous les redimensionnez pour maintenir leur qualité.
- Utilisez l'affichage des pixels du programme pour vous assurer qu'il est aligné avec les pixels du tableau de bord.
- Si vos icônes sont de formes très différentes, vous pouvez essayer ces suggestions pour une transition encore en douceur :
- Utilisez des versions modifiées des icônes (une icône de début qui a été légèrement transformé en icône de fin et vice versa).
- Masquez les formes d'une icône à l'autre (ex. masquer les formes de l'icône de fin sur l'icône de début).
Important :
Nous ne pouvons pas fournir d'assistance ou de dépannage pour les fichiers SVG que vous créez en dehors de Wix.