Ignorer et passer au contenu principal
Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.

Visite rapide du gestionnaire de conception

Dernière mise à jour: juin 28, 2023

Disponible avec le ou les abonnements suivants, sauf mention contraire :

Tous les produits et les abonnements

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.

Dans cet article, vous découvrirez toutes les fonctionnalités du gestionnaire de conception. Si vous cherchez des exemples de code spécifiques et une documentation de référence, consultez la documentation pour les développeurs de HubSpot.

Outils inclus dans le gestionnaire de conception

Le gestionnaire de conception rassemble plusieurs outils importants dans une seule application puissante :

  • Recherche  - un espace pour créer et organiser vos fichiers, modèles, modules et dossiers.
  • Éditeur de mise en page - un éditeur glisser-déposer pour structurer la page, le blog, l'e-mail et les modèles de système.
  • Inspecteur - Il permet de modifier les propriétés d'une mise en page, d'un module ou d'un groupe. 
  • Éditeur de code - un environnement de développement intégré (IDE) pour tous vos codes front-end (CSS, Javascript ou même vos propres modèles HTML).
  • Éditeur de Module - modules personnalisés réutilisables que vous pouvez configurer pour ajouter des fonctionnalités avancées à votre site qui peut toujours être géré par des utilisateurs non techniques.
  • Gestionnaire de fichiers - un système d'hébergement de fichiers pour toutes les ressources de votre site.

Accédez à votre gestionnaire de conception pour explorer ces outils. Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception. 

Recherche

La recherche est un espace pour gérer tous les dossiers, modèles, modules et fichiers codés. Vous pouvez organiser les fichiers et les dossiers, mais vous aimez utiliser l'interface glisser-déposer de la recherche. En cliquant sur un fichier, vous pouvez étendre ou réduire les fichiers qu'il contient.

Tous les comptes Marketing Hub Pro et Entreprise et CMS Hub Pro et Entreprise ont un dossier @hubspot dans le gestionnaire de conception par défaut. Ce dossier contient l'ensemble de vos thèmes et modules par défaut, y compris les modules d'e-mail glisser-déposer. Ces thèmes et modules sont en lecture seule, mais peuvent être clonés si vous souhaitez les personnaliser. En savoir plus sur la personnalisation des thèmes et des modules par défaut.

design-manager-hubspot-folder

Cliquez sur Fichier pour créer de nouveaux fichiers ou dossiers ou pour prendre des mesures sur l'élément actuellement sélectionné dans la recherche, tel que supprimer, cloner ou renommer l'actif. Utilisez les options de Visualiser pour gérer la configuration des fichiers et dossiers. Il est possible d'éliminer rapidement tous les dossiers ou d'obtenir des éléments récemment modifiés ou supprimés.

Personnalisez la réduction du gestionnaire et désélectionnez les dossiers

Remarque : La recherche est contextuelle, c'est-à-dire que les actions seront toujours liées aux dossiers et fichiers sélectionnés. Pour créer un nouveau fichier ou un dossier dans un dossier spécifique, cliquez sur ce dossier dans la recherche. Pour créer un nouveau fichier ou dossier en dehors de tous les dossiers existants, cliquez sur Afficher, puis sélectionnez Désélectionner tout.

Le menu Actions ne sera actif que si un fichier ou un dossier est actuellement sélectionné et fournit des options contextuelles pour cet élément de type. Vous pouvez également  faire un clic droit directement sur l'élément pour :

  • Cloner : réalisez une copie de votre fichier, dossier ou modèle.
  • Déplacer : sélectionnez un nouveau dossier pour votre ressource.
  • Renommer : donnez un nouveau nom à la ressource.
  • Cloner en HTML : créez une copie de votre ressource entièrement codée en HTML.
  • Copier vers le  portail :  créez une copie de votre actif et envoyez-la vers un autre compte HubSpot auquel vous avez accès.
  • Créer une page/un e-mail : créez un nouveau contenu en utilisant ce modèle.
  • Afficher les dépendances : affichez une liste de tout contenu HubSpot utilisant le fichier.
  • Afficher l'historique des révisions : consultez un historique des versions enregistrées.
  • Copier le bloc de texte : utilisez-le pour copier rapidement le bloc de code de votre  code personnalisé  module sur le presse-papier. Cette option apparaîtra uniquement lorsque vous effectuez un  clic droit  sur un module.
  • Verrouiller le dossier : verrouillez un dossier pour empêcher les utilisateurs de modifier son contenu dans le gestionnaire de conception. Le contenu des dossiers verrouillés peut être modifié uniquement dans votre environnement de développement local.
  • Supprimer : supprimez ce fichier, dossier, modèle ou module.

clic droit

Onglets

Lorsque vous cliquez sur le nom d'un modèle, module ou fichier codé, il ouvre votre sélection dans un onglet dans l'éditeur. Les onglets facilitent votre travail lorsque vous effectuez plusieurs tâches à la fois et vous permettent de passer d'un modèle ou fichier codé à un autre. Dans l'éditeur, cliquez sur n'importe quel onglet pour afficher les options de gestion des onglets dans l'éditeur. Pour vérifier la liste complète des onglets, cliquez sur la flèche du bas à droite. 

Pour avoir plus d'espace de travail dans l'éditeur de mise en page, cliquez  sur l'icône réduire pour réduire la recherche. Vous pouvez agrandir à nouveau la recherche en cliquant sur l'icône dossier folder.

2021-12-16_16-33-42 (2)

Créer de nouveaux modèles et fichiers

Pour créer un nouveau modèle, module ou fichier codé, cliquez sur Fichier >Nouveau fichier dans l'angle supérieur gauche de l'écran. Il est possible de créer l'un des types de ressources suivantes :

  • Glisser et déposer : un modèle conçu pour ajouter des modules à une interface glisser-déposer.
  • HTML et HUBL : un modèle codé personnalisé créé dans l'éditeur de code utilisant le code HTML, CSS et Javascript.
  • Feuille de style : un fichier CSS codé qui peut être utilisé pour le style des modules et des fichiers.
  • Javascript : un fichier codé de Javascript qui peut être appliqué aux modules et aux fichiers.
  • Module: un module codé personnalisé qui peut être ajouté à un modèle.

Éditeur de mise en page

L'éditeur de mise en page est une interface glisser-déposer pour la structure et le contenu par défaut de vos pages et e-mails. Vous verrez les noms des modules et des groupes, ainsi que la classe de corps appliquée à chaque composant. Vous pouvez modifier chaque module ou groupe en cliquant pour le modifier dans l'inspecteur à droite ou en faisant un clic droit sur le composant pour accéder à la fonctionnalité de l'inspecteur.

Glissez et déposez les composants de l'éditeur de mise en page pour ajuster leur emplacement et leur taille sur le modèle. Il existe des boutons de désactivation et des boutons Rétablir dans l'angle supérieur gauche de l'écran pour vous aider rapidement à revenir sur vos changements. Vous pouvez également faire un clic droit sur un module pour regrouper rapidement, cloner ou modifier un type de module, ou utiliser des raccourcis clavier pour obtenir les mêmes actions.Cliquez sur le bouton Aperçu dans l'angle supérieur droit de l'écran pour afficher votre travail et tester la mise en page à différentes tailles d'écran.

Les mises en page des modèles HubSpot sont toutes adaptables ; elles s'ajustent donc automatiquement à différentes tailles d'écran. Cet éditeur établit vos modules de glisser-déposer dans le balisage HTML de la mise en forme qui répond grâce à du CSS intégré.

Découvrez-en davantage sur la création et la modification de modèles ainsi que l'ajout de styles à votre modèle.

Inspecteur

L'inspecteur vous permet d'ajouter et de modifier des composants dans un modèle ou un module. Il dépend de la tâche que vous effectuez et du type de fichier. Par exemple :

  • Lorsqu'un élément est sélectionné dans l'éditeur glisser-déposer, l'inspecteur affiche toutes les fonctionnalités et les options de ce composant.
  • Lorsqu'aucun élément n'est sélectionné dans l'éditeur glisser-déposer, l'inspecteur affiche des options pour le modèle lui-même.
  • En modifiant un module, l'inspecteur vous permet de modifier et d'ajouter des champs.

Selon le type de module sélectionné sur votre modèle, différentes options peuvent être disponibles dans l'inspecteur. 

Pour les modèles de glisser-déposer, l'onglet + Ajouter est utilisé pour ajouter de nouveaux composants à la mise en page. L'onglet Modifier de l'inspecteur peut être utilisé pour attribuer des classes CSS personnalisées, modifier le contenu par défaut ou joindre des fichiers codés.

L'inspecteur comprend un fil d'Ariane en haut de l'écran pour vous aider à naviguer rapidement entre la ressource, le module, le groupe et le modèle sur lesquels vous travaillez.

Pour les modèles et modules HTML et HUBL personnalisés, vous pouvez utiliser l'inspecteur pour ajouter de nouveaux champs ou liens dans des fichiers codés. Vous pouvez également ajouter des balises de filtre pour indiquer le type de contenu et la fonction de vos modèles et modules codés afin de les rendre plus facilement accessibles dans la recherche. Vous pouvez également trouver des blocs de texte et des détails sur la façon dont ces attributs codés personnalisés peuvent être utilisés dans les modèles.

É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. Comme vous codez ou modifiez vos feuilles de style, vous pouvez en afficher un aperçu des effets de vos changements sur différentes tailles d'écran. L'éditeur de code offre aussi de nombreuses autres fonctionnalités EDI utiles, telles que les classes codées, la vérification des erreurs, la synchronisation de la syntaxe, l'enregistrement automatique, les balises de fermeture automatique, les alinéas automatiques et plus encore.

Découvrez-en davantage sur l'utilisation de l'éditeur de code.

Remarque : par défaut, HubSpot réduit automatiquement le JavaScript et le CSS inclus dans le gestionnaire de conception afin de supprimer les espaces, les sauts de ligne et les commentaires inutiles. Cela s'applique également au JavaScript et au CSS téléchargés dans le gestionnaire de conception par l'intermédiaire du CLI. Cela signifie que vous ne devez pas ajouter du code déjà minifié directement dans le gestionnaire de conception.

En savoir plus sur laminification JavaScript et CSS de .

design-manager-code-editor-example

Éditeur de Module

Bien que les modèles de glisser-déposer de HubSpot proviennent de différents modules standard au choix, les designers peuvent parfois nécessiter une solution de conception plus personnalisée.Les modules sont des composants personnalisés réutilisables composés de champs HTML et  HubL , CSS et Javascript. Ces modules peuvent être ajoutés à un modèle et personnalisés dans l'éditeur de page sans code.

Utilisez l'inspecteur pour ajouter des champs, joindre des fichiers codés ou ajouter des balises pour organiser les éléments. Tout comme dans l'éditeur de code, vous pouvez afficher un aperçu de votre travail sur une variété de différentes tailles d'écran. Vous pouvez également préciser le contenu par défaut pour les champs de votre module, verrouiller le contenu par défaut ou réaliser les champs de module spécifiques requis. 

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. Vous pouvez accéder à vos actifs créatifs ou charger rapidement de nouveaux fichiers sans quitter l'application. 

file-manager

Cet article vous a-t-il été utile ?
Ce formulaire n'est utilisé que pour recueillir du feedback sur la documentation. Découvrez comment obtenir de l'aide sur HubSpot.