L'en-tête est la zone de votre site réservée au logo et à la navigation. Il existe de nombreuses façons de modifier le style de votre en-tête afin de le rendre plus attrayant.
L'en-tête réduit est une version plus petite de l'en-tête du site, qui vous permet de conserver les informations de navigation importantes sans distraire les utilisateurs lorsqu'ils font défiler la page et sans occuper trop d'espace. Il s'agit d'une fonction d'en-tête collant, mais qui condense la taille des logos et la taille générale de l'en-tête. Il est particulièrement utile pour les sites qui ont de grands en-têtes et les sites conçus pour un long défilement.
Remarque
L'en-tête réduit est disponible sur les ordinateurs de bureau et les tablettes uniquement si vous utilisez la disposition de l'en-tête de la barre supérieure.
Pour activer un en-tête rétrécissant :
-
hover sur l'en-tête, cliquez sur En-tête, puis sur Modifier la conception.
-
Dans l'onglet Réduire l'en-tête, cliquez sur l'option Activer la réduction de l'en-tête. vous disposez des options suivantes :
-
Afficher uniquement la ligne de navigation. N'affichez que la ligne avec la navigation lorsque l'en-tête se rétrécit. Cette fonction n'est applicable que si l'en-tête comporte plus d'une ligne.
-
Couleur d'arrière-plan. Modifiez la couleur d'arrière-plan de l'en-tête qui se rétrécit. Notez que la couleur d'arrière-plan de la ligne prévaut sur la couleur d'arrière-plan de l'en-tête qui se rétrécit.
-
Plus de couleurs d'en-tête sur le défilement. Spécifiez les couleurs du texte, du lien sélectionné et de hover, des icônes, du texte des boutons, etc.
-
Taille du logo. Modifiez la taille à laquelle le logo ou l'image se réduit lorsque l'en-tête se rétrécit (la valeur par défaut est de 66 %).
-
Changez le logo sur le rouleau. Sélectionnez un logo à afficher sur le défilement.
-
Espacement de l'en-tête. Ajustez le rembourrage supérieur et inférieur de l'en-tête qui se rétrécit. Vous pouvez modifier l'espacement des en-têtes par dispositif.
-
Une fois que l'en-tête de rétrécissement est activé, il se produit ce qui suit :
-
L'espacement de l'en-tête modifie l'espacement haut/bas et la marge à 0. Cela ne s'applique pas aux lignes à l'intérieur de l'en-tête.
-
Les images de l'en-tête sont réduites au pourcentage indiqué dans la barre de taille du logo (66 % par défaut).
-
Pour traiter les modèles proposant une hauteur d'en-tête minimale, la hauteur d'en-tête minimale est réglée sur Auto.
-
S'il existe des lignes vides comportant des colonnes, les colonnes occuperont tout l'espace de la ligne.
-
Les propriétés de design prévalent sur les propriétés de l'en-tête réduit. Par exemple, si vous définissez un arrière-plan de ligne dans l'en-tête, l'arrière-plan de ligne s'affiche au-dessus de l'arrière-plan de l'en-tête réduit.
-
Les lignes vides s'affichent dans l'en-tête réduit.
-
Si vous ne parvenez pas à visualiser votre en-tête réduit, vérifiez d'abord que votre site présente suffisamment de lignes pour que vous puissiez faire défiler la page vers le bas et déclencher l'en-tête réduit. Si votre page ne possède qu'une ligne, il sera impossible de faire défiler le site.
Tous les sites widget ne sont pas compatibles et apparaissent dans l'en-tête qui se rétrécit. Si vous avez un widget dans l'en-tête qui n'est pas compatible avec le rétrécissement de l'en-tête, une colonne vide apparaît à la place du widget. Vous ne pouvez pas éditer widget lorsque l'en-tête est réduit.
Les sites widget suivants sont compatibles et s'affichent dans un en-tête réduit :
-
Navigation
-
Multilingue
-
Icônes
-
Bouton Click to Call (Cliquer pour appeler)
-
Bouton OpenTable
-
Bouton Click to Email (Cliquer pour envoyer un e-mail)
-
vCita
-
Bouton PayPal
-
Bouton j’aime
-
Images et logos
-
Panier de la boutique
-
Paragraphe widget
-
Titre widget
-
Boutons
Un en-tête collant devient statique et reste en place lorsque vous faites défiler les pages de votre site.
Remarque
Les en-têtes mobiles sont toujours collants par défaut.
Pour activer un en-tête collant :
-
hover sur l'en-tête, cliquez sur En-tête, puis sur Modifier la conception.
-
Dans l'onglet Contenu, sélectionnez Définir comme en-tête collant. Si l'option d'en-tête collant n'est pas disponible, vous devez désactiver l'option de réduction de l'en-tête dans l'onglet Réduction de l'en-tête.
Vous pouvez choisir parmi plusieurs modèles d'en-têtes flexibles préconçus. Si vous passez à l'une des dispositions d'en-tête flexibles prédéfinies, vous ne pouvez pas revenir à un en-tête fixe, vous ne pouvez passer que d'une disposition d'en-tête flexible à l'autre. Le changement de mise en page supprime également le contenu existant dans la section de l'en-tête. Nous vous recommandons de créer une sauvegarde avant de changer de présentation.
Pour modifier la mise en page d'un en-tête :
-
hover sur l'en-tête et cliquez sur En-tête.
-
Dans l'onglet Conception, sélectionnez une nouvelle disposition d'en-tête. Si vous passez à un en-tête collant, vous devez d'abord désactiver l'option de réduction de l'en-tête dans l'onglet Réduction de l'en-tête.
Pour accéder au menu de conception de l'en-tête, hover sur l'en-tête, cliquez sur En-tête, puis sur l'onglet Conception.
-
Mise en page : Explorez les options de mise en page qui associent les styles de navigation supérieure et de hamburger de manière cohérente en fonction de la taille de l'écran. Alors que les mises en page par défaut ont des capacités limitées, une option d'édition avancée permet d'améliorer la flexibilité.
-
Espacement: Définissez les marges et l'espacement, les modifications apportées à l'adresse desktop ayant une incidence sur les autres tailles d'écran si leur espacement n'est pas modifié.
-
Arrière-plan: Choisissez la couleur ou l'image d'arrière-plan, ajoutez des bordures ou des ombres, et constatez que les changements sont répercutés de manière transparente sur toutes les tailles d'écran.
-
Position: Activez un en-tête collant avec des modifications basées sur le défilement. L'activation de l'en-tête collant sur n'importe quelle taille d'écran influence le comportement sur d'autres écrans.
Si l'en-tête contient une image, le logo du site sera conservé lors du changement de mise en page. En présence de plusieurs images, ou si le logo est constitué de texte, l'image du logo restera la même que dans la mise en page. Il est important de noter que les en-têtes entre les appareils ne sont pas connectés, donc si vous ajoutez un logo sur l'ordinateur de bureau, il n'est pas automatiquement ajouté aux autres types d'appareils. La seule exception est que si la disposition de l'en-tête de la barre supérieure est utilisée sur une tablette, elle héritera de tout changement de logo effectué sur l'ordinateur de bureau.
Si vous supprimez le logo, réintroduisez l'image en faisant glisser l'élément image dans l'en-tête et définissez le lien pour revenir à la page d'accueil. Pour plus d'informations,widget voir: Image.
Vous pouvez ajouter un menu extensible sur les sites desktop et les sites pour tablettes, ce qui facilite la création de sites modernes dotés d'une grande souplesse de conception. Choisissez parmi plusieurs modèles de menus extensibles et personnalisez-les à votre guise en ajoutant widget, des lignes et des colonnes.
Le menu extensible pour mobile offre davantage de possibilités de personnalisation et permet d'afficher widget dans l'en-tête ainsi qu'un menu toujours visible.
Vous pouvez modifier la disposition de l'en-tête en fonction d'une disposition prédéfinie qui inclut des boutons, des appels téléphoniques, un panier store, des icônes sociales, etc. Vous pouvez ajouter n'importe quel site widget au menu extensible à partir du panneau widget.
Sélectionner et configurer un en-tête et une disposition de menu extensible pour desktop et les tablettes :
-
Dans le panneau latéral, cliquez sur Thème, puis sur Mise en page du site.
-
Dans la section desktop sélectionnez la présentation du menu extensible.
-
Dans la section Tablette , sélectionnez la présentation de menu extensible.
-
Après avoir sélectionné le menu extensible, une icône de hamburger s'affiche dans l'en-tête du site. Cliquez sur l'icône hamburger (
) pour afficher le menu extensible.
-
Dans l'onglet Disposition , cliquez sur la disposition existante pour sélectionner une disposition de menu.
-
L'onglet Style vous permet d'accéder aux options suivantes :
-
Entrez à partir de. Sélectionnez le haut ou le côté.
-
Effet d'entrée. Sélectionnez Couvrir ou Pousser.
-
Largeur. Déplacez le curseur pour définir la largeur du menu extensible lorsqu'il est développé. La largeur du menu est définie en pourcentage pour s'adapter à toutes les tailles d'écran.
-
Contexte. Configurez la couleur ou l'image d'arrière-plan.
-
Couleur de l'icône de fermeture. Sélectionnez une couleur pour l'icône de fermeture et la couleur d'arrière-plan de l'icône de fermeture.
-
-
Dans l'onglet Espacement , modifiez l'espacement.
Le menu extensible peut comporter jusqu'à 3 lignes personnalisables. Si le site est agencé de la même façon sur les affichages ordinateur et tablette (soit menu extensible, soit barre supérieure), les modifications s'appliqueront aux deux. Si en revanche la mise en page du site est différente, chaque affichage doit être configuré séparément.
Pour modifier l'emplacement du menu extensible dans l'en-tête :
-
hover au-dessus de l'en-tête, cliquez sur En-tête, puis sélectionnez Modifier la conception.
-
Dans la section Disposition, cliquez sur Gauche ou Droite.
Pour sélectionner et configurer un en-tête et une disposition de menu extensible pour les mobiles :
-
hover au-dessus de l'en-tête, cliquez sur l'étiquette En-tête , puis sélectionnez Modifier la conception.
-
Dans l'onglet Disposition, cliquez sur la disposition existante pour sélectionner une disposition de menu. L'en-tête mobile propose des mises en page qui affichent widget tels que des liens sociaux, des numéros de téléphone, etc. Les dispositions de l'en-tête sont fixes, vous ne pouvez donc pas ajouter de nouveaux widget, mais vous pouvez les modifier ou les supprimer. Lorsque vous ajoutez un site store ou que vous utilisez la fonction multilingue, d'autres options de mise en page sont disponibles, notamment les icônes du panier d'expédition store et la fonction multilingue. Si vous n'avez pas activé store ou le multilinguisme, ces modèles n'apparaissent pas.
-
Cliquez à gauche ou à droite pour définir la position de l'icône du menu.
-
Si ce n'est pas déjà le cas, ouvrez le menu en vue mobile. Cela permet d'ouvrir l'éditeur de menu afin que vous puissiez modifier le menu extensible.
-
Dans l'onglet Disposition , cliquez sur la disposition existante pour sélectionner une disposition de menu. Le menu extensible propose plusieurs mises en page permettant d'afficher les liens sociaux, les informations de contact et bien d'autres choses encore. Vous pouvez ajouter n'importe quelle adresse widget au menu extensible, ajouter des colonnes, trier les colonnes les unes à côté des autres ou les unes sur les autres. Cependant, lorsque vous passez d'une présentation à l'autre, vous supprimez tout le contenu que vous avez ajouté dans le menu, en ne conservant que le site widget dans la présentation choisie.
-
Dans l'onglet Style, vous disposez des options suivantes :
-
Entrez à partir de. Sélectionnez le haut ou le côté. Lorsque Top est sélectionné, déplacez le curseur de hauteur. Lorsque Side est sélectionné, déplacez le curseur de largeur.
-
Effet d'entrée. Sélectionnez Couvrir ou Pousser.
-
Remarque
Il n'est pas possible d'ajouter des widget supplémentaires à l'en-tête mobile.
Pour afficher les éléments de l'en-tête au-dessus des images du héros, hover sur l'en-tête, cliquez sur En-tête, cliquez sur l'onglet Conception, puis sur Chevauchement de la première ligne. Cela donne plus de visibilité à vos images héroïques et facilite la conception de sites attrayants et branchés.
Gardez alors à l'esprit les points suivants :
-
Pour l'en-tête. Définissez la couleur d'arrière-plan comme étant transparente ou une couleur avec opacité.
-
Pour la première ligne. Utilisez un rembourrage supérieur égal ou similaire à la hauteur de l'en-tête.
Remarque
Pour plus de souplesse, ce paramètre ne s'applique qu'à la page en cours. Pour l'activer sur d'autres pages, accédez à chaque page et suivez les étapes ci-dessus.
Pour masquer un en-tête sur une page :
-
hover sur le bas de l'en-tête et cliquez sur En-tête.
-
Cliquez sur Masquer l'en-tête de la page et sélectionnez le périphérique sur lequel vous souhaitez masquer l'en-tête. Dans l'Éditeur 2.0, cela permet de masquer l'en-tête sur toutes les pages.
Pour afficher l'en-tête masqué :
-
Dans le panneau latéral, cliquez sur l'icône Masquer les éléments (
) sous Paramètres.
-
Cliquez sur l'icône Masquer dans le pied de page et sélectionnez Oui pour masquer l'en-tête.