Headers

Le header est la partie de votre site qui contient le logo et la navigation. Vous disposez de nombreux moyens d'en régler le style pour composer un header attrayant.

Dans l'Editor 2.0, le header par défaut propose des mises en page prêtes à l'emploi, ce qui réduit le risque de modifications accidentelles. Vous choisissez des mises en page aux actions limitées, pour un travail de design ciblé et efficace. Une option d'édition avancée est aussi disponible si vous souhaitez plus de personnalisation : ajouter des widgets ou des éléments, insérer des sections vides ou prédéfinies, ou encore enregistrer des sections de header pour les réutiliser. Pour en savoir plus, voir « Advanced Header Editing ».

Masquer ou réafficher le header (Classic Editor)

Pour masquer un header :

1. Survolez le bas du header, puis cliquez sur En-tête.
2. Cliquez sur Masquer l'en-tête de la page, puis choisissez l'appareil sur lequel masquer le header.

Pour réafficher le header :

1. Dans le panneau latéral, cliquez sur l'icône masquer / afficher.
2. Cliquez sur l'icône masquer du footer, puis sélectionnez Oui pour réafficher le header.

Masquer ou réafficher le header (Editor 2.0)

Vous pouvez masquer le header sur toutes les pages ou seulement sur certaines.

Pour masquer le header :

1. Faites un clic droit sur le header pour ouvrir le menu contextuel.
2. Sélectionnez Hide on this device, puis choisissez Cette page sur ce dispositif ou Toutes les pages sur ce dispositif.

Pour réafficher le header :

1. Dans le panneau latéral, cliquez sur Calques.
2. Repérez votre header dans le panneau, puis cliquez sur l'icône en forme d'œil barré à côté de lui.

Header rétractable (Classic Editor)

Le header rétractable est une version réduite du header du site. Il vous permet de garder une navigation importante toujours visible, sans distraire les visiteurs lorsqu'ils font défiler la page ni occuper trop de place. Il fonctionne comme un header fixe, mais réduit la taille des logos et du header dans son ensemble. Il est particulièrement utile pour les sites aux grands headers et ceux conçus pour un long défilement.

Remarque : le header rétractable est disponible sur ordinateur, et sur tablette uniquement lorsque la mise en page de header en barre supérieure est utilisée.

Pour activer un header rétractable :

1. Survolez le header, cliquez sur En-tête, puis sur Modifier le design.
2. Dans l'onglet Rétrécissement de l'en-tête, activez l'option Activer le rétrécissement de l'en-tête. Vous disposez des options suivantes :
   • Afficher uniquement la barre de navigation. N'affiche que la ligne de navigation lorsque le header se réduit. Cette option ne s'applique que s'il y a plus d'une ligne dans le header.
   • Couleur d'arrière-plan. Change la couleur d'arrière-plan du header rétractable. Notez que la couleur d'arrière-plan de la ligne l'emporte sur celle du header rétractable.
   • Plus de couleurs d'en-tête pendant le défilement. Définit les couleurs du texte, du lien sélectionné et au survol, des icônes, du texte des boutons, et plus encore.
   • Dimensions du logo. Définit la taille que prend le logo ou l'image lorsque le header se réduit (66 % par défaut).
   • Modifier le logo pendant le défilement. Choisit un logo à afficher au défilement.
   • Espacement des en-têtes. Ajuste le remplissage supérieur et inférieur du header rétractable. Vous pouvez le régler par appareil.

Une fois le header rétractable activé, voici ce qui se produit :

• L'espacement du header ramène le remplissage haut et bas ainsi que la marge à 0. Cela ne concerne pas les lignes situées à l'intérieur du header.
• Les images du header se réduisent au pourcentage défini dans la barre de taille du logo (66 % par défaut).
• Pour gérer les modèles dont le header a une hauteur minimale, la hauteur minimale du header est réglée sur auto.
• S'il y a des lignes vides avec des colonnes, ces colonnes occupent tout l'espace de la ligne.
• Les propriétés de design l'emportent sur celles du header rétractable. Par exemple, si vous définissez un arrière-plan de ligne dans le header, il s'affiche par-dessus l'arrière-plan du header rétractable.
• Les lignes vides s'affichent dans le header rétractable.
• Si vous ne voyez pas votre header rétractable, c'est peut-être que votre site n'a pas assez de lignes pour permettre le défilement qui le déclenche. Avec une seule ligne sur la page, le site ne défile pas.

Widgets compatibles avec les headers rétractables

Tous les widgets ne sont pas compatibles et n'apparaissent donc pas dans le header rétractable. Si un widget du header n'est pas compatible, une colonne vide s'affiche à sa place. Vous ne pouvez pas modifier les widgets tant que le header est réduit.

Les widgets suivants sont compatibles et s'affichent dans un header rétractable :

• Navigation
• Social Icons
• bouton Click to Call
• bouton Click to Email
• vCita
• Images et logos
• widget Paragraph
• widget Titre
• Boutons

Headers fixes

Un header fixe reste immobile et à sa place lorsque vous faites défiler les pages de votre site.

Remarque : sur mobile, les headers sont toujours fixes par défaut.

Pour activer un header fixe :

1. Survolez le header, cliquez sur En-tête, puis sur Modifier le design.
2. Dans l'onglet Contenu, sélectionnez Définir comme en-tête fixe. Si l'option Définir comme en-tête fixe n'est pas disponible, désactivez d'abord l'option Rétrécissement de l'en-tête dans l'onglet Rétrécissement de l'en-tête.

Mises en page de header

Plusieurs mises en page de header flexibles et prédéfinies s'offrent à vous. Une fois que vous passez à l'une d'elles, vous ne pouvez plus revenir à un header fixe : vous ne pouvez que passer d'une mise en page flexible à une autre. Changer de mise en page supprime aussi le contenu existant de la section header. Nous vous conseillons de créer une sauvegarde avant de changer de mise en page.

Pour changer la mise en page du header :

1. Survolez le header et cliquez sur En-tête.
2. Dans l'onglet Conception, sélectionnez une nouvelle mise en page. Si vous passez à un header fixe, désactivez d'abord l'option Rétrécissement de l'en-tête dans l'onglet Rétrécissement de l'en-tête.

Design du header

Pour ouvrir le menu de design du header, survolez le header, cliquez sur En-tête, puis sur l'onglet Conception.

• Mise en page : explorez des options de mise en page qui associent de façon cohérente la navigation supérieure et les styles de menu hamburger sur tous les formats d'écran. Les mises en page par défaut ont des capacités limitées, mais une option d'édition avancée offre plus de souplesse.
• Espacement : définissez les marges et le remplissage. Les changements effectués sur ordinateur s'appliquent aux autres formats d'écran tant que leur espacement n'a pas été modifié.
• Background : choisissez une couleur ou une image d'arrière-plan, ajoutez des bordures ou des ombres, et voyez vos changements se répercuter sur tous les formats d'écran.
• Position : activez un header fixe avec des changements au défilement. Activer un header fixe sur un format d'écran influe sur son comportement sur les autres.

Logo du header

Si le header ne contient qu'une image, le logo du site est conservé lorsque vous changez de mise en page. S'il y a plusieurs images, ou si le logo est textuel, l'image du logo est conservée telle qu'elle est dans la mise en page.

Notez bien que les headers ne sont pas liés d'un appareil à l'autre : un logo ajouté sur ordinateur n'est donc pas repris automatiquement sur les autres types d'appareils. Seule exception : si la mise en page de header en barre supérieure est utilisée sur tablette, celle-ci hérite des changements de logo effectués sur ordinateur.

Si vous supprimez le logo, réajoutez l'image en la faisant glisser à nouveau dans le header, puis définissez son lien pour qu'il renvoie à la page d'accueil.

Header et menu déroulant

Vous pouvez ajouter un menu déroulant sur vos sites ordinateur et tablette, pour créer facilement des sites modernes à la grande souplesse de design. Choisissez parmi plusieurs mises en page de menu déroulant et personnalisez-les à votre guise en ajoutant des widgets, des lignes et des colonnes.

Sur mobile, la mise en page du menu déroulant offre plus de personnalisation et permet d'afficher des widgets dans le header ainsi qu'un menu toujours visible.

Vous pouvez adopter pour le header une mise en page prédéfinie comprenant des boutons, un click to call, des icônes de réseaux sociaux, etc. Vous pouvez ajouter n'importe quel widget au menu déroulant depuis le panneau des widgets.

Header et menu déroulant sur ordinateur et tablette

Pour choisir et configurer une mise en page de header et de menu déroulant sur ordinateur et tablette :

1. Dans le panneau latéral, cliquez sur Calques.
2. Cliquez sur Mise en page du site.
3. Dans la section Ordinateur, sélectionnez la mise en page Menu extensible.
4. Dans la section Tablet, sélectionnez la mise en page Menu extensible.
5. Une fois la mise en page de menu déroulant sélectionnée, une icône hamburger apparaît dans le header de votre site. Cliquez dessus pour afficher le menu déroulant.
6. Dans l'onglet Mise en page, cliquez sur la mise en page existante pour choisir une mise en page de menu.
7. Dans l'onglet Style, vous disposez des options suivantes :
   • Enter from. Choisissez Haut ou Côté.
   • Entrance effect. Choisissez Couverture ou Push.
   • Largeur. Déplacez le curseur pour définir la largeur du menu déroulant une fois ouvert. Cette largeur est exprimée en pourcentage pour s'adapter à tous les formats d'écran.
   • Fond. Configurez la couleur ou l'image d'arrière-plan.
   • Close icon color. Choisissez une couleur pour l'icône de fermeture, ainsi que la couleur de son arrière-plan.
8. Dans l'onglet Espacement, modifiez le remplissage.

Le menu déroulant peut comporter jusqu'à 3 lignes, chacune entièrement personnalisable. Si l'ordinateur et la tablette ont la même mise en page de site (les deux en menu déroulant ou les deux en barre supérieure), toutes les personnalisations sont communes. Si elles diffèrent, chaque appareil doit être configuré séparément.

Pour modifier l'emplacement du menu déroulant dans le header :

1. Survolez le header, cliquez sur En-tête, puis sélectionnez Modifier le design.
2. Dans la section Mise en page, cliquez sur Gauche ou Droit(e).

Header et menu déroulant sur mobile

Pour choisir et configurer une mise en page de header et de menu déroulant sur mobile :

1. Survolez le header, cliquez sur le libellé En-tête, puis sélectionnez Modifier le design.
2. Dans l'onglet Mise en page, cliquez sur la mise en page existante pour choisir une mise en page de menu. Le header mobile propose des mises en page qui affichent des widgets comme des liens de réseaux sociaux, des numéros de téléphone, etc. Ces mises en page sont figées : vous ne pouvez pas ajouter de nouveaux widgets, mais vous pouvez les modifier ou les supprimer.
3. Cliquez sur Gauche ou Droit(e) pour la position de l'icône de menu.
4. Si ce n'est pas déjà fait, ouvrez le menu en vue mobile. Cela ouvre l'éditeur de menu et vous permet de modifier le menu déroulant.
5. Dans l'onglet Mise en page, cliquez sur la mise en page existante pour choisir une mise en page de menu. Le menu déroulant propose plusieurs mises en page pouvant afficher les liens de réseaux sociaux, les informations de contact, etc. Vous pouvez y ajouter n'importe quel widget, ajouter des colonnes et les disposer côte à côte ou l'une au-dessus de l'autre. Attention : lorsque vous passez d'une mise en page à une autre, tout le contenu que vous aviez ajouté au menu est supprimé et seuls les widgets de la mise en page choisie sont conservés.
6. Dans l'onglet Style, vous disposez des options suivantes :
   • Enter from. Choisissez Haut ou Côté. Avec Haut, déplacez le curseur de hauteur ; avec Côté, déplacez le curseur de largeur.
   • Entrance effect. Choisissez Couverture ou Push.

Remarque : il n'est pas possible d'ajouter d'autres widgets au header mobile.

Afficher les éléments du header au-dessus de l'image d'en-tête

Pour afficher les éléments du header par-dessus les images d'en-tête, survolez le header, cliquez sur En-tête, sur l'onglet Conception, puis sur Chevauchement de la première ligne. Vos images d'en-tête gagnent en visibilité, et vous concevez plus facilement des sites modernes et soignés.

Gardez ceci à l'esprit :

• Pour le header. Réglez la couleur d'arrière-plan sur transparent, ou sur une couleur avec de l'opacité.
• Pour la première ligne. Utilisez un remplissage supérieur égal ou proche de la hauteur du header.

Remarque : pour plus de souplesse, ce réglage ne s'applique qu'à la page en cours. Pour l'activer sur d'autres pages, rendez-vous sur chacune d'elles et suivez les étapes ci-dessus.