Le constructeur d’en-tête (header) du thème Astra et Astra Pro

Les deux manières de gérer l’en-tête d’Astra

Il faut d’abord savoir qu’Astra offre deux manières de gérer l’en-tête – j’ai mis longtemps à le comprendre, c’est pourquoi je vous en parle.

On peut le gérer en passant :

• par le customizer / outil de personnalisation : on va le gérer globalement, définir ses contenus
• par le menu Astra de chaque page : là, on ne pourra pas gérer les contenus des en-têtes, mais on pourra activer ou désactiver, sur cette page :
  • l’en-tête du dessus
  • l’en-tête principal
  • l’en-tête du dessous
  • l’en-tête transparent
  • l’en-tête fixe
  • l’en-tête mobile

L’onglet Général du Constructeur d’en-tête

On clique sur Personnaliser dans la barre du haut de l’admin WordPress et on arrive dans le Customizer, aussi appelé outil de personnalisation

On clique sur Constructeur d’en-tête et on arrive sur l’onglet Général, qui comprend les réglages concernant la structure.

On remarque qu’il y a un autre onglet, Design, qui lui s’occupe de l’apparence. On verra ça ensuite.

Dans la colonne de gauche, on a un menu, qui liste les éléments actuellement présents dans l’en-tête ; si on en ajoute, ils s’ajoutent à ce menu.

En bas de cette colonne, on a les liens pour définir les options de l’en-tête transparent et de l’en-tête fixe.

Le constructeur visuel d’en-têtes

A droite, on a notre site WordPress, qui reste navigable, on peut donc aller voir les effets de nos réglages sur les différents types de pages sans quitter la personnalisation.

En bas de cette zone de droite, on a un schéma des positions possibles des éléments / widgets dans les 3 headers, avec les éléments qui les occupent actuellement.

Il y a donc 3 headers, 3 en-têtes en un :

• l’en-tête du dessus
• l’en-tête principal
• l’en-tête du dessous

Chacun forme une barre horizontale ; sur la gauche de chaque barre, on a une icône en forme de roue dentée : cliquez dessus et vous pourrez gérer les paramètres de cet en-tête :

• sa hauteur
• son design

Revenons à la barre de chaque en-tête : elle se compose de plusieurs zones. Il suffit de survoler une zone pour voir apparaitre des croix : ce sont des emplacements possibles pour des éléments.

Les éléments ajoutables

Cliquez sur une de ces croix : cela fait apparaitre un menu qui permet d’ajouter un des nombreux éléments :

• une icone de compte avec une fonctionnalité de login
• un bouton
• du code HTML (ou un shortcode)
• un sélecteur de langue
• un toggle button, bouton de menu hamburger, qui peut, une fois paramétré, faire apparaitre un menu (à placer dans la zone « off canvas »)
• un widget d’icônes de réseaux sociaux
• un panier WooCommerce

Quand on a sélectionné un de ces éléments, il se place dans la barre d’en-tête.

On peut le déplacer en cliquant dessus et en l’amenant à un autre emplacement par glisser-déposer.

On peut définir ses options simplement en double-cliquant dessus : cela ouvre ses options dans le panneau de gauche.

A chaque fois, l’élément est réglable dans les deux onglets :

• Général traite des infos de structure
• Design traite de l’apparence : la couleur, les marges, etc

Il ne devrait pas y avoir besoin de détailler l’utilisation de chacun de ces éléments. Ou si vous pensez que si, posez-moi des questions en commentaire et j’ajouterai des explications à ce tuto.

Les widgets d’Astra

Je vais juste détailler les widgets parce que leur fonctionnement n’est pas totalement intuitif :

• ils sont en nombre limité
• chacun porte un numéro
• chacun peut être fait de plusieurs éléments
• et ces éléments viennent de Gutenberg, l’éditeur de blocs de WordPress

Un widget peut être ajouté n’importe où dans l’interface : dans le header, le footer, la sidebar. Une fois défini, même si on le retire de l’interface, il reste défini, on peut le réintégrer si besoin.

J’en utilise un peu partout sur mes sites :

• Création de site Internet pour médecin / cabinet médical
• Création de site Internet pour plombier chauffagiste
• Création de site Internet pour esthéticienne / salon de beauté / onglerie

Titre du site et logo

Ce menu permet de définir comment va s’afficher le titre du site :

• soit sous forme de logo, image
• soit sous forme de texte et slogan

On a d’abord des boutons cliquables pour définir une image comme logo ; la version Rétina c’est pour les écrans d’Apple qui ont une résolution spéciale.

Largeur : cela va définir la taille du logo, la hauteur va se dimensionner en fonction de la largeur.

Ensuite on a un bouton pour afficher le titre du site, ou pas ; idem avec le slogan, qui, s’il est activé, va se placer automatiquement sous le titre.

Si vous avez le choix, préférez le mode texte plutôt qu’image / logo pour afficher le nom de votre marque ou de votre site web. C’est mieux par exemple pour le référencement d’une thérapeute d’afficher « Untel, thérapeute » qu’une image disant la même chose : en texte ça fait un mot-clé de plus pour définir les pages de manière pertinente. Google ne tient pas compte du contenu des images / logos.

On a aussi des options pour afficher ces éléments ou pas en fonction de la taille de l’écran : cliquez sur l’icone qui représente un petit ordinateur, ou une tablette ou un téléphone, et faites le réglage voulu pour ce format.

Enfin, le favicon est l’icone qui apparait dans les onglets du navigateur quand ce site s’affiche, comme mon logo W sur fond rose.

L’onglet Design de ce menu permet de définir les couleurs des éléments : du titre, du slogan, et la police de caractères.

Menu

Remontons d’un niveau et cliquons sur Menu.

La zone permet d’afficher un menu principal, qu’on aura défini préalablement par l’interface ordinaire de WordPress : dans l’Administration, Apparence > Menus.

Ou encore, un menu secondaire (à afficher dans un des autres en-têtes par exemple).

Par exemple sur un site de photographe, vous pourriez avoir un menu principal avec vos photos par thème, puis un menu secondaire avec vos services.

On peut aussi définir la largeur des sous-menus – qui s’ouvrent quand on survole un élément de menu.

Dans l’onglet Design, on définit toute une série de réglages. Ils me semblent assez intuitifs pour se passer de commentaires. Remarquez juste qu’on peut animer les menus au survol et aussi les sous-menus.

Menu mobile

Faites la différence entre le menu principal de la version ordinateur et le menu mobile : Astra les distingue à juste titre car le manque de place sur un écran de téléphone change forcément l’apparence du menu, qui ne peut plus s’étaler sur la largeur.

Il faut donc toujours créer au moins deux menus :

• le menu principal, pour ordinateur et tablette,
• et le menu mobile, pour les smartphones.

Or ce dernier fonctionne différemment :

• il faut intégrer à la maquette un élément Toggle Button,
• puis définir un menu dans la zone « off-canvas » (hors-champ).
• Quand on cliquera sur ce bouton, cela fera apparaitre le menu.

On peut comme d’habitude éditer le style graphique de ce bouton et sa place.

Remontons d’un niveau !

L’en-tête transparent

Astra permet de donner aux en-têtes qu’on a définis différents aspects et comportements : en-tête transparent ou en-tête fixe.

L’en-tête transparent, comme son nom l’indique, n’a pas de couleur de fond. Il permet de jouer avec des effets de superposition entre l’en-tête et le fond de la page quand on fait défiler celle-ci.

Il a pour particularité curieuse de remonter le contenu de la page de quelques dizaines de pixels, ce qui peut s’avérer déconcertant, d’autant plus qu’aucun réglage ne permet de contrôler ce comportement.

Quand on clique sur « en-tête transparent », on arrive sur un onglet Général. On peut activer l’en-tête transparent sur tout le site. On peut aussi passer par l’interface d’édition de chaque page pour ne l’afficher que sur telle page particulière.

Si on l’active sur tout le site, on a encore le choix de l’activer ou pas sur chaque type de page ; choix qu’on pourra, là aussi, contredire au cas par cas.

On peut aussi choisir de l’activer ou pas selon le format de l’écran, en mode responsive, sur ordi, tablette ou téléphone.

On peut encore y placer un logo différent.

Dans l’onglet design, on gère les réglages d’apparence habituels.

L’en-tête fixe

L’en-tête fixe fonctionne sur les mêmes principes que l’en-tête transparent, mais il a un comportement spécial : quand on scrolle la page vers le bas, il va venir remplacer l’en-tête normal.

On peut attribuer ce comportement d’en-tête fixe aux trois en-têtes possibles : celui du dessus, le principal et celui du dessous. Donc les trois peuvent être fixes, ou deux, ou l’un d’eux, ou aucun.

On peut aussi cocher l’option « Masquer lors du défilement vers le bas » : l’en-tête va alors disparaitre dès qu’on scrolle vers le bas, et s’afficher dès qu’on remonte, rendant cet en-tête accessible – ses menus, ses boutons, son logo etc.

C’est donc plutôt pratique d’un point de vue UX / expérience utilisateur.

A noter : il n’a pas d’onglet Design. Il prendra les valeurs par défaut de chaque élément de chaque en-tête.

Le module en-tête de page d’Astra Pro

Le thème Astra Pro fournit un module « en-tête de page » / « page header » ; il ne faut pas le confondre avec l’en-tête du site dont parle cet article ici présent. 

Une même page peut comporter l’en-tête du site, puis un en-tête de page.

Le fil d’Ariane d’Astra (breadcrumbs)

C’est un peu un sujet différent mais en même temps, la question du fil d’Ariane est liée à celle de l’en-tête : en effet, une des options pour positionner le fil d’Ariane consiste à l’intégrer dans l’en-tête.

Reportez-vous à ce tutoriel pour en savoir plus :

Le fil d’Ariana d’Astra

Conclusion

Voilà, on a un peu fait le tour, Astra fourmille d’options, la plupart se comprennent facilement.

Si vous avez des questions n’hésitez pas à les poser en commentaire et peut-être que j’éditerai ce tutoriel pour mieux vous guider.