PubliĂ© par le 1 aoĂ»t 2018 ‱ 18 Commentaires

31.7 millions.

C’est le nombre estimĂ© de blogs amĂ©ricains qui seront en ligne en 2020, selon Statista. Imaginez donc Ă  combien ce chiffre pourrait monter si on comptait l’intĂ©gralitĂ© des blogueurs au monde
 Pas de doute : la tĂȘte nous en tournerait.

Il n’y a pas de secret derriĂšre le succĂšs du blogging : clĂ© de voĂ»te d’une stratĂ©gie de rĂ©fĂ©rencement pour une entreprise qui souhaite se faire connaĂźtre, activitĂ© Ă  temps plein qui en fait rĂȘver (et souvent dĂ©chanter !) plus d’un, moyen de communication privilĂ©giĂ© pour transmettre une expertise
 Le blog est devenu un format incontournable pour qui veut lancer son activitĂ© sur le web.

Seulement, dans cette mer de blogs plus ou moins bien tenus, pour réellement se démarquer, il est indispensable développer une véritable stratégie autour de cet outil de communication.

Une stratĂ©gie qui sera notamment portĂ©e par la page d’accueil de votre blog, qui se doit d’ĂȘtre efficace et rĂ©pondre Ă  vos diffĂ©rents objectifs, comme :

  • PrĂ©senter votre proposition de valeur, ou votre expertise, notamment s’il s’agit d’un blog d’entreprise ;
  • Permettre une navigation fluide Ă  travers vos diffĂ©rents articles, notamment en les classifiant ;
  • Pousser Ă  l’action vos visiteurs, si vous vous ĂȘtes fixĂ© des objectifs de conversion.

La page d’accueil de votre site est probablement une de vos pages les plus visitĂ©es, alors autant ne pas la nĂ©gliger !

C’est pourquoi on vous propose de dĂ©cortiquer l’anatomie d’une page d’accueil de blog performante, et de vous accompagner dans sa conception. Ça vous tente ? Suivez le guide !

Pour commencer : les Ă©lĂ©ments-clĂ©s d’une page d’accueil de blog efficace

Si chaque page d’accueil de blog va varier en fonction de ses objectifs particuliers, on y retrouve souvent 3 Ă©lĂ©ments structurels typiques :

  • Un header ou un slider (mĂȘme si, comme on vous le disait rĂ©cemment, on n’est pas spĂ©cialement fans des sliders, chez la Marmite). C’est cet Ă©lĂ©ment qui dynamisera le haut de votre page, et qui vous permettra d’annoncer Ă  vos visiteurs, dĂšs le premier coup d’oeil, la thĂ©matique de votre blog, et ce que vous souhaitez leur apporter.
Un header de page d'accueil de blog bien efficace
Simple mais efficace : une belle photo, qui incarne le propriĂ©taire du blog (ici, Matthew Howells-Barby) et une phrase d’accroche qui intrigue (“Apprenez le SEO avec un pro”).
  • Un call-to-action bien visible, qui invite les visiteurs Ă  consulter des offres monĂ©tisĂ©es (ressources numĂ©riques, produits, services
) ou des ressources permettant de rĂ©colter leurs donnĂ©es.
Un call-to-action bien visible : la clé d'une page d'accueil WordPress efficace
Sur le blog d’Isabelle Mathieu, Emarketinglicious, pas question de rater le call-to-action : on ne voit que lui sur le header, en orange flashy sur fond blanc et noir.
  • Une liste d’articles, classifiĂ©e ou non en diffĂ©rentes catĂ©gories, avec un ou plusieurs articles mis en avant. À noter que l’on voit de plus en plus de pages d’accueil de blogs WordPress qui n’affichent plus du tout leurs articles, pour mettre l’accent sur le call-to-action et pousser Ă  la conversion.
Ne pas afficher d'articles sur la homepage de son blog WordPress : un choix radical, qui fonctionne
C’est le choix qu’a fait le blog Social Triggers, avec son call-to-action massif et attractif, qui ne rend les articles accessibles que lorsque l’on clique l’onglet “Blog” du menu.

D’autres Ă©lĂ©ments viennent souvent s’ajouter Ă  ces 3 incontournables, notamment un menu ou une barre latĂ©rale qui rappelle les diffĂ©rentes catĂ©gories des articles ou les articles les plus populaires, ou encore une prĂ©sentation de l’auteur ou de l’entreprise qui dĂ©tient le blog.

Une présentation de l'auteur dans le header du blog : malin, non ?
Alliez l’utile Ă  l’agrĂ©able, comme le fait le rĂ©dacteur Ry Schwartz sur son blog Full Expression, oĂč il dĂ©voile dĂšs le header une courte prĂ©sentation de ce qu’il fait.

Ce qui rend une page d’accueil de blog bien efficace, c’est avant tout la clartĂ© de l’information diffusĂ©e.

Que vous choisissiez d’y intĂ©grer ces diffĂ©rents Ă©lĂ©ments ou non, l’accent doit ĂȘtre absolument mis sur ce que vous souhaitez transmettre Ă  vos lecteurs, et l’expĂ©rience qu’il font de votre blog, pour leur donner envie de passer Ă  l’action ou d’y revenir, tout simplement.

La page d'accueil de votre blog WordPress : une page qui donne envie d'en savoir plus !

Alors c’est parti, commençons Ă  voir comment crĂ©er votre page d’accueil ultra attractive, qui dĂ©livre bien votre message !

CrĂ©er une page spĂ©cifique pour l’accueil de votre blog WordPress

Lorsque vous crĂ©ez votre blog WordPress, la plateforme dĂ©finira automatiquement que la page d’accueil de votre site prĂ©sentera les derniers articles publiĂ©s. Or votre objectif est bien de crĂ©er une page d’accueil isolĂ©e, spĂ©cifique Ă  votre blog.

Mettre en place votre page d’accueil de blog

Pour ce faire, rien de plus simple. Ça se passe en 2 Ă©tapes ultra rapides :

  • CrĂ©ez 2 pages diffĂ©rentes, l’une appelĂ©e par exemple “Accueil”, et la seconde “Blog”, et publiez-les.
  • Rendez-vous dans l’onglet “RĂ©glages de votre administration WordPress, et sĂ©lectionnez l’option “Une page statique” dans le rĂ©glage “La page d’accueil s’affiche”. Mettez votre page “Accueil” en page d’accueil et votre page “Blog” en page des articles.
Comment créer une page spécifique pour votre page d'accueil blog ?
Vous arriverez à ce résultat-ci.

IntĂ©grer l’onglet “Blog” Ă  votre menu de navigation

DĂ©sormais, les visiteurs de votre site verront s’afficher une page d’accueil spĂ©cifique, que vous pourrez personnaliser plus tard. Toutefois, il vous faut, avant de passer Ă  cette Ă©tape, intĂ©grer un onglet “Blog” Ă  votre menu de navigation. L’objectif : bien montrer Ă  vos lecteurs oĂč se diriger pour accĂ©der Ă  vos articles.

Rendez-vous donc dans l’onglet “Apparence” puis “Menu” de l’administration, et cochez les pages “Accueil” et “Blog” pour les ajouter à votre menu de navigation.

N'oubliez pas de rajouter l'onglet "Blog" Ă  votre menu de navigation

À noter que vous pouvez Ă©galement choisir de crĂ©er un sous-menu sous l’onglet “Blog” de votre barre de navigation, comme la Marmite le fait : cela vous permet de guider vos visiteurs parmi les diffĂ©rentes catĂ©gories d’articles de votre blog.

Pourquoi pas penser Ă  un sous-menu de navigation pour votre blog WordPress ?

Simple comme bonjour, n’est-ce pas ?

Bien, maintenant que vous avez une page spécifique en tant que homepage, apprenons à la personnaliser, pour en faire ressortir le meilleur de votre activité de blogging.

Choisir comment sera organisĂ©e la page d’accueil de votre blog

Voici venu le moment de vous demander Ă  quoi va ressembler, grossiĂšrement, votre blog. DiffĂ©rentes options de prĂ©sentation s’offrent Ă  vous : laissez-moi vous prĂ©senter les deux structures communĂ©ment choisies par les blogueurs sur WordPress.

La méthode traditionnelle : les pages avec barre latérale

Je suis sĂ»re que, lorsque vous avez lu “barre latĂ©rale”, vous avez spontanĂ©ment pensĂ© Ă  ce type de structure de blog :

La structure avec une barre latérale : un classique des blogs WordPress
Le blog de l’entreprise Hootsuite et sa barre latĂ©rale

Et pour cause ! Il s’agit, historiquement, de la maniĂšre dont Ă©taient prĂ©sentĂ©s les blogs. Les thĂšmes embarquĂ©s automatiquement dans WordPress en sont d’ailleurs reprĂ©sentatifs, puisque Twenty Sixteen et Twenty Seventeen prĂ©sentent cette structure-ci.

Si vous choisissez ce design assez classique, vous mettez directement l’accent sur vos articles, qui apparaĂźtront de maniĂšre bien visible dĂšs la page d’accueil de votre blog. Dans votre barre latĂ©rale, vous pourrez disposer, au choix :

  • Des call-to-actions bien visibles ;
  • Des liens vers vos profils rĂ©seaux sociaux, voire des publications Social Media ;
  • Les catĂ©gories de votre blog, ou une barre de recherche interne pour circuler parmi vos nombreux articles


Mais alors, comment créer votre fameuse barre latérale ?

Direction l’onglet “Apparence”, puis “Widgets” de votre administration WordPress. Sur cette page, une option “Colonne latĂ©rale du blog” vous attend.

Les réglages de WordPress pour créer votre barre latérale

À vous d’y ajouter les widgets que vous souhaitez y voir apparaütre, et les organiser comme vous le souhaitez.

N’en faites cependant pas trop : rappelez-vous des conseils avisĂ©s de Stan de Marketing Mania, qui vous expliquait qu’en intĂ©grant trop de widgets dans votre blog, vous risquez de perdre votre audience.

Contentez-vous d’y exposer un bel appel Ă  l’action, quelques liens vers vos meilleures pages, ainsi que des liens vers les pages que vous souhaitez voir bien rĂ©fĂ©rencĂ©es sur les moteurs de recherche.

La méthode plus moderne : les pages pleine largeur

Depuis quelques annĂ©es, on voit cependant fleurir de plus en plus de pages d’accueil blog en pleine largeur. Pas de barre latĂ©rale, uniquement une structure qui rĂ©vĂšle, au dĂ©filement, les diffĂ©rentes parties de cette page.

Pour un blog moderne sur WordPress, optez pour le design en pleine largeur
C’est le cas de la page d’accueil de la Marmite !

Avec cette structure plus moderne, les blogs en pleine largeur adoptent les mĂȘmes codes que les sites web professionnels. RĂ©sultat : un blog Ă  l’aspect plus sĂ©rieux, et un design moins chargĂ© en gĂ©nĂ©ral.

Notez dans un coin de votre tĂȘte la structure de page d’accueil que vous avez choisie : on y reviendra plus tard dans ce tutoriel, pour la mettre rĂ©ellement en forme. Et passons Ă  l’étape suivante : la maniĂšre de prĂ©senter vos articles eux-mĂȘmes.

Définir la maniÚre dont seront présentés vos articles WordPress

De nouveau, il va vous falloir mettre vos lunettes de webdesigner, pour choisir la maniĂšre dont vous allez organiser la liste de vos articles sur votre page d’accueil (ou sur votre page blog elle-mĂȘme si vous dĂ©cidez de ne pas montrer vos articles sur la homepage).

LĂ  encore, votre choix sera Ă©minemment dĂ©terminĂ© par vos goĂ»ts d’une part, et par vos objectifs d’autre part.

Mon but : vous guider parmi les différents designs les plus communs, pour que vous choisissiez celui qui convient le mieux à votre projet.

Le design en liste, à la façon d’un magazine

Ce premier type de structuration d’articles est sans doute le plus commun sur les blogs. Il s’agit d’un regroupement d’articles sous forme de liste. Avec une à deux colonnes maximum, l’objectif de ce design est de structurer de maniùre simple cette partie de votre page.

Une liste d'articles en mode magazine : clair, simple, typique
AĂ©rĂ©, parfaitement lisible, et simpliste : la liste d’articles sur l’accueil du blog de Sujan Patel joue le minimalisme.

Les avantages de ce design :

  • Une lecture aisĂ©e, car les utilisateurs sont habituĂ©s Ă  ce type de structuration (que l’on retrouve notamment dans les mĂ©dias en ligne traditionnels).
  • Une page aĂ©rĂ©e, qui met en lumiĂšre les titres des articles, et appelle Ă  la lecture.

L’inconvĂ©nient de ce design :

  • Une structuration trĂšs classique, qui ne laisse que peu de place Ă  l’originalitĂ©.

La plupart des thĂšmes WordPress incluent ce type de design, trĂšs commun.

Le design en tuiles, d’inspiration Pinterest ou Instagram

DeuxiĂšme grand type d’organisation d’articles de blog : le design qui s’inspire d’Instagram et de Pinterest. Vos articles sont organisĂ©s en plus de 3 colonnes, et les blocs d’articles peuvent, selon la taille de l’image ou l’aperçu de texte intĂ©grĂ©, varier en taille et en forme.

La part belle y est laissĂ©e Ă  l’image, ce qui plaira particuliĂšrement Ă  ceux qui recherchent une page d’accueil trĂšs visuelle.

Un design en tuiles pour vos articles de blog WordPress : un choix trĂšs attractif
Encore le blog Full Expression, qui gagne la palme du design moderne et attractif.

Les avantages de ce design :

L’inconvĂ©nient de ce design :

  • Une structure qui peut nuire Ă  la lisibilitĂ© si l’on n’aĂšre pas assez la page, et peut distraire le lecteur.

Si ce genre de design, trÚs dynamique, vous tente, il en existe pléthore sur Theme Forest.

Le design
 sans articles sur la page d’accueil !

Je vous en parlais prĂ©cĂ©demment : c’est la grande ascension, parmi les blogueurs, des pages d’accueil de blog sans aucun article prĂ©sentĂ© au lecteur.

Le choix culotté de ne pas présenter d'articles du tout sur la homepage de son blog
Impressionnant, le culot de Noah Kagan sur son blog OkDork : le call-to-action prend toute la place, et il faut cliquer sur le petit “Read the Blog” (“Lire le blog”) tout en bas pour accĂ©der aux articles !

Les avantages de ce design :

  • Un style qui met en lumiĂšre le call-to-action, et donc trĂšs bien adaptĂ© aux blogs qui ont un objectif premier de conversion.
  • Un design qui permet de mettre en avant sa proposition de valeur de maniĂšre trĂšs claire. Ce type de page d’accueil, sans articles, vous laisse tout l’espace nĂ©cessaire Ă  l’écran pour dĂ©velopper un message attrayant, qui donnera envie Ă  vos lecteurs de consulter vos articles.

L’inconvĂ©nient de ce design :

  • Une structure qui oblige les lecteurs Ă  se rendre sur une autre page pour consulter vos articles. Gare Ă  ne pas les perdre, et Ă  quand mĂȘme bien indiquer oĂč ils peuvent se rendre pour vous lire !

Ça y est, vous ĂȘtes tentĂ© par une structuration d’articles spĂ©cifique ? Notez-la Ă©galement, et en route pour la suite de la conception de votre page d’accueil blog !

Choisissez bien la place de vos call-to-actions

Je n’ai cessĂ© de vous parler de ce fameux call-to-action depuis le dĂ©but de cet article, et c’est bien normal : il s’agit d’un Ă©lĂ©ment-clĂ©, sous forme de bouton ou d’image, qui attire l’attention du visiteur et lui donne envie de cliquer pour dĂ©couvrir une autre page.

D’ailleurs, notez que vous verrez souvent parler de ces call-to-actions par leur acronyme anglais, soit CTA. Qu’il s’agisse d’un CTA qui mĂšne vers une page d’offre, de vente, ou un formulaire de contact ou de tĂ©lĂ©chargement, l’objectif du call-to-action reste toujours le mĂȘme : rĂ©colter des donnĂ©es sur vos visiteurs.

Sur la page d’accueil de votre blog, votre call-to-action doit absolument se dĂ©marquer, et se faire remarquer !

Couleur vive, design original, texte qui invite au clic
 Certes, ces critĂšres vont jouer sur l’attractivitĂ© de votre CTA. Mais le plus important reste de rĂ©flĂ©chir Ă  son emplacement sur votre page, qui va Ă©minemment dĂ©pendre des choix que vous avez fait dans les parties prĂ©cĂ©dentes de cet article.

Si vous avez choisi un blog avec barre latĂ©rale, votre call-to-action va naturellement s’y placer.

Et si votre barre latérale de blog WordPress se parait d'un grand call-to-action ?
Mention spĂ©ciale au blog Copywritematters, oĂč on ne peut pas rater ce call-to-action massif dans la barre de droite !

D’autres blogs choisissent d’interrompre la navigation des visiteurs et d’attirer leur attention, en l’insĂ©rant sous forme de bandeau dans leur liste d’articles, ou en crĂ©ant une tuile d’une couleur ou d’une forme diffĂ©rente.

Un call-to-action placé en plein milieu de la liste d'articles de blog
Saurez-vous repĂ©rer le call-to-action dans cette liste d’articles du blog de Buffer ?

Ça commence Ă  en faire, des choses auxquelles penser pour concevoir votre blog, n’est-ce pas ? Ça tombe bien : on va enfin poser tout ça sur papier, et avoir un aperçu de ce que donnent vos idĂ©es.

Créez des wireframes rapides avant de vous lancer dans la conception

Je vous prĂ©viens : hors de question de vous lancer dans la construction de votre page d’accueil sans en avoir, au prĂ©alable, tracĂ© les wireframes.

Mais, attends trente secondes Eléonor, les wire-quoi ?

Les wireframes : ces maquettes purement structurelles, qui permettent de placer les différents éléments de votre page sur un document unique, qui vous guidera ensuite quand vous vous lancerez dans la conception de votre blog WordPress.

C'est parti pour faire les wireframes de votre page d'accueil blog

L’idĂ©e n’est pas d’y passer un temps fou, mais uniquement de structurer votre page en diffĂ©rents blocs ou diffĂ©rentes divisions, pour vĂ©ritablement avoir une idĂ©e de l’expĂ©rience utilisateur que vous allez crĂ©er.

Vous pouvez choisir de rĂ©aliser cette Ă©tape Ă  la main, en vous dotant d’un papier et d’un crayon. Mais d’autres outils existent, qui vous aideront Ă  obtenir un rĂ©sultat solide et cohĂ©rent.

L’outil en ligne MockFlow vous permet de crĂ©er gratuitement, et en ligne, des wireframes de qualitĂ©. Son petit plus ? L’exportation de vos projets en langage HTML si vous le souhaitez, en plus des formats typiques type PDF ou PNG.

Mockflow : un outil gratuit en ligne pour conceptualiser votre page d'accueil
Un wireframe crĂ©Ă© en deux temps, trois mouvements, avec l’interface en ligne Mockflow

Le logiciel Balsamiq Mockups 3, dont l’essai gratuit dure 30 jours, puis qui coĂ»te 89$ pour l’acquĂ©rir, est Ă©galement une rĂ©fĂ©rence. Cet outil vous permet de crĂ©er des wireframes particuliĂšrement prĂ©cis, en quelques coups de cuillĂšre Ă  pot (et de souris).

Si vous n’avez pas d’autre projet de wireframe que celui de votre blog, orientez-vous peut-ĂȘtre vers une solution gratuite. Mais je peux vous dire que, moi qui suis amenĂ©e Ă  concevoir rĂ©guliĂšrement des wireframes, j’en suis gaga !

Balsamiq Mockups 3 : une solution payante pour qui conçoit réguliÚrement des wireframes de site WordPress
L’interface de crĂ©ation de wireframes dans Balsamiq Mockups 3

Quel que soit l’outil que vous choisissez, n’hĂ©sitez pas Ă  ajouter, dĂšs la conception de vos wireframes, les images et textes qui vous viennent Ă  l’esprit. Et pourquoi pas, depuis le dĂ©but, rĂ©flĂ©chir Ă  la maniĂšre dont vous allez structurer votre page en termes de balises HTML, pour bien rĂ©fĂ©rencer votre blog ?

  • OĂč s’affiche votre sacro-sainte balise <h1> ?
  • Les sous-titres de vos pages sont-ils Ă©galement des <hn> ?
  • Quels vont ĂȘtre les mots-clĂ©s que vous allez intĂ©grer dans vos textes alternatifs ?

Psst ! La Marmite a concocté une formation spéciale pour vous aider à bien référencer vos sites WordPress : intéressant, pour bien positionner votre blog sur les moteurs de recherche !

DĂ©veloppez votre trafic et augmentez vos ventes

Façonnez le rĂ©fĂ©rencement de votre site WordPress et sortez-le enfin de l’anonymat.

À ce stade, vous avez devant vous des wireframes costauds, et un sacrĂ© aperçu de ce que peut donner votre page d’accueil en termes de structure et d’expĂ©rience utilisateur. On se lance dans l’intĂ©gration sur WordPress ?

Lancez-vous dans la conception de votre page d’accueil de blog

Allez, c’est parti pour concevoir votre page d’accueil de blog WordPress ! Mais au fait, comment vous allez vous y prendre ?

Plusieurs possibilitĂ©s s’offrent Ă  vous :

  • Passer par un thĂšme spĂ©cifiquement designĂ© pour les blogs. VĂ©rifiez bien, en amont, dans la dĂ©mo du thĂšme, qu’il contient bien toutes les fonctionnalitĂ©s nĂ©cessaires pour crĂ©er votre page d’accueil telle que vous l’avez sur vos wireframes (nombre de colonnes, type d’organisation d’articles, etc)
  • Passer par un constructeur de page, qui vous aidera Ă  concevoir votre page d’accueil blog de maniĂšre visuelle. Une solution pratique pour les dĂ©butants, ou pour ceux qui souhaitent passer un minimum de temps sur la rĂ©alisation de cette page. Je vous recommande chaudement le page builder Elementor : complet, accessible, c’est l’outil-phare pour construire son blog, puisqu’il contient des modules spĂ©cifiques Ă  ce type de site (listes d’articles ou de catĂ©gories, par exemple). Un gain de temps assurĂ© !
  • Coder Ă  la main, de A Ă  Z, sa page. Cette possibilitĂ© s’adresse aux plus habiles en dĂ©veloppement web.

Vous ne connaissez pas grand chose au code, mais vous souhaitez personnaliser le thĂšme de votre blog ? Ça tombe bien ! La Marmite a crĂ©Ă© une formation complĂšte, “CSS Express”, pour vous accompagner dans la personnalisation du thĂšme sur lequel vous avez craquĂ© en mettant les mains dans le code.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

On terminera cet article avec un petit rafraĂźchissement de mĂ©moire : la page d’accueil de votre blog WordPress doit Ă  la fois ĂȘtre attractive, aisĂ©ment lisible, et servir vos objectifs de conversion.

Et vous, avez-vous conçu votre page d’accueil de blog, et en tirez-vous de bons rĂ©sultats ? Je serai curieuse de voir vos conceptions, alors montrez-moi tout ça dans les commentaires !