# Éditeur Wix : Ajouter et configurer une interaction de survol Source: https://support.wix.com/fr/article/%C3%A9diteur-wix-ajouter-et-configurer-une-interaction-de-survol (updated 2026-05-24) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt Apportez vos [boîtes](https://support.wix.com/fr/article/éditeur-wix-ajouter-et-configurer-une-boîte), [répéteurs](https://support.wix.com/fr/article/éditeur-wix-ajouter-et-gérer-les-répéteurs-listes-et-grilles), et des éléments à la vie en ajoutant des interactions de survol. Il s'agit des effets que vos visiteurs voient lorsqu'ils survolent les éléments que vous choisissez. Faites apparaître ou disparaître des éléments, ajoutez des effets et modifiez les couleurs au passage de la souris. Vous pouvez également contrôler le minutage de vos effets pour maximiser leur potentiel. ![Gif de l'effet de survol utilisé sur le site Wix. Le survol montre un pop-up flottant.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/11/7aef50c2-b1f8-4e0f-93a1-7433b01432c6/7892c0eb-ce2e-4f3a-b93d-fbeb8de76e3a.gif) --- ## Étape 1 | Ajouter et concevoir le design d'un élément Les interactions de survol ajoutent du plaisir et du mouvement à votre site. Pour commencer, ajoutez une boîte ou un répéteur à partir du panneau **Ajouter des éléments**. Cliquez sur une option ci-dessous pour en savoir plus sur l'ajout de chaque élément : **Ajouter une boîte** 1. [Accédez à votre Éditeur](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Cliquez sur **Ajouter des éléments** ![](https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png) à gauche de l'Éditeur. 3. Cliquez sur **Boîte**. 4. Cliquez ou faites glisser une boîte pour l'ajouter à la page. **Suggestion :** Cliquez sur **Boîtes** de survol et sélectionnez une boîte si vous préférez utiliser une boîte de survol prédéfinie. 5. (Facultatif) [Personnaliser le design de votre boîte](https://support.wix.com/fr/article/éditeur-wix-ajouter-et-configurer-une-boîte#customizing-your-box-design) et ajoutez des éléments si nécessaire. ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/11/1d3077ab-7957-49ad-8838-843d5591ed13/8c818c9e-5ca8-4522-a33f-5b98ac044f1d.png) **Ajouter un répéteur** 1. [Accédez à votre Éditeur](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Cliquez sur **Ajouter des éléments** ![](https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png) à gauche de l'Éditeur. 3. Cliquez sur **Liste** . 4. Cliquez sur **Répéteurs** . 5. Cliquez ou faites glisser un répéteur pour l'ajouter à la page. 6. (Facultatif) [Concevoir le design de votre répéteur](https://support.wix.com/fr/article/éditeur-wix-ajouter-et-gérer-les-répéteurs-listes-et-grilles#designing-repeater-items) et ajoutez des éléments si nécessaire. ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/11/8c5d812f-8f12-4273-a696-60e626c6f52d/69a0787d-714b-4751-ac58-4bd928ed4153.png) --- ## Étape 2 | Accéder au mode survol Après avoir ajouté et conçu votre élément, accédez au mode survol pour commencer à ajouter des interactions. C'est là que vous contrôlez ce que les visiteurs voient lorsqu'ils survolent votre boîte ou votre répéteur. ### Pour accéder au mode survol : 1. Sélectionnez votre boîte / répéteur dans l'Éditeur. 2. En fonction de votre élément, procédez comme suit pour accéder au mode survol : * **Boîte :** Cliquez sur l'icône **Interactions de survol** ![](https://lh5.googleusercontent.com/4G8nL6yqsuPiM-i8g38LbxleCliWtXJ9COztpynjkqbDl4Ewgox2oifnFytJ2Y7OyNseZ5abSbKW6ezusMIm40UWRTaH83zHDl49ffaGMd5RajhyzJE9Ho8fSbmW0B0c92wgSnVl) . * **Répéteur :** Cliquez sur n'importe quel conteneur dans le répéteur et sélectionnez l'icône **Interactions de survol**. ![](https://lh5.googleusercontent.com/4G8nL6yqsuPiM-i8g38LbxleCliWtXJ9COztpynjkqbDl4Ewgox2oifnFytJ2Y7OyNseZ5abSbKW6ezusMIm40UWRTaH83zHDl49ffaGMd5RajhyzJE9Ho8fSbmW0B0c92wgSnVl) . 3. Cliquez sur **Ajouter une interaction de survol**. > **Suggestion :** Une fois que vous avez accédé au mode survol pour la première fois, vous pouvez passer du mode normal au mode survol en utilisant les onglets en haut de l'élément. ![capture d'écran de la boîte dans l'Éditeur wix mettant en évidence les onglets normaux et survolants.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/11/463673fd-2067-4c9f-b030-3b8a24857b27/150dcfce-f383-4f83-b49f-5cd6cd52f5a4.png) --- ## Étape 3 | Ajouter des interactions de survol à votre élément En mode survol, vous pouvez faire apparaître ou disparaître des éléments et ajouter des effets sympas. Tout se passe simultanément lorsque les visiteurs survolent votre boîte ou votre répéteur. ### Choisissez ce que vous voulez faire : **Ajouter des éléments qui apparaissent au survol** 1. Cliquez sur l'icône **Ajouter au survol** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/07/02/de5afcf6-ced0-44cd-b07f-42bd5e53364d/86a3c2e1-cc9c-494c-b0a0-7514433e0e80.png) en haut à gauche pour ajouter des éléments qui apparaissent lors du survol. 2. Cliquez sur l'élément que vous souhaitez ajouter à la boîte ou au répéteur. ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/16/22b7aab2-ce14-4bf7-92c1-3779a5ee6d24/4599069f-6ae9-4b84-90d1-a6e50985a345.png) **Remarque :** Tous les éléments ne peuvent pas être ajoutés au mode survol. **Masquer des éléments au survol** Faites disparaître un élément lorsque les visiteurs le survolent.Vous pouvez masquer des éléments spécifiques ou masquer l'ensemble de la boîte / du répéteur. Sélectionnez l'élément et appuyez sur **Supprimer** sur votre clavier, ou cliquez sur l'icône **Masquer l'élément** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/06/13/5ddfce41-1ea9-49a7-83d8-0ceef0167d71/1a9d4f68-6b2f-4ed8-a79e-75686785bc3f.png). **Suggestion :** Cliquez sur l'icône **Masqué au survol** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/07/02/835b6f66-6611-4808-9b75-7fb0f14c3437/df08a290-cf02-4d11-92c8-4c46d1efb5f9.png) en haut à gauche pour accéder et gérer la liste des éléments masqués. **Choisissez un effet pour l'élément lors du survol** Vous pouvez ajouter un effet à n'importe quel élément de votre boîte ou élément de répéteur, y compris la boîte / l'élément du répéteur lui-même. Agrandissez, rétrécissez, pivotez ou inclinez les éléments sur le côté. 1. Sélectionnez la case / le répéteur dans votre Éditeur. 2. Cliquez sur **Sélectionner un effet**. 3. Sélectionnez un effet parmi les options disponibles. **Suggestion :** Choisissez l'effet **Basique** pour combiner plusieurs effets. Par exemple, vous pouvez faire grandir et pivoter votre élément en même temps à l'aide de cet effet. 4. (Facultatif) Cliquez sur **Personnaliser** pour adapter l'effet selon vos besoins. Après avoir sélectionné un effet pour votre élément, paramétrez le temps et la durée de son apparition. 1. Sélectionnez l'élément dans votre Éditeur. 2. Cliquez sur l'icône **Temps et durée** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/11/16/02c478a1-3f29-47fb-9e44-18d67903ba61/6f1d33b5-0a3e-4c02-b0af-41a025b7eda0.png) . 3. Utilisez les options disponibles pour paramétrer le temps et la durée de votre effet : * **Durée :** Faites glisser le curseur pour choisir la durée (en secondes) de votre effet, après que les visiteurs survolent l'élément. * **Délai :** Faites glisser le curseur pour sélectionner le délai (en secondes) entre le moment où vos visiteurs survolent l'élément et le moment où ils voient l'effet. * **Accélération :** Sélectionnez la manière dont votre élément doit passer de son état normal à l'effet, après que les visiteurs l'ont survolé (par exemple, en entrant et en sortant de l'effet). **(Conteneurs uniquement) Modifier le design du conteneur au survol** Vous pouvez modifier le design de la boîte en mode survol pour modifier sa couleur d'arrière-plan, sa bordure, ses angles et son ombre. 1. Sélectionnez la case dans votre Éditeur. 2. Cliquez sur l'onglet **Survol** en haut de la boîte. 3. Cliquez sur l'icône **Design** ![](https://lh4.googleusercontent.com/4O8XC2DBehwJKcPpek4YdvPZFUcQfbQiK6vOyYtovzErBWB_HjLgWHG1aekjaqsK1EUhkZ_Wpu_Iff8fipzak6hfFJ_bI7uK5qFEE_GbfxSgIiFMgoPlJbrlWz5aoLxrPxaoftXQ) . 4. Sélectionnez l'onglet correspondant à gauche du panneau pour modifier le design : * **Couleur de remplissage et opacité :** Faites glisser le curseur pour ajuster l'opacité de l'arrière-plan et cliquez sur la case de couleur pour modifier la couleur. * **Bordure :** Cliquez sur la case de couleur pour modifier la couleur et faites glisser les curseurs pour ajuster l' **opacité et la couleur** et la **largeur** de la bordure. * **Angles :** Sélectionnez un angle pour ajuster l'arrondi des angles. Cliquez sur l'icône Lien pour que tous les angles soient identiques. * **Ombre :** Cliquez sur le curseur pour activer une ombre, puis modifiez l'angle, la distance, la taille, etc. **Suggestion :** Vous pouvez également [modifier le design d'éléments spécifiques à l'intérieur de la boîte en mode survol](https://support.wix.com/fr/article/éditeur-wix-ajouter-et-configurer-une-interaction-de-survol). ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2022/05/02/ed677d56-dee4-483a-bd0e-721dd41b9672/de4f34f7-c4bd-43f7-a0e9-c87db4565a1c.png)