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.
Remarque : 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. Toutefois, si votre site utilise la version 7.1, vous pouvez masquer l’en-tête sur certains types de page.
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.
Liens de navigation
Pour modifier les liens de navigation, ajoutez, modifiez ou supprimez des pages dans le panneau Pages. Pour réorganiser les liens :
- Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
- Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
- Cliquez sur les liens de navigation, puis sur l’icône Crayon.
- Cliquez sur les liens de navigation et faites-les glisser pour les mettre dans l’ordre de votre choix.
Veuillez noter que la réorganisation des liens ici les réorganise également 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 le design de l’en-tête à l’échelle du site
Pour définir le design de l’en-tête de votre site, procédez comme suit :
- Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
- Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
- Pour modifier le titre de votre site ou ajouter un logo, cliquez sur le titre ou le logo de votre site, puis sur l’icône en forme de crayon. Les logos sont affichés à la place du titre de votre site. Si vous utilisez un logo, assurez-vous d’ajouter également un titre au 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.
- Lorsque vous avez terminé de modifier le titre et le logo de votre site, cliquez n’importe où en dehors de l’éditeur pour continuer à modifier l’en-tête de votre site.
- Pour ajouter ou masquer un bouton, des icônes sociales, une icône Panier, un identifiant de compte client ou une option de langue, cliquez sur Ajouter des éléments, puis activez ou désactivez les boutons. Cliquez n’importe où en dehors de l’éditeur pour continuer à modifier l’en-tête de votre site.
- Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur 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 :
- Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
- Survolez l’en-tête et cliquez sur Modifier l’en-tête du site. Pour vous assurer que vous êtes en version bureau, cliquez sur l’icône Ordinateur dans le coin supérieur droit.
- Pour modifier la disposition, cliquez sur Modifier le design. Cliquez sur la disposition actuelle pour passer en revue toutes les options. Cliquez sur l’une d’entre elles pour la prévisualiser sur votre site.
- Pour définir la largeur du contenu de l’en-tête, cliquez sur Complet ou Insertion.
- Utilisez les curseurs pour modifier la marge intérieure et l’espacement entre les liens, les icônes sociales et les éléments.
- Choisissez l’un des effets suivants et n’oubliez pas que les modifications apportées à ceux-ci s’appliqueront à la fois aux écrans d’ordinateur et d’appareils mobiles :
- 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 et la distance et ajouter un effet flou.
- 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.
- Pour ajouter des styles d’arrière-plan d’en-tête, cliquez sur Modifier le design, puis sur l’onglet Couleur. Les modifications apportées ici s’appliqueront à la fois aux écrans d’ordinateur et d’appareils mobiles. Pour en savoir plus sur les options, consultez la section ci-dessous.
- Pour maintenir l’en-tête fixe en haut de votre site, cliquez sur l’onglet Design et activez le bouton Position fixe. Lorsque l’en-tête est fixe, vous pouvez définir le style d’en-tête fixe sur Basique (toujours affiché en haut du site) ou sur Défiler vers l’arrière (apparaît en haut du site lorsque vous faites défiler vers le haut). En fonction de l’appareil, 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. Les modifications apportées ici s’appliqueront à la fois aux écrans d’ordinateur et d’appareils mobiles.
Définir la disposition et les styles sur mobiles
- Pour passer en vue mobile, cliquez sur l’icône Mobile dans le coin supérieur droit de votre écran. L’aperçu de votre site passe automatiquement en mode mobile.
- Pour changer de disposition, cliquez sur Modifier le design. Cliquez sur la disposition actuelle pour passer en revue toutes les options. Cliquez sur l’une d’entre elles pour la prévisualiser sur votre site.
- Choisissez l’un des effets suivants et n’oubliez pas que les modifications apportées à ceux-ci s’appliqueront à la fois aux écrans d’ordinateur et d’appareils mobiles :
- 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 et la distance et ajouter un effet flou.
- 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.
- Pour maintenir l’en-tête fixe en haut de votre site, cliquez sur l’onglet Design et activez le bouton Position fixe. Lorsque l’en-tête est fixe, vous pouvez définir le style d’en-tête fixe sur Basique (toujours affiché en haut du site) ou sur Défiler vers l’arrière (apparaît en haut du site lorsque vous faites défiler vers le haut). En fonction de l’appareil, 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. Les modifications apportées ici s’appliqueront à la fois aux écrans d’ordinateur et d’appareils mobiles.
- Pour ajouter des styles d’arrière-plan d’en-tête, cliquez sur Modifier le design, puis sur l’onglet Couleur. Les modifications apportées ici s’appliqueront à la fois aux écrans d’ordinateur et d’appareils mobiles. Pour en savoir plus sur les options, consultez la section ci-dessous.
- Pour modifier l’affichage de votre menu lorsque les liens sont développés, cliquez sur Afficher le menu, puis sur Modifier le design. Vous pouvez définir l’alignement, l’espacement entre les liens et choisir un thème de couleur. 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.
- Pour modifier l’affichage de votre menu lorsque le menu est réduit, choisissez une icône Menu.
- Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur 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 :
- Ouvrez le panneau Styles du site.
- Cliquez sur Police, puis sur Attribuer des styles.
- 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 : l’arrière-plan du menu déroulant sur ordinateur a la même couleur que l’arrière-plan de l’en-tête.
Pour ajouter un style d’arrière-plan :
- Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
- Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
- Cliquez sur Modifier le design, puis sur l’onglet Couleur.
- Sélectionnez un style d’arrière-plan dans le menu déroulant en haut de l’éditeur. Vous avez le choix entre Solide, Dégradé et Adaptatif. Pour en savoir plus sur chaque option, consultez la section ci-dessous.
- En fonction du style choisi, personnalisez les paramètres de style d’arrière-plan tels que la couleur, l’effet flou et l’opacité.
- Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur 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. Vous pouvez choisir des couleurs personnalisées, utiliser la palette de votre site ou refléter l’un des thèmes de couleurs de votre site.
- Dégradé : l’en-tête recouvre la première section de la page. Choisissez une couleur dégradée qui s’estompe dans l’arrière-plan de la première section. Choisissez les couleurs d’arrière-plan et de navigation dans la palette de votre site, ou choisissez des couleurs personnalisées.
- Adaptatif : 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’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 Plein, 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.
- Lorsque l’arrière-plan est défini sur Adaptatif ou Dégradé et que la première section de la page est une disposition automatique, un blog, des événements, une galerie ou une section Boutique, l’en-tête ne sera pas transparent sur les images. Il sera affiché avec la couleur d’arrière-plan de la première section.
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 %.
Remarque : certains navigateurs, dont Firefox, ne prennent pas en charge les arrière-plans flous.
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.
Un bouton d'appel à l'action placé dans l'en-tête de votre site s'affichera sur l'ensemble du site. Pour ajouter un bouton à votre en-tête :
- Cliquez sur Modifier sur une page de votre site.
- Cliquez sur Modifier l’en-tête du site.
- Cliquez sur Ajouter des éléments.
- Activez l’option Bouton.
- Cliquez n’importe où en dehors de l’éditeur.
Pour modifier le texte, le lien et le type du bouton :
- Lorsque vous modifiez l’en-tête du site, cliquez sur le bouton, puis sur l’icône crayon.
- Sous Contenu, modifiez le texte et le lien du bouton.
- Pour modifier le type de bouton, cliquez sur l’onglet Design. Le bouton héritera des styles définis pour ce type de bouton.
- Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.
Selon la disposition que vous choisissez pour votre en-tête sur ordinateur, le bouton est soit groupé avec vos liens de navigation, soit séparé du reste. Sur mobile, le bouton apparaît toujours sous vos liens de navigation.
Pour personnaliser les boutons :
- Forme : ouvrez le panneau Boutons dans les styles du site et cliquez sur l’onglet de type de bouton correspondant à votre bouton d’en-tête (principal, secondaire ou tertiaire).
- Police : si le type de votre bouton est principal, ouvrez le panneau Polices dans Styles du site, cliquez sur Attribuer des styles et recherchez l’ajustement Bouton de l’en-tête. Si votre type de bouton est secondaire ou tertiaire, ouvrez le panneau Boutons dans Styles du site, puis cliquez sur Texte.
- Couleur : en vue sur ordinateur de bureau, cliquez sur Modifier l’en-tête du site, puis sur Modifier le design pour afficher votre thème de couleurs dans l’onglet Couleur. Ouvrez ensuite le panneau Couleurs des styles du site et choisissez le même thème de couleurs. Sous Bouton, trouvez votre type de bouton d’en-tête pour modifier la couleur de l’arrière-plan et du texte du bouton. Pour la vue sur appareil mobile, consultez la section ci-dessus.
Les familles de templates suivantes prennent en charge l'ajout de boutons à l'en-tête de votre site :
- Bedford : affiche le dernier lien de votre navigation sous forme de bouton.
- Brine : personnalise le style de la navigation principale ou secondaire (ou les deux) sous forme de boutons.
- Montauk : ajoute un bloc Bouton au sous-titre personnalisé dans l’en-tête.
- Skye : ajoute un bloc Bouton à la superposition de navigation du site.
- Wells : ajoute un bloc Bouton à la zone de contenu de la barre latérale de navigation.
Modifier d’autres éléments d’en-tête
En plus d’un bouton, vous pouvez ajouter des liens de réseaux sociaux, un panier, un identifiant de compte et des options de langue dans votre en-tête.
Pour modifier ces éléments un par un, cliquez sur chacun d’entre eux lors de la modification de l’en-tête de votre site. Cliquez ensuite sur l’icône en forme de crayon pour accéder à l’éditeur de l’élément en question. Vous pouvez modifier les éléments suivants :
- Liens de réseaux sociaux : vers quelle page l’icône dirige l’utilisateur, la taille de l’icône sociale, la bordure et l’épaisseur de la bordure
- Panier : le design, la taille, la bordure et si un zéro apparaît lorsqu’il est vide
- Option Changer de langue : la taille de l’icône ou du drapeau, la forme du drapeau et le drapeau à afficher. Veuillez noter que vous avez besoin d’un service tiers pour utiliser cet élément. Pour en savoir plus, consultez l’article Création d’un site multilingue avec Weglot.
Masquer l’en-tête
Pour attirer l’attention sur votre contenu ou pour inciter les visiteurs à agir, vous pouvez masquer l’en-tête sur certaines pages.
Vous ne pouvez masquer l’en-tête que pour les pages vierges et les pages Disposition, ainsi que les pages vierges et les pages Disposition des sites réservés aux membres. Les pages de collection telles que le blog, la boutique, le portfolio et les événements ne disposent pas de cette option.
Pour masquer l’en-tête :
- Ouvrez le panneau Pages.
- Survolez le titre d’une page, puis cliquez sur à côté du titre.
- Cliquez sur Navigation dans l’onglet Paramètres de la page.
- Utilisez les options pour désactiver Afficher l’en-tête.
Répétez ces étapes pour chaque page sur laquelle vous souhaitez masquer l’en-tête.
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 |
Menus déroulants | 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 :
- Survolez le haut de la page et cliquez sur Modifier.
- Utilisez des blocs pour ajouter du contenu comme du texte et des images.
- 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.