Créer un en-tête WordPress sans extension
Un en-tête est la seule partie d'un site que chaque visiteur voit, et celle que les thèmes cachent généralement derrière un écran de réglages comportant neuf options. Dans Canvas, un en-tête est un élément que vous construisez à partir de blocs dans l'éditeur. Ce guide est donc une démarche de construction, pas une visite guidée de cases à cocher.
Étape 1 : Ce qu'est un en-tête dans Canvas
Un en-tête est un enregistrement, listé dans l'administration de WordPress comme une page, et modifié dans le même éditeur de blocs. C'est cette seule décision qui permet de se passer de l'extension d'en-tête.
D'autres thèmes construisent l'en-tête ailleurs. Blocksy et Astra conservent tous deux leurs constructeurs d'en-tête dans le Personnaliseur, un panneau de réglages à côté du site, à l'écart de l'éditeur dans lequel vous rédigez vos pages. Notre comparatif avec Blocksy présente les deux approches côte à côte.
L'imbrication
Un enregistrement d'en-tête contient une Header Root. La racine contient un Header Container, qui détermine si l'en-tête est encadré, pleine largeur, ou l'un à un point de rupture et l'autre ailleurs. Le conteneur contient des Header Zones, et une zone est une cellule de la ligne d'en-tête. Le logo va dans l'une, la navigation dans la suivante, et une icône de recherche ainsi qu'un panier dans la dernière.
La famille des blocs d'en-tête compte 22 blocs au total, et vous n'en utiliserez probablement que quatre ou cinq sur un site type. Le reste est là pour le jour où vous aurez besoin d'une recherche dans la boutique, d'un lien vers une autre langue ou d'un bloc d'horaires d'ouverture dans un angle.
Rien de tout cela n'est un éditeur séparé. Si vous modifiez des pages dans WordPress, vous pouvez modifier un en-tête, et les mêmes fonctions d'annulation, réglages de bloc et raccourcis clavier s'appliquent.
Étape 2 : Créer l'enregistrement de l'en-tête
Ouvrez la liste Headers dans le menu Canvas et ajoutez un nouvel enregistrement. Vous disposez de deux points de départ possibles.
Partir d'un motif
Insérez un motif d'en-tête et vous obtenez des blocs classiques, déjà disposés, prêts à être réorganisés, renommés ou supprimés. Les en-têtes forment la catégorie de motifs la plus importante du produit, sur 183 motifs au total, il y a donc généralement quelque chose de proche de la forme recherchée. C'est la voie la plus rapide, et celle à privilégier pour une première création.
Partir d'une démo
Si vous avez importé l'un des 88 sites de démonstration, son en-tête est déjà un enregistrement sur votre site. Ouvrez-le et modifiez-le, ou dupliquez-le et testez vos changements sur la copie. Modifier un en-tête fonctionnel vous apprend la structure plus vite qu'une page vierge.
Donnez à la fiche un nom qui indique à quoi elle sert, comme En-tête principal ou En-tête de page d'atterrissage. Vous en aurez trois en un mois, et les noms sont tout ce qui vous permettra de les distinguer.
Étape 3 : Agencez les zones
Les zones gèrent la mise en page : vous n'avez presque jamais à lutter avec les classes d'alignement.
- Poussez une zone vers le bord. Une zone à gauche pour le logo, une zone au centre pour le menu et une zone à droite pour les actions : c’est l’agencement que l’on retrouve le plus souvent sur les sites.
- Regroupez les éléments qui vont ensemble. Une icône de recherche, un panier et un bouton placés dans une même zone restent groupés et espacés comme un seul ensemble.
- Réorganisez par point de rupture. La zone placée en troisième position sur ordinateur peut apparaître en première sur téléphone, sans second enregistrement d’en-tête.
- Limitez une zone à un palier d'appareils. Indiquez à une zone d'ignorer les appareils qui n'ont pas la place pour elle, et rien n'a besoin d'être masqué après coup en CSS.
- Ajoutez vos propres classes à une zone lorsque vous voulez la cibler depuis votre propre feuille de style.
Composez d'abord la disposition pour ordinateur et ne la modifiez plus tant que tous les éléments ne sont pas en place. Les choix de mise en page sont bien plus faciles une fois que du contenu réel occupe la rangée.
Étape 4 : Ajoutez les éléments
Remplissez maintenant les zones. Chacune est un bloc, et chacune dispose d’un panneau de réglages avec les options que ce bloc prend en charge.
- Header Logo. Votre logo, avec des fichiers distincts pour l'état fixe et l'état sombre, afin qu'un en-tête transparent placé sur une photo sombre ne nécessite aucun contournement.
- Header Navigation. Le menu principal, avec menus déroulants et panneaux Méga menu. Il affiche un menu WordPress, donc le menu lui-même reste géré là où vous vous y attendez.
- Header Search. Une icône qui ouvre un champ, ou un champ toujours visible, selon ce qui convient le mieux au design.
- Header Button. L’appel à l’action, avec les réglages habituels de taille, de style et de lien. Un seul est convaincant, trois font du bruit.
- Header Cart. Le panier WooCommerce avec son nombre d'articles et un résumé déroulant, pour les boutiques.
- Header Icon Link, Header Social et Header Info. Un numéro de téléphone, une rangée de profils sociaux, un petit bloc de coordonnées, une adresse ou des horaires d'ouverture.
Méga menus, quand une liste ne suffit pas
Un méga menu est un enregistrement à part entière, conçu à partir de blocs et rendu par le bloc Méga menu, si bien qu'un élément de menu ouvre un panneau pleine largeur de colonnes, d'images et de boutons. Mega Menu Column organise le panneau sur une grille. Utilisez-le lorsqu'une catégorie a réellement une structure, et non pour donner à un petit site une allure surchargée.
Étape 5 : Fixe, transparent et préréglages de mise en page
Le comportement provient de préréglages, c'est-à-dire d'ensembles de réglages de mise en page que vous appliquez en un clic, puis ajustez. Choisissez le comportement souhaité et modifiez ensuite les réglages de votre choix.
- Transparent. Aucun arrière-plan, donc ce qui se trouve derrière l'en-tête reste visible. Associez-le à la version sombre ou claire du logo pour que le logotype reste lisible.
- Semi-transparent. Un fond translucide, qui laisse voir l'image en arrière-plan et garde le texte lisible. C'est généralement le choix le plus sûr face à une photo chargée.
- Flottant, et flottant semi-transparent ou flottant et compact, où l'en-tête se trouve à l'intérieur de la page, avec de l'espace autour, à distance des bords de la fenêtre.
- Pleine largeur et fixe. Occupe toute la largeur de l'écran et reste épinglé pendant le défilement de la page.
- Fixe au défilement vers le haut. Disparaît du haut de l’écran lorsque le visiteur descend dans la page, puis réapparaît dès qu’il remonte, ce qui libère de la place sur les pages longues.
Les réglages globaux du site qui les sous-tendent
Les options d'en-tête constituent la plus grande section des Options du thème, avec 94 champs sur les 533 champs. Elles regroupent ce qu'aucun enregistrement unique ne devrait gérer : l'en-tête par défaut, le mode fixe, la hauteur, l'espacement et le point de rupture mobile. Un import de démo les renseigne toutes, et vous ne modifiez que celles qui vous intéressent.
Étape 6 : L'en-tête pour téléphone
La majorité du trafic arrive sur téléphone : vérifiez donc ceci avant tout le reste. La bonne nouvelle, c'est qu'il s'agit du même enregistrement.
- Réorganisez plutôt que de tout reconstruire. Déplacez le logo au centre, placez le bouton du menu à gauche et un bouton d'appel à droite, le tout via l'ordre des zones.
- Retirez ce qui ne tient pas. Limitez les coordonnées ou la rangée des réseaux sociaux aux écrans plus grands. Les tasser sur un téléphone n'aide personne.
- Gardez des cibles tactiles généreuses. Un bouton de menu et une icône de téléphone sont les deux éléments que les gens visent en marchant.
- Définissez le point de rupture en connaissance de cause. La largeur à laquelle le menu se replie est un réglage, donc un menu long peut se replier plus tôt qu'un menu court.
- Envisagez un panneau latéral pour le menu mobile. Un panneau latéral est un élément qui glisse depuis le bord de l'écran, avec la place pour un vrai menu, un champ de recherche et un bouton.
Vérifiez-le dans l'éditeur avant de publier. Canvas affiche l'en-tête dans la zone d'édition avec le même code que pour un visiteur, de sorte que la mise en page mobile se contrôle pendant la création.
Étape 7 : Attribuer-le à l'échelle du site ou page par page
Un enregistrement ne fait rien tant qu'un élément ne pointe pas vers lui. Il existe deux niveaux, qui fonctionnent de la même manière pour chaque élément structurel.
La valeur par défaut à l'échelle du site
Définissez l'en-tête par défaut dans les Options du thème et toutes les pages l'utiliseront. Faites de même pour la barre supérieure, le design du titre de page et le pied de page. C'est le réglage qui fait qu'une nouvelle page s'affiche correctement dès sa publication.
La surcharge par page
Chaque page peut remplacer n'importe lequel de ces réglages depuis ses propres paramètres. Une page de campagne adopte un en-tête transparent et aucune barre supérieure ; la page de contact conserve celui par défaut. Rien n'est dupliqué pour y parvenir, et rien n'est à retenir plus tard, car le remplacement est enregistré sur la page concernée.
Barres supérieures
Une barre supérieure est un élément à part entière, avec ses propres blocs : un numéro de téléphone, des horaires d'ouverture, un sélecteur de langue, une annonce. Le bloc Header Topbar la place au-dessus de la ligne d'en-tête. Comme elle est distincte, un message pour les vacances peut changer sur tout le site sans qu'il soit nécessaire d'ouvrir l'en-tête.
Sources
Lorsque ce guide décrit un élément extérieur à Canvas, voici les pages officielles qui le documentent.
- Écran Menus de l'apparencewordpress.org · Où les menus WordPress sont créés et affectés aux emplacements proposés par un thème
- Compréhension du critère de succès 2.5.8 : taille de la cible (minimale)w3.org · Pourquoi les cibles tactiles doivent avoir une taille minimale de 24 sur 24 pixels CSS
Pour aller plus loin
Deux guides expliquent pourquoi l'en-tête conditionne la question plus large, ainsi que le constructeur lui-même.
Questions fréquentes
La FAQ complète répond au reste, et la documentation détaille chaque réglage.
Faut-il un second en-tête pour le mobile ?
En général, non, car un seul enregistrement d'en-tête Canvas s'adapte seul à un téléphone. Les zones se réorganisent selon le point de rupture et chacune peut être limitée à une catégorie d'appareil, si bien qu'un seul enregistrement peut centrer le logo sur un téléphone, masquer les coordonnées et placer le menu derrière un bouton à bascule. Créez un second enregistrement seulement si vous voulez vraiment un design différent, et non pour corriger une mise en page.
Une page peut-elle avoir un en-tête différent ?
Oui, chaque page Canvas peut avoir son propre en-tête. Les en-têtes, barres supérieures, titres de page et pieds de page disposent chacun d'une valeur par défaut pour tout le site et d'une substitution par page, si bien qu'une page de campagne peut afficher un en-tête transparent sur une photographie, tandis que toutes les autres pages conservent l'en-tête standard.
Est-ce une zone de widgets ou un menu ?
Un en-tête Canvas n’est ni l’un ni l’autre : c’est un enregistrement que vous modifiez dans l’éditeur de blocs, exactement comme une page, et le logo, la navigation, la recherche, le panier et les boutons qu’il contient sont des blocs dotés de leurs propres panneaux de réglages. Vos menus WordPress restent des menus WordPress ; le bloc Header Navigation en affiche un.
Que se passe-t-il pour mon en-tête quand ma licence expire ?
Votre site continue de s'afficher exactement comme aujourd'hui. Ce qui est suspendu, c'est le service : les mises à jour, les imports de démos, CanvasAI Engine et la modification des blocs premium sont interrompus jusqu'au renouvellement, et une période de grâce de 14 jours s'applique si une vérification de licence ne peut pas joindre nos serveurs.
Créez votre prochain site web avec Canvas
Débutant, freelance ou agence, vous obtenez les mêmes blocs et les mêmes démos. Commencez avec un seul site et créez-en autant que nécessaire avec la même licence.