Última modificação: 12 de setembro de 2025
‘Como adicionar recursos de tema a um site existente do HubSpot CMS’;
‘LATAM BR (PT) [NEW] Add theme capabilities to an existing HubSpot CMS website’;
‘Os recursos do tema podem ser adicionados de forma complementar a sites mais antigos. Pense no futuro do site e em como esses recursos podem melhorá-lo.’;
Um dos benefícios do HubSpot é que você não precisa atualizá-lo constantemente. O CMS Hub sempre usa a versão mais recente. Os novos recursos introduzidos com o CMS Hub são complementares. Portanto, os modelos, módulos etc. para os sites existentes do HubSpot CMS funcionam exatamente como foram criados para funcionar. Eles são ainda melhores, pois nos bastidores o CMS está sempre ficando melhor, mais rápido e mais fácil de editar.
Existem alguns recursos específicos do CMS Hub que um desenvolvedor precisa adicionar. Você pode implementar alguns desses recursos de forma diferente do que faria para um site novo. Este tutorial vai orientá-lo pela adição desses recursos ao(s) seu(s) site(s) existente(s).
Antes de continuar:
- Revise os principais conceitos do CMS Hub, mesmo que você já esteja acostumado a desenvolver no HubSpot. Você entenderá melhor como todas as peças se encaixam.
- Você também precisará usar a CLI do CMS; portanto, se ela não estiver instalada, configure-a primeiro.
Tema
Os temas do CMS Hub são um pacote de modelos, módulos, arquivos CSS, JSON e JS. Como os temas são um pacote, eles afetam toda a experiência do editor de conteúdo. Ao criar um novo site ou landing page, o criador de conteúdo recebe uma grade dos temas em sua conta. Selecione o tema que está usando e será mostrada uma grade com apenas os modelos desse tema. Ao editar uma página usando um modelo de um tema, os módulos desse tema receberão tratamento especial, destacando-os no painel Adicionar módulo.1. Colocar os arquivos existentes em uma pasta
Se todos os seus modelos, módulos, arquivos CSS e JS estiverem na mesma pasta, eles serão considerados como parte de um tema. Não importa se eles estão organizados em subpastas; importa apenas que esses ativos estejam contidos em uma pasta. Se eles já estiverem armazenados dessa maneira, ótimo; caso contrário, crie uma pasta e mova seus ativos para ela. Dê a essa pasta o nome que deseja dar ao seu tema. O nome depende totalmente de você, mas talvez nomeá-lo com base na marca da empresa que o site reflete, juntamente com o ano da reformulação ou atualização.2. Tornar uma pasta um tema
Os temas exigem dois arquivos JSON, e apenas um deles precisa de conteúdo real inicialmente.- Theme.json - contém as configurações do seu tema.
- Fields.json - contém campos que podem ser usados para fazer alterações de design em todo o site.
- Busque a pasta que você criou na etapa “colocar os arquivos existentes em uma pasta” no seu computador.
- Dentro da pasta no seu computador, crie um novo arquivo com o nome
theme.json. - Copie o exemplo de arquivo
theme.jsonno documento de temas. - Cole o código de exemplo no seu arquivo
theme.json. - Altere o valor de
"label"para o nome do tema, como você deseja que os criadores de conteúdo o vejam. - Altere
"preview_path"para o caminho do modelo da página inicial ou do modelo usado com mais frequência. - Faça uma captura de tela da página inicial do site. Nomeie a imagem como
thumb.jpg. Coloque a imagem dentro da mesma pasta do seu arquivotheme.json. - Altere
"screenshot_path"em theme.json para o caminho da sua imagemthumb.png. - Salve o arquivo.
- Dentro da mesma pasta que seu
theme.json, crie um novo arquivo com o nome fields.json. Dentro desse arquivo, digite apenas[]e salve o arquivo.
hs upload. Agora você tem um tema básico. Os módulos e modelos dentro desse tema serão exibidos associados ao tema.
3. Adicionar campos de tema
Os campos de tema são controles que você pode fornecer a um criador de conteúdo para permitir que ele faça alterações de estilo em todo o tema. Durante a criação inicial de um site, esses controles de tema permitem que os criadores de conteúdo se envolvam, ajudando a definir a marca em todo o site. As equipes podem achar que isso libera o desenvolvedor para se concentrar nos aspectos mais técnicos do desenvolvimento do site. Para sites existentes, os campos de tema podem ser desnecessários. Afinal, se o site já foi criado de forma personalizada, provavelmente não há propósito em adicionar controles de cor e tipografia em todo o site. Se a marca de um site estiver passando por uma mudança significativa, pode ser mais apropriado criar um novo design do que adicionar campos retroativamente. Em última análise, esta é uma decisão que você deve tomar mutuamente com as outras partes interessadas envolvidas no site. Para adicionar campos ao tema, adicione o JSON deles ao seu arquivo fields.json. Os campos seguem a mesma estrutura que os campos do módulo. Certifique-se de que os usuários que devem ter acesso para alterar os valores do campo do tema tenham a permissão “Editar temas e conteúdo global”. Certifique-se de que os usuários que não devem editar essas configurações não tenham essa opção ativada.
Clonar áreas de arrastar e soltar como HTML no gerenciador de design
As áreas de arrastar e soltar e as parciais globais exigem o uso de arquivos HTML + HubL codificados. Se o seu site existente puder ser criado usando o antigo sistema de gerenciamento de design de arrastar e soltar e você quiser usar esses novos recursos, esses modelos podem precisar ser clonados como HTML. Para clonar esses modelos como modelos HTML + HubL:- Abra o gerenciador de design e encontre o modelo na busca.
- Clique com o botão direito no modelo.
- No menu de contexto que aparece, escolha “Clonar como HTML”
Áreas de arrastar e soltar
As áreas de arrastar e soltar podem ser adicionadas aos modelos para fornecer aos criadores de conteúdo uma maneira de incluir módulos horizontal e verticalmente em uma página. As áreas de arrastar e soltar também fornecem controle de estilo adicional para o criador de conteúdo. Como um modelo com uma área de arrastar e soltar pode ser usado para criar muitos layouts diferentes, isso libera o desenvolvedor para se concentrar nos aspectos técnicos da criação e atualização do site.Faz sentido converter todas as páginas existentes para usar áreas de arrastar e soltar?
Isso depende se a página está atendendo aos seus objetivos de negócios. Em outras palavras, se algo está funcionando bem, não há necessidade de mexer. Se o layout da página precisar ser alterado, então sim, provavelmente é aconselhável converter a página para usar as áreas de arrastar e soltar. Se a página está cumprindo seu propósito e não precisa de alterações de layout, provavelmente está tudo certo.Converter modelos existentes
É relativamente fácil criar um clone de um modelo antigo e alterar a coluna flexível para uma área de arrastar e soltar. Essa é uma boa ideia, pois abre muitas possibilidades para os criadores de conteúdo. Isso dá aos criadores de conteúdo muito controle criativo para novas páginas. Se o seu modelo for um modelo de arrastar e soltar do gerenciador de design, veja clonar áreas de arrastar e soltar como HTML no gerenciador de design.- A solução mais fácil é encontrar as instâncias de colunas flexíveis, que usam a tag HubL
{% widget_container "my_unique_column_name" %}. - Substitua cada instância conforme necessário por
{% dnd_area "my_unique_area_name" %}. - Se não quiser definir os módulos padrão, deixe
dnd_areaem branco. Se você quiser transferir os módulos padrão para a região ou definir novos padrões úteis, dentro dednd_area, adicione uma seçãodnd_e, dentro dela, umadnd_column. - Para cada tag de módulo dentro do
widget_containerantigo, você desejará criar umadnd_rowcontendo umdnd_modulecom um caminho correspondente aos módulos que deseja exibir por padrão. Isso criará o mesmo layout vertical que a coluna flexível tinha.
Como faço para migrar páginas existentes?
Se você quiser converter uma página para usar áreas de arrastar e soltar, a maneira mais segura de fazer isso é usar a preparação de conteúdo.- Abra a ferramenta de preparação de conteúdo, encontre a página existente e teste-a. Escolha “Preparar página em branco”.
- Selecione o novo modelo que usa a área de arrastar e soltar.
- Copie e cole as informações da versão original da página, criando o layout desejado.
- Quando terminar, publique em preparação.
- Na ferramenta de preparação de conteúdo, navegue até a guia “Publicar”. Selecione a página e publique em preparação.
Parciais globais
Parciais globais são partes de conteúdo HTML e HubL que podem ser reutilizadas em todo o site. Os tipos mais comuns de parciais globais são cabeçalhos de sites, barras laterais e rodapés. Para criadores de conteúdo, as parciais globais se manifestam no editor de conteúdo como regiões que eles podem selecionar para editar no editor de conteúdo global. O editor de conteúdo global se parece com o editor de página, mas é usado para editar conteúdo global. Para ilustrar, você pode implementar o cabeçalho como uma parcial global com módulos de navegação e outros conteúdos. Para o criador de conteúdo, se precisar adicionar um link à navegação, ele pode clicar no cabeçalho no editor de páginas, clicar no módulo de menu e atualizar o menu. Certifique-se de que os usuários que devem ter acesso para editar conteúdo global tenham a permissão “Editar temas e conteúdo global”.