Última modificação: 28 de agosto de 2025
Um tema é um conjunto transferível e contido de recursos para desenvolvedores, projetado para permitir uma experiência flexível de edição de conteúdo. Você pode desenvolver temas localmente com a CLI do HubSpot usando suas ferramentas, tecnologias e fluxos de trabalho favoritos. Os temas e todos os seus arquivos também podem ser transferidos entre ambientes e contas. Para ver uma apresentação em vídeo sobre como começar a desenvolver temas, assista ao vídeo do HubSpot Academy abaixo:

​
Temas como um pacote

Os temas são um pacote que pode ser aplicado ao aplicativo HubSpot em vários locais para permitir uma experiência eficiente de criação de conteúdo. Os desenvolvedores podem usar temas para criar um sistema de design dentro do qual os criadores de conteúdo trabalharão. Qualquer nível de flexibilidade, ou de contenções, pode ser incorporado em um tema para atender às necessidades do seu negócio.

​
Criação de página

Quando os criadores de conteúdo começam a criar novas páginas, eles são solicitados a selecionar um tema de partida para a página e o modelo dentro do tema a ser utilizado.
Seleção de um tema no HubSpot
A imagem de visualização do tema, assim como outras configurações, estão definidas no arquivo theme.json.

​
Campos de tema

Os temas permitem aos desenvolvedores criar um conjunto de campos de tema, semelhantes aos Campos de módulo que, por sua vez, permitem aos criadores de conteúdo ajustar vários botões e mostradores projetados por um desenvolvedor para permitir o controle sobre o estilo global de um site sem a necessidade de editar o CSS. Os desenvolvedores usam o HubL para acessar os valores dos campos do tema em todo o CSS. Os criadores de conteúdo usam o Editor de tema para modificar os Campos do tema, visualizar essas alterações em relação aos modelos existentes dentro de um tema e publicar suas alterações.
temas
Os campos são determinados pelo arquivo fields.json de um tema. Ao editar um tema no modo de teste, você também pode copiar o JSON das configurações do tema. Assim, você pode colar quaisquer atualizações no arquivo local fields.json do tema.
copy-theme-settings-test-mode

​
Módulos do tema

Os módulos dentro de um tema devem ser concebidos especificamente para utilização dentro dos modelos desse tema. O editor de conteúdo destacará esses módulos de tema, tornando rápido e fácil para os criadores de conteúdo adicionar módulos às páginas que estão construindo que são projetados para funcionar bem no contexto daquela página. Os módulos padrão e o resto dos módulos na sua conta da HubSpot ainda estarão disponíveis.
Módulos em um tema
Ao desenvolver um tema, você pode ocultar módulos e seções no editor de página para criar uma experiência de criação de conteúdo mais simplificada.

​
Estrutura de arquivos do tema

Um tema é um diretório único de arquivos. Você pode incluir arquivos HTML, CSS e Javascript, módulos e arquivos adicionais que podem ser organizados de qualquer forma dentro dos subdiretórios da pasta de temas principal. Dois arquivos JSON são necessários para criar um tema: theme.json e fields.json. Esses arquivos devem ser incluídos na pasta raiz do tema. Para começar com um exemplo, consulte HubSpot CMS Boilerplate.
estrutura de arquivos do tema
No momento, os arquivos .json só podem ser criados e carregados em uma conta da HubSpot por meio das ferramentas de desenvolvimento local.

​
theme.json

O arquivo theme.json contém as informações de metadescrição do diretório do tema, como o rótulo legível do tema, captura de tela de visualização e várias configurações quanto ao comportamento do tema. O arquivo theme.json será parecido com o seguinte: 
// theme.json
{
  "label": "Cool Theme",
  "preview_path": "./templates/home-page.html",
  "screenshot_path": "./images/templates/homepage.jpg",
  "enable_domain_stylesheets": false,
  "version": "1.0",
  "author": {
    "name": "Jon McLaren",
    "email": "noreply@hubspot.com",
    "url": "https://theme-provider.com/"
  },
  "documentation_url": "https://theme-provider.com/cool-theme/documentation",
  "license": "./license.txt",
  "example_url": "https://theme-provider.com/cool-theme/demo",
  "is_available_for_new_content": true
}
ParâmetroTipoDescrição
labelStringO rótulo legível do tema, utilizado em vários locais em que o tema é mostrado na aplicativo HubSpot, como a tela de seleção de modelos e o editor de temas.
preview_pathStringUm caminho relativo para um arquivo de modelo no tema que deve ser o modelo padrão usado ao visualizar o tema no editor.
screenshot_pathStringUm caminho relativo para um arquivo de imagem que é usado para fornecer uma imagem da aparência do tema nos vários locais em que ele é aplicado, por exemplo, na tela de seleção do modelo.
enable_domain_stylesheetsBooleanoAtivar ou desativar as folhas de estilo anexadas aos domínios nas Configurações do site que são incluídas nos modelos do tema. O valor por padrão é false.
versionStringNúmero inteiro da versão que oferece suporte a versões ..
AuthorobjetoO objeto para fornecer informações sobre você como fornecedor do tema.name
O nome do fornecedor.
email
O endereço de e-mail de suporte do fornecedor.
url
O site do fornecedor.
documentation_urlStringO link para a documentação do tema.
example_urlStringO link de exemplo dinâmico do tema.
licenseStringUm identificador SPDX válido ou o caminho relativo à licença dentro do seu tema.Essa licença determina os tipos de uso e modificação que são permitidos pelo criador do tema. É útil ao enviar para o marketplace.
is_available_for_new_contentBooleanoBooleano que determina se um tema aparece na página do criador de conteúdo para seleção. O valor por padrão é true.

​
fields.json

O arquivo fields.json controla os campos e grupos de campos disponíveis no editor de temas, incluindo campos de estilo. Os campos que você decide incluir dependem de quanto controle você quer que os criadores de conteúdo tenham no editor de páginas. O número de campos disponíveis para os temas é mais limitado do que para os módulos, pois os campos de tema são melhores para opções de estilo, enquanto que o conteúdo global é melhor para o conteúdo do tema. Por exemplo, em vez de adicionar um campo de texto ao field.json do tema para o slogan do site, ele deve ser adicionado como um módulo global para que os criadores de conteúdo possam atualizar o slogan a partir do editor de páginas, não do editor de temas. Os campos que estão disponíveis para uso nos temas são: Para ver a documentação completa sobre as opções possíveis para os campos de tema, consulte a documentação dos campos de módulo e tema.

​
Usar valores de campo de tema

Para acessar os valores dos campos, use notação de pontos e adicione o prefixo ao caminho do valor em fields.json com o tema. Você pode usar um valor de campo de tema em suas folhas de estilo usando uma sintaxe como {{ theme.path.to.value }}. Por exemplo, o campo de fonte descrito abaixo: 
// fields.json
[
  {
    "type": "group",
    "name": "typography",
    "label": "Typography",
    "children": [
      {
        "type": "font",
        "name": "h1_font",
        "label": "Heading 1",
        "load_external_fonts": true,
        "default": {
          "color": "#000",
          "font": "Merriweather",
          "font_set": "GOOGLE",
          "variant": "700",
          "size": "48"
        }
      }
    ]
  }
]
É referenciado no CSS com: 
h1 {
 font-size: {{ theme.typography.h1_font.size }}px;
 font-family: {{ theme.typography.h1_font.font }};
 color: {{ theme.typography.h1_font.color }};
 text-decoration: {{ theme.typography.h1_font.styles.text-decoration }};
 font-style: {{ theme.typography.h1_font.styles.font-style }};
 font-weight: {{ theme.typography.h1_font.styles.font-weight }};
}

​
Visualizar temas

Para desenvolvedores, às vezes você precisa ser capaz de testar se seus campos de tema estão funcionando corretamente, mas sem impactar as páginas reais. É aí que entra o modo de teste do tema.

​
Modo de teste

Há duas maneiras de ativar o modo de teste:
  • Para ativar o modo de teste no gerenciador de design:
    • No gerenciador de design, selecione o tema no Finder.
    • Clique no botão Visualizar no canto superior esquerdo da barra lateral.
copy-theme-settings-test-mode-design-manager (1)
  • Para ativar o modo de teste no editor de página:
    • No editor de página, clique na guia Design na barra lateral esquerda e em Editar configurações do tema.
page-editor-edit-theme
  • Adicione ?testmode=true ao URL e pressione enter. Você estará no modo de teste.
Outro método é abrir as configurações do tema diretamente do editor de páginas e, Em seguida, adicionar o parâmetro de consulta ?testmode=true ao URL na barra de endereço.

​
Recursos relacionados