> ## Documentation Index > Fetch the complete documentation index at: https://br.developers.hubspot.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Visão geral do tema > Criando temas do HubSpot CMS que permitem aos desenvolvedores construir sistemas de design nos quais os criadores de conteúdo podem trabalhar. 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](/developer-tooling/local-development/hubspot-cli/install-the-cli) 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](#theme-json). ### Campos de tema Os temas permitem aos desenvolvedores criar um conjunto de [campos de tema](#fields-json), 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](#using-theme-field-values) 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](#fields-json). Ao editar um tema no [modo de teste](/cms/start-building/building-blocks/overview#test-mode), 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](/cms/start-building/building-blocks/modules/hide-modules-and-sections) 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](https://github.com/HubSpot/cms-theme-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](/developer-tooling/local-development/hubspot-cli/install-the-cli). ### 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: ```json theme={null} // 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âmetro | Tipo | Descrição | | ------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | String | O 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_path` | String | Um caminho relativo para um arquivo de modelo no tema que deve ser o modelo padrão usado ao visualizar o tema no editor. | | `screenshot_path` | String | Um 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_stylesheets` | Booleano | Ativar 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`. | | `version` | String | Número inteiro da versão que oferece suporte a versões `.`. | | `Author` | objeto | O 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_url` | String | O link para a documentação do tema. | | `example_url` | String | O link de exemplo dinâmico do tema. | | `license` | String | Um [identificador SPDX](https://spdx.org/licenses/) 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_content` | Booleano | Booleano 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](https://br.developers.hubspot.com/docs/guides/cms/content/fields/overview#style-fields). 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](/cms/start-building/building-blocks/global-content) é 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: * [Booleano](/cms/reference/fields/module-theme-fields#boolean) * [Borda](/cms/reference/fields/module-theme-fields#border) * [Escolha](/cms/reference/fields/module-theme-fields#choice) * [Cor](/cms/reference/fields/module-theme-fields#color) * [Fonte](/cms/reference/fields/module-theme-fields#font) * [Imagem](/cms/reference/fields/module-theme-fields#image) * [Número](/cms/reference/fields/module-theme-fields#number) * [Espaçamento](/cms/reference/fields/module-theme-fields#spacing) 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](/cms/reference/fields/module-theme-fields). #### 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: ```json theme={null} // 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: ```css theme={null} 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
O modo de teste fornece um ambiente seguro para poder brincar com os campos do seu tema e garantir que funcionem como o esperado. A interface se parece exatamente com a[ visualização/edição do tema que os criadores de conteúdo podem ver](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings#edit-theme-settings); porém, você pode ter certeza de que não está alterando as configurações do seu site real. Para proteger contra atualizações acidentais nas configurações do tema, a publicação é bloqueada no modo de teste. Quando você está no modo de teste, `?testmode=true` é mostrado na barra de endereço e um ícone de modo de teste é exibido no cabeçalho do editor de temas.
Teste do tema/modo de visualização 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 * [Introdução aos temas](/cms/start-building/building-blocks/themes/getting-started) * [Como adicionar recursos de tema a um site existente](/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites) * [Boilerplate de temas da HubSpot](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)