Éditeur Wix : Personnaliser l'en-tête de votre site
Temps de lecture : 5 min
Votre en-tête est la section en haut de votre site Web et contient généralement votre menu et votre logo. Comme votre en-tête donne aux visiteurs une première impression de votre site, nous vous recommandons de le personnaliser pour l'adapter à votre marque et à votre style.
Sélectionnez un design et un effet de défilement pour votre en-tête, et configurez la taille et les bordures pour laisser une forte impression sur vos visiteurs.
Dans cet article, apprenez-en plus sur :
Les éléments de votre en-tête sont automatiquement affichés sur toutes les pages sur lesquelles votre en-tête apparaît.
Modifier le design de votre en-tête
Vous pouvez modifier le design de votre en-tête pour l'adapter à votre site. Sélectionnez un design parmi une variété de modèles et personnalisez les paramètres tels que la couleur, l'espacement et les angles.
Pour modifier le design de votre en-tête :
- Cliquer sur l'en-tête.
- Cliquez sur l'icône Plus d'actions
sur la droite.
- Cliquez sur Modifier le design de l'en-tête .
- Cliquez sur l'état Normal ou Défilement.
- Utilisez les options pour personnaliser le design de l'en-tête:
- Couleur de remplissage et opacité : Choisissez une couleur pour votre en-tête et ajustez son opacité.
- Bordure : Ajoutez des bordures à votre en-tête pour le faire ressortir sur votre page.
- Angles : Rendez les angles de votre bordure plus ronds ou plus carrés.
- Ombre : Ajoutez et concevez une ombre pour donner à votre en-tête un effet 3D sympa.
L'état « Défilement » vous permet de concevoir votre en-tête pour qu'il ait un aspect différent une fois que les visiteurs ont fait défiler la page vers le bas. Par exemple, vous pouvez faire en sorte que l'en-tête change de couleur ou bien ajouter une bordure pour qu'il se démarque.
![Capture d'écran du panneau Modifier le design de l'en-tête dans l'Éditeur wix.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/18/db2b9d85-9351-4eb7-8c4a-b02c6a23d62c/bf593564-c5be-45be-9e3a-d3e98d805b22.png)
Définir une image comme en-tête de votre site
Pour personnaliser davantage votre site, vous pouvez configurer une image comme en-tête. Faites glisser l'image sur l'en-tête pour la connecter, puis utilisez les poignées de glissement pour étirer l'image sur l'en-tête. Vous pouvez ensuite déplacer l'image vers l'arrière afin qu'elle ne masque pas les éléments de votre en-tête.
L'image doit être plus petite que votre en-tête pour pouvoir y tenir et être attachée correctement. Nous vous recommandons d'utiliser une image dont la résolution et la taille sont compatibles avec la taille de votre en-tête, comme une image de bannière.
Pour utiliser une image comme en-tête de votre site:
- Accédez à votre éditeur.
- Ajoutez une nouvelle image ou sélectionnez une image existante sur votre page.
- Faites glisser l'image vers l'en-tête et déposez-la lorsque vous voyez le message Joindre à l'en-tête.
- (Facultatif) Faites glisser les poignées de redimensionnement pour étirer l'image à la largeur de votre en-tête.
- Déplacez l'image vers l'arrière :
- Faites un clic droit sur l'image.
- Survolez Organiser et cliquez sur Déplacer en arrière.
![capture d'écran du panneau de modification rapide de l'en-tête dans l'Éditeur wix.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/11/29/32a790d9-f0fd-4dca-8108-18e25278085a/56185aa5-971d-4f99-9ecc-b741eaccbb92.png)
Suggestion :
Remplacez votre image d'en-tête à tout moment en utilisant le panneau Modification rapide, en cliquant sur Modifier à côté de l'image actuelle.
Redimensionner votre en-tête
Vous pouvez redimensionner votre en-tête pour qu'il soit aussi grand ou aussi petit que vous le souhaitez.
Les gros en-têtes sont utiles si vous avez beaucoup d'éléments tels qu'un titre de site, un menu du site et un logo. Les en-têtes plus petits sont parfaits pour les sites minimaux ou si vous avez la plupart de vos éléments sur la page.
Pour redimensionner votre en-tête :
- Cliquer sur l'en-tête.
- Faites glisser la poignée d'étirement au bas de l'en-tête pour l'agrandir ou le raccourcir.
![GIF montrant l'en-tête agrandi et réduit avec les poignées de déplacement.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/23/93987c42-8afd-4340-9de2-e7ab527f6c40/dfa3ae50-6612-4914-a334-7f425446b47d.gif)
Ajouter un effet de défilement à votre en-tête
Ajoutez un effet de défilement sympa à votre en-tête pour choisir son comportement lorsque les visiteurs font défiler vers le haut et le bas. Par exemple, conservez l'en-tête en haut pendant que les visiteurs font défiler, ou faites-le disparaître progressivement.
Pour choisir un effet de défilement pour votre en-tête
- Cliquer sur l'en-tête.
- Cliquez sur l'icône Plus d'actions
à droite.
- Cliquez sur Paramètres de défilement de l'en-tête.
- Sélectionnez un effet de défilement :
- Défile avec le site : Aucun effet de défilement n'est appliqué. Lorsque les visiteurs font défiler la page vers le bas, ils font également défiler la page depuis l'en-tête (c'est-à-dire le haut de la page).
- Figer : Votre en-tête reste en haut de la page lorsque les visiteurs font défiler vers le haut et le bas, ce qui leur permet d'accéder facilement au menu de votre site.
Suggestion : Lorsque vous sélectionnez cet effet, nous vous recommandons de garder l'en-tête plutôt court afin qu'il ne couvre pas le contenu lors du défilement. - Disparaître : Lorsque les visiteurs font défiler votre site, l'en-tête disparaît progressivement. Pour que l'en-tête réapparaisse, vos visiteurs doivent commencer à faire défiler la page vers le haut.
- Estomper : L'en-tête disparaît lentement lorsque vos visiteurs font défiler le site et réapparaît lorsqu'ils commencent à faire défiler vers le haut.
Suggestion :
Votre site mobile et votre site sur ordinateur peuvent avoir des effets de défilement d'en-tête différents. En savoir plus sur la modification des paramètres de défilement de l'en-tête sur votre site mobile.
![capture d'écran des paramètres de défilement de l'en-tête dans l'Éditeur wix.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/18/85d9ad44-13c8-49e6-9203-850db095c0d1/98080799-71e3-4018-999e-2e9b78bd5e4a.png)