Aperçu du Gestionnaire de conception

Dernière mise à jour: March 5, 2018

Disponible avec :

Quelle que soit la plateforme utilisée, la conception d'un site web exige de nombreux outils disparates, comme un éditeur de texte/EDI, un client FTP, un CMS et bien d'autres encore.  Si tous ces acronymes ne vous intimident pas, essayer de rester organisé avec toutes les opérations d'édition, d'enregistrement, de chargement et de mise à jour peut rallonger le temps nécessaire à la publication d'un site.  En outre, lorsque celui-ci est enfin publié, il est possible que les options de design proposées ne soient pas aussi flexibles que le souhaiteraient les marketeurs, ce qui peut entraîner de nombreuses demandes de modifications auprès du designer.

Le Gestionnaire de conception de HubSpot rassemble tous les outils dont les designers ont besoin pour concevoir des sites web à la pointe de la technologie, tout en apportant aux marketeurs la flexibilité voulue pour créer du contenu. Ce guide de l'utilisateur comprend des tutoriels détaillés et les meilleures pratiques pour les tâches de conception sur HubSpot. Il s'adresse aux designers web expérimentés voulant apprendre à construire leur premier site sur le COS de HubSpot, mais aussi aux marketeurs créateurs de contenu qui souhaitent en savoir plus sur la conception de la structure et du style des pages et e-mails existants.  Des exemples de codes précis et des documents de référence sont disponibles sur le site designers.hubspot.com.

Cette section du guide de l'utilisateur propose un aperçu de toutes les fonctionnalités du Gestionnaire de conception.

Outils intégrés dans le Gestionnaire de conception

Le Gestionnaire de conception rassemble plusieurs outils importants sur une seule et même interface.  Il comprend notamment :

  • Un outil de création de modèle : un éditeur qui fonctionne en glisser-déposer pour structurer les modèles de pages, de blogs, d'e-mails et de systèmes.
  • Un éditeur de code : un environnement de développement intégré (EDI) pour tous les codes de l'interface utilisateur (CSS, JavaScript et même vos propres modèles HTML).
  • Un fichier CSS principal : un fichier CSS global qui aide à unifier l'aspect de tout le contenu créé avec HubSpot.
  • Des modules personnalisés : des modules dont le code personnalisé et réutilisable peut être paramétré pour ajouter des fonctionnalités avancées à un site web, sans avoir besoin de connaissances techniques particulières.
  • Un gestionnaire de fichiers : un système d'hébergement de fichiers pour toutes les ressources d'un site.

Utiliser le Gestionnaire de conception

Pour accéder au Gestionnaire de conception, la méthode la plus rapide consiste à cliquer sur l'onglet Contenu, puis sur Gestionnaire de conception.

Design Manager navigation

Dossiers

Le Gestionnaire de conception vous permet d'organiser tous les modèles et tous les fichiers codés dans des dossiers. Ceux-ci se trouvent dans le menu latéral de gauche de l'outil, et il est possible de les développer en cliquant sur la flèche présente à côté de leur nom. Lors de la création de modèles ou de fichiers codés, il est également possible de créer de nouveaux dossiers personnalisés en cliquant sur Nouveau dossier. Les dossiers personnalisés sont supprimés automatiquement s'ils ne contiennent plus aucun modèle ou fichier.  

Les options de filtrage présentes sous les dossiers facilitent la recherche d'un modèle ou d'un fichier en particulier. Elles incluent :

Templates and coded files

Vous pouvez cliquer sur un dossier pour obtenir la liste des fichiers qu'il contient, mais aussi effectuer des recherches dans un dossier en tapant le nom d'un fichier ou un mot-clé dans la barre de recherche. Avant de lancer une recherche, cliquez sur le dossier primaire afin d'obtenir les résultats les plus vastes possible.

Search templates

Onglets

Lorsque vous cliquez sur le nom d'un modèle ou d'un fichier codé, celui-ci s'ouvre dans un onglet. Les onglets vous facilitent le travail lorsque vous effectuez plusieurs tâches à la fois et vous permettent de passer d'un modèle ou fichier codé à un autre.

Tabs

Créer de nouveaux modèles et fichiers

Pour créer un nouveau modèle ou fichier codé, cliquez sur le bouton bleu situé sur la droite de la page. Si vous avez sélectionné un dossier de modèle, un dossier de fichier codé ou un dossier de module personnalisé, le bouton affichera respectivement Nouveau modèle, Nouveau fichier codé ou Nouveau module personnalisé. Des informations supplémentaires sur la création de modèles et de fichiers codés sont disponibles dans une autre section de ce guide.

New template

Outil de création de modèle

L'outil de création de modèle est un éditeur en glisser-déposer qui permet de concevoir la structure et le contenu par défaut de pages web et d'e-mails.  Vous pouvez bien entendu coder vos propres modèles HTML de toutes pièces, mais la création de site et d'e-mails avec le Gestionnaire de conception permet aux designers de gagner du temps et offre aux marketeurs beaucoup plus de contrôle sur la structure du contenu.  

Les mises en page des modèles HubSpot sont toutes adaptatives ; elles s'ajustent donc automatiquement à différentes tailles d'écran. Cet éditeur compile vos modules en glisser-déposer avec un balisage HTML organisé qui devient ensuite adaptatif grâce à une CSS intégrée.  

Un tiers du trafic sur Internet provenant d'appareils mobiles, votre site doit être ergonomique sur tous les supports, et ce quelle que soit la taille de leur écran.  Des informations supplémentaires sur la création et la modification de modèles, ainsi que sur la mise en page de modèles grâce à une CSS intégrée ou personnalisée sont disponibles dans une autre section de ce guide.  

Template Builder

Éditeur de code

L'éditeur de code de HubSpot est un EDI puissant qui permet de coder des fichiers CSS, des fichiers JavaScript et même des modèles HTML.  Lorsque vous codez ou modifiez des feuilles de style, vous pouvez obtenir un aperçu des modifications sur les modèles sans changer le contenu publié, ni quitter la plateforme. Outre cet aperçu, l'éditeur de code propose de nombreuses autres fonctionnalités, comme le surlignement, l'enregistrement automatique, des balises auto-fermantes, les retraits automatiques, et bien plus encore.

Des informations supplémentaires sur le fonctionnement de l'éditeur sont disponibles dans d'autres sections de ce guide.  

Code editor

Fichier CSS principal

Le fichier CSS principal est un fichier global qui s'applique à tous vos modèles HubSpot.  Il offre un environnement idéal pour mettre en page les menus, formulaires et autres modules standard qui apparaissent dans vos modèles. En utilisant ce fichier, les designers peuvent gagner un temps précieux tout en restant organisés.  Des informations supplémentaires sur les fichiers CSS principaux sont disponibles dans une autre section de ce guide.

Primary CSS

Modules personnalisés

Les modèles HubSpot disposent de nombreuses options de modules. Toutefois, les designers peuvent parfois rechercher des solutions plus personnalisées pour les marketeurs sans avoir à s'inquiéter des erreurs que pourraient créer des utilisateurs aux connaissances techniques limitées. Les modules personnalisés sont des modules codés réutilisables qui leur permettent de travailler avec des variables personnalisées, en coulisse, tout en donnant aux marketeurs la flexibilité voulue pour personnaliser leurs contenus. 

Custom module

Un marketeur peut ainsi personnaliser les contenus de ce module en choisissant des images et un texte au niveau de la page, sans avoir à modifier le code.

Custom module preview

Gestionnaire de fichiers

Le Gestionnaire de fichiers de HubSpot permet d'enregistrer toutes les ressources que vous utilisez pour créer du contenu. Vous pouvez y charger des fichiers .pdf, des images, des vidéos, des fichiers audio, des polices de caractère et bien plus encore. Le Gestionnaire de conception vous donne accès à toutes ces ressources afin que vous puissiez charger rapidement de nouveaux fichiers sans quitter la plateforme. Vous découvrirez comment charger des fichiers et y accéder dans le Gestionnaire de conception dans une autre section de ce guide.  

File manager

Article précédent:

Article suivant: