Zum Hauptinhalt springen
Última modificação: 8 de outubro de 2025
Um tema é um pacote independente e portátil de ativos de desenvolvedor, projetado para trabalhar em conjunto, a fim de permitir uma experiência flexível de edição de conteúdo. Esses ativos podem incluir modelos, módulos, arquivos CSS, arquivos JavaScript, imagens e muito mais. Os temas permitem que os desenvolvedores criem um conjunto de campos de tema, semelhantes a campos de módulo, nos quais os criadores de conteúdo podem controlar estilos globais de site sem precisar editar o CSS. Você pode usar o HubL para acessar os valores dos campos de tema em todo o CSS do tema. Os criadores de conteúdo podem usar o editor de temas para modificar os campos de tema, visualizar essas alterações em relação aos modelos existentes dentro de um tema e publicar suas alterações.
As configurações do tema editam a animação da interface do usuário, mostrando a seleção de uma cor para elementos de um tema.
Este documento explica como criar seu primeiro tema de acordo com o HubSpot CMS Boilerplate. Para obter mais informações sobre temas, consulte a documentação de referência para temas.
Se esta é a sua primeira experiência com o desenvolvimento do CMS Hub, recomendamos o seguinte:Início rápido no desenvolvimento do CMS Hub

​
Observação:

Antes de começar, você precisará instalar a CLI da HubSpot.
1

Iniciar um projeto de temas do boilerplate

Execute hs create website-theme my-website-theme para criar um diretório my-website-theme preenchido com arquivos do Boilerplate do tema do CMS.
2

Carregar o CMS Boilerplate na sua conta da HubSpot

Execute hs upload my-website-theme my-website-theme. Isso fará o upload do boilerplate para o gerenciador de design da sua conta, em uma pasta intitulada my-website-theme.
3

Criar uma página

Para criar uma página do tema carregado:
  • Na sua conta da HubSpot, acesse Marketing > Site > **Páginas do site. **
  • No canto superior direito, clique em Criar, em seguida, selecione Página do site.
  • Na caixa de diálogo, selecione o domínio no qual a página será publicada e insira um nome de página. Em seguida, clique em Criar página.
create-page-from-dashboard
  • Na tela de seleção de modelos, os modelos do seu tema ativo serão exibidos na parte superior da página.
    • Se você não selecionou um tema ativo, passe o cursor do mouse sobre o Boilerplate de temas do CMS e clique em** Definir como tema ativo**.
    • Se já tiver definido um tema ativo, selecione o novo tema, clicando no menu suspenso do Seletor de temas e selecionando Alterar tema. Em seguida, passe o cursor do mouse sobre o Boilerplate de temas do CMS e clique em Definir como tema ativo. Na próxima tela, selecione um modelo.
theme-selector
Você será encaminhado ao editor de páginas, onde poderá editar os campos de tema.
4

Editar campos de tema

  • Na barra lateral esquerda do editor de páginas, clique na guia Temas.
    • Na guia Temas, clique em Editar configurações do tema. Aqui, você pode modificar as configurações de tema existentes. Publicar as alterações nas configurações do tema atualizará os estilos em suas páginas usando esse tema que foi atualizado.
edit-theme-settings
5

Preparar para fazer alterações locais

Retorne ao terminal e execute hs watch my-website-theme my-website-theme. Esse comando monitora o diretório local e carrega automaticamente as seguintes alterações nos arquivos salvos na sua conta da HubSpot.
6

Adicionar um campo do tema

Agora que estamos ouvindo as alterações locais, adicione um novo campo de tema:
  • Abra o arquivo fields.json no editor.  Este arquivo controla os campos disponíveis na barra lateral do editor de temas. Vamos adicionar um novo campo para especificar a altura do rodapé.
  • Perto da parte inferior do arquivo, localize o grupo footer.
  • Copie o código abaixo e cole o JSON no arquivo acima do primeiro item na matriz secundária do grupo de rodapé.
// 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
      },
  • Salve fields.json e atualize o visualizador de tema no HubSpot. O novo campo deve ser exibido na barra lateral esquerda.
7

Referenciar o campo no CSS

  • No editor de código, abra o arquivo theme-overrides.css. Em seguida, localize o seletor css para .footer. Agora vamos adicionar um min-height a este seletor.
    • Para acessar um valor em um tema, use o objeto theme. Por exemplo, você usaria {{ theme.footer.height }} para acessar o valor de altura definido em nosso campo de altura.
    • Substitua a declaração .footer no theme-overrides.css pelo seguinte:
    .footer {
  background-color: {{ footer_bg_color }};
  min-height: {{theme.footer.height}}px;
}
    • Salve theme-overrides.css para carregá-lo na sua conta da HubSpot.
8

Alterações do teste

Retorne ao editor de temas e atualize a página para ver o novo campo exibido no rodapé. Atualize o valor da altura para que ele seja refletido imediatamente na visualização. Pode ser útil definir uma cor de fundo para o rodapé, para que você possa ver a alteração com mais facilidade.

​
Próximas etapas

Agora que você criou e atualizou o seu tema, crie mais campos de tema e personalize-os para os seus projetos. Para obter mais opções de personalização, confira a visão geral dos temas. Ao criar seu tema, pode ser útil visualizar as práticas recomendadas para otimizar sites no HubSpot CMS. O HubSpot tem vários temas padrão fornecidos com o CMS Hub. Esses temas estão disponíveis para visualização, clonagem e atualização, para que você saiba como usar um tema em um cenário do mundo real. Depois de mexer com os temas, saiba como criar seu primeiro módulo personalizado.
⌘I