Dernière modification : 28 août 2025
Un thème est un ensemble portable et contenu de ressources de développement conçues pour fonctionner ensemble afin d’offrir une expérience flexible en matière de modification de contenu. Ces ressources peuvent comprendre des modèles, des modules, des fichiers CSS, des fichiers JavaScript, des images, etc. Les thèmes permettent aux développeurs de créer un ensemble de champs de thème, à l’image des champs de module, ce qui permet aux créateurs de contenu de contrôler les styles globaux du site web sans avoir à modifier les CSS. Vous pouvez utiliser HubL pour accéder aux valeurs des champs du thème dans la CSS du thème. Les créateurs de contenu peuvent alors utiliser l’éditeur de thème pour modifier les champs du thème, prévisualiser ces modifications par rapport aux modèles existants dans un thème et publier leurs modifications.
Animation de l'interface utilisateur de modification des paramètres de thème montrant la sélection d'une couleur pour les éléments d'un thème.
Ce document vous guide dans la création de votre premier thème basé sur le boilerplate du CMS Hub. Pour en savoir plus sur les thèmes, consultez la documentation de référence relative aux thèmes.
S’il s’agit de votre première expérience de développement avec le CMS Hub, il est recommandé de passer par là :Démarrage rapide du développement CMS Hub

​
Remarque:

avant de commencer, vous devrez installer l’ILC HubSpot.
1

Démarrer un projet de thème avec boilerplate

Exécuter hs create website-theme my-website-theme pour créer un répertoire my-website-theme composé de fichiers provenant du boilerplate du thème CMS.
2

Télécharger le boilerplate CMS sur votre compte HubSpot

Exécutez hs upload my-website-theme my-website-theme. Le modèle sera téléchargé dans le gestionnaire de conception de votre compte, dans un dossier intitulé my-website-theme.
3

Créer une page

Pour créer une page à partir du thème téléchargé :
  • Dans votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Cliquez sur Créer dans l’angle supérieur droit, puis sélectionnez Page de site web.
  • Dans la boîte de dialogue, sélectionnez le domaine sur lequel la page sera publiée, puis saisissez un nom de page. Cliquez ensuite sur Créer une page.
create-page-from-dashboard
  • Sur l’écran de sélection des modèles, les modèles de votre thème actif apparaissent en haut de la page.
    • Si vous n’avez pas sélectionné de thème actif, passez la souris sur le boilerplate du thème CMS et cliquez sur Définir comme thème actif.
    • Si vous avez déjà défini un thème actif, sélectionnez votre nouveau thème en cliquant sur le menu déroulant du sélecteur de thème, puis en sélectionnant Modifier le thème. Ensuite, passez le curseur sur Boilerplate du thème CMS et cliquez sur Définir comme thème actif. Sur l’écran suivant, sélectionnez un modèle.
theme-selector
Vous serez redirigé vers l’éditeur de page où vous pourrez modifier les champs du thème.
4

Modifier les champs de thème

  • Dans la barre latérale gauche de l’éditeur de page, cliquez sur l’onglet Thèmes.
    • Dans l’onglet Thèmes, cliquez sur Modifier les paramètres de thème. C’est ici que vous pouvez modifier les paramètres de votre thème existant. La publication des modifications apportées aux paramètres du thème mettra à jour les styles sur toutes vos pages utilisant le thème mis à jour.
edit-theme-settings
5

Préparez-vous à apporter des modifications locales

Revenez à votre terminal, puis exécutez hs watch my-website-theme my-website-theme. Cette commande consulte votre répertoire local et télécharge automatiquement les changements suivants vers votre compte HubSpot lors de l’enregistrement des fichiers.
6

Ajouter un champ de thème

Maintenant que nous sommes face à des modifications locales, ajoutez un nouveau champ de thème :
  • Ouvrez le fichier fields.json dans votre éditeur. Ce fichier contrôle les champs disponibles dans la barre latérale de l’éditeur de thème. Nous allons ajouter un nouveau champ pour spécifier la hauteur du pied de page.
  • Vers le bas du fichier, localisez le groupe footer.
  • Copiez le code ci-dessous et collez le JSON dans le fichier au-dessus du premier élément du tableau enfant pour le groupe footer.
// fields.json
      {
      "id" : "",
      "name" : "height",
      "label" : "Footer height",
      "required" : false,
      "locked" : false,
      "display" : "text",
      "step" : 1,
      "type" : "number",
      "min" : 10,
      "max" : 900,
      "help_text":"This footer will expand in height to accomodate any content added to the footer. You are setting the minimum height in px",
      "default" : 100
      },
  • Enregistrez fields.json et actualisez l’aperçu du thème dans HubSpot. Votre nouveau champ devrait s’afficher dans la barre latérale de gauche.
7

Référencer le champ dans votre CSS

  • Dans votre éditeur de code, ouvrez le fichier theme-overrides.css. Localisez ensuite le sélecteur CSS de .footer. Nous allons maintenant ajouter une min-height à ce sélecteur.
    • Pour accéder à une valeur dans un thème, utilisez l’objet theme. Par exemple, vous pouvez utiliser {{ theme.footer.height }} pour accéder à la valeur de hauteur définie dans votre champ de hauteur.
    • Remplacez la déclaration .footer dans theme-overrides.css par la suivante :
    .footer {
  background-color: {{ footer_bg_color }};
  min-height: {{theme.footer.height}}px;
}
    • Enregistrez theme-overrides.css pour le télécharger sur votre compte HubSpot.
8

Tester les modifications

Revenez à l’éditeur de thème et actualisez la page pour voir votre nouveau champ apparaître sous le pied de page. Mettez à jour la valeur de la hauteur pour qu’elle soit immédiatement reflétée dans l’aperçu. Il peut être judicieux de définir une couleur d’arrière-plan pour le pied de page afin que vous puissiez voir la modification plus facilement.

​
Étapes suivantes

Maintenant que vous avez créé et mis à jour votre thème, vous pouvez créer d’autres champs de thème et les personnaliser pour vos projets. Pour plus d’options de personnalisation, consultez la présentation des thèmes. Pendant la création de votre thème, il peut être utile de consulter les bonnes pratiques en matière d’optimisation des sites web sur le CMS Hub. HubSpot compte plusieurs thèmes par défaut qui sont proposés avec CMS Hub. Ces thèmes peuvent être consultés, clonés et mis à jour afin de savoir comment utiliser un thème dans une situation concrète. Une fois que vous maîtrisez les thèmes, découvrez comment créer votre premier module personnalisé.