TABLE DES MATIÈRES
Prévisualisation des paramètres au centre en haut. Sous l’aspect visuel, les paramètres de réglages du header.
Structure
Navigation Supérieure et Navigation Principale…
Dans la barre de navigation principale, on retrouve généralement le logo, un menu et un bouton d’action.
Dans la barre de navigation supérieure, on retrouve généralement un sélecteur de langues et l’icône de recherche.
La barre principale est donc plus fournie que la barre de navigation supérieure.
Néanmoins, les deux ne doivent pas forcément être configurées : si toutes les informations que vous souhaitez afficher et dont vous avez besoin peuvent contenir dans un seul endroit, ne configurez que la barre de navigation principale.
a - Navigation supérieure
- Cliquer-glisser pour positionner les différents éléments disponibles (langues, recherche, menu principal et secondaire, logo principal et secondaire, menu bouton d’action) : à gauche, droite ou au centre et les ordonner entre eux
b - Navigation principale
- Cliquer-glisser pour positionner les différents éléments disponibles (langues, recherche, menu principal et secondaire, logo principal et secondaire, menu bouton d’action) : à gauche, droite ou au centre et les ordonner entre eux
Paramètres
- Sélecteur de variantes → choix du style d’affichage de l’en-tête (encadrés, ligne séparatrice, rien, etc.)
- en fonction, choix de l’épaisseur et de l’arrondi de la bordure ou de l’épaisseur et de la couleur du séparateur
- Sélecteur de variantes des icônes → la taille du trait de l’icône “loupe” (pour la recherche), de l’icône “hamburger” (pour le menu mobile) et l’icône de la croix pour ferme le menu mobile et la recherche
En fonction de la position que vous aurez choisie pour les différents éléments (menu principal menu bouton d’action, recherche, etc.) les paramètres ci-dessous varient : si vous avez placé votre recherche dans la navigation supérieure, inutile de la configurer dans la navigation principale par exemple.
a - Navigation supérieure
- Général
- Choix de la typographie des éléments du menu
- Choix de la couleur des icônes dans l’en-tête (flèches d’ouverture de sous-menus, loupe de la recherche, etc.)
- Choix de la couleur du texte au survol, au focus et de la page active
- Choix de la couleur de fond de la barre de navigation (en fonction de la variante générale sélectionnée)
- Définition de la taille du logo (largeur et hauteur en pixels)
- Choix de l’icône des menus déroulants
- Sous-Navigation
- Choix du style d’affichage du menu déroulant
- Choix de la typographie des éléments de sous-menu
- Choix de la couleur du texte au survol, au focus et de la page active
- Choix de l’épaisseur et de l’arrondi de la bordure du menu déroulant
- Choix de la couleur de bordure et de fond du sous-menu
- Recherche
- Choix du style de la police de la recherche
- Choix de l’épaisseur et de l’arrondi de la bordure
- Choix de la couleur de fond et de bordure du champ de recherche
- Bouton d’action
- Choix du style typographique
b - Navigation principale
- Général
- Choix de la typographie des éléments du menu
- Choix de la couleur des icônes dans l’en-tête (flèches d’ouverture de sous-menus, loupe de la recherche, etc.)
- Choix de la couleur du texte au survol, au focus et de la page active
- Choix de la couleur de fond de la barre de navigation (en fonction de la variante générale sélectionnée)
- Définition de la taille du logo (largeur et hauteur en pixels)
- Choix de l’icône des menus déroulants
- Sous-Navigation
- Choix du style d’affichage du menu déroulant
- Choix de la typographie des éléments de sous-menu
- Choix de la couleur du texte au survol, au focus et de la page active
- Choix de l’épaisseur et de l’arrondi de la bordure du menu déroulant
- Choix de la couleur de bordure et de fond du sous-menu
- Recherche
- Choix du style de la police de la recherche
- Choix de l’épaisseur et de l’arrondi de la bordure
- Choix de la couleur de fond et de bordure du champ de recherche
- Bouton d’action
- Choix du style typographique
