Comment concevoir un en-tête WordPress ?

L’en-tête joue un rôle important dans la première impression qu’on les visiteurs de votre site web. Il aide à façonner leur expérience de plusieurs façons. Les visiteurs comptent notamment sur l’en-tête pour identifier et naviguer votre site WordPress.

Il est donc important que votre site web ait un en-tête bien conçu. Celui-ci doit contenir tous les éléments essentiels sans être surchargé.

Dans cet article, nous allons vous présenter quelques conseils pour concevoir un en-tête WordPress efficace.

Nous allons également examiner quelques méthodes pour personnaliser votre en-tête selon vos préférences.

Qu’est-ce qu’un en-tête WordPress?

L’en-tête WordPress représente la partie supérieure des pages du site. C’est normalement la partie du site qui contient le menu de navigation principal.

Dans la plupart des cas, l’en-tête est placé horizontalement tout en haut du site web. Il peut aussi être placé verticalement sur l’écran (à gauche ou à droite) et il reste généralement en position fixe.

La majorité des thèmes WordPress incluent un en-tête par défaut. Ceux-ci peuvent être personnalisés via les paramètres du thème, en utilisant du code, ou encore avec un plugin spécialisé.

Les éléments essentiels d’un en-tête WordPress

Il n’y a pas de règles strictes pour concevoir un en-tête. Il y a toutefois certains éléments qui s’avèrent essentiels à la plupart des en-têtes.

Un en-tête simple est généralement préférable à un en-tête trop complexe. Vous voudrez donc inclure toutes les informations essentielles sans que l’en-tête ne devienne surchargé et moins convivial.

L’en-tête peut inclure de 1 à 3 lignes avec différents types d’éléments comme des liens, des images et des widgets.

Par exemple, l’en-tête du site d’Ex2 inclut divers éléments. Vous avez des outils pour changer de langue ou de devises, le logo, un menu de navigation et un appel à l’action discret (le bouton CONNEXION)

Logo

Votre logo met en évidence votre marque et contribue à sa notoriété. Il devrait être l’une des premières choses que vos internautes voient quand ils visitent votre site web.

Il peut inclure seulement une image graphique, juste un titre, ou une image et un titre à la fois. Le titre peut aussi être intégré à l’image. Assurez-vous que le logo est simple à lire et visible sur n’importe quelle taille d’écran.

L’emplacement du logo dans l’en-tête peut varier selon vos préférences. Les emplacements les plus courants sont la gauche et le centre. Dans le cas d’en-têtes verticaux, il est généralement placé en haut. Le logo devrait être assez grand pour être visible, mais ne devrait pas être le centre d’attention de l’en-tête.

Menu de navigation

L’en-tête est l’emplacement de référence pour la navigation. Le menu de navigation donc est normalement l’élément le plus important de l’en-tête. Il s’agit d’une passerelle vers le reste du site web.

Le menu principale ne devrait inclure des liens que vers vos pages ou catégories les plus importantes. Vos autres pages et catégories peuvent être ajoutées dans un sous-menu déroulant.

Le menu de navigation peut inclure du texte, des icônes, ou les deux. Simplifiez le texte autant que possible et utilisez des étiquettes faciles à lire et à comprendre. Les visiteurs doivent pouvoir facilement comprendre pour cliquer.

De nombreux menus comprennent des liens qui révèlent plus de liens. Cela peut être accompli de plusieurs façons. Regardons certaines options les plus populaires à l’heure actuelle.

Menu déroulant

Le premier est le menu déroulant standard. Il affiche une liste de liens lorsque l’utilisateur survole ou clique sur l’élément de menu principal.

Méga Menu principal

La deuxième méthode est le méga menu. Cela ouvre une grande zone de menu contenant des images, plusieurs colonnes, et d’autres types de liens.

Menu fermé (ou hamburger)

Ce type de menu remplace les liens par un menu fermé. Cliquer sur l’icône semblable à un hamburger ouvre un menu avec des liens, des icônes de médias sociaux, etc.

En-tête large ou plein écran

Un en-tête plein écran prend toute l’espace de l’écran et se concentre souvent sur l’appel à l’action. Les en-têtes qui prennent environ la moitié de la hauteur de l’écran sont également populaires.

Icônes des médias sociaux

L’en-tête est un excellent endroit pour ajouter vos icônes de liens vers vos médias sociaux. Cela contribue à améliorer votre suivi des médias sociaux. De plus, ces icônes sont petits et se démarquent sans prendre beaucoup de place.

On vous recommande d’ajouter jusqu’à 3 ou 4 des réseaux sociaux que vous utilisez le plus. En ajouter davantage peut rendre l’en-tête encombré et faire hésiter vos visiteurs, qui ne sauront pas lequel choisir.

Coordonnées

Les coordonnées peuvent comprendre votre adresse postale, votre numéro de téléphone, votre adresse e-mail ou un un formulaire de contact.

Vous pouvez utiliser des icônes pour les afficher simplement. On trouve souvent dans l’en-tête un lien vers le service à la clientèle ou le soutien technique.

Appel à l’action

Un appel à l’action est généralement sous la forme d’un bouton. Celui-ci se distingue souvent du reste du contenu de l’en-tête. Le bouton peut renvoyer à un formulaire de contact, un formulaire d’inscription, un panier d’achat, etc.

L’appel à l’action est parfois animé pour attirer l’attention du lecteur. Le but du CTA est d’encourager vos lecteurs à agir.

Autres éléments

Plusieurs autres éléments peuvent être inclus dans l’en-tête. En voici quelques uns parmi les plus courants:

Ouvrir une session

C’est un lien qui redirige vers un formulaire par lequel le visiteur peut se connecter à son compte. S’il le visiteur n’a pas de compte, il peut simplement en créer un.

Compte

Ce lien liste tous les liens associés au compte du visiteur.

Panier

L’entête WordPress est le meilleur endroit pour ajouter le panier WooCommerce. Cela peut apparaitre comme un mini-panier montrant le contenu de leur panier d’achat, ou comme un simple lien vers la page.

Option de langue

Si le site utilise WPML ou un autre plugin de traduction, le bouton de langue permet de choisir la langue souhaitée parmi une liste de langages disponibles.

Options d’accessibilité

Les options d’accessibilité changent habituellement le site Web en termes de luminosités, changent la taille des polices, etc. Ils sont utilisé pour adapter le contenu pour les utilisateurs avec un handicap visuel.

Boîte de recherche

Si votre site a beaucoup de contenu, une boîte de recherche peut s’avérer nécessaire. Un outil de recherche dans l’en-tête est facile d’accès et très visible.

Vous pouvez placer une boîte de recherche ou juste une icône qui ouvre une boîte de recherche. L’icône est idéale si vous avez beaucoup d’autres éléments dans votre en-tête.

Bannière

Des bannières sont généralement placées en haut de l’en-tête et elles sont plus petites et plus simples, afin de ne pas détourner l’attention de tout le reste.

Carousel d’images

Un carousel d’images, qui permute les images suivant les mouvements du curseur, peut attirer l’attention sur les produits, les ventes, etc.

Design d’en-tête WordPress

Tous les éléments d’un en-tête doivent s’harmoniser ensemble pour être efficace. Ils doivent également correspondre à l’esthétique et au design de votre site.

Voici quelques aspects à considérer lors de la conception de l’en-tête de votre site WordPress.

Taille de l’en-tête

L’en-tête prend généralement toute la largeur de l’écran. Il devrait être bien adapté pour s’afficher sur n’importe quel appareil.

Cela nécessite d’empiler les divers éléments et de placer le menu de navigation dans une icône hamburger pour l’affichage sur téléphone.

WordPress recommande d’utiliser la même résolution horizontale que le reste du site, avec une largeur maximale de 1200 pixels. Ainsi, l’en-tête s’ajustera correctement et paraitra à la fois sur haute résolution et sur les petits écrans.

La hauteur peut varier, mais l’en-tête n’occupe généralement qu’une petite partie en haut de l’écran. En règle générale, quelque part entre 50-200 pixels de hauteur au total.

Les en-têtes avec plusieurs lignes ont tendance à attribuer environ 60 pixels à chaque ligne. Le site doit promouvoir son contenu et l’en-tête n’est qu’un outil pour guider les utilisateurs vers ce contenu.

Placement des éléments

Le positionnement des divers éléments, tels que le logo et les liens, a un grand impact sur la convivialité et l’impression laissée à l’utilisateur de votre site web. Les éléments importants devraient tous être faciles à voir et à utiliser.

Rendre l’en-tête accessible

Utilisez la balise de titre h1 pour que les lecteurs d’écran comprennent qu’il s’agit d’un en-tête. Utilisez également les méta descriptions et les balises alternatives pour les liens et les images dans le fichier modèle.

Ces éléments permettront de rendre votre en-tête, et votre site, accessible aux visiteurs souffrant d’un handicap visuel.

Garder les choses claires

L’en-tête ne devrait afficher que les éléments essentiels dont le succès votre site Web a besoin. Essayez d’afficher directement le moins d’éléments possible pour le rendre plus facile à utiliser.

Incluez plutôt vos éléments moins essentiels dans des sous-menu, pour éviter de détourner l’attention des pages importantes.

Couleurs d’en-tête

Tenez compte de la théorie des couleurs lorsque vous sélectionnez la palette des arrière-plans, des liens, des boutons et des images.

L’en-tête est généralement d’une couleur différente du corps principal de la page. Celle-ci devrait toutefois être assortie avec la palette du site. Cet agencement l’aide à se démarquer du reste du site, tout en l’identifiant comme une partie intégrante de l’ensemble.

Mettez un certain accent sur le contraste de couleurs. Par exempole, utilisez du texte clair avec des fonds sombres, et du texte foncé avec des fonds clairs.

Si vous utilisez des images, des dégradés ou des motifs en arrière-plan, assurez-vous d’un contraste suffisant pour que le texte soit facilement lisible. Et ce, pour toutes les tailles d’écran.

Utilisez des couleurs qui s’harmonisent bien ensemble. Évitez les couleurs qui se marient mal ou causent de la fatigue oculaire.

Texte d’en-tête

Les polices d’en-tête sont souvent plus audacieuses que le contenu du corps. Elles utilisent souvent des couleurs plus voyantes qui correspondent aux éléments mis de l’avant sur le site web.

Placez le texte à l’extérieur des boutons et des icônes afin de bien démarquer les éléments. Éviter de couvrir les caractéristiques importantes de l’image ou du logo avec du texte.

En-tête fixe ou non fixe

Un en-tête peut rester visible en tout temps sur l’écran des visiteurs, ou il peut défiler avec la page. Le fait qu’il demeure visible offre aux utilisateurs un accès constant à votre menu de navigation. Cependant, un en-tête « collant » prend aussi une partie de l’espace sr l’écran. Le choix dépend donc de vos préférences.

Cliquable ou non cliquable

Assurez-vous de rendre tous les éléments d’en-tête cliquables et utilisables pour la navigation. Il est d’usage courant de lier le logo à la page d’accueil du site web. Tous les boutons, images, et même le texte devrait aussi lier à divers éléments du site.

Survoler les éléments

Utilisez des outils liés au survol par le curseur pour développer les liens, les messages, etc. Vous pouvez ainsi ouvrir des menus plus grands, révéler les noms et URL des liens qui sont représentés par des icônes, et plus encore.

Correspondre à votre site Web

Le design de l’en-tête WordPress doit être cohérent avec le reste du site. Il doit paraître à sa place, en sembler faire partie d’un tout. Il s’agit du point central de la navigation du site, donc il doit servir à soutenir et promouvoir son objectif principal.

Utiliser les images et les motifs avec parcimonie

Un en-tête de taille normal n’a pas nécessairement besoin d’images ou de décors. Il vaut mieux les conserver pour les en-têtes très grands ou plein écran, ou encore utiliser des bannières de ventes.

Personnalisation de l’en-tête WordPress

Il existe plusieurs méthodes pour personnaliser un en-tête WordPress. Celles-ci incluent notamment l’utilisation de code, les paramètres du thème et les plugins. Voici certaines des options les plus simples.

Personnalisation de l’en-tête WordPress avec l’éditeur de blocs Gutenberg

Les thèmes WordPress récents intégrant le Full Site Editing comprennent un modèle d’en-tête Gutenberg personnalisable. Pour modifier l’en-tête, cliquez sur + Créer dans la barre de menus supérieure.

Ensuite, cliquez sur le En-tête de page pour effectuez vos modifications. Faites glisser et déposez les éléments, changez leurs couleurs et tailles, ajoutez des éléments, etc.

Personnalisation de l’en-tête WordPress avec le Personnalisateur

Les thèmes WordPress n’intégrant pas l’édition complète, incluent généralement des fonctionnalités de personnalisation pour l’en-tête. Pour y accéder, rendez-vous à la section Apparence – Personnaliser dans de votre tableau de bord.

Choisissez ensuite les divers paramètres que vous souhaitez ajuster à l’aide du Personnalisateur. Les options de configuration peuvent varier en fonction du thème. Généralement, un section entière du Personnalisateur est dédié à l’en-tête.

Personnalisation de l’en-tête WordPress avec un plugin d’en-tête WordPress

Vous pouvez aussi personnaliser votre en-tête WordPress à l’aide de code ou de plugins. Il existe un foule de plugins spécifiquement conçus pour la création d’en-têtes. Voici quelques uns des plus populaires, qui sont compatible avec tous les thèmes WordPress.

• Unique Headers
• STAX Header Builder
• My Sticky Menu
• WPCode – Insert Headers and Footers
• Sticky Menu & Sticky Header

Ces plugins vous donnent accès à différentes fonctions pour concevoir des en-têtes personnalisés. On peut penser à des widgets additionnels ou davantage d’options de couleurs.

D’autres plugins sont spécifiquement liés à certains éditeurs de pages (comme Elementor). Ils n’offrent donc pas nécessairement une bonne compatibilité avec tous les thèmes WordPress.

Pour conclure sur comment concevoir un en-tête WordPress efficace

L’en-tête est l’un des éléments les plus importants d’un site Web. C’est généralement le premier élément que vos visiteurs voient, et il contribue à la première impression qu’ils gardent. Il peut faire la différence entre un visiteur qui reste sur votre site ou qui le quitte.

Un en-tête bine conçu devrait aider vos visiteurs à naviguer sur votre site web. Il devrait leur permettre de trouver ce dont ils ont besoin et de passer à l’action.

Lors de la conception de votre site Web, n’oubliez pas de porter une attention particulière à l’en-tête. Il est important de prendre le temps de créer un en-tête efficace qui représente vraiment votre marque.

Nous espérons que la lecture de cet article vous a plu et vous a éclairé sur comment concevoir un en-tête WordPress efficace.

Si c’est le cas, nous vous invitons à consulter nos autres autres articles et tutoriels. Vous y trouverez tout ce que vous avez besoin de savoir à propos de l’hébergement web et de la création de sites web.

Si vous êtes à la recherche d’un hébergement web pour votre site WordPress, nous vous invitons à consulter les offres d’Ex2. Nos plans d’hébergement WordPress vert sont très complètes et performantes, incluant tout ce dont votre site a besoin pour réussir.