Zum Hauptinhalt springen
Última modificação: 22 de agosto de 2025
Com as configurações de marca, os usuários podem definir as cores da marca da empresa, logotipos e favicons para serem usados no conteúdo do HubSpot. Isso permite que você acesse as configurações da marca com tokens no arquivo fields.json de um tema e dentro de arquivos HTML/HubL e CSS. Você também pode acessar as cores da marca no arquivo fields.json de um módulo. Depois de adicionar esses tokens em um arquivo fields.json, os criadores de conteúdo podem editar seus valores no editor de configurações de tema. Ao adicionar esses tokens em um HTML, HubL ou CSS, os valores serão codificados e não poderão ser modificados no editor de páginas pelos criadores de conteúdo. Abaixo, saiba mais sobre as variáveis de configuração de marca disponíveis, juntamente com exemplos de implementação.

​
Variáveis das configurações de marca

A seguir está uma lista de opções que podem ser acessadas da área de configurações da marca dentro do valor do objeto property_value_paths ou em arquivos HTML/HubL e CSS.

​
Cores

As cores da marca podem ser acessadas no arquivo fields.json de um tema ou módulo e nos arquivos HTML/HubL e CSS usando os seguintes tokens do HubL:
  • Principal:
    • {{brand_settings.primaryColor}}
    • {{brand_settings.colors[0]}}
brand-colors-primary
  • Secundário: {{brand_settings.secondaryColor}}
brand-colors-secondary
  • Cores de destaque:
    • {{brand_settings.accentColor1}}
    • {{brand_settings.accentColor2}}
    • {{brand_settings.accentColor3}}
brand-colors-accent
  • Cores adicionais:
    • {{brand_settings.colors[1]}}
    • {{brand_settings.colors[2]}}
    • {{brand_settings.colors[3]}}
brand-colors-additional
Para acessar diretamente o código hexadecimal de uma cor, inclua um filtro hex no token. Por exemplo, {{brand_settings.primaryColor.hex}}. Para incluir as cores das configurações da marca em um arquivo fields.json de tema ou módulo, use o seguinte formato: 
//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"
    }
  }
}
Pode ser que as contas não tenham cores adicionais definidas nas configurações da marca. Se o seu código fizer referência a uma cor herdada que não existe nas configurações da marca, a seguinte lógica de fallback será usada:
  • secondaryColor assumirá a primeira cor adicional (colors[1]).
  • accentColor1 assumirá a primeira cor adicional (colors[2]).
  • accentColor2 assumirá a primeira cor adicional (colors[3]).
  • accentColor3 assumirá a primeira cor adicional (colors[4]).
  • Cores adicionais (por exemplo, colors[3]) voltará para o valor default. Se não houver um conjunto de cores de propriedade padrão, primaryColor será usado.

​
Logotipos

Os logotipos da marca podem ser acessados nos arquivos fields.json e HTML/HubL e CSS. Você pode usar os seguintes tokens para acessar o conjunto de logotipos principais nas configurações da marca:
  • {{brand_settings.primaryLogo}}
  • {{brand_settings.logos[0]}}
brand-settings-logo0
Todos os logotipos adicionais podem ser acessados usando {{brand_settings.logos[1-19]}}. Além disso, você pode acessar os seguintes atributos de logotipo:
  • URL do logotipo: {{brand_settings.primaryLogo.link}}
  • Texto alternativo do logotipo: {{brand_settings.primaryLogo.alt}}
  • Altura do logotipo: {{brand_settings.primaryLogo.height}}
  • Largura do logotipo: {{brand_settings.primaryLogo.width}}
  • Link para a imagem do logotipo: {{brand_settings.primaryLogo.src}}

​
Favicons

Os favicons de marcas podem ser acessados somente nos arquivos HTML/HubL e CSS. Você pode usar os seguintes tokens para acessar o conjunto de logotipos principais nas configurações da marca:
  • {{brand_settings.primaryFavicon}}
  • {{brand_settings.favicons[0]}}
brand-settings-favicon0
Todos os favicons adicionais podem ser acessados usando {{brand_settings.favicons[1-19]}}. Você pode acessar o URL do logotipo diretamente incluindo um filtro src. Por exemplo, {{brand_settings.primaryFavicon.src}}.
⌘I