![\"\"](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2023\/05\/headerex2-1024x88.jpg\")
<\/figure>\n\n\n\nLogo<\/h3>\n\n\n\n
Votre logo met en \u00e9vidence votre marque et contribue \u00e0 sa notori\u00e9t\u00e9. Il devrait \u00eatre l\u2019une des premi\u00e8res choses que vos internautes voient quand ils visitent votre site web. <\/p>\n\n\n\n
Il peut inclure seulement une image graphique, juste un titre, ou une image et un titre \u00e0 la fois. Le titre peut aussi \u00eatre int\u00e9gr\u00e9 \u00e0 l’image. Assurez-vous que le logo est simple \u00e0 lire et visible sur n\u2019importe quelle taille d\u2019\u00e9cran.<\/p>\n\n\n\n
L\u2019emplacement du logo dans l\u2019en-t\u00eate peut varier selon vos pr\u00e9f\u00e9rences. Les emplacements les plus courants sont la gauche et le centre. Dans le cas d’en-t\u00eates verticaux, il est g\u00e9n\u00e9ralement plac\u00e9 en haut. Le logo devrait \u00eatre assez grand pour \u00eatre visible, mais ne devrait pas \u00eatre le centre d’attention de l\u2019en-t\u00eate.<\/p>\n\n\n\n
Menu de navigation<\/h3>\n\n\n\n
L\u2019en-t\u00eate est l\u2019emplacement de r\u00e9f\u00e9rence pour la navigation. Le menu de navigation donc est normalement l\u2019\u00e9l\u00e9ment le plus important de l\u2019en-t\u00eate. Il s\u2019agit d’une passerelle vers le reste du site web. <\/p>\n\n\n\n
Le menu principale ne devrait inclure des liens que vers vos pages ou cat\u00e9gories les plus importantes. Vos autres pages et cat\u00e9gories peuvent \u00eatre ajout\u00e9es dans un sous-menu d\u00e9roulant. <\/p>\n\n\n\n
Le menu de navigation peut inclure du texte, des ic\u00f4nes, ou les deux. Simplifiez le texte autant que possible et utilisez des \u00e9tiquettes faciles \u00e0 lire et \u00e0 comprendre. Les visiteurs doivent pouvoir facilement comprendre pour cliquer.<\/p>\n\n\n\n
De nombreux menus comprennent des liens qui r\u00e9v\u00e8lent plus de liens<\/em>. Cela peut \u00eatre accompli de plusieurs fa\u00e7ons. Regardons certaines options les plus populaires \u00e0 l’heure actuelle.<\/p>\n\n\n\n Le premier est le menu d\u00e9roulant standard. Il affiche une liste de liens lorsque l\u2019utilisateur survole ou clique sur l\u2019\u00e9l\u00e9ment de menu principal.<\/p>\n\n\n\n La deuxi\u00e8me m\u00e9thode est le m\u00e9ga menu. Cela ouvre une grande zone de menu contenant des images, plusieurs colonnes, et d\u2019autres types de liens.<\/p>\n\n\n\n Ce type de menu remplace les liens par un menu ferm\u00e9. Cliquer sur l\u2019ic\u00f4ne semblable \u00e0 un hamburger ouvre un menu avec des liens, des ic\u00f4nes de m\u00e9dias sociaux, etc.<\/p>\n\n\n\n Un en-t\u00eate plein \u00e9cran prend toute l’espace de l\u2019\u00e9cran et se concentre souvent sur l\u2019appel \u00e0 l\u2019action. Les en-t\u00eates qui prennent environ la moiti\u00e9 de la hauteur de l\u2019\u00e9cran sont \u00e9galement populaires. <\/p>\n\n\n\n L\u2019en-t\u00eate est un excellent endroit pour ajouter vos ic\u00f4nes de liens vers vos m\u00e9dias sociaux. Cela contribue \u00e0 am\u00e9liorer votre suivi des m\u00e9dias sociaux. De plus, ces ic\u00f4nes sont petits et se d\u00e9marquent sans prendre beaucoup de place. <\/p>\n\n\n\n On vous recommande d\u2019ajouter jusqu’\u00e0 3 ou 4 des r\u00e9seaux sociaux que vous utilisez le plus. En ajouter davantage peut rendre l\u2019en-t\u00eate encombr\u00e9 et faire h\u00e9siter vos visiteurs, qui ne sauront pas lequel choisir.<\/p>\n\n\n\n Les coordonn\u00e9es peuvent comprendre votre adresse postale, votre num\u00e9ro de t\u00e9l\u00e9phone, votre adresse e-mail ou un un formulaire de contact. <\/p>\n\n\n\n Vous pouvez utiliser des ic\u00f4nes pour les afficher simplement. On trouve souvent dans l’en-t\u00eate un lien vers le service \u00e0 la client\u00e8le ou le soutien technique. <\/p>\n\n\n\n Un appel \u00e0 l’action est g\u00e9n\u00e9ralement sous la forme d\u2019un bouton. Celui-ci se distingue souvent du reste du contenu de l\u2019en-t\u00eate. Le bouton peut renvoyer \u00e0 un formulaire de contact, un formulaire d’inscription, un panier d’achat, etc. <\/p>\n\n\n\n L’appel \u00e0 l’action est parfois anim\u00e9 pour attirer l\u2019attention du lecteur. Le but du CTA est d\u2019encourager vos lecteurs \u00e0 agir.<\/p>\n\n\n\n Plusieurs autres \u00e9l\u00e9ments peuvent \u00eatre inclus dans l\u2019en-t\u00eate. En voici quelques uns parmi les plus courants:<\/p>\n\n\n\n C\u2019est un lien qui redirige vers un formulaire par lequel le visiteur peut se connecter \u00e0 son compte. S\u2019il le visiteur n’a pas de compte, il peut simplement en cr\u00e9er un.<\/p>\n\n\n\n Ce lien liste tous les liens associ\u00e9s au compte du visiteur.<\/p>\n\n\n\n L\u2019ent\u00eate 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.<\/p>\n\n\n\n Si le site utilise WPML ou un autre plugin de traduction, le bouton de langue permet de choisir la langue souhait\u00e9e parmi une liste de langages disponibles.<\/p>\n\n\n\n Les options d\u2019accessibilit\u00e9 changent habituellement le site Web en termes de luminosit\u00e9s, changent la taille des polices, etc. Ils sont utilis\u00e9 pour adapter le contenu pour les utilisateurs avec un handicap visuel.<\/p>\n\n\n\n Si votre site a beaucoup de contenu, une bo\u00eete de recherche peut s’av\u00e9rer n\u00e9cessaire. Un outil de recherche dans l\u2019en-t\u00eate est facile d\u2019acc\u00e8s et tr\u00e8s visible. <\/p>\n\n\n\n Vous pouvez placer une bo\u00eete de recherche ou juste une ic\u00f4ne qui ouvre une bo\u00eete de recherche. L\u2019ic\u00f4ne est id\u00e9ale si vous avez beaucoup d\u2019autres \u00e9l\u00e9ments dans votre en-t\u00eate.<\/p>\n\n\n\n Des banni\u00e8res sont g\u00e9n\u00e9ralement plac\u00e9es en haut de l\u2019en-t\u00eate et elles sont plus petites et plus simples, afin de ne pas d\u00e9tourner l’attention de tout le reste. <\/p>\n\n\n\n Un carousel d’images, qui permute les images suivant les mouvements du curseur, peut attirer l\u2019attention sur les produits, les ventes, etc. <\/p>\n\n\n\n Tous les \u00e9l\u00e9ments d\u2019un en-t\u00eate doivent s’harmoniser ensemble pour \u00eatre efficace. Ils doivent \u00e9galement correspondre \u00e0 l\u2019esth\u00e9tique et au design de votre site. <\/p>\n\n\n\n Voici quelques aspects \u00e0 consid\u00e9rer lors de la conception de l\u2019en-t\u00eate de votre site WordPress.<\/p>\n\n\n\n L\u2019en-t\u00eate prend g\u00e9n\u00e9ralement toute la largeur de l\u2019\u00e9cran. Il devrait \u00eatre bien adapt\u00e9 pour s’afficher sur n\u2019importe quel appareil. <\/p>\n\n\n\n Cela n\u00e9cessite d\u2019empiler les divers \u00e9l\u00e9ments et de placer le menu de navigation dans une ic\u00f4ne hamburger pour l’affichage sur t\u00e9l\u00e9phone. <\/p>\n\n\n\n WordPress recommande d\u2019utiliser la m\u00eame r\u00e9solution horizontale que le reste du site, avec une largeur maximale de 1200 pixels. Ainsi, l\u2019en-t\u00eate s\u2019ajustera correctement et paraitra \u00e0 la fois sur haute r\u00e9solution et sur les petits \u00e9crans.<\/p>\n\n\n\n La hauteur peut varier, mais l’en-t\u00eate n’occupe g\u00e9n\u00e9ralement qu\u2019une petite partie en haut de l\u2019\u00e9cran. En r\u00e8gle g\u00e9n\u00e9rale, quelque part entre 50-200 pixels de hauteur au total. <\/p>\n\n\n\n Les en-t\u00eates avec plusieurs lignes ont tendance \u00e0 attribuer environ 60 pixels \u00e0 chaque ligne. Le site doit promouvoir son contenu et l\u2019en-t\u00eate n\u2019est qu\u2019un outil pour guider les utilisateurs vers ce contenu.<\/p>\n\n\n\n Le positionnement des divers \u00e9l\u00e9ments, tels que le logo et les liens, a un grand impact sur la convivialit\u00e9 et l\u2019impression laiss\u00e9e \u00e0 l\u2019utilisateur de votre site web. Les \u00e9l\u00e9ments importants devraient tous \u00eatre faciles \u00e0 voir et \u00e0 utiliser.<\/p>\n\n\n\n Utilisez la balise de titre h1 pour que les lecteurs d\u2019\u00e9cran comprennent qu\u2019il s\u2019agit d\u2019un en-t\u00eate. Utilisez \u00e9galement les m\u00e9ta descriptions et les balises alternatives pour les liens et les images dans le fichier mod\u00e8le. <\/p>\n\n\n\n Ces \u00e9l\u00e9ments permettront de rendre votre en-t\u00eate, et votre site, accessible aux visiteurs souffrant d’un handicap visuel.<\/p>\n\n\n\n L\u2019en-t\u00eate ne devrait afficher que les \u00e9l\u00e9ments essentiels dont le succ\u00e8s votre site Web a besoin. Essayez d’afficher directement le moins d\u2019\u00e9l\u00e9ments possible pour le rendre plus facile \u00e0 utiliser. <\/p>\n\n\n\n Incluez plut\u00f4t vos \u00e9l\u00e9ments moins essentiels dans des sous-menu, pour \u00e9viter de d\u00e9tourner l’attention des pages importantes.<\/p>\n\n\n\n Tenez compte de la th\u00e9orie des couleurs<\/em> lorsque vous s\u00e9lectionnez la palette des arri\u00e8re-plans, des liens, des boutons et des images. <\/p>\n\n\n\n L\u2019en-t\u00eate est g\u00e9n\u00e9ralement d\u2019une couleur diff\u00e9rente du corps principal de la page. Celle-ci devrait toutefois \u00eatre assortie avec la palette du site. Cet agencement l\u2019aide \u00e0 se d\u00e9marquer du reste du site, tout en l’identifiant comme une partie int\u00e9grante de l’ensemble.<\/p>\n\n\n\n Mettez un certain accent sur le contraste de couleurs. Par exempole, utilisez du texte clair avec des fonds sombres, et du texte fonc\u00e9 avec des fonds clairs. <\/p>\n\n\n\n Si vous utilisez des images, des d\u00e9grad\u00e9s ou des motifs en arri\u00e8re-plan, assurez-vous d’un contraste suffisant pour que le texte soit facilement lisible. Et ce, pour toutes les tailles d\u2019\u00e9cran. <\/p>\n\n\n\n Utilisez des couleurs qui s’harmonisent bien ensemble. \u00c9vitez les couleurs qui se marient mal ou causent de la fatigue oculaire.<\/p>\n\n\n\n Les polices d\u2019en-t\u00eate sont souvent plus audacieuses que le contenu du corps. Elles utilisent souvent des couleurs plus voyantes qui correspondent aux \u00e9l\u00e9ments mis de l’avant sur le site web. <\/p>\n\n\n\n Placez le texte \u00e0 l’ext\u00e9rieur des boutons et des ic\u00f4nes afin de bien d\u00e9marquer les \u00e9l\u00e9ments. \u00c9viter de couvrir les caract\u00e9ristiques importantes de l\u2019image ou du logo avec du texte.<\/p>\n\n\n\n Un en-t\u00eate peut rester visible en tout temps sur l’\u00e9cran des visiteurs, ou il peut d\u00e9filer avec la page. Le fait qu\u2019il demeure visible offre aux utilisateurs un acc\u00e8s constant \u00e0 votre menu de navigation. Cependant, un en-t\u00eate \u00ab\u00a0collant\u00a0\u00bb prend aussi une partie de l\u2019espace sr l\u2019\u00e9cran. Le choix d\u00e9pend donc de vos pr\u00e9f\u00e9rences.<\/p>\n\n\n\n Assurez-vous de rendre tous les \u00e9l\u00e9ments d\u2019en-t\u00eate cliquables et utilisables pour la navigation. Il est d’usage courant de lier le logo \u00e0 la page d\u2019accueil du site web. Tous les boutons, images, et m\u00eame le texte devrait aussi lier \u00e0 divers \u00e9l\u00e9ments du site.<\/p>\n\n\n\n Utilisez des outils li\u00e9s au survol par le curseur pour d\u00e9velopper les liens, les messages, etc. Vous pouvez ainsi ouvrir des menus plus grands, r\u00e9v\u00e9ler les noms et URL des liens qui sont repr\u00e9sent\u00e9s par des ic\u00f4nes, et plus encore.<\/p>\n\n\n\n Le design de l’en-t\u00eate WordPress doit \u00eatre coh\u00e9rent avec le reste du site. Il doit para\u00eetre \u00e0 sa place, en sembler faire partie d’un tout. Il s’agit du point central de la navigation du site, donc il doit servir \u00e0 soutenir et promouvoir son objectif principal.<\/p>\n\n\n\n Un en-t\u00eate de taille normal n\u2019a pas n\u00e9cessairement besoin d\u2019images ou de d\u00e9cors. Il vaut mieux les conserver pour les en-t\u00eates tr\u00e8s grands ou plein \u00e9cran, ou encore utiliser des banni\u00e8res de ventes.<\/p>\n\n\n\n Il existe plusieurs m\u00e9thodes pour personnaliser un en-t\u00eate WordPress. Celles-ci incluent notamment l’utilisation de code, les param\u00e8tres du th\u00e8me et les plugins. Voici certaines des options les plus simples.<\/p>\n\n\n\n Les th\u00e8mes WordPress r\u00e9cents int\u00e9grant le Full Site Editing<\/em> comprennent un mod\u00e8le d\u2019en-t\u00eate Gutenberg personnalisable. Pour modifier l\u2019en-t\u00eate, cliquez sur + Cr\u00e9er dans la barre de menus sup\u00e9rieure.<\/p>\n\n\n Ensuite, cliquez sur le En-t\u00eate de page<\/strong> pour effectuez vos modifications. Faites glisser et d\u00e9posez les \u00e9l\u00e9ments, changez leurs couleurs et tailles, ajoutez des \u00e9l\u00e9ments, etc. <\/p>\n\n\n\n Les th\u00e8mes WordPress n’int\u00e9grant pas l’\u00e9dition compl\u00e8te, incluent g\u00e9n\u00e9ralement des fonctionnalit\u00e9s de personnalisation pour l\u2019en-t\u00eate. Pour y acc\u00e9der, rendez-vous \u00e0 la section Apparence – Personnaliser<\/strong> dans de votre tableau de bord.<\/p>\n\n\n Choisissez ensuite les divers param\u00e8tres que vous souhaitez ajuster \u00e0 l’aide du Personnalisateur. Les options de configuration peuvent varier en fonction du th\u00e8me. G\u00e9n\u00e9ralement, un section enti\u00e8re du Personnalisateur est d\u00e9di\u00e9 \u00e0 l’en-t\u00eate.<\/p>\n\n\n Vous pouvez aussi personnaliser votre en-t\u00eate WordPress \u00e0 l’aide de code ou de plugins. Il existe un foule de plugins sp\u00e9cifiquement con\u00e7us pour la cr\u00e9ation d’en-t\u00eates. Voici quelques uns des plus populaires, qui sont compatible avec tous les th\u00e8mes WordPress.<\/p>\n\n\n\n Ces plugins vous donnent acc\u00e8s \u00e0 diff\u00e9rentes fonctions pour concevoir des en-t\u00eates personnalis\u00e9s. On peut penser \u00e0 des widgets additionnels ou davantage d’options de couleurs. <\/p>\n\n\n\n D’autres plugins sont sp\u00e9cifiquement li\u00e9s \u00e0 certains \u00e9diteurs de pages (comme Elementor). Ils n’offrent donc pas n\u00e9cessairement une bonne compatibilit\u00e9 avec tous les th\u00e8mes WordPress.<\/p>\n\n\n\n L\u2019en-t\u00eate est l\u2019un des \u00e9l\u00e9ments les plus importants d’un site Web. C\u2019est g\u00e9n\u00e9ralement le premier \u00e9l\u00e9ment que vos visiteurs voient, et il contribue \u00e0 la premi\u00e8re impression qu’ils gardent. Il peut faire la diff\u00e9rence entre un visiteur qui reste sur votre site ou qui le quitte. <\/p>\n\n\n\n Un en-t\u00eate bine con\u00e7u devrait aider vos visiteurs \u00e0 naviguer sur votre site web. Il devrait leur permettre de trouver ce dont ils ont besoin et de passer \u00e0 l\u2019action. <\/p>\n\n\n\n Lors de la conception de votre site Web, n\u2019oubliez pas de porter une attention particuli\u00e8re \u00e0 l’en-t\u00eate. Il est important de prendre le temps de cr\u00e9er un en-t\u00eate efficace qui repr\u00e9sente vraiment votre marque.<\/p>\n\n\n\n Nous esp\u00e9rons que la lecture de cet article vous a plu et vous a \u00e9clair\u00e9 sur comment concevoir un en-t\u00eate WordPress efficace.<\/p>\n\n\n\n Si c\u2019est le cas, nous vous invitons \u00e0 consulter nos autres autres\u00a0articles et tutoriels<\/a>. Vous y trouverez tout ce que vous avez besoin de savoir \u00e0 propos de l\u2019h\u00e9bergement web et de la cr\u00e9ation de sites web.<\/p>\n\n\n\nMenu d\u00e9roulant<\/h4>\n\n\n\n
M\u00e9ga Menu principal<\/h4>\n\n\n\n
Menu ferm\u00e9 (ou hamburger)<\/h4>\n\n\n\n
En-t\u00eate large ou plein \u00e9cran<\/h4>\n\n\n\n
Ic\u00f4nes des m\u00e9dias sociaux<\/h3>\n\n\n\n
Coordonn\u00e9es<\/h3>\n\n\n\n
Appel \u00e0 l\u2019action<\/h3>\n\n\n\n
Autres \u00e9l\u00e9ments<\/h3>\n\n\n\n
Ouvrir une session<\/h4>\n\n\n\n
Compte<\/h4>\n\n\n\n
Panier<\/h4>\n\n\n\n
Option de langue<\/h4>\n\n\n\n
Options d\u2019accessibilit\u00e9<\/h4>\n\n\n\n
Bo\u00eete de recherche<\/h4>\n\n\n\n
Banni\u00e8re<\/h4>\n\n\n\n
Carousel d’images<\/h4>\n\n\n\n
Design d’en-t\u00eate WordPress<\/h2>\n\n\n\n
Taille de l\u2019en-t\u00eate<\/h3>\n\n\n\n
Placement des \u00e9l\u00e9ments<\/h3>\n\n\n\n
Rendre l\u2019en-t\u00eate accessible<\/h3>\n\n\n\n
Garder les choses claires<\/h3>\n\n\n\n
Couleurs d\u2019en-t\u00eate<\/h3>\n\n\n\n
Texte d\u2019en-t\u00eate<\/h3>\n\n\n\n
En-t\u00eate fixe ou non fixe<\/h3>\n\n\n\n
Cliquable ou non cliquable<\/h3>\n\n\n\n
Survoler les \u00e9l\u00e9ments<\/h3>\n\n\n\n
Correspondre \u00e0 votre site Web<\/h3>\n\n\n\n
Utiliser les images et les motifs avec parcimonie<\/h3>\n\n\n\n
Personnalisation de l\u2019en-t\u00eate WordPress<\/h2>\n\n\n\n
Personnalisation de l\u2019en-t\u00eate WordPress avec l\u2019\u00e9diteur de blocs Gutenberg<\/h3>\n\n\n\n
![\"Comment](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2023\/05\/createheader1.jpg\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2023\/05\/headerwordpress4.jpg\")
<\/figure>\n\n\n\nPersonnalisation de l\u2019en-t\u00eate WordPress avec le Personnalisateur<\/h2>\n\n\n\n
![\"Comment](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2023\/05\/headerwordpress2.jpg\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2023\/05\/headerwordpress3.jpg\")
<\/figure>\n<\/div>\n\n\nPersonnalisation de l\u2019en-t\u00eate WordPress avec un plugin d’en-t\u00eate WordPress<\/h2>\n\n\n\n
\n
Pour conclure sur comment concevoir un en-t\u00eate WordPress efficace<\/h2>\n\n\n\n