Zum Hauptinhalt springen
Dernière modification : 22 août 2025
Grâce aux paramètres de marque, les utilisateurs peuvent configurer les couleurs, les logos et les favicons de l’entreprise à utiliser dans les contenus HubSpot. Cela vous permet d’accéder à ces paramètres de marque avec des jetons dans le fichier fields.json d’un thème et dans les fichiers HTML/HubL et CSS. Vous pouvez également accéder aux couleurs de la marque dans le fichier fields.json d’un module. Après avoir ajouté ces jetons dans un fichier fields.json, les créateurs de contenu peuvent modifier leurs valeurs dans l’éditeur de paramètres de thème. Lorsque vous ajoutez ces jetons dans un HTML, un HubL ou un CSS, les valeurs seront fortement codées et ne pourront pas être modifiées dans l’éditeur de page par les créateurs de contenu. Découvrez ci-dessous les variables de configuration de marque disponibles ainsi que des exemples de mise en œuvre.

​
Variables des paramètres de marque

La liste suivante est une liste des options accessibles depuis la zone des paramètres de la marque, dans la valeur de l’objet property_value_paths ou dans les fichiers HTML/HubL et CSS.

​
Couleurs

Les couleurs de la marque sont accessibles à la fois dans le fichier fields.json d’un thème ou d’un module et dans les fichiers HTML/HubL et CSS à l’aide des jetons HubL suivants :
  • Principal :
    • {{brand_settings.primaryColor}}
    • {{brand_settings.colors[0]}}
brand-colors-primary
  • Secondaire : {{brand_settings.secondaryColor}}
brand-colors-secondary
  • Couleurs du thème :
    • {{brand_settings.accentColor1}}
    • {{brand_settings.accentColor2}}
    • {{brand_settings.accentColor3}}
brand-colors-accent
  • Couleurs supplémentaires :
    • {{brand_settings.colors[1]}}
    • {{brand_settings.colors[2]}}
    • {{brand_settings.colors[3]}}
brand-colors-additional
Pour accéder directement au code hexadécimal d’une couleur, incluez un filtre hex dans le jeton. Par exemple : {{brand_settings.primaryColor.hex}} Pour inclure les couleurs des paramètres de marque dans le fichier fields.json d’un thème ou d’un module, utilisez le format suivant : 
//Example of using the primary color in within a theme's
// field.json file
{
  "name": "branding_color",
  "label": "branding_color",
  "type": "color",
  "default": {
    "color": "#26ff55",
    "opacity": 60
  },
  "inherited_value": {
    "property_value_paths": {
      "color": "brand_settings.primaryColor"
    }
  }
}
Il se peut que les comptes n’aient pas de couleurs supplémentaires configurées dans leurs paramètres de marque. Si votre code fait référence à une couleur héritée qui n’existe pas dans les paramètres de marque, la logique de repli suivante est utilisée :
  • secondaryColor revient à la première couleur supplémentaire (colors[1]).
  • accentColor1 revient à la deuxième couleur supplémentaire (colors[2]).
  • accentColor2 revient à la troisième couleur supplémentaire (colors[3]).
  • accentColor3 revient à la quatrième couleur supplémentaire (colors[4]).
  • Les couleurs supplémentaires (par exemple : colors[3]) reviendront à la valeur default. S’il n’y a pas de jeu de couleur de propriété par défaut, primaryColor sera utilisé.

​
Logos

Les logos de marques sont accessibles dans le fichier fields.json d’un module et dans les fichiers HTML/HubL et CSS. Vous pouvez utiliser les jetons suivants pour accéder au logo principal défini dans les paramètres de la marque :
  • {{brand_settings.primaryLogo}}
  • {{brand_settings.logos[0]}}
brand-settings-logo0
Tous les logos supplémentaires sont accessibles en utilisant {{brand_settings.logos[1-19]}}. En outre, vous pouvez accéder aux attributs de logo suivants :
  • URL du logo : {{brand_settings.primaryLogo.link}}
  • Texte alternatif du logo : {{brand_settings.primaryLogo.alt}}
  • Hauteur du logo : {{brand_settings.primaryLogo.height}}
  • Largeur du logo : {{brand_settings.primaryLogo.width}}
  • Lien vers l’image du logo : {{brand_settings.primaryLogo.src}}

​
Favicons

Les favicons de marques ne sont accessibles que dans les fichiers HTML/HubL et CSS. Vous pouvez utiliser les jetons suivants pour accéder au logo principal défini dans les paramètres de la marque :
  • {{brand_settings.primaryFavicon}}
  • {{brand_settings.favicons[0]}}
brand-settings-favicon0
Tous les favicons supplémentaires sont accessibles en utilisant {{brand_settings.favicons[1-19]}}. Vous pouvez accéder directement à l’URL du logo en incluant un filtre src. Par exemple : {{brand_settings.primaryFavicon.src}}.
⌘I