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.
CMS-General

Visite rapide du gestionnaire de conception

Dernière mise à jour: novembre 21, 2018

Disponible avec :

Hub Marketing Professional, Enterprise
Basique
HubSpot CMS

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 recevrez un guide d'explication de 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 de nos Designers.

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.

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

The finder is contextual, meaning that your actions will always be relative to folders and files selected. To create a new file or folder within a specific folder, click on that folder in the finder. You can click View Deselect all if you'd like to create a new file or folder outside any of your existing folders.

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 droitdirectement sur l'élément pour :

  • Cloner - réaliser une copie de votre fichier, dossier ou modèle.
  • Déplacer - Sélectionner un nouveau dossier pour votre ressource.
  • Renommer - donner un nouveau nom à la ressource.
  • Cloner en HTML - créer une copie de votre ressource entièrement codée en HTML.
  • Copier versportail- créer une copie de votre actif et l'envoyer à un autre compte HubSpot auquel vous avez accès.
  • Créer une page/un e-mail - créer un nouveau contenu en utilisant ce modèle.
  • Afficher les dépendances - voir une liste de tout contenu HubSpot utilisant le fichier.
  • Afficher l'historique des révisions - examiner 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 unclic droitsur un module.
  • Supprimer- supprimer 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.

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é.

En savoir plus sur la création et l'édition de modèles, ainsi que l'ajout de styles à votre modèle, dans les sections suivantes de ce guide.

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.

En savoir plus sur la façon d'utiliser l'éditeur de code dans une autre section de ce guide.

É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. 

gestionnaire de fichiers