Créer un en-tête de site

Personnalisez le menu et les autres éléments qui apparaissent en haut de chaque page de votre site.

L’en-tête de votre site contient votre navigation ainsi que le titre du site ou votre logo. L’en-tête est identique pour l’ensemble de votre site et joue un rôle essentiel dans la manière dont les visiteurs naviguent sur votre site et interagissent avec votre contenu. Il est positionné dans la partir supérieure de votre site.

Ce guide explique comment créer l’en-tête de votre site et afficher plus de fonctionnalités telles que l’icône panier, les icônes sociales ou un bouton d’appel à l’action. L’en-tête est identique sur toutes les pages du site.

Il n'est pas possible de créer des en-têtes spécifiques à une page ou de supprimer des éléments sur certaines pages.

Regarder une vidéo - Créer un en-tête

Créer un en-tête

Si votre site utilise la version 7.0, l’en-tête fait partie du template de votre site. Pour en savoir plus, consultez la section ci-dessous sur les fonctionnalités de la version 7.0.

Lorsque vous créez votre site, il est possible que l’en-tête contienne déjà le titre du site, les liens de navigation ou tout autre élément en fonction du design que vous avez choisi.

Conseil : pour modifier les liens de navigation, ajoutez, modifiez, supprimez ou réorganisez des pages dans le panneau Pages.

Au fur et à mesure que vous créez votre en-tête, vous pouvez définir des styles à l'échelle du site et choisir l'apparence de l'en-tête sur les ordinateurs et les appareils mobiles.

Définir des styles généraux

Pour définir vos styles d'en-tête à l'échelle du site :

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 pour ouvrir l’onglet Global.
3. Pour modifier le titre de votre site ou ajouter une image de logo, cliquez sur Titre du site et logo. Les logos sont affichés à la place du titre de votre site. Si vous utilisez un logo, ajoutez également un titre de site. Ce titre s’affichera dans les résultats des moteurs de recherche et sur les onglets de navigateur, à moins que vous n’ajoutiez un titre SEO distinct.
4. Pour ajouter ou masquer un bouton, des icônes sociales, une icône de panier ou un identifiant de compte client, cliquez sur Éléments.
5. Pour ajouter des styles d’arrière-plan à l’en-tête, cliquez sur Style. Pour en savoir plus sur les options, consultez la section ci-dessous.
6. Pour maintenir l'en-tête fixe en haut de votre site, activez le bouton sur Position fixe. Lorsque l'en-tête est fixe, définissez le style d'en-tête fixe sur Basic (toujours affiché en haut du site) ou Faire défiler en arrière (apparaît en haut du site lorsque vous faites défiler vers le haut). Les en-têtes fixes de l'un ou l'autre type peuvent s'élargir ou se rétrécir légèrement lors du défilement, selon l'appareil.
7. Cliquez n’importe où en dehors de l’éditeur, puis cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis Enregistrer pour fermer l’éditeur.

Définir la disposition sur ordinateur

Pour définir l’affichage de l’en-tête sur les ordinateurs, procédez comme suit :

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. Cliquez sur l’icône Ordinateur.
3. Pour changer de disposition, cliquez sur Disposition de l’en-tête. Faites défiler l’écran pour consulter toutes les options de disposition et cliquez sur l’une d’entre elles pour en afficher un aperçu sur votre site.
4. Pour définir la largeur du contenu de l’en-tête, cliquez sur Complet ou Insertion.
5. Utilisez les curseurs pour modifier la marge intérieure et l'espacement entre les éléments.

Définir la disposition et les styles sur mobiles

1. Cliquez sur l’icône Mobile. L’aperçu de votre site passe automatiquement en mode mobile.
2. Pour changer de disposition, cliquez sur Disposition de l’en-tête. Faites défiler l’écran pour consulter toutes les options de disposition et cliquez sur l’une d’entre elles pour en afficher un aperçu sur votre site.
3. Pour modifier l’affichage de votre menu lorsque les liens sont développés, cliquez sur Menu Superposition. Vous pouvez également définir l’espacement entre les liens et choisir un thème de couleurs. Utilisez les ajustements sous Menu superposé pour définir les couleurs de lien, de bouton, de texte du bouton et d’arrière-plan spécifiques aux appareils mobiles.
4. Pour modifier l’affichage de votre menu lorsque le menu est réduit, choisissez une icône Menu.
5. Cliquez n’importe où en dehors de l’éditeur, puis cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis Enregistrer pour fermer l’éditeur.

Conseil : Ajoutez une image de logo distincte pour votre en-tête mobile afin de créer un look unique pour les visiteurs utilisant un mobile. Pour en savoir plus, consultez l’article Ajouter un logo à votre site.

Pour définir la police et la taille du titre de votre site mobile :

1. Ouvrez le panneau Styles du site.
2. Cliquez sur Police, puis sur Attribuer des styles.
3. Cliquez sur Titre du site mobile, puis sur les menus déroulants pour choisir le style et la taille de la police.

Pour en savoir plus, consultez l’article Modifier les polices de caractères.

Styles d’arrière-plan des en-têtes

Si votre site utilise la version 7.0, l’arrière-plan de l’en-tête dépend du template de votre site. Pour en savoir plus, consultez la section ci-dessous sur les fonctionnalités de la version 7.0.

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.

Conseil : sur ordinateur, les menus déroulants des dossiers ont la même couleur que l’arrière-plan de l’en-tête.

Pour ajouter un style d’arrière-plan :

1. Ouvrez les paramètres généraux de l’en-tête.
2. Cliquez sur Style.
3. Cliquez sur le menu déroulant en haut de l’éditeur pour choisir un arrière-plan. Vous avez le choix entre Solide, Dégradé, Thème et Dynamique. Pour en savoir plus sur chaque option, consultez la section ci-dessous.
4. En fonction du style choisi, personnalisez les autres paramètres qui s’affichent, en ajoutant notamment des couleurs, un effet flou, des bordures ou une ombre portée.
5. Cliquez n’importe où en dehors de l’éditeur, puis cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis Enregistrer pour fermer l’éditeur.

Options de style

Choisissez parmi ces options de style d’arrière-plan :

• Solide : choisissez un arrière-plan de couleur unie. Choisissez les couleurs d’arrière-plan et de navigation dans la palette de votre site, ou choisissez des couleurs personnalisées.
• Dégradé : choisissez une couleur dégradée qui s’estompe du foncé au clair en partant du haut de l’en-tête. Choisissez les couleurs d’arrière-plan et de navigation dans la palette de votre site, ou choisissez des couleurs personnalisées.
• Thème : choisissez pour l’arrière-plan la même couleur que l’un des thèmes de couleurs de votre site.
• Dynamique - Rendez l’arrière-plan transparent. L’en-tête se superpose avec la première section de la page et laisse apparaître l’image ou la couleur d’arrière-plan de la première section. Ce paramètre peut changer d’une page à l’autre, selon que la première section possède ses propres styles de section ou une image d’arrière-plan.

À retenir :

• Lorsque l’arrière-plan est défini sur Solide ou Thème, l’en-tête se superpose avec la première section de la page. Si la première section possède une image d’arrière-plan, l’en-tête recouvre une partie de l’image.
• L’en-tête sera uni si la première section est une section de blog, de galerie, de boutique ou des événements.
• Lorsque l’arrière-plan est défini sur Dynamique et que la première section de la page est une section de galerie, l’en-tête n’est pas transparent sur les images de la galerie. Au lieu de cela, l’en-tête affiche la couleur d’arrière-plan de la section de galerie.

Autres options de style

Selon l’effet d’arrière-plan que vous avez choisi, l’éditeur peut également afficher ces options de style :

• Opacité : utilisez le curseur pour modifier la transparence de la couleur.
• Arrière-plan flou - Activez l’option Arrière-plan flou pour flouter tout contenu d’arrière-plan. Les arrière-plans flous sont plus visibles lorsque l’opacité est inférieure à 90 %. Certains navigateurs, dont Firefox, ne prennent pas en charge les arrière-plans flous.
• Bordure - Activez l’option Bordure pour ajouter une bordure autour de l’en-tête. Utilisez les paramètres qui s’affichent pour choisir la couleur, la position et l’épaisseur du trait.
• Ombre portée - Activez l’option Ombre portée pour ajouter un effet d’ombre autour de l’en-tête. Utilisez les paramètres qui s’affichent pour choisir la couleur, le degré de propagation, la distance et ajouter un effet flou.

Regarder une vidéo - Styles d’en-tête

Ajouter un bouton à un en-tête

L’ajout d’un bouton à un en-tête place votre appel à l’action au premier plan, encourageant les visiteurs à cliquer dessus immédiatement. Vos options dépendent de la version de votre site.

Fonctionnalités des en-têtes dans la version 7.0

Dans la version 7.0, l’en-tête de site apparaît toujours sur toutes les pages et comprend les mêmes éléments que dans la version 7.1, mais son style dépend du template de votre site. Pour en savoir plus sur l’en-tête de votre template, consultez le guide de ce template.

Certains templates proposent des fonctionnalités spécifiques pour les en-têtes. Pour en savoir plus, suivez les liens du tableau ci-dessous :

Fonctionnalité	Disponibilité
Couleur d'arrière-plan	Disponibles avec certains templates
Image ou vidéo de bannière	Disponible sur certains templates
Zone de blocs	Disponibles avec certains templates
Informations sur l'entreprise	Disponibles avec certains templates
Boutons	Disponible sur certains templates
En-tête fixe	Disponibles avec certains templates
Dossiers	Toujours disponible, mais l’affichage varie selon le template
Logo	Toujours disponible, mais l’affichage varie selon le template
Liens de navigation principale	Toujours disponible, mais l’affichage varie selon le template
Filtre de navigation	Disponible dans la famille de templates Skye (certains sites mobiles ont l’option superposition)
Barre de recherche	Disponible sur certains templates
Navigation secondaire	Disponible sur certains templates
Panier	Toujours disponible, mais certains templates ont des options de style
Le titre du site	Toujours disponible, mais l’affichage varie selon le template
Icônes sociales	Disponible sur certains templates
Slogan	Disponibles avec certains templates

En-têtes fixes dans la version 7.0

Dans la version 7.0, vous pouvez utiliser des en-têtes fixes avec certains templates. Cette barre de navigation fixe ou « sticky » reste dans la même position, en haut du navigateur, lorsque vous faites défiler la page vers le bas. Consultez le tableau ci-dessous pour savoir si un template prend en charge les en-têtes fixes et pour connaître le mode d’affichage sur un ordinateur et sur un appareil mobile.

• Sauf indication contraire, les en-têtes fixes affichent tous les éléments d'en-tête de votre site (tels que le titre du site ou le logo et les liens de navigation).
• Pour ne pas perdre trop de place sur les écrans plus petits, de nombreux templates ne permettent pas d’utiliser la navigation fixe sur les appareils mobiles. Dans certains cas, la navigation fixe peut être utilisée sur des appareils mobiles dont l’écran est plus grand (comme les tablettes).

Template	Ordinateur	Mobile
Adirondack	Dans le panneau Styles du site, cochez Toujours afficher la navigation. Lorsque vous faites défiler vers le bas, l'en-tête se réduit et le titre du site remplace le logo. En savoir plus.	Non fixe
Avenue	Non fixe	Non fixe
Aviator	Liens de navigation uniquement Dans le panneau Styles du site, utilisez Disposition de la page d’informations pour sélectionner Décalage ou Carte de visite.	Non fixe
Bedford	Pages Index uniquement L’en-tête réapparaît dans une position fixe après défilement de l’écran au-delà de la première section.	Non fixe
Brine	Non fixe	La barre mobile supérieure peut être fixe (Haut mobile fixe). La barre mobile inférieure est toujours fixe. Sélectionnez les éléments à afficher dans chacune.
Farro	Non fixe	La barre mobile supérieure peut être fixe (Haut mobile fixe). La barre mobile inférieure est toujours fixe. Sélectionnez les éléments à afficher dans chacune.
Five	Non fixe	Non fixe
Flatiron	Dans le panneau Styles du site, sélectionnez Position de l’en-tête : Fixe.	Non fixe
Forte	Non fixe	Non fixe
Galapagos	Non fixe	Non fixe
Ishimoto	Non fixe	Non fixe
Momentum	Toujours fixe	Toujours fixe
Montauk	Non fixe	Non fixe
Native	Non fixe	Non fixe
Pacific	Liens de navigation uniquement, et cela uniquement sur les pages Index définies comme page d'accueil. Dans le panneau Styles du site, sélectionnez Navigation par défilement dans l’index : Affichage par défilement. La navigation réapparaît dans une position fixe après défilement de l’écran au-delà de la première section.	Non fixe
Skye	Toujours fixe Peut être transparent	Toujours fixe
Supply	Barre latérale, fixe (défile si la hauteur du contenu est supérieure à celle du navigateur)	Non fixe
Tremont	Non fixe	Non fixe
Wells	Barre latérale, toujours fixe	Non fixe
Wexley	Non fixe	Non fixe
York	Non fixe	La barre mobile peut être fixe (Position de la barre mobile : Fixe en haut ou Fixe en bas)

En-têtes de page dans la version 7.0

Dans la version 7.0, certains templates prennent en charge les en-têtes de page. Les en-têtes de page sont des zones de contenu spécifiques à la page qui apparaissent au-dessus du contenu de la page principale.

Les en-têtes de page sont disponibles dans les familles de templates suivantes :

• Avenue
• Brine (appelées zones Intro )
• Farro (appelées zones Intro)
• Five
• Wexley
• York

Pour modifier l'en-tête de votre page :

1. Survolez le haut de la page et cliquez sur Modifier.
2. Utilisez des blocs pour ajouter du contenu comme du texte et des images.
3. Cliquez sur Enregistrer pour publier vos modifications.

Les en-têtes de page sont séparés du contenu de la page principale. Il est impossible de déplacer des blocs de l'en-tête de page vers d'autres zones de contenu de la page.