{"id":40073,"date":"2025-01-07T12:54:28","date_gmt":"2025-01-07T11:54:28","guid":{"rendered":"https:\/\/wpmarmite.com\/?p=40073"},"modified":"2025-12-19T19:08:47","modified_gmt":"2025-12-19T18:08:47","slug":"header-wordpress","status":"publish","type":"post","link":"https:\/\/wpmarmite.com\/header-wordpress\/","title":{"rendered":"Dis, c&#8217;est quoi un bon header sur WordPress ?"},"content":{"rendered":"\n<p>Apr\u00e8s plusieurs d\u00e9convenues, vous attendez ce moment avec impatience. Tic, toc. Tic, toc. Les secondes s\u2019\u00e9gr\u00e8nent. Et soudain, voil\u00e0 votre rendez-vous du soir qui d\u00e9barque au coin de la rue.<\/p>\n\n\n\n<p>Bim, bam, boum : dans votre poitrine, votre c\u0153ur s\u2019emballe. <strong>Ah, enfin : la personne que vous venez de d\u00e9couvrir vous pla\u00eet<\/strong>.<\/p>\n\n\n\n<p>C\u2019est d\u00e9j\u00e0 pas mal, mais \u00e7a ne suffit pas toujours \u00e0 aller plus loin. Parfois, apr\u00e8s quelques mots, c\u2019est la d\u00e9bandade, et on a envie de simuler un appel factice pour s\u2019extirper d\u2019un beau bourbier.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"500\" height=\"218\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/homme-telephone.gif\" alt=\"Un homme met le t\u00e9l\u00e9phone \u00e0 l'oreille\" class=\"wp-image-40076\"\/><figcaption class=\"wp-element-caption\">Mayday, mayday<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Morale de l\u2019histoire : lors d\u2019un rendez-vous amoureux, comme sur un site web, on n\u2019a qu&#8217;une seule chance de faire une bonne impression (non, je ne vous \u00e9pargne pas ce poncif).<\/p>\n\n\n\n<p>Alors, votre visiteur va-t-il cliquer sur les liens de votre menu ? Va-t-il avoir envie de scroller sur votre page ?<\/p>\n\n\n\n<p><strong>Pour l\u2019inciter \u00e0 faire le premier pas, vous devez lui exposer un de vos plus beaux atouts s\u00e9duction : le header de votre site WordPress<\/strong>. En fran\u00e7ais, on appelle \u00e7a un en-t\u00eate.<\/p>\n\n\n\n<p>S\u2019il est bien fichu, il y a de fortes chances que votre visiteur ait envie de faire plus ample connaissance avec votre site. Si non, il risque d\u2019aller voir ailleurs.<\/p>\n\n\n\n<p>Pour vous aider \u00e0 conclure, je me suis mis sur mon 31 et vous livre tous mes conseils pour cr\u00e9er et personnaliser un header attractif.<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-fc0d2032      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tSommaire\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#pr\u00e9sentation-du-header-et-de-son-importance\" class=\"uagb-toc-link__trigger\">Pr\u00e9sentation du header et de son importance<\/a><li class=\"uagb-toc__list\"><a href=\"#comment-cr\u00e9er-et-personnaliser-un-header-sur-wordpress\" class=\"uagb-toc-link__trigger\">Comment cr\u00e9er et personnaliser un header sur WordPress ?<\/a><li class=\"uagb-toc__list\"><a href=\"#les-bonnes-pratiques-pour-optimiser-votre-header-sur-wordpress\" class=\"uagb-toc-link__trigger\">Les bonnes pratiques pour optimiser votre header sur WordPress<\/a><li class=\"uagb-toc__list\"><a href=\"#un-en-t\u00eate-cest-ent\u00eatant\" class=\"uagb-toc-link__trigger\">Un en-t\u00eate, c\u2019est ent\u00eatant<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<p class=\"has-note-background-color has-background\"><em>Initialement r\u00e9dig\u00e9 en octobre 2020, cet article a \u00e9t\u00e9 mis \u00e0 jour pour la derni\u00e8re fois en janvier 2025.<\/em><\/p>\n\n\n<style>.elementor-100617 .elementor-element.elementor-element-78258b9e:not(.elementor-motion-effects-element-type-background), .elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#091032;}.elementor-100617 .elementor-element.elementor-element-78258b9e, .elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-background-overlay{border-radius:6px 6px 6px 6px;}.elementor-100617 .elementor-element.elementor-element-78258b9e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:50px;margin-bottom:50px;padding:1.25em 1.25em 1.25em 1.25em;}.elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-100617 .elementor-element.elementor-element-4c0ab6e7.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7.elementor-column.elementor-element[data-element_type=\"column\"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated, .elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated > .elementor-background-overlay, .elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-background-slideshow{border-radius:6px 6px 6px 6px;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated{margin:0em 0em 0em 0em;--e-column-margin-right:0em;--e-column-margin-left:0em;}.elementor-100617 .elementor-element.elementor-element-267b74cf .elementor-heading-title{font-size:1.5em;font-weight:700;line-height:1.1em;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#ffffff;}.elementor-100617 .elementor-element.elementor-element-4b4f4f84{text-align:start;font-size:2rem;color:#ffffff;}.elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button{font-weight:700;text-transform:uppercase;background-color:#ED207B;}.elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button:hover, .elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button:focus{background-color:#D01167;}.elementor-100617 .elementor-element.elementor-element-77000fa5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-100617 .elementor-element.elementor-element-17c8376 .elementor-heading-title{font-size:0.75em;font-weight:bold;font-style:italic;color:#FDECF4;}.elementor-100617 .elementor-element.elementor-element-17c8376 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-100617 .elementor-element.elementor-element-15639fef img{max-width:150px;}.elementor-100617 .elementor-element.elementor-element-15639fef > .elementor-widget-container{margin:0em 0em 0em 0em;}@media(max-width:767px){.elementor-100617 .elementor-element.elementor-element-15639fef{text-align:start;}.elementor-100617 .elementor-element.elementor-element-15639fef img{max-width:80px;}.elementor-100617 .elementor-element.elementor-element-15639fef > .elementor-widget-container{padding:0em 0em 1em 0em;}}@media(min-width:768px){.elementor-100617 .elementor-element.elementor-element-4c0ab6e7{width:75%;}.elementor-100617 .elementor-element.elementor-element-3fa916c3{width:15.816%;}}\/* Start custom CSS for text-editor, class: .elementor-element-4b4f4f84 *\/.elementor-100617 .elementor-element.elementor-element-4b4f4f84 p{\n    font-size:1.8rem;\n    line-height:1.5em;\n    text-shadow: 0px 0px 6px rgba(0,0,0,0.3);\n}\/* End custom CSS *\/<\/style>\t\t<div data-elementor-type=\"section\" data-elementor-id=\"100617\" class=\"elementor elementor-100617\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section data-dce-background-color=\"#091032\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-78258b9e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78258b9e\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4c0ab6e7\" data-id=\"4c0ab6e7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div data-dce-title-color=\"#ffffff\" class=\"elementor-element elementor-element-267b74cf elementor-widget elementor-widget-heading\" data-id=\"267b74cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Un site vitrine dans les cartons ? On s&#8217;en occupe !<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-text-color=\"#ffffff\" class=\"elementor-element elementor-element-4b4f4f84 elementor-widget elementor-widget-text-editor\" data-id=\"4b4f4f84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Concevoir un site WordPress de A \u00e0 Z n&#8217;est pas de tout repos. Entre les choix techniques, graphiques et marketing, il y a de quoi se perdre&#8230;<\/p>\n<p>WPMarmite Start simplifie le processus pour vous permettre de vous concentrer sur l&#8217;essentiel : votre activit\u00e9.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77000fa5 elementor-mobile-align-justify elementor-widget elementor-widget-button\" data-id=\"77000fa5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/start.wpmarmite.com\/?utm_source=wpmarmite&#038;utm_medium=cta&#038;utm_campaign=wpmstart&#038;utm_content=ctawpmstart\" target=\"_blank\" rel=\"sponsored\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Obtenir un site cl\u00e9-en-main \u2192<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-title-color=\"#FDECF4\" class=\"elementor-element elementor-element-17c8376 elementor-widget elementor-widget-heading\" data-id=\"17c8376\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">\u2713 100% propri\u00e9taire de votre site  \u2713 Optimis\u00e9 pour Google  \u2713 S\u00e9curit\u00e9 et support inclus<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-3fa916c3\" data-id=\"3fa916c3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-15639fef elementor-widget elementor-widget-image\" data-id=\"15639fef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1.png\" class=\"attachment-full size-full wp-image-106103\" alt=\"WPMarmite Start\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1-150x150.png 150w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1-120x120.png 120w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"pr\u00e9sentation-du-header-et-de-son-importance\">Pr\u00e9sentation du header et de son importance<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Qu\u2019est-ce qu\u2019un header ?<\/h3>\n\n\n\n<p>Le <em>header<\/em>, en-t\u00eate en fran\u00e7ais, est la premi\u00e8re zone visible d\u00e8s le chargement de la page. Il s\u2019agit d\u2019un espace strat\u00e9gique car il donne en un coup d\u2019\u0153il l\u2019ensemble des informations qui composent l\u2019identit\u00e9 de votre marque (couleurs, logo, typographie, navigation etc.).<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img decoding=\"async\" width=\"1600\" height=\"119\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-elementor.png\" alt=\"Le header WordPress du site Elementor.\" class=\"wp-image-105832\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-elementor.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-elementor-300x22.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-elementor-1024x76.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-elementor-768x57.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-elementor-1536x114.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-elementor-1360x101.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">Le header du site du constructeur de page Elementor<\/figcaption><\/figure>\n\n\n\n<p>G\u00e9n\u00e9ralement, le haut de page, une autre appellation du <em>header<\/em>, est identique sur toutes les pages d\u2019un <a href=\"https:\/\/wpmarmite.com\/guides-wordpress\/creer-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">site WordPress<\/a>. Cependant, vous pouvez aussi trouver des en-t\u00eates diff\u00e9rents sur certaines pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quels \u00e9l\u00e9ments contient-il ?<\/h3>\n\n\n\n<p>Tout d\u2019abord, il faut savoir qu\u2019<strong>il est difficile de trouver un consensus sur la zone exacte occup\u00e9e par un header<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Pour certains, il s\u2019agit uniquement de barre de navigation contenant le logo, les liens de navigation, ou encore un appel \u00e0 l\u2019action. Un peu \u00e0 l\u2019image de ce que propose le site de Beaver Builder :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"160\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-beaver-builder.png\" alt=\"Le header du site Beaver Builder.\" class=\"wp-image-105833\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-beaver-builder.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-beaver-builder-300x30.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-beaver-builder-1024x102.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-beaver-builder-768x77.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-beaver-builder-1536x154.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-beaver-builder-1360x136.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Pour d\u2019autres, le header correspond \u00e0 la partie sup\u00e9rieure de votre site situ\u00e9e au-dessus de la ligne flottaison (tout ce qui est visible avant de scroller). Dans ce cas, il repr\u00e9sente un espace beaucoup plus cons\u00e9quent (on parle aussi de hero-section) :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"906\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/en-tete-wordpress-o2switch.png\" alt=\"L'h\u00e9bergeur o2switch et son en-t\u00eate.\" class=\"wp-image-105834\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/en-tete-wordpress-o2switch.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/en-tete-wordpress-o2switch-300x170.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/en-tete-wordpress-o2switch-1024x580.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/en-tete-wordpress-o2switch-768x435.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/en-tete-wordpress-o2switch-1536x870.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/en-tete-wordpress-o2switch-1360x770.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">L&#8217;en-t\u00eate de l&#8217;h\u00e9bergeur o2switch<\/figcaption><\/figure>\n\n\n\n<p>Quel que soit le cas de figure, un bon header sur WordPress contient g\u00e9n\u00e9ralement plusieurs \u00e9l\u00e9ments incontournables :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>un logo<\/strong> ;<\/li>\n\n\n\n<li><strong>un menu de navigation<\/strong> ;<\/li>\n\n\n\n<li><strong>un appel \u00e0 l\u2019action<\/strong> (<em>call to action<\/em> en anglais, abr\u00e9g\u00e9 en CTA) ;<\/li>\n\n\n\n<li><strong>les \u00e9l\u00e9ments repr\u00e9sentant votre identit\u00e9 visuelle<\/strong> (couleurs, typographie).<\/li>\n<\/ul>\n\n\n\n<p>En fonction de vos objectifs et de la nature de votre activit\u00e9, vous pouvez aussi y inclure des \u00e9l\u00e9ments suppl\u00e9mentaires :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>une ic\u00f4ne repr\u00e9sentant un Panier, si vous disposez d\u2019une boutique en ligne con\u00e7ue avec <a href=\"https:\/\/wpmarmite.com\/woocommerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce<\/a>, par exemple ;<\/li>\n\n\n\n<li>un bouton pour changer de langue si votre site est multilingue ;<\/li>\n\n\n\n<li>une barre de recherche, comme le propose la boutique de th\u00e8mes <a href=\"https:\/\/themeisle.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Themeisle<\/a> ;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"104\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/barre-recherche-themeisle-scaled.jpg\" alt=\"La barre de recherche sur l'en-t\u00eate de Themeisle\" class=\"wp-image-40082\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/barre-recherche-themeisle-scaled.jpg 2048w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/barre-recherche-themeisle-300x15.jpg 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/barre-recherche-themeisle-1024x52.jpg 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/barre-recherche-themeisle-768x39.jpg 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/barre-recherche-themeisle-1536x78.jpg 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/barre-recherche-themeisle-1360x69.jpg 1360w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>des ic\u00f4nes de r\u00e9seaux sociaux ;<\/li>\n\n\n\n<li>des informations de contact (e-mail, num\u00e9ro de t\u00e9l\u00e9phone) ;<\/li>\n\n\n\n<li>un fil d\u2019Ariane.<\/li>\n<\/ul>\n\n\n\n<p>\u00c9videmment, ne les ajoutez pas tous en m\u00eame temps. Choisissez uniquement ceux qui collent \u00e0 vos besoins, afin de ne pas proposer une bouillie indigeste \u00e0 vos visiteurs.<\/p>\n\n\n\n<p><strong>Vous devez rester le plus concis possible, tout en proposant des informations utiles permettant \u00e0 vos visiteurs de comprendre en une poign\u00e9e de secondes ce que vous leur offrez<\/strong>.<\/p>\n\n\n\n<p>Tout en leur offrant les outils n\u00e9cessaires pour effectuer la t\u00e2che qu&#8217;ils sont venus effectuer sur votre site le plus rapidement possible !<\/p>\n\n\n\n<p>Si vous h\u00e9sitez, dites-vous que votre en-t\u00eate doit aider votre lecteur \u00e0 d\u00e9celer qui vous \u00eates (\u00e0 travers votre logo, par exemple), ce que vous proposez (avec vos liens de navigation) et l\u2019action que vous souhaitez lui faire accomplir (ex : vous appeler, r\u00e9server une table, t\u00e9l\u00e9charger un guide PDF, se connecter \u00e0 un espace client).&nbsp;<\/p>\n\n\n<style>.elementor-29957 .elementor-element.elementor-element-129237fd:not(.elementor-motion-effects-element-type-background), .elementor-29957 .elementor-element.elementor-element-129237fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(-90deg, #00579a 3%, #201f98 100%);}.elementor-29957 .elementor-element.elementor-element-129237fd, .elementor-29957 .elementor-element.elementor-element-129237fd > .elementor-background-overlay{border-radius:6px 6px 6px 6px;}.elementor-29957 .elementor-element.elementor-element-129237fd{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:50px;margin-bottom:50px;padding:1.25em 1.25em 1.25em 1.25em;}.elementor-29957 .elementor-element.elementor-element-129237fd > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-29957 .elementor-element.elementor-element-69cf5051 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-29957 .elementor-element.elementor-element-6465cc70 .elementor-heading-title{font-size:1.5em;font-weight:700;line-height:1.1em;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#ffffff;}.elementor-29957 .elementor-element.elementor-element-54c9c7c8{font-size:2rem;color:#ffffff;}.elementor-29957 .elementor-element.elementor-element-58a75293 .elementor-button{font-weight:700;text-transform:uppercase;background-color:#ff5b23;}.elementor-29957 .elementor-element.elementor-element-58a75293 .elementor-button:hover, .elementor-29957 .elementor-element.elementor-element-58a75293 .elementor-button:focus{background-color:#e94b14;}.elementor-29957 .elementor-element.elementor-element-58a75293 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-29957 .elementor-element.elementor-element-56f6038 img{border-radius:6px 6px 6px 6px;}@media(min-width:768px){.elementor-29957 .elementor-element.elementor-element-69cf5051{width:69.048%;}.elementor-29957 .elementor-element.elementor-element-43f20274{width:31.034%;}}\/* Start custom CSS for text-editor, class: .elementor-element-54c9c7c8 *\/.elementor-29957 .elementor-element.elementor-element-54c9c7c8 p{\n    font-size:1.8rem;\n    line-height:1.5em;\n    text-shadow: 0px 0px 6px rgba(0,0,0,0.3);\n}\/* End custom CSS *\/\n\/* Start custom CSS for button, class: .elementor-element-58a75293 *\/.elementor-29957 .elementor-element.elementor-element-58a75293 .elementor-button-link{\n    background-color: #ff5b23 !important;\n    margin:15px 0 0 !important;\n}\n\n.elementor-29957 .elementor-element.elementor-element-58a75293 .elementor-button-link:hover{\n    background-color:#E94B14 !important;\n}\/* End custom CSS *\/<\/style>\t\t<div data-elementor-type=\"section\" data-elementor-id=\"29957\" class=\"elementor elementor-29957\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section data-dce-background-color=\"#00579a\" class=\"elementor-section elementor-top-section elementor-element elementor-element-129237fd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"129237fd\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-69cf5051\" data-id=\"69cf5051\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div data-dce-title-color=\"#ffffff\" class=\"elementor-element elementor-element-6465cc70 elementor-widget elementor-widget-heading\" data-id=\"6465cc70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">H\u00e9bergez votre site chez o2switch<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-text-color=\"#ffffff\" class=\"elementor-element elementor-element-54c9c7c8 elementor-widget elementor-widget-text-editor\" data-id=\"54c9c7c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Faites comme WPMarmite, choisissez o2switch. Non seulement <strong>les performances sont au rendez-vous<\/strong> mais le support est exceptionnel.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58a75293 elementor-widget elementor-widget-button\" data-id=\"58a75293\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/link.wpmarmite.com\/cta-o2switch\" target=\"_blank\" id=\"CTA_O2switchContentFR\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">ESSAYEZ O2SWITCH<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-43f20274\" data-id=\"43f20274\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-56f6038 elementor-widget elementor-widget-image\" data-id=\"56f6038\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"422\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/o2switch-logo-tigre.png\" class=\"attachment-full size-full wp-image-39721\" alt=\"o2switch\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/o2switch-logo-tigre.png 450w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/o2switch-logo-tigre-300x281.png 300w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n\n<h3 class=\"wp-block-heading\">Pourquoi est-ce un \u00e9l\u00e9ment \u00e0 ne surtout pas n\u00e9gliger sur votre site ?<\/h3>\n\n\n\n<p>Ce savant m\u00e9lange n\u2019est pas simple \u00e0 obtenir, mais ne n\u00e9gligez surtout pas votre header ! En d\u00e9barquant sur votre site, c\u2019est lui que vos visiteurs vont imm\u00e9diatement remarquer.<\/p>\n\n\n\n<p>Et c\u2019est souvent \u00e0 partir de lui qu\u2019ils vont se forger une premi\u00e8re opinion sur vous, rappelez-vous. S\u2019il est bien con\u00e7u et r\u00e9pond aux attentes de vos visiteurs, vous parviendrez \u00e0 attirer leur attention et \u00e0 les inciter \u00e0 poursuivre leur navigation au sein de votre\/vos page(s).<\/p>\n\n\n\n<p>Mais pour cela, vous devez frapper fort d\u2019entr\u00e9e. <strong>En effet, <strong>un internaute met \u00e0 peine quelques secondes pour d\u00e9terminer s\u2019il appr\u00e9cie un site<\/strong>.<\/strong><\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"140\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/ice-cube.gif\" alt=\"Un homme a l'air \u00e9tonn\u00e9\" class=\"wp-image-40083\" style=\"width:378px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Et si l\u2019on prend aussi en compte qu\u2019il se balade en moyenne <a href=\"https:\/\/blog.hubspot.com\/marketing\/chartbeat-website-engagement-data-nj\" target=\"_blank\" rel=\"noreferrer noopener\">moins de 15 secondes sur votre site<\/a>, vous disposez de tr\u00e8s peu de temps pour abattre vos meilleures cartes.<\/p>\n\n\n\n<p>Un peu plus tard dans cet article, on vous livre d\u2019ailleurs tous nos conseils pour cr\u00e9er un header sur WordPress au top du top.<\/p>\n\n\n\n<p><strong>Un bon header, c\u2019est aussi l\u2019assurance de r\u00e9duire <\/strong><a href=\"https:\/\/wpmarmite.com\/taux-rebond-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>votre taux de rebond<\/strong><\/a> afin de ne pas trop p\u00e9naliser votre r\u00e9f\u00e9rencement, tout en optimisant vos conversions (des actions pr\u00e9cises que vous souhaitez que vos visiteurs accomplissent).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"comment-cr\u00e9er-et-personnaliser-un-header-sur-wordpress\">Comment cr\u00e9er et personnaliser un header sur WordPress ?<\/h2>\n\n\n\n<p>Apr\u00e8s la th\u00e9orie, il est temps de passer \u00e0 la pratique. Dans cette partie, on vous d\u00e9taille 5 fa\u00e7ons de cr\u00e9er et personnaliser votre header sur WordPress.&nbsp;<\/p>\n\n\n\n<p>Vous allez voir, il n\u2019y a pas besoin de conna\u00eetre le code pour vous en sortir comme un chef.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser l\u2019\u00c9diteur de site pour personnaliser votre header sur WordPress<\/h3>\n\n\n\n<p>Si vous utilisez un th\u00e8me WordPress bas\u00e9s sur des blocs (ou th\u00e8me FSE), vous allez pouvoir utiliser l\u2019\u00c9diteur de site de WordPress pour personnaliser votre header.<\/p>\n\n\n\n<p>Alex vous explique toute la marche \u00e0 suivre dans ce bref tutoriel vid\u00e9o :<\/p>\n\n\n\n<iframe width=\"504\" height=\"896\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/QTGrRSUhDCM\" title=\"Comment personnaliser l&#39;en-t\u00eate d&#39;un site WordPress avec le FSE ?\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Passer par l\u2019Outil de personnalisation pour personnaliser votre header sur WordPress<\/h3>\n\n\n\n<p>Vous n\u2019utilisez pas de th\u00e8me bas\u00e9 sur des blocs ? Pas de probl\u00e8me, vous allez pouvoir personnaliser votre header via l\u2019Outil de personnalisation (<em>Customizer<\/em>).<\/p>\n\n\n\n<p>Ce dernier, accessible depuis le menu <em>Apparence<\/em> &gt; <em>Personnaliser<\/em>, vous permet de proc\u00e9der \u00e0 des r\u00e9glages de base sur votre th\u00e8me en temps r\u00e9el.<\/p>\n\n\n\n<p>De base, voici ce que vous serez au minimum en mesure de faire :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ajouter un logo<\/strong> ;<\/li>\n\n\n\n<li><strong>renseigner le titre de votre site<\/strong> ;<\/li>\n\n\n\n<li><strong>inclure un slogan<\/strong> ;<\/li>\n\n\n\n<li><strong>int\u00e9grer une ic\u00f4ne de site, aussi appel\u00e9e <em>favicon<\/em><\/strong>. Il s\u2019agit d\u2019une ic\u00f4ne (souvent la version miniature de votre logo) qui s\u2019affiche sur les onglets d\u2019un navigateur web.<\/li>\n<\/ul>\n\n\n\n<p>Notez que l\u2019emplacement des diff\u00e9rents r\u00e9glages d\u00e9pendent du th\u00e8me que vous utilisez.<\/p>\n\n\n\n<p>Si j\u2019active le th\u00e8me <a href=\"https:\/\/wpmarmite.com\/astra\/\">Astra<\/a> par exemple, les options de personnalisation de l\u2019en-t\u00eate se trouvent dans le sous-menu \u00ab En-t\u00eate \u00bb, qui contient lui-m\u00eame 4 sous-menus suppl\u00e9mentaires avec des dizaines et des dizaines d\u2019options.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"722\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/header-astra.gif\" alt=\"Le header du th\u00e8me Astra\" class=\"wp-image-40085\" style=\"width:250px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Vous pourrez par exemple agir sur la largeur du logo, la mise en page du header, les couleurs et l\u2019arri\u00e8re-plan.<\/p>\n\n\n\n<p>En r\u00e9sum\u00e9, si vous suivez : le header d\u2019un site est 100 % tributaire du th\u00e8me qu\u2019il utilise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Se servir des r\u00e9glages du th\u00e8me<\/h3>\n\n\n\n<p>C\u2019est la raison pour laquelle certains d\u2019entre eux utilisent tr\u00e8s peu, voire m\u00eame pas du tout, l\u2019Outil de personnalisation.<\/p>\n\n\n\n<p>C\u2019est ainsi que fonctionne par exemple <a href=\"https:\/\/wpmarmite.com\/en\/avada\/\" target=\"_blank\" rel=\"noreferrer noopener\">Avada, le th\u00e8me WordPress premium le plus vendu sur la plateforme ThemeForest<\/a>. Dans son cas, le <em>Customizer<\/em> permet seulement de modifier l\u2019image d\u2019en-t\u00eate, ce qui ne vous am\u00e8nera pas bien loin.<\/p>\n\n\n\n<p>Avec lui, la personnalisation de votre header a lieu sur une page de r\u00e9glages sp\u00e9cifique disponible sur l\u2019interface d\u2019administration dudit th\u00e8me. En y acc\u00e9dant, vous pouvez par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>choisir parmi plusieurs mises en page<\/strong> (layouts) pour votre en-t\u00eate sur WordPress ;<\/li>\n\n\n\n<li><strong>modifier la position du header<\/strong> (gauche, droite, en haut) ;<\/li>\n\n\n\n<li><strong>ajouter des ic\u00f4nes de r\u00e9seaux sociaux et des informations de contact<\/strong> ;<\/li>\n\n\n\n<li><strong>personnaliser le style de l\u2019en-t\u00eate<\/strong> (couleurs, bordure, largeur etc.).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">B\u00e9n\u00e9ficier de \u00ab l\u2019appui \u00bb d\u2019un constructeur de page<\/h3>\n\n\n\n<p>Au-del\u00e0 de l\u2019Outil de personnalisation et des r\u00e9glages sp\u00e9cifiques propos\u00e9s par votre th\u00e8me, un en-t\u00eate peut aussi \u00eatre cr\u00e9\u00e9 et modifi\u00e9 gr\u00e2ce \u00e0 un constructeur de page (page builder), \u00e0 condition qu\u2019il vous permette d\u2019agir sur cette zone sp\u00e9cifique.<\/p>\n\n\n\n<p>C\u2019est notamment le cas d\u2019<a rel=\"noreferrer noopener\" href=\"https:\/\/wpmarmite.com\/elementor\/\" target=\"_blank\">Elementor Pro<\/a>, du <a rel=\"noreferrer noopener\" href=\"https:\/\/wpmarmite.com\/divi\/\" target=\"_blank\">Divi Builder<\/a>, de <a href=\"https:\/\/link.wpmarmite.com\/beaverbuilder\" target=\"_blank\" rel=\"noreferrer noopener\">Beaver Builder<\/a> ou encore de <a rel=\"noreferrer noopener\" href=\"https:\/\/wpmarmite.com\/en\/thrive-architect\/\" target=\"_blank\">Thrive Architect<\/a>.<\/p>\n\n\n\n<p>Pour tout savoir sur les page builders et d\u00e9couvrir un comparatif de neuf d\u2019entre eux, <a href=\"https:\/\/wpmarmite.com\/meilleur-page-builder-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">consultez notre ressource d\u00e9di\u00e9e<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser une extension<\/h3>\n\n\n\n<p>Sans transition, passons \u00e0 la troisi\u00e8me option pour personnaliser votre header sur WordPress : l\u2019utilisation d\u2019une extension.<\/p>\n\n\n\n<p>Vous servir d\u2019un plugin (le mot anglais pour d\u00e9signer une extension) rec\u00e8le plusieurs avantages :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>c\u2019est simple, rapide et efficace car vous ne touchez pas au code<\/strong>. Il s\u2019agit donc d\u2019une solution souvent pl\u00e9biscit\u00e9e par les d\u00e9butants ;<\/li>\n\n\n\n<li><strong>vous limitez le risque d\u2019erreurs et de bugs<\/strong> par rapport \u00e0 l\u2019ajout de code manuel ;<\/li>\n\n\n\n<li>v<strong>ous pouvez disposer d\u2019options de personnalisation suppl\u00e9mentaires<\/strong> que les r\u00e9glages de votre th\u00e8me ne proposent pas ;<\/li>\n\n\n\n<li><strong>vous vous assurez de ne pas perdre vos changements<\/strong> si vous d\u00e9cidez d\u2019activer un nouveau th\u00e8me dans le futur.<\/li>\n<\/ul>\n\n\n\n<p>Pour simplifier, on a s\u00e9par\u00e9 les extensions en deux familles, comme vous allez le voir.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"225\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/mariah-carey-appludissements.gif\" alt=\"Mariah Carey applaudit\" class=\"wp-image-40087\"\/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">Les extensions g\u00e9n\u00e9ralistes pour ajouter du code<\/h4>\n\n\n\n<p>La premi\u00e8re famille de plugins ci-dessous n\u2019est pas destin\u00e9e \u00e0 modifier visuellement l\u2019en-t\u00eate de votre site.<\/p>\n\n\n\n<p>Ces extensions vous aideront \u00e0 ajouter des morceaux de code sp\u00e9cifiques, tels que des codes de suivi pour lier <a rel=\"noreferrer noopener\" href=\"https:\/\/wpmarmite.com\/google-analytics-wordpress\/\" target=\"_blank\">Google Analytics<\/a> et le <a rel=\"noreferrer noopener\" href=\"https:\/\/wpmarmite.com\/pixel-facebook\/\" target=\"_blank\">pixel Facebook<\/a>, ajouter des scripts et autres.<\/p>\n\n\n\n<p>On vous a s\u00e9lectionn\u00e9 trois des plus populaires disponibles sur le r\u00e9pertoire officiel WordPress (n\u2019en utilisez qu\u2019un chez vous) :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/fr.wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Code<\/a> (<span class=\"dotorg-data-active-installs\">3M+<\/span> installations actives)<\/li>\n\n\n\n<li><a href=\"https:\/\/fr.wordpress.org\/plugins\/header-footer\/\" target=\"_blank\" rel=\"noreferrer noopener\">Head, Footer and Post Injections<\/a> (<span class=\"dotorg-data-active-installs\">300K+<\/span> installations actives)<\/li>\n\n\n\n<li><a href=\"https:\/\/fr.wordpress.org\/plugins\/header-footer-code-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Header Footer Code Manager<\/a> (<span class=\"dotorg-data-active-installs\">600K+<\/span> installations actives)<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Les extensions pour rendre votre header sur WordPress plus attractif&nbsp;<\/h4>\n\n\n\n<p>Vous d\u00e9sirez aussi jouer avec l\u2019aspect visuel de votre header sur WordPress ? On a plusieurs recommandations \u00e0 vous faire. \ud83d\ude09<\/p>\n\n\n\n<p>Pour commencer, <strong>vous pouvez rendre votre en-t\u00eate <em>sticky<\/em>, c\u2019est-\u00e0-dire fixe au scroll<\/strong>.<\/p>\n\n\n\n<p>Cela signifie qu\u2019il sera toujours visible lorsque votre visiteur va scroller sur votre site, et peut \u00eatre utile si vos utilisateurs ont besoin d&#8217;avoir acc\u00e8s \u00e0 la navigation principale \u00e0 tout moment.<\/p>\n\n\n\n<p>L\u2019exp\u00e9rience utilisateur s\u2019en trouve renforc\u00e9e puisque l\u2019internaute dispose toujours d\u2018une boussole pour \u00eatre guid\u00e9, si jamais il lui arrive de se perdre.<\/p>\n\n\n\n<p>Pour impl\u00e9menter un sticky menu, vous pouvez activer, au choix, l\u2019une des deux extensions suivantes :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/fr.wordpress.org\/plugins\/sticky-menu-or-anything-on-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sticky Menu<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/fr.wordpress.org\/plugins\/mystickymenu\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sticky Menu on Scroll, Sticky Header, Floating Notification Bar for Any Theme \u2013 myStickymenu<\/a><\/li>\n<\/ul>\n\n\n\n<p>Personnellement, j\u2019ai une petite pr\u00e9f\u00e9rence pour la seconde, que je trouve plus simple \u00e0 prendre en main.<\/p>\n\n\n\n<p>Ensuite, que diriez-vous d\u2019ajouter une image d\u2019en-t\u00eate personnalis\u00e9e propre \u00e0 chaque article et\/ou \u00e0 chaque page ? C\u2019est la promesse faite par <a href=\"https:\/\/fr.wordpress.org\/plugins\/unique-headers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Unique Headers<\/a>.<\/p>\n\n\n\n<p>Cela peut \u00eatre int\u00e9ressant pour attirer l\u2019oeil de vos lecteurs, mais prenez quand m\u00eame soin de garder une certaine uniformit\u00e9 tout au long de vos pages.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-image-recette\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"624\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/pluin-unique-header-1360x624.jpg\" alt=\"L'extension Unique Headers\" class=\"wp-image-40088\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/pluin-unique-header-1360x624.jpg 1360w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/pluin-unique-header-300x138.jpg 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/pluin-unique-header-1024x470.jpg 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/pluin-unique-header-768x352.jpg 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/pluin-unique-header-1536x705.jpg 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/pluin-unique-header.jpg 1922w\" sizes=\"(max-width: 1360px) 100vw, 1360px\" \/><\/figure>\n<\/div>\n\n\n<p>Enfin, je suis aussi tomb\u00e9 au cours de mes recherches sur l\u2019extension <a href=\"https:\/\/fr.wordpress.org\/plugins\/pearl-header-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pearl Header Builder<\/a>. Elle permet \u00e0 la fois de cr\u00e9er un header en partant de z\u00e9ro, ou alors d\u2019utiliser des mod\u00e8les par d\u00e9faut \u00e0 modifier \u00e0 votre guise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passer par le code<\/h3>\n\n\n\n<p>Si vous touchez votre bille en d\u00e9veloppement web, <strong>il est bien s\u00fbr possible de personnaliser votre haut de page en passant par le code<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Pour y mettre votre patte, vous allez devoir intervenir sur deux fichiers. Le premier, <code>style.css<\/code>, agit sur l\u2019aspect visuel de votre header.&nbsp;<\/p>\n\n\n\n<p>Vous voulez modifier finement l&#8217;espacement entre les \u00e9l\u00e9ments de votre menu, modifier la taille de votre logo et de votre police, ou encore ajouter une image d\u2019arri\u00e8re-plan : c\u2019est ce fichier que vous allez utiliser.<\/p>\n\n\n\n<p class=\"has-info-background-color has-background\"><em>Si vous souhaitez vous y coller, pensez d\u2019abord \u00e0 cr\u00e9er un th\u00e8me enfant, si ce n\u2019est pas d\u00e9j\u00e0 fait. <\/em><a href=\"https:\/\/wpmarmite.com\/child-theme-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Un th\u00e8me enfant<\/em><\/a><em> (child theme, en anglais) est un sous-th\u00e8me qui h\u00e9rite de toutes les fonctionnalit\u00e9s et du style du th\u00e8me principal, aussi appel\u00e9 th\u00e8me parent. En utilisant un th\u00e8me enfant, vous vous assurez de ne pas perdre les changements effectu\u00e9s (ex : vos modifications CSS) lors des prochaines mises \u00e0 jour du th\u00e8me principal.<\/em><\/p>\n\n\n<style>.elementor-100617 .elementor-element.elementor-element-78258b9e:not(.elementor-motion-effects-element-type-background), .elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#091032;}.elementor-100617 .elementor-element.elementor-element-78258b9e, .elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-background-overlay{border-radius:6px 6px 6px 6px;}.elementor-100617 .elementor-element.elementor-element-78258b9e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:50px;margin-bottom:50px;padding:1.25em 1.25em 1.25em 1.25em;}.elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-100617 .elementor-element.elementor-element-4c0ab6e7.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7.elementor-column.elementor-element[data-element_type=\"column\"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated, .elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated > .elementor-background-overlay, .elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-background-slideshow{border-radius:6px 6px 6px 6px;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated{margin:0em 0em 0em 0em;--e-column-margin-right:0em;--e-column-margin-left:0em;}.elementor-100617 .elementor-element.elementor-element-267b74cf .elementor-heading-title{font-size:1.5em;font-weight:700;line-height:1.1em;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#ffffff;}.elementor-100617 .elementor-element.elementor-element-4b4f4f84{text-align:start;font-size:2rem;color:#ffffff;}.elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button{font-weight:700;text-transform:uppercase;background-color:#ED207B;}.elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button:hover, .elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button:focus{background-color:#D01167;}.elementor-100617 .elementor-element.elementor-element-77000fa5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-100617 .elementor-element.elementor-element-17c8376 .elementor-heading-title{font-size:0.75em;font-weight:bold;font-style:italic;color:#FDECF4;}.elementor-100617 .elementor-element.elementor-element-17c8376 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-100617 .elementor-element.elementor-element-15639fef img{max-width:150px;}.elementor-100617 .elementor-element.elementor-element-15639fef > .elementor-widget-container{margin:0em 0em 0em 0em;}@media(max-width:767px){.elementor-100617 .elementor-element.elementor-element-15639fef{text-align:start;}.elementor-100617 .elementor-element.elementor-element-15639fef img{max-width:80px;}.elementor-100617 .elementor-element.elementor-element-15639fef > .elementor-widget-container{padding:0em 0em 1em 0em;}}@media(min-width:768px){.elementor-100617 .elementor-element.elementor-element-4c0ab6e7{width:75%;}.elementor-100617 .elementor-element.elementor-element-3fa916c3{width:15.816%;}}\/* Start custom CSS for text-editor, class: .elementor-element-4b4f4f84 *\/.elementor-100617 .elementor-element.elementor-element-4b4f4f84 p{\n    font-size:1.8rem;\n    line-height:1.5em;\n    text-shadow: 0px 0px 6px rgba(0,0,0,0.3);\n}\/* End custom CSS *\/<\/style>\t\t<div data-elementor-type=\"section\" data-elementor-id=\"100617\" class=\"elementor elementor-100617\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section data-dce-background-color=\"#091032\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-78258b9e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78258b9e\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4c0ab6e7\" data-id=\"4c0ab6e7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div data-dce-title-color=\"#ffffff\" class=\"elementor-element elementor-element-267b74cf elementor-widget elementor-widget-heading\" data-id=\"267b74cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Un site vitrine dans les cartons ? On s&#8217;en occupe !<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-text-color=\"#ffffff\" class=\"elementor-element elementor-element-4b4f4f84 elementor-widget elementor-widget-text-editor\" data-id=\"4b4f4f84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Concevoir un site WordPress de A \u00e0 Z n&#8217;est pas de tout repos. Entre les choix techniques, graphiques et marketing, il y a de quoi se perdre&#8230;<\/p>\n<p>WPMarmite Start simplifie le processus pour vous permettre de vous concentrer sur l&#8217;essentiel : votre activit\u00e9.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77000fa5 elementor-mobile-align-justify elementor-widget elementor-widget-button\" data-id=\"77000fa5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/start.wpmarmite.com\/?utm_source=wpmarmite&#038;utm_medium=cta&#038;utm_campaign=wpmstart&#038;utm_content=ctawpmstart\" target=\"_blank\" rel=\"sponsored\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Obtenir un site cl\u00e9-en-main \u2192<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-title-color=\"#FDECF4\" class=\"elementor-element elementor-element-17c8376 elementor-widget elementor-widget-heading\" data-id=\"17c8376\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">\u2713 100% propri\u00e9taire de votre site  \u2713 Optimis\u00e9 pour Google  \u2713 S\u00e9curit\u00e9 et support inclus<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-3fa916c3\" data-id=\"3fa916c3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-15639fef elementor-widget elementor-widget-image\" data-id=\"15639fef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1.png\" class=\"attachment-full size-full wp-image-106103\" alt=\"WPMarmite Start\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1-150x150.png 150w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1-120x120.png 120w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n\n<p>En principe, si les modifications op\u00e9r\u00e9es sur le fichier <code>style.css<\/code> sont juste d\u2019ordre cosm\u00e9tiques, cela devrait suffire dans la grande majorit\u00e9 des cas.<\/p>\n\n\n\n<p>Pour les plus t\u00e9m\u00e9raires d\u2019entre-vous, sachez qu\u2019il est possible d\u2019aller encore plus loin en ajoutant des <em><a href=\"https:\/\/wpmarmite.com\/snippets\/\" target=\"_blank\" rel=\"noreferrer noopener\">snippets<\/a><\/em> (morceaux de code) dans votre fichier <code>functions.php<\/code> (vous pouvez aussi modifier le fichier <code>header.php<\/code> du th\u00e8me enfant de votre site WordPress).<\/p>\n\n\n\n<p>F\u00e9licitations : \u00e0 pr\u00e9sent, vous \u00eates en mesure de cr\u00e9er et de personnaliser un header sur WordPress les doigts dans le nez.&nbsp;<\/p>\n\n\n\n<p>Pour \u00eatre irr\u00e9prochable sur tous les points, d\u00e9couvrez dans la partie suivante tous nos conseils pour optimiser votre en-t\u00eate.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"les-bonnes-pratiques-pour-optimiser-votre-header-sur-wordpress\">Les bonnes pratiques pour optimiser votre header sur WordPress<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre l\u2019accent sur la lisibilit\u00e9<\/h3>\n\n\n\n<p>Un bon header doit \u00eatre concis, pr\u00e9cis et aider vos visiteurs \u00e0 obtenir rapidement l\u2019information dont ils ont besoin.&nbsp;<\/p>\n\n\n\n<p>Un effort important doit \u00eatre accord\u00e9 \u00e0 la lisibilit\u00e9. Pour cela, vous pouvez actionner plusieurs leviers, \u00e0 commencer par <strong>l\u2019utilisation d\u2019une police d\u2019\u00e9criture adapt\u00e9e \u00e0 la lecture sur \u00e9cran<\/strong>.&nbsp;<\/p>\n\n\n\n<p>En r\u00e8gle g\u00e9n\u00e9rale, les polices dites sans serif (sans empattement) sont r\u00e9put\u00e9es plus faciles \u00e0 lire sur le web que les polices serif (avec empattement). Quoi qu\u2019il en soit, ne choisissez pas une police trop d\u00e9cal\u00e9e, plus difficile \u00e0 d\u00e9chiffrer (sauf si votre site s\u2019y pr\u00eate), et n\u2019en utilisez pas plus de deux ou trois sur la totalit\u00e9 de votre site.<\/p>\n\n\n\n<p>Pour vous aider \u00e0 les combiner, vous pouvez vous servir d\u2019outils comme <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Fonts<\/a> et <a href=\"https:\/\/fontpair.co\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Pair<\/a>.<\/p>\n\n\n\n<p>Ensuite, <strong>veillez \u00e0 a\u00e9rer et \u00e0 espacer les \u00e9l\u00e9ments composant votre header<\/strong>. L\u2019id\u00e9e consiste \u00e0 ne pas se retrouver avec un amas d\u2019infos. Pour savoir si vous allez dans la bonne direction, mettez-vous simplement \u00e0 la place d\u2019un visiteur lambda : que penseriez-vous de l\u2019en-t\u00eate de tel ou tel site si vous y naviguez dessus ?<\/p>\n\n\n\n<p>Est-il trop charg\u00e9 ? A contrario, est-il trop vide ? Puis rectifiez en fonction.<\/p>\n\n\n\n<p>Enfin, si vous incorporez une image ou une vid\u00e9o d\u2019arri\u00e8re-plan, on vous conseille de suivre les directives suivantes :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Privil\u00e9giez des photos de qualit\u00e9<\/strong>, si possible prises par vos soins. Si vous ne pouvez pas le faire, s\u00e9lectionnez-les avec soin sur <a href=\"https:\/\/wpmarmite.com\/images-libres-droit-blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">des banques d\u2019images libres de droit<\/a>.<\/li>\n\n\n\n<li><strong>Pensez aussi aux illustrations<\/strong>, qui peuvent parfois mieux clarifier une id\u00e9e ou un concept qu\u2019une image. On en retrouve pas mal sur des sites d\u00e9di\u00e9s au marketing, au SEO etc.<\/li>\n\n\n\n<li><strong>Si votre choix se porte sur une vid\u00e9o d\u2019arri\u00e8re-plan, attention \u00e0 son poids<\/strong>. Une vid\u00e9o trop lourde peut ralentir le temps de chargement de votre site. Privil\u00e9giez une vid\u00e9o h\u00e9berg\u00e9e sur un serveur externe (ex : ceux de YouTube) et pensez \u00e0 la jouer en <em>autoplay<\/em> (lecture automatique) et sans le son.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Se concentrer sur les \u00e9l\u00e9ments incontournables<\/h3>\n\n\n\n<p>Au d\u00e9but de cet article, je vous ai livr\u00e9 une liste des quelques \u00e9l\u00e9ments \u00e0 faire figurer d\u2019urgence dans votre header, comme le logo par exemple.<\/p>\n\n\n\n<p>Ensuite, rappelez-vous : \u00e0 vous d\u2019en agr\u00e9ger d\u2019autres en fonction de ce que r\u00e9clame votre activit\u00e9. Si, par exemple, vous \u00eates un artisan qui souhaite \u00eatre contact\u00e9 par un prospect, il me semble opportun d\u2019y faire figurer vos coordonn\u00e9es afin d\u2019\u00eatre contact\u00e9 : num\u00e9ro de t\u00e9l\u00e9phone, adresse e-mail, horaires d\u2019ouverture etc.<\/p>\n\n\n\n<p><strong>Pour attirer l\u2019attention, ne vous privez pas d\u2019utiliser un bouton d\u2019appel \u00e0 l\u2019action, lorsque cela est l\u00e9gitime<\/strong>. Un bouton d\u2019appel \u00e0 l\u2019action (CTA) est un bouton cliquable qui incite le visiteur \u00e0 effectuer une action pr\u00e9cise (ex : t\u00e9l\u00e9charger un ebook, effectuer un paiement, d\u00e9couvrir un produit).<\/p>\n\n\n\n<p>Par exemple, l\u2019h\u00e9bergeur o2switch a choisi de placer un lien \u00ab Commander \u00bb au sein d\u2019un rectangle orang\u00e9 sur la partie droite de son header.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"102\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-o2switch-commander.png\" alt=\"Bouton \u00ab Commander \u00bb sur le site d'o2switch.\" class=\"wp-image-105839\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-o2switch-commander.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-o2switch-commander-300x19.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-o2switch-commander-1024x65.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-o2switch-commander-768x49.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-o2switch-commander-1536x98.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-o2switch-commander-1360x87.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Concevoir un menu app\u00e9tissant<\/h3>\n\n\n\n<p>La navigation joue un r\u00f4le majeur au sein de votre en-t\u00eate : c\u2019est gr\u00e2ce \u00e0 elle que vous allez permettre \u00e0 vos visiteurs de se rep\u00e9rer, mais aussi les guider vers vos pages strat\u00e9giques.<\/p>\n\n\n\n<p>Avec toujours l\u2019imp\u00e9ratif de proposer quelque chose de simple et concis, limitez le nombre de liens (renvoyant g\u00e9n\u00e9ralement vers des pages-cl\u00e9s) \u00e0 6 ou 7 au maximum.&nbsp;<\/p>\n\n\n\n<p>A vous de faire des choix. Pour un site vitrine classique, vous pouvez par exemple concevoir un menu redirigeant vers les pages \u00c0 Propos, Services, Blog et Contact.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"235\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-bsa-web.png\" alt=\"Le header WordPress de l'agence BSA Web.\" class=\"wp-image-105840\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-bsa-web.png 1999w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-bsa-web-300x35.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-bsa-web-1024x120.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-bsa-web-768x90.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-bsa-web-1536x181.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-bsa-web-1360x160.png 1360w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><figcaption class=\"wp-element-caption\">L&#8217;en-t\u00eate de <a href=\"https:\/\/wpmarmite.com\/wordpress\/agence\/bsa-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">l&#8217;agence WordPress BSA Web<\/a><\/figcaption><\/figure>\n\n\n\n<p>Si vous souhaitez en savoir plus sur le th\u00e8me des menus, votre chef cuistot pr\u00e9f\u00e9r\u00e9 vous a concoct\u00e9 une vid\u00e9o remplie d\u2019ingr\u00e9dients pratiques :<\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<script>document.addEventListener('DOMContentLoaded', function() {(tarteaucitron.job = tarteaucitron.job || []).push('youtube');});<\/script><div class=\"youtube_player\" videoID=\"6CBvKjbuROM\" width=\"100%\" height=\"100%\" style=\"height:50vw\" theme=\"light\" rel=\"0\" controls=\"1\" showinfo=\"1\" autoplay=\"0\"><\/div>\n<\/div><\/figure>\n\n\n\n<p>Et pour compl\u00e9ter \u00e7a, consultez cet article au nom \u00e9vocateur : <a href=\"https:\/\/wpmarmite.com\/menu-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">comment g\u00e9rer et optimiser les menus de WordPress comme un pro<\/a>.<\/p>\n\n\n\n<p>Concernant la pr\u00e9sentation de vos liens de navigation inclus dans votre menu, plusieurs options sont disponibles :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Afin de ne pas trop le surcharger, <strong>vous pouvez par exemple mettre sur pied <a href=\"https:\/\/wpmarmite.com\/menu-deroulant-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">un menu d\u00e9roulant<\/a><\/strong>.&nbsp;<\/li>\n\n\n\n<li>Si vous h\u00e9bergez de tr\u00e8s nombreux contenus (produits, articles de blog etc.), <a href=\"https:\/\/wpmarmite.com\/mega-menu-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>un m\u00e9ga menu pourrait \u00eatre appropri\u00e9<\/strong><\/a>.<\/li>\n\n\n\n<li>Si vous voulez apporter une petite touche design, <strong>vous pouvez surfer sur la vague des menus hamburgers<\/strong>, \u00e0 condition que cela ne d\u00e9t\u00e9riore pas l\u2019exp\u00e9rience utilisateur. Dans ce cas, le menu se r\u00e9v\u00e8le uniquement lorsque l\u2019utilisateur le survole ou clique dessus.<\/li>\n\n\n\n<li>Enfin, <strong>ajouter des effets sur les liens du menu peut en faciliter la lecture et aider votre visiteur \u00e0 s\u2019y rep\u00e9rer<\/strong>. On pense par exemple \u00e0 des effets au survol de la souris (<em>hover<\/em>) comme le changement de la couleur d\u2019un lien ou le soulignement. Mais attention \u00e0 leur apparence sur les supports mobile (smartphone et tablette).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1832\" height=\"146\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/header-wordpress-wpmarmite-survol.gif\" alt=\"Les effets au survol sur l'en-t\u00eate de WPMarmite.\" class=\"wp-image-105841\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Penser responsive<\/h3>\n\n\n\n<p>Logiquement, le header de votre site WordPress ne s\u2019affichera pas de la m\u00eame fa\u00e7on en fonction du support utilis\u00e9 (ordinateur, smartphone, tablette).&nbsp;<\/p>\n\n\n\n<p>Sur un grand \u00e9cran, il sera le plus souvent au format horizontal. <strong>Plus la taille de l\u2019\u00e9cran diminue, plus les \u00e9l\u00e9ments qui le composent auront tendance \u00e0 se superposer de fa\u00e7on verticale<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Jusque-l\u00e0, pas de souci majeur \u00e0 relever. La tr\u00e8s grande majorit\u00e9 des th\u00e8mes WordPress sont responsive par nature. <strong>Cela signifie qu\u2019ils sont capables d\u2019adapter tout seuls le contenu que vous cr\u00e9ez \u00e0 la taille de l\u2019\u00e9cran, afin qu\u2019il soit toujours lisible par l\u2019internaute<\/strong>.<\/p>\n\n\n\n<p>Parfois, \u00e7a ne se passe pas toujours comme pr\u00e9vu, donc vous devrez proc\u00e9der \u00e0 quelques petits ajustements. Soit en passant par les r\u00e9glages du th\u00e8me, soit en utilisant une pinc\u00e9e de code CSS.<\/p>\n\n\n\n<p>Un bon conseil : ne faites pas l\u2019impasse sur l\u2019aspect responsive de votre header, et plus largement de votre site en g\u00e9n\u00e9ral. <strong>Le smartphone est d\u00e9sormais l\u2019outil le plus utilis\u00e9 par les Fran\u00e7ais pour se connecter \u00e0 internet<\/strong>.<\/p>\n\n\n\n<p>Pour vous aider \u00e0 voir \u00e0 quoi ressemble votre en-t\u00eate sur mobile ou tablette, vous pouvez vous servir des outils suivants :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>l\u2019Outil de personnalisation de WP dispose de 3 petites ic\u00f4nes<\/strong> pour simuler l\u2019affichage de votre en-t\u00eate sur ordinateur, smartphone et tablette. Pratique pour vous faire une premi\u00e8re id\u00e9e. Si vous utilisez un constructeur de page, vous retrouverez le m\u00eame mode de fonctionnement chez la plupart d\u2019entre-eux. V\u00e9rifiez par exemple que les diff\u00e9rents \u00e9l\u00e9ments ne soient pas trop petits, les liens pas trop coll\u00e9s et que la taille verticale du header ne soit pas trop grande.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"1227\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/outil-personnalisation-wordpress-responsive.png\" alt=\"L'aspect responsive sur l'Outil de personnalisation de WordPress.\" class=\"wp-image-105842\" style=\"width:273px;height:auto\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/outil-personnalisation-wordpress-responsive.png 513w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/outil-personnalisation-wordpress-responsive-125x300.png 125w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/outil-personnalisation-wordpress-responsive-428x1024.png 428w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>l\u2019\u00c9diteur de site de WordPress dispose \u00e9galement de trois options pour visualiser l\u2019affichage de votre en-t\u00eate sur ordinateur, tablette ou mobile ;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"828\" height=\"324\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/editeur-site-header-wordpress-responsive.png\" alt=\"L'\u00c9diteur de site dispose d'options pour g\u00e9rer le responsive de votre header WordPress.\" class=\"wp-image-105843\" style=\"width:570px;height:auto\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/editeur-site-header-wordpress-responsive.png 828w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/editeur-site-header-wordpress-responsive-300x117.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/editeur-site-header-wordpress-responsive-768x301.png 768w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>De fa\u00e7on globale, il est possible de v\u00e9rifier l\u2019aspect responsive d\u2019un site web \u00e0 l&#8217;aide du <a href=\"https:\/\/search.google.com\/test\/mobile-friendly?hl=fr\" target=\"_blank\" rel=\"noreferrer noopener\">Test d\u2019optimisation mobile de Google<\/a>.<\/li>\n<\/ul>\n\n\n<style>.elementor-100617 .elementor-element.elementor-element-78258b9e:not(.elementor-motion-effects-element-type-background), .elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#091032;}.elementor-100617 .elementor-element.elementor-element-78258b9e, .elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-background-overlay{border-radius:6px 6px 6px 6px;}.elementor-100617 .elementor-element.elementor-element-78258b9e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:50px;margin-bottom:50px;padding:1.25em 1.25em 1.25em 1.25em;}.elementor-100617 .elementor-element.elementor-element-78258b9e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-100617 .elementor-element.elementor-element-4c0ab6e7.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7.elementor-column.elementor-element[data-element_type=\"column\"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated, .elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated > .elementor-background-overlay, .elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-background-slideshow{border-radius:6px 6px 6px 6px;}.elementor-100617 .elementor-element.elementor-element-4c0ab6e7 > .elementor-element-populated{margin:0em 0em 0em 0em;--e-column-margin-right:0em;--e-column-margin-left:0em;}.elementor-100617 .elementor-element.elementor-element-267b74cf .elementor-heading-title{font-size:1.5em;font-weight:700;line-height:1.1em;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#ffffff;}.elementor-100617 .elementor-element.elementor-element-4b4f4f84{text-align:start;font-size:2rem;color:#ffffff;}.elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button{font-weight:700;text-transform:uppercase;background-color:#ED207B;}.elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button:hover, .elementor-100617 .elementor-element.elementor-element-77000fa5 .elementor-button:focus{background-color:#D01167;}.elementor-100617 .elementor-element.elementor-element-77000fa5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-100617 .elementor-element.elementor-element-17c8376 .elementor-heading-title{font-size:0.75em;font-weight:bold;font-style:italic;color:#FDECF4;}.elementor-100617 .elementor-element.elementor-element-17c8376 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-100617 .elementor-element.elementor-element-15639fef img{max-width:150px;}.elementor-100617 .elementor-element.elementor-element-15639fef > .elementor-widget-container{margin:0em 0em 0em 0em;}@media(max-width:767px){.elementor-100617 .elementor-element.elementor-element-15639fef{text-align:start;}.elementor-100617 .elementor-element.elementor-element-15639fef img{max-width:80px;}.elementor-100617 .elementor-element.elementor-element-15639fef > .elementor-widget-container{padding:0em 0em 1em 0em;}}@media(min-width:768px){.elementor-100617 .elementor-element.elementor-element-4c0ab6e7{width:75%;}.elementor-100617 .elementor-element.elementor-element-3fa916c3{width:15.816%;}}\/* Start custom CSS for text-editor, class: .elementor-element-4b4f4f84 *\/.elementor-100617 .elementor-element.elementor-element-4b4f4f84 p{\n    font-size:1.8rem;\n    line-height:1.5em;\n    text-shadow: 0px 0px 6px rgba(0,0,0,0.3);\n}\/* End custom CSS *\/<\/style>\t\t<div data-elementor-type=\"section\" data-elementor-id=\"100617\" class=\"elementor elementor-100617\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section data-dce-background-color=\"#091032\" class=\"elementor-section elementor-inner-section elementor-element elementor-element-78258b9e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78258b9e\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4c0ab6e7\" data-id=\"4c0ab6e7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div data-dce-title-color=\"#ffffff\" class=\"elementor-element elementor-element-267b74cf elementor-widget elementor-widget-heading\" data-id=\"267b74cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Un site vitrine dans les cartons ? On s&#8217;en occupe !<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-text-color=\"#ffffff\" class=\"elementor-element elementor-element-4b4f4f84 elementor-widget elementor-widget-text-editor\" data-id=\"4b4f4f84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Concevoir un site WordPress de A \u00e0 Z n&#8217;est pas de tout repos. Entre les choix techniques, graphiques et marketing, il y a de quoi se perdre&#8230;<\/p>\n<p>WPMarmite Start simplifie le processus pour vous permettre de vous concentrer sur l&#8217;essentiel : votre activit\u00e9.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77000fa5 elementor-mobile-align-justify elementor-widget elementor-widget-button\" data-id=\"77000fa5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/start.wpmarmite.com\/?utm_source=wpmarmite&#038;utm_medium=cta&#038;utm_campaign=wpmstart&#038;utm_content=ctawpmstart\" target=\"_blank\" rel=\"sponsored\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Obtenir un site cl\u00e9-en-main \u2192<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-title-color=\"#FDECF4\" class=\"elementor-element elementor-element-17c8376 elementor-widget elementor-widget-heading\" data-id=\"17c8376\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">\u2713 100% propri\u00e9taire de votre site  \u2713 Optimis\u00e9 pour Google  \u2713 S\u00e9curit\u00e9 et support inclus<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-3fa916c3\" data-id=\"3fa916c3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-15639fef elementor-widget elementor-widget-image\" data-id=\"15639fef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1.png\" class=\"attachment-full size-full wp-image-106103\" alt=\"WPMarmite Start\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1-150x150.png 150w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2024\/06\/wpmarmite-start-picto-transparent-1-120x120.png 120w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n\n<h3 class=\"wp-block-heading\">Supprimer l\u2019en-t\u00eate de votre site WordPress (dans certains cas de figure)<\/h3>\n\n\n\n<p>Allez hop, on termine cette tourn\u00e9e des bonnes pratiques avec un conseil qui peut vous sembler provocateur, mais qui ne l\u2019est pas du tout.<\/p>\n\n\n\n<p>Mais alors, pourquoi vouloir supprimer votre header sur WordPress ? <strong>Figurez-vous que cela s\u2019av\u00e8re opportun si vous d\u00e9sirez concevoir <\/strong><a rel=\"noreferrer noopener\" href=\"https:\/\/wpmarmite.com\/en\/landing-page-wordpress\/\" target=\"_blank\"><strong>des landing pages<\/strong><\/a><strong> (pages d&#8217;atterrissage)<\/strong>.<\/p>\n\n\n\n<p class=\"has-note-background-color has-background\"><em>Mais attention, dans le cas ci-dessus. Ne supprimez surtout pas votre fichier <code>header.php<\/code> ! La manipulation consiste simplement \u00e0 cr\u00e9er un template de page sans barre de navigation (navbar). Il s\u2019agit d\u2019une fonctionnalit\u00e9 que pas mal de th\u00e8mes proposent, ainsi que la grande majorit\u00e9 des constructeurs de page.<\/em><\/p>\n\n\n\n<p>Ce type de page un peu particulier a pour objectif de convertir les visiteurs en les incitant \u00e0 t\u00e9l\u00e9charger du contenu (ebook, livre blanc), \u00e0 s\u2019inscrire \u00e0 une newsletter, ou encore \u00e0 acheter un produit ou un service.<\/p>\n\n\n\n<p>En g\u00e9n\u00e9ral, elles ne contiennent ni barre de navigation, ni pied de page (footer), pour distraire le moins possible les visiteurs.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"4386\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/landing-page-beaver-builder.png\" alt=\"Un exemple de landing page propos\u00e9e par le constructeur de page Beaver Builder.\" class=\"wp-image-40095\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/landing-page-beaver-builder.png 2048w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/landing-page-beaver-builder-140x300.png 140w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/landing-page-beaver-builder-478x1024.png 478w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/landing-page-beaver-builder-768x1645.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/landing-page-beaver-builder-717x1536.png 717w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/landing-page-beaver-builder-956x2048.png 956w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/09\/landing-page-beaver-builder-1360x2913.png 1360w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><figcaption class=\"wp-element-caption\">Un exemple de landing page propos\u00e9e par le constructeur de page Beaver Builder.<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"un-en-t\u00eate-c\u2019est-ent\u00eatant\">Un en-t\u00eate, c\u2019est ent\u00eatant<\/h2>\n\n\n\n<p>Le header de votre site WordPress est un \u00e9l\u00e9ment \u00e0 concevoir avec le plus grand soin. Tr\u00e8s souvent, c\u2019est sur lui que vos visiteurs vont tomber en premier d\u00e8s qu\u2019ils vont d\u00e9barquer sur votre site.<\/p>\n\n\n\t\t<div class=\"wp-block wp-block-modernplugins-modern-ctt is-style-default\" >\n\t\t\t<a class=\"modern-ctt\" href=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwpmarmite.com%2Fheader-wordpress%2F&#038;text=Qu%27est-ce+qu%27un+bon+%23header+sur+%23WordPress+%3F+D%C3%A9couvrez+le+guide+complet+de+WPMarmite+qui+vous+explique+tout+%21&#038;via=wpmarmite\" target=\"_blank\" rel=\"noopener noreferer\">\n\t\t\t\t\t\t\t\t<div class=\"modern-ctt-content \"><p>Qu&#8217;est-ce qu&#8217;un bon #header sur #WordPress ? D\u00e9couvrez le guide complet de WPMarmite qui vous explique tout !<\/p><\/div>\n\t\t\t\t<footer class=\"modern-ctt-footer\">\n\t\t\t\t\t<span class=\"modern-ctt-cta modern-ctt-button\">\n\t\t\t\t\t\t<span class=\"modern-ctt-prompt \">Click to Tweet<\/span>\n\t\t\t\t\t\t<svg class=\"icon icon-twitter \" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><rect x=\"0\" fill=\"none\" width=\"24\" height=\"24\"\/><g><path d=\"M22.23 5.924a8.212 8.212 0 01-2.357.646 4.115 4.115 0 001.804-2.27 8.221 8.221 0 01-2.606.996 4.103 4.103 0 00-6.991 3.742 11.647 11.647 0 01-8.457-4.287 4.087 4.087 0 00-.556 2.063 4.1 4.1 0 001.825 3.415 4.09 4.09 0 01-1.859-.513v.052a4.104 4.104 0 003.292 4.023 4.099 4.099 0 01-1.853.07 4.11 4.11 0 003.833 2.85 8.236 8.236 0 01-5.096 1.756 8.33 8.33 0 01-.979-.057 11.617 11.617 0 006.29 1.843c7.547 0 11.675-6.252 11.675-11.675 0-.178-.004-.355-.012-.531a8.298 8.298 0 002.047-2.123z\"\/><\/g><\/svg>\n\t\t\t\t\t<\/span>\t\n\t\t\t\t<\/footer>\n\t\t\t<\/a>\n\t\t<\/div>\n\t\n\n\n<p>Tout au long de ces lignes, vous avez pu comprendre son importance, et d\u00e9couvrir comment le personnaliser et l\u2019optimiser.<\/p>\n\n\n\n<p>Et vous, quelle importance accordez-vous \u00e0 votre en-t\u00eate ? Donnez-nous votre avis en publiant un commentaire.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s plusieurs d\u00e9convenues, vous attendez ce moment avec impatience. Tic, toc. Tic, toc. Les secondes s\u2019\u00e9gr\u00e8nent. Et soudain, voil\u00e0 votre rendez-vous du soir qui d\u00e9barque au coin de la rue. Bim, bam, boum : dans votre poitrine, votre c\u0153ur s\u2019emballe&#8230;.<\/p>\n","protected":false},"author":1842,"featured_media":41056,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[103],"tags":[],"class_list":["post-40073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tuto-wordpress"],"wpm_company_founded_date":null,"wpm_company_url":null,"wpm_company_founders":null,"wpm_company_twitter":null,"wpm_company_linkedin":null,"wpm_pro_ressource_formule":null,"wpm_ressourcewp_lien_aff":null,"wpm_ressourcewp_lien_officiel":null,"wpm_ressource_company":null,"wpm_ressourcewp_short_desc":null,"wpm_ressourcewp_lien_repo":null,"wpm_ressourcewp_lien_ressource":null,"_yoast_wpseo_title":"Qu'est-ce qu'un bon header sur WordPress ? On vous dit tout","_yoast_wpseo_meta-robots-noindex":null,"_yoast_wpseo_focuskw":"header wordpress","_yoast_wpseo_metadesc":"D\u00e9couvrez un guide complet pour vous aider \u00e0 cr\u00e9er, personnaliser et optimiser un bon header sur WordPress avec conseils et bonnes pratiques.","_yoast_wpseo_opengraph-title":"Qu'est-ce qu'un bon header sur WordPress ? On vous dit tout","_yoast_wpseo_twitter-title":"Qu'est-ce qu'un bon header sur WordPress ? On vous dit tout","_yoast_wpseo_opengraph-description":"D\u00e9couvrez un guide complet qui va vous aider \u00e0 cr\u00e9er, personnaliser et optimiser un bon header sur WordPress, conseils et bonnes pratiques \u00e0 l'appui.","_yoast_wpseo_twitter-description":"D\u00e9couvrez un guide complet qui va vous aider \u00e0 cr\u00e9er, personnaliser et optimiser un bon header sur WordPress, conseils et bonnes pratiques \u00e0 l'appui.","_yoast_wpseo_bctitle":"Cr\u00e9er et modifier un header dans WordPress","lang":"fr","translations":{"fr":40073,"en":41292},"uagb_featured_image_src":{"full":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress.jpg",1500,830,false],"thumbnail":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress-150x150.jpg",150,150,true],"medium":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress-300x166.jpg",300,166,true],"medium_large":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress-768x425.jpg",768,425,true],"large":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress-1024x567.jpg",1024,567,true],"1536x1536":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress.jpg",1500,830,false],"2048x2048":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress.jpg",1500,830,false],"image-recette":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress-1360x753.jpg",1360,753,true],"gform-image-choice-sm":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress.jpg",300,166,false],"gform-image-choice-md":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress.jpg",400,221,false],"gform-image-choice-lg":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress.jpg",600,332,false],"yarpp-thumbnail":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/10\/cover-header-wordpress.jpg",120,66,false]},"uagb_author_info":{"display_name":"Thibaut | WPMarmite","author_link":"https:\/\/wpmarmite.com\/author\/thibaut-wpmarmite\/"},"uagb_comment_info":13,"uagb_excerpt":"Apr\u00e8s plusieurs d\u00e9convenues, vous attendez ce moment avec impatience. Tic, toc. Tic, toc. Les secondes s\u2019\u00e9gr\u00e8nent. Et soudain, voil\u00e0 votre rendez-vous du soir qui d\u00e9barque au coin de la rue. Bim, bam, boum : dans votre poitrine, votre c\u0153ur s\u2019emballe....","pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/posts\/40073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/users\/1842"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/comments?post=40073"}],"version-history":[{"count":0,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/posts\/40073\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/media\/41056"}],"wp:attachment":[{"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/media?parent=40073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/categories?post=40073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/tags?post=40073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}