Ideagency

Lorsque nous avons décidé avec Arnaud de refondre notre site internet, nous avons pris deux décisions fortes : mettre en place le processus Growth-Driven Design (d'ailleurs, notre site de lancement devrait bientôt voir le jour) et basculer notre site WordPress sous le COS Hubspot, le CMS intégré de l'outil d'inbound marketing. Pour que vous puissiez bien appréhender le COS Hubspot et réaliser votre propre thème graphique, je vous livre quelques conseils dans cet article. Et pour illustrer mes propos, je vais prendre notre cas en exemple ; autrement dit, la création d'un thème industriel.

Design Manager Hubspot, l'outil central de votre thème !

Rien de tel pour bien commencer que de connaître parfaitement le fonctionnement du design manager. La connaissance de l'arborescence, des différents dossiers et des fichiers que vous pouvez créer vous permettra de bien préparer la création de votre design et de gagner en performance.

Design_Manager.png

Lors de la création de votre design, 3 dossiers seront au centre de vos préoccupations, tellement importants que vous ne les quitterez plus !

Les trois dossiers que vous ne quitterez pas

1- Le dossier "Templates"

Il contient tous les gabarits de pages utilisables lorsque vous créez vos pages. Ces gabarits seront stockés dans des dossiers suivant leur fonction.

Sous-dossier Custom

Ce dossier est une racine contenant 4 dossiers importants :

  • Dossier Blog qui contient vos templates de blog (liste d'articles ou page article). Je vous conseille de créer un dossier par thème à l'intérieur de celui-ci. Par exemple, nous avons créé un dossier Indus qui contient nos 2 gabarits de page : Blog Post et List Blog Post ;
  • Dossier Email qui contient les templates de mail que vous utilisez lors de vos campagnes. Par exemple, l'email de suivi suite au téléchargement de votre offre, l'email de suivi suite à l'inscription à la newsletter... Comme pour le blog, je vous conseille de créer un dossier spécifique pour vote thème ;
  • Dossier Page qui contient les templates de vos pages de site, que ce soient vos pages ou vos landing pages d'ailleurs. Deux conseils du coup : toujours créer un dossier spécifique pour votre thème et mettre au point des conventions de nommage pour reconnaître vos gabarits de page et vos gabarits de landing pages qui seront certainement différents. J'ai pour ma part créé un dossier Indus dans lequel mes templates suivent une convention. Les pages classiques sont préfixées de SP, les landing pages de LP et les pages de remerciements de TP ;
  • Dossier System qui contient les templates de pages systèmes. La création de templates est limitée à 5 types de pages : les pages d'erreur, la page d'affichage du mot de passe, la page préférences de souscription, la page sauvegarde des préférences et la page de confirmation des préférences de souscriptions. Comme on ne change pas une équipe qui gagne, pensez à créer un dossier spécifique pour votre thème ;

Bon au moins, vous savez où mettre vos nouveaux fichiers et comment vous organiser. On avance !

Sous-dossier Global Groups

Ce dossier, organisé en sous-dossiers par thématique (Indus), contient les différents groupes globaux que vous créez pour vos templates. Pour rappel, les Global Groups sont des groupes de modules (Built-in Module ou Global Module) que vous pouvez réutiliser sur différentes templates. Le meilleur exemple est votre header ou votre footer. Il y a en effet de grande chance pour que ces deux

éléments de votre thème soient les mêmes sur la majorité de vos pages (d'accord, peut être pas vos landing pages qui ont sûrement droit à des headers spécifiques). L'utilisation de Global Group va vous faire gagner un maximum de temps.

Sous-dossier Hubspot Default

Ce dossier contient un unique sous-dossier System qui lui-même répertorie les fichiers systèmes standards d'Hubspot (Error Pages, Subscriptions...) que nous avons déjà évoqués ci-dessus.

2- Le dossier "Coded Files"

Il contient tous les fichiers ressources CSS et JS dont vous aurez besoin pour le bon fonctionnement de vos pages. Nous verrons par la suite les différents moyens que vous avez à votre disposition pour intégrer ces fichiers à vos pages.

Sous-dossier Hubspot Default

Ce dossier recense à l'aide de deux dossiers (styles et system), de nombreux fichiers CSS et JAVASCRIPT. Vous trouvez notamment dans le dossier styles des exemples de fichiers que vous pouvez réutiliser, ainsi que des feuilles de styles (CSS) dédiées au responsive webdesign.

Sous-dossier Custom

A l'instar de son pendant du dossier Templates, ce dossier s'organise aussi autour de 4 dossiers majeurs. Pensez aussi à créer des sous-dossiers par thème pour chacun de ces dossiers :

  • Dossier Blog qui contient les fichiers JS et CSS dont vous aurez besoin pour votre template de blog ;
  • Dossier Email qui contient les fichiers JS et CSS dont vous aurez besoin pour votre template email ;
  • Dossier Page qui contient les fichiers JS et CSS dont vous aurez besoin pour votre template de pages (simple, landing pages, thank you page...) ;
  • Dossier System qui contient les fichiers JS et CSS dont vous aurez besoin pour votre template système (error page, souscriptions...) ;

3- Le dossier "Custom Modules"

Ce dossier va contenir tous les modules sur mesure que vous créez pour vos thèmes. Pensez à mettre en place une convention de nommage car il n'est pour le moment pas possible de classer ces modules dans des sous-dossiers.

Au travers de cet article, je souhaitais éclaircir la hiérarchisation du Design Manager et les différents éléments qui le composent. Etant un convaincu de l'inbound marketing, du growth-driven design, j'ai pour objectif de documenter au maximum le COS Hubspot pour permettre aux entreprises partenaires de pouvoir en tirer le maximum (surtout que la documentation en français se fait rare) et concevoir ainsi des design toujours plus modernes et en phase avec le marché !

Alors n'hésitez pas à me proposer des thèmes, à commenter cet article que je pourrais enrichir si besoin. Et si vous souhaitez de l'aide dans la réalisation de votre design avec le COS Hubspot, contactez-nous directement !

consultation expert digital

AUTEUR
Loïc BURDET
Loïc BURDET Directeur technique Ideagency
Voir les articles du même auteur

Parlons de vous

15 min pour parler de votre projet , de vos objectifs et problématiques et vous donner ma vision. Simple et humain!
Contactez-nous