Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Créer un en-tête de 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 d’autres 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 est impossible de créer un en-tête spécifique pour chaque page.

Version_7.1_site_header.png

Regarder une vidéo

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.

Tip: To change the navigation links, add, edit, delete, or rearrange pages in the Pages panel.

As you build your header, you can set site-wide styles and choose how the header looks on both computers and mobile devices.

Set global styles

To set your site-wide header styles:

  1. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
  2. Hover over the header and click Edit Site Header. This opens the Global tab. 
  3. To edit your site title or add a logo image, click Site Title & Logo. Logos appear in place of your site title. If you use a logo, add a site title too. Search engines use the title for search results and browser tabs, unless you add a separate SEO title.
  4. Pour ajouter un bouton, des icônes sociales ou une icône panier, cliquez sur Éléments.
  5. To change the header colors, click Colors.
  6. To keep the header fixed at the top of your site, switch the Fixed Position toggle on. When the header is fixed, set the Fixed Header Style to Basic (always appears at the top of the site) or Scroll Back (appears at the top of the site when scrolling up). 
  7. Click anywhere outside the editor, then hover over Done and click Save

Set computer and mobile layouts

To set how the header appears on computers and on mobile devices: 

  1. Cliquez sur Modifier dans le coin supérieur gauche de l’aperçu de votre site.
  2. Hover over the header and click Edit Site Header. Click the Desktop icon. 
  3. To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
  4. To set the width of the header content, click Full or Inset
  5. Use the sliders to change the padding and spacing between elements.
  6. Click the Mobile icon. Your site preview will automatically switch to mobile view. 
  7. To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
  8. Pour modifier l’affichage de votre menu lorsque les liens sont développés, cliquez sur Menu Superposition. Vous pouvez également modifier la couleur de superposition du menu.
  9. Pour modifier l’affichage de votre menu lorsque le menu est réduit, choisissez une icône Menu. Cliquez n’importe où en dehors de l’éditeur, puis survolez Terminé et cliquez sur Enregistrer.

Arrière-plan de l'en-tête

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 choisir une couleur d’arrière-plan transparente ou unie pour l’en-tête. Sur ordinateur, les menus déroulants de chaque dossier sont de la même couleur que l’arrière-plan de l’en-tête. Vous pouvez également configurer la couleur de la superposition de l’en-tête mobile.

Rendre l’arrière-plan transparent

To make the header background transparent:

  1. Ouvrez les paramètres généraux de l’en-tête.
  2. Click Colors.
  3. Switch the Transparent toggle on.

Lorsque cette option est activée, l’en-tête recouvre 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.

Lorsque le bouton Position fixe est activé et que la première section comporte une image d’arrière-plan, le comportement de l’en-tête transparent change légèrement. Au fur et à mesure que vous faites défiler, l’en-tête passe de l’affichage de l’image d’arrière-plan de la première section à l’affichage de la couleur d’arrière-plan de la première section.

Remarque : si la première section de la page est une section de galerie dont la largeur est définie sur Pleine page, l’en-tête ne sera pas transparent par-dessus les images de la galerie. Il sera affiché avec la couleur d’arrière-plan de la première section.

Choisir une couleur d’arrière-plan unie

To make the header background a solid color:

  1. Ouvrez les paramètres généraux de l’en-tête.
  2. Click Colors.
  3. Switch the Transparent toggle off, then choose a color theme.

Lorsque l’option Transparent est désactivée, l’en-tête recouvre 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.

Pour plus d’aide sur les thèmes de couleurs des sections, consultez la page Modifier les couleurs.

Définir la couleur de superposition pour appareils mobiles

Choisissez un thème de couleurs qui s’appliquera au menu de navigation développé sur appareils mobiles :

  1. Ouvrez les paramètres de l’en-tête mobile.
  2. Cliquez sur Menu Superposition, puis sur Couleurs.
  3. Choisissez un thème de couleurs.

Pour plus d’aide sur les thèmes de couleurs des sections, consultez la page Modifier les couleurs.

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

Banner image or video

Disponible sur certains templates

Blocks area

Disponibles avec certains templates

Informations professionnelles

Disponible avec certains templates

Boutons

Disponible sur certains templates

Fixed header

Disponible avec certains templates

Dossiers Toujours disponible, mais l’affichage varie selon le template
Logo

Toujours disponible, mais l’affichage varie selon le template

Main Navigation links

Always available, but display varies by template

Filtre de navigation 

Available in the Skye template family (Some mobile sites have an overlay)

Barre de recherche

Disponible sur certains templates

Navigation secondaire

Disponible sur certains templates
Panier Toujours disponible, mais certains modèles 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

Disponible 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.

  • Except where noted, fixed headers display all your site's header elements (such as site title or logo and navigation links).
  • 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 qui possèdent un écran 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.

Not fixed

Avenue

Not fixed

Not fixed

Aviator

Navigation links only 

Dans le panneau Styles du site, utilisez Disposition de la page d’informations pour sélectionner Décalage ou Carte de visite.

Not fixed

Bedford

Index Pages only

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.

Not fixed

Brine

Not fixed

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

Not fixed

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

Not fixed

Not fixed

Flatiron

Dans le panneau Styles du site, sélectionnez Position de l’en-tête : Fixe.

Not fixed

Forte

Not fixed

Not fixed

Galapagos

Not fixed

Not fixed

Ishimoto

Not fixed

Not fixed

Momentum

Always fixed

Always fixed

Montauk

Not fixed Not fixed

Native

Not fixed Not fixed

Pacific

Navigation links only, and only on Index Pages set as the homepage.

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.

Not fixed

Skye

Always fixed

Can be transparent

Always fixed

Supply

Barre latérale, fixe (défile si la hauteur du contenu est supérieure à celle du navigateur)

Not fixed

Tremont

Not fixed

Not fixed

Wells

Barre latérale, toujours fixe

Not fixed

Wexley

Not fixed

Not fixed

York

Not fixed

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 zonesIntro)
  • 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.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 22 sur 133
Créer un en-tête de site