Personnalisez le style des éléments qui apparaissent en haut de chaque page de votre site.

C’est dans l’en-tête que s’affichent le titre ou le logo de votre site, le menu de navigation et les autres éléments. En général, l’en-tête reste identique sur l’ensemble de votre site. Il joue un rôle majeur dans la façon dont les visiteurs naviguent dans votre contenu et interagissent avec lui.

Ces options sont disponibles pour les en-têtes de site dans la version 7.1. Si votre site utilise la version 7.0, l’en-tête est propre au template de votre site.

Vidéo : Les en-têtes de site

Cette vidéo vous montre comment modifier et personnaliser le style de l’en-tête de votre site.

Modifier le titre ou le logo de votre site

Lors de la création de votre site, vous lui avez probablement donné un titre. Si vous ajoutez un logo, celui-ci remplace le titre du site dans l’en-tête. Il est néanmoins conseillé d’ajouter un titre au site. Les moteurs de recherche l’utilisent pour les résultats de recherche et les onglets du navigateur, sauf si vous ajoutez un titre SEO distinct.

Ajouter, modifier ou supprimer des liens de navigation dans votre en-tête

Le menu de navigation de l’en-tête de votre site correspond aux pages que vous avez ajoutées dans le panneau Pages. Pour modifier les liens de navigation :

• Ajoutez des pages à votre navigation
• Modifiez les titres des pages
• Supprimer des pages

Ajouter un bouton à votre en-tête

L’ajout d’un bouton à un en-tête met votre appel à l’action bien en évidence, et les visiteurs sont encouragés à cliquer dessus immédiatement. Selon la façon dont votre en-tête est disposé, le bouton peut être groupé avec les liens de navigation ou séparé de ces derniers. Sur mobile, le bouton apparaît toujours en dessous des liens de navigation.

Pour ajouter un bouton à votre en-tête :

1. Ouvrez le panneau Pages.
2. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
3. Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
4. Cliquez sur Ajouter des éléments.
5. Activez l’option Bouton.

Modifier le bouton d’en-tête

Pour configurer le texte, le lien et le style du bouton :

1. Ouvrez le panneau Pages.
2. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
3. Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
4. Cliquez sur le bouton de l’en-tête, puis sur l’icône crayon.
5. Sous Contenu, modifiez le texte et le lien du bouton.
6. Cliquez sur l’onglet Design, puis choisissez le style Principal, Secondaire ou Tertiaire pour configurer le bouton.

La forme de votre en-tête s’adapte au style de vos boutons.

Définir la police du bouton d’en-tête

Si vous définissez le style de votre bouton sur Secondaire ou Tertiaire, le texte du bouton de l’en-tête s’aligne sur ces styles.

Pour personnaliser la police d’un bouton d’en-tête configuré sur le style Principal :

1. Ouvrez le panneau Styles du site.
2. Cliquez sur > à côté de Polices.
3. Cliquez sur Attribuer des styles.
4. Cliquez sur Bouton d’en-tête et apportez vos modifications.

Définir la couleur du bouton d’en-tête

La méthode de modification de la couleur du bouton dépend du style d’arrière-plan de votre en-tête.

Si le style d’arrière-plan de votre en-tête est :

• Uni – Couleur : la couleur du bouton s’aligne sur la palette de couleurs par défaut de votre site.
• Uni – Thème : la couleur du bouton s’aligne sur la palette de couleurs sélectionnée.
• Dégradé : la couleur du bouton s’aligne sur la palette de couleurs par défaut de votre site.
• Adaptatif : la couleur du bouton s’aligne sur la palette de couleurs de la première section de chaque page. Personnalisez la couleur du bouton pour chaque thème de couleur utilisé par vos sections.

Ajouter un lien de connexion au compte, des liens vers les réseaux sociaux, un panier ou un sélecteur de langue à votre en-tête

Pour ajouter d’autres éléments à votre en-tête, comme un lien de connexion pour vos clients, des liens de réseaux sociaux, un panier d’achat ou un sélecteur de langue :

1. Ouvrez le panneau Pages.
2. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
3. Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
4. Cliquez sur Ajouter des éléments.
5. Activez l’option correspondante à l’aide du bouton situé à côté des éléments que vous souhaitez afficher.

Personnaliser les options de l’en-tête

Vous pouvez personnaliser le design de vos liens de réseaux sociaux et de votre icône panier. Si votre site utilise Weglot, vous pouvez également personnaliser le sélecteur de langue.

Pour modifier ces options :

1. Ouvrez le panneau Pages.
2. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
3. Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
4. Cliquez sur l’élément que vous souhaitez modifier, puis sur l’icône crayon.
5. Utilisez les paramètres pour modifier le design. Ces options varient selon l’élément sélectionné.
6. Cliquez sur Enregistrer.

Ajouter des effets de style à votre en-tête

Lorsque vous modifiez le design de l’en-tête de votre site, vous pouvez ajouter des effets visuels pour lui donner un aspect unique ou pour renforcer l’identité de votre marque. Ces effets s’appliquent à la fois aux versions pour ordinateur et pour mobile de votre en-tête.

Pour ajouter des effets à l’en-tête :

1. Ouvrez le panneau Pages.
2. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site, puis survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
3. Cliquez sur Modifier le design.
4. Sous l’option Effets, ajoutez une ombre portée, ajoutez une bordure et définissez un style d’en-tête fixe.

Ajouter une ombre portée à votre en-tête

Pour créer un effet d’ombre autour de l’en-tête :

1. Lors de la modification du design de l’en-tête, cliquez sur Ombre portée. Cela active immédiatement l’ombre portée.
2. Choisissez entre les enregistrements prédéfinis Légère ou Marquée. Vous pouvez personnaliser ces enregistrements prédéfinis après les avoir sélectionnés.
3. Pour choisir et configurer la couleur, cliquez sur Couleur.
4. Pour modifier l’apparence de l’ombre portée, utilisez les curseurs Épaisseur, Distance et Flou. Nous vous recommandons d’essayer différentes combinaisons pour trouver celle qui vous convient.
5. Pour supprimer l’ombre portée, cliquez sur Supprimer.

Ajouter une bordure autour de votre en-tête

Pour ajouter une bordure autour de l’en-tête :

1. Lors de la modification du design de l’en-tête, cliquez sur Bordure. Cela active immédiatement la bordure.
2. Pour choisir et configurer la couleur, cliquez sur Couleur.
3. Cliquez sur S, M ou L pour définir l’épaisseur du trait, ou sur … pour configurer une épaisseur personnalisée.
4. Définissez la position de la bordure. La bordure peut s’afficher sur tous les côtés de l’en-tête, uniquement en haut, uniquement en bas, ou à la fois en haut et en bas.
5. Pour supprimer la bordure, cliquez sur Supprimer.

Activer un en-tête fixe

Selon l’appareil utilisé, les en-têtes fixes peuvent se redimensionner légèrement lors du défilement de la page, quel que soit leur style. Pour que l’en-tête reste fixe en haut de votre site lorsque les visiteurs font défiler la page :

1. Lors de la modification du design de l’en-tête, activez le bouton Position fixe.
2. Définissez le style d’en-tête fixe sur Simple (l’en-tête reste toujours visible en haut du navigateur) ou sur Défilement inversé (l’en-tête réapparaît en haut du navigateur uniquement lorsque le visiteur remonte dans la page).

Personnaliser le menu de navigation sur mobile

En vue mobile, la navigation de votre en-tête se replie sous la forme d’un menu extensible.

Pour personnaliser le style du menu de navigation mobile :

1. Ouvrez le panneau Pages.
2. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site, puis survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
3. Dans le coin supérieur droit, cliquez sur l’icône Vue mobile.
4. Cliquez sur le menu de navigation mobile, puis sur l’icône crayon.
5. Sélectionnez un style d’icône de menu.
6. Cliquez sur S, M ou L pour définir l’épaisseur des lignes de l’icône, ou sur … pour configurer une épaisseur personnalisée.

Modifier la couleur et les effets d’arrière-plan de votre en-tête

Vous pouvez ajouter des styles d’arrière-plan à l’en-tête pour lui donner une apparence qui le distinguera du reste de votre contenu ou l’aidera à se fondre avec le reste du branding de votre site. Si votre menu de navigation comporte des menus déroulants, leur arrière-plan sur ordinateur a la même couleur que l’arrière-plan de l’en-tête.

Pour modifier le style de l’arrière-plan :

1. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
2. Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
3. Cliquez sur Modifier le design, puis sur l’onglet Couleur.
4. Sélectionnez un style d’arrière-plan dans le menu déroulant en haut de l’éditeur. Vous avez le choix entre Uni, Dégradé et Adaptatif. 
5. Selon le style choisi, personnalisez la couleur, l’effet de flou et l’opacité de l’arrière-plan. Certains navigateurs ne prennent pas en charge l’affichage des effets de flou.

Arrière-plan de l’en-tête uni

Pour configurer l’arrière-plan de l’en-tête sur une couleur unie, choisissez le style d’arrière-plan Uni. Choisissez une couleur personnalisée, utilisez la palette de votre site ou appliquez l’un des thèmes de couleur de votre site.

Arrière-plan de l’en-tête en dégradé

Pour que l’arrière-plan de l’en-tête se fonde dans l’arrière-plan de la première section de chaque page, choisissez le style Dégradé. Vous pouvez personnaliser le dégradé de l’arrière-plan ainsi que les couleurs de navigation.

Arrière-plan de l’en-tête adaptatif

Pour donner à l’en-tête un aspect variable d’une page à l’autre, choisissez le style Adaptatif afin de le rendre transparent. L’arrière-plan de la première section de chaque page s’affiche alors derrière l’en-tête.

Masquer l’en-tête de votre site

Pour attirer l’attention sur votre contenu ou pour inciter les visiteurs à agir, vous pouvez masquer l’en-tête sur certaines pages.

Les pages de collection, telles que les pages de blog et de boutique, ne disposent pas de cette option.

Pour masquer l’en-tête :

1. Ouvrez le panneau Pages.
2. Survolez le titre d’une page, puis cliquez sur  à côté du titre.
3. Cliquez sur Navigation dans l’onglet Paramètres de la page.
4. Utilisez les options pour désactiver Afficher l’en-tête.
5. Répétez ces étapes pour chaque page sur laquelle vous souhaitez masquer l’en-tête.

Puis-je personnaliser l’affichage de mon en-tête sur les appareils mobiles ?

Vous pouvez personnaliser la disposition, la hauteur et la largeur de l’en-tête pour les appareils mobiles, et ce, indépendamment de la vue ordinateur. Les autres modifications de design s’appliquent à la fois à la vue ordinateur et à la vue mobile.

Pour définir des styles distincts pour la vue ordinateur ou pour la vue mobile :

1. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site. Dans le coin supérieur droit, cliquez sur l’icône Vue ordinateur ou sur l’icône Vue mobile, selon la version que vous souhaitez modifier.
2. Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
3. Cliquez sur Modifier le design. 
4. Cliquez sur le menu déroulant Disposition et sélectionnez un agencement pour modifier l’organisation de l’en-tête. Utilisez les curseurs pour ajuster l’espacement entre les liens et les autres éléments.
5. Utilisez le curseur En-tête pour modifier la hauteur de l’en-tête.
6. Cliquez sur Pleine page ou sur Insertion pour définir la largeur de l’en-tête.
7. Cliquez sur Enregistrer.