Zum Hauptinhalt springen
Letzte Änderung: 22. August 2025
Über die Markeneinstellungen können Benutzer festlegen, dass die Markenfarben, -Logos und -Favicons des Unternehmens überall in HubSpot verwendet werden. Dadurch können Sie mit Token in der fields.json-Datei eines Designs und in HTML/HubL- und CSS-Dateien auf diese Markeneinstellungen zugreifen. Sie können auch auf Markenfarben innerhalb der fields.json-Datei eines Moduls zugreifen. Nach dem Hinzufügen dieser Token in einer fields.json-Datei können Content-Autoren ihre Werte im Editor für Designeinstellungen bearbeiten. Wenn Sie diese Token in einem HTML-, HubL- oder CSS-Code hinzufügen, werden die Werte fest kodiert und können im Seiten-Editor von Content-Autoren nicht geändert werden. Im Folgenden erfahren Sie mehr über die verfügbaren Variablen für Markeneinstellungen sowie Beispiele für die Umsetzung.

​
Variablen für Markeneinstellungen

Im Folgenden finden Sie eine Liste der Optionen, auf die Sie in den Markeneinstellungen innerhalb des Werts des property_value_paths-Objekts oder in HTML/HubL- und CSS-Dateien zugreifen können.

​
Farben

Auf Markenfarben kann sowohl innerhalb der fields.json-Datei eines Designs oder Moduls als auch innerhalb von HTML/HubL- und CSS-Dateien mithilfe der folgenden HubL-Token zugegriffen werden:
  • Primär:
    • {{brand_settings.primaryColor}}
    • {{brand_settings.colors[0]}}
brand-colors-primary
  • Sekundär: {{brand_settings.secondaryColor}}
brand-colors-secondary
  • Akzentfarben:
    • {{brand_settings.accentColor1}}
    • {{brand_settings.accentColor2}}
    • {{brand_settings.accentColor3}}
brand-colors-accent
  • Weitere Farben:
    • {{brand_settings.colors[1]}}
    • {{brand_settings.colors[2]}}
    • {{brand_settings.colors[3]}}
brand-colors-additional
Um direkt auf den Hex-Code einer Farbe zuzugreifen, berücksichtigen Sie einen hex-Filter im Token. Zum Beispiel: {{brand_settings.primaryColor.hex}}. Um die Farben von Markeneinstellungen in die fields.json-Datei eines Designs oder Moduls aufzunehmen, verwenden Sie das folgende Format: 
//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"
    }
  }
}
Es kann vorkommen, dass Acounts möglicherweise keine zusätzlichen Farben in ihren Markeneinstellungen konfiguriert haben. Wenn Ihr Code auf eine vererbte Farbe verweist, die in den Markeneinstellungen nicht vorhanden ist, wird die folgende Fallback-Logik verwendet:
  • secondaryColor greift auf die erste zusätzliche Farbe (colors[1]) zurück.
  • accentColor1 greift auf die zweite zusätzliche Farbe (colors[2]) zurück.
  • accentColor2 greift auf die dritte zusätzliche Farbe (colors[3]) zurück.
  • accentColor3 greift auf die vierte zusätzliche Farbe (colors[4]) zurück.
  • Zusätzliche Farben (z. B. colors[3]) greifen auf den default-Wert zurück. Wenn keine Standardfarbe für die Eigenschaft festgelegt wurde, wird primaryColor verwendet.

​
Logos

Auf Markenlogos kann in der fields.json-Datei in einem Modul sowie in HTML/HubL- und CSS-Dateien zugegriffen werden. Sie können die folgenden Token verwenden, um auf das primäre Logo zuzugreifen, das in den Markeneinstellungen festgelegt wurde:
  • {{brand_settings.primaryLogo}}
  • {{brand_settings.logos[0]}}
brand-settings-logo0
Alle zusätzlichen Logos können mithilfe von {{brand_settings.logos[1-19]}} aufgerufen werden. Darüber hinaus können Sie auf die folgenden Logo-Attribute zugreifen:
  • Logo-URL: {{brand_settings.primaryLogo.link}}
  • Logo-ALT-Text: {{brand_settings.primaryLogo.alt}}
  • Logo-Höhe: {{brand_settings.primaryLogo.height}}
  • Logo-Breite: {{brand_settings.primaryLogo.width}}
  • Link zum Bild des Logos: {{brand_settings.primaryLogo.src}}

​
Favicons

Auf Marken-Favicons kann nur innerhalb von HTML/HubL- und CSS-Dateien zugegriffen werden. Sie können die folgenden Token verwenden, um auf das primäre Logo zuzugreifen, das in den Markeneinstellungen festgelegt wurde:
  • {{brand_settings.primaryFavicon}}
  • {{brand_settings.favicons[0]}}
brand-settings-favicon0
Alle zusätzlichen Favicons können mithilfe von {{brand_settings.favicons[1-19]}} aufgerufen werden. Sie können direkt auf die URL des Logos zugreifen, indem Sie einen src-Filter berücksichtigen. Zum Beispiel: {{brand_settings.primaryFavicon.src}}.