Usar temas

Um tema é um conjunto de modelos, módulos, conteúdo global e configurações de estilo que podem ser usados para criar um site. Você pode editar páginas e posts usando um tema com o editor de conteúdo e definir os modelos de blog para usar um tema nas configurações do blog.

Todas as contas têm acesso a, pelo menos, um tema padrão da HubSpot. Os temas também podem ser baixados no Marketplace de modelos.

Noções básicas sobre os temas

Um tema é um conjunto de arquivos para seu site, incluindo:

• Modelos codificados: um conjunto de modelos para seu site, incluindo uma página inicial, uma página "sobre", uma landing page e modelos de blog. Esses modelos são codificados de forma personalizada por um desenvolvedor, mas o conteúdo e o layout podem ser personalizados no editor de conteúdo.
• Módulos: um conjunto de módulos de tema exclusivos que você pode adicionar ao conteúdo usando esse tema.
• Conteúdo global: conteúdo repetido em várias páginas, como um cabeçalho ou rodapé do site. Você pode editar o conteúdo global diretamente do editor de página de arrastar e soltar.
• Configurações de tema: configurações de estilo para modelos que usam um tema, incluindo fontes, espaçamento e cores.

Use um tema ativo

Você pode definir um tema ativo para exibir as páginas de tema como as opções padrão para páginas recém-criadas. A definição ou alteração de um tema ativo não alterará o tema usado para o conteúdo existente, o que requer a troca do modelo atual do conteúdo. Temas adicionais podem ser comprados no Marketplace de modelos HubSpot.

1. Acesse seu conteúdo:
   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
2. Clique em Criar ou Começar.
3. Na página de seleção de tema, clique em Definir como tema ativo no cartão de tema desejado. Para visualizar o tema, clique em Visualizar tema.
4. Na página de seleção de modelo, clique em Selecionar modelo no cartão de modelo desejado. Em seguida, continue criando uma página usando o editor de arrastar e soltar do HubSpot

Alterar tema ativo

1. Acesse seu conteúdo:

   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
2. No canto superior direito, clique em Criar ou Começar. 
3. Para alterar o tema de página do site, clique no menu suspenso Tema e selecione Alterar tema. Em seguida, clique em Definir como tema ativo na placa de tema desejada.

4. Para alterar o tema de landing pages, clique no nome do tema no menu do lado esquerdo. Em seguida, clique em Definir como tema ativo na placa de tema desejada.

5. Na tela de seleção do tema, passe o mouse sobre um tema e clique em Visualizar tema para abrir uma visualização do tema ou Definir como tema ativo.
6. Em seguida, você pode selecionar um modelo do tema para continuar criando uma página com o editor de arrastar e soltar do HubSpot.

Criar uma página usando um tema

1. Acesse seu conteúdo:

   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
2. No canto superior direito, clique em Criar ou Começar.
3. Se você não tiver selecionado um tema anteriormente, será direcionado para a tela de seleção de tema. Na placa de tema desejada, clique em Definir como tema ativo. Para visualizar o tema, clique em Visualizar tema.
4. Na tela de seleção de modelo, os modelos do seu tema ativo serão exibidos na seção Modelos do tema. Para visualizar modelos que não fazem parte do tema ativo, clique em Outros modelos.
5. Para selecionar um modelo do tema, clique em Selecionar modelo ou Usar.
6. No editor de conteúdo, edite o conteúdo da página usando o editor de arrastar e soltar.

7. Para colocar suas alterações em tempo real, clique em Publicar ou Atualizar na parte superior direita.

Aplicar um modelo de tema para blog

Nas configurações do blog, você pode definir um blog para usar o mesmo tema das suas páginas. A modelos de post de blog e de página de listagem de blogs são selecionados separadamente.

1. Na sua conta HubSpot, clique no ícone de configurações settings icon na barra de navegação superior.
2. No menu da barra lateral esquerda, navegue até Conteúdo > Blog.
3. Se você tiver vários blogs, clique no menu suspenso Selecionar um blog para modificar e selecione um blog.
4. Clique na guia Modelos.
5. Nas seções Modelo de post de blog e Página de listagem de blogs, clique no menu suspenso Ações e selecione Alterar modelo.

6. Na tela de seleção de tema, clique no cartão de tema desejado e, em seguida, clique no modelo cartão . No canto inferior direito, clique em Concluído.

Observação: para páginas de listagem de blogs que podem ser editadas no editor de conteúdo, essas etapas levarão ao editor de conteúdo e não à tela de seleção do tema.

Editar configurações de tema

Você pode personalizar o estilo do tema, incluindo fonte, cores e espaçamento nas configurações do tema. Os estilos editados aqui são aplicados a todas as páginas e módulos de temas incluídos neste tema. Saiba mais sobre o gerenciamento de configurações de tema.

Gerenciar temas

No gerenciador de design, você pode editar, clonar ou copiar um tema para outra conta da HubSpot. Você também pode excluir temas clonados, temas personalizados e criar temas filhos.

Você pode editar as configurações de um tema secundário sem afetar o tema principal, mas isso não criará cópias adicionais de ativos de tema. Para copiar os recursos de um tema principal, é recomendado clonar o tema.

Clonar um tema

Para editar os arquivos codificados de temas padrão no gerenciador de design, clone-os primeiro.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No Finder, clique na pasta @hubspot. Esta pasta tem todos os temas e módulos padrão, incluindo arrastar e soltar módulos de e-mail.
3. Clique em uma pasta de temas.
4. Clique no menu suspenso Arquivo e selecione Clonar tema.
5. Na caixa de diálogo, insira um nome para o tema.
6. Para alterar o local do arquivo do tema clonado, clique em Alterar no campo Local do arquivo. Em seguida, selecione um local. Por padrão, a pasta raiz será selecionada.
7. Quando terminar, clique em Criar.

Criar um tema secundário

No gerenciador de design, você pode criar um tema filho com base em um tema de Marketplace de modelos comprado ou um tema HubSpot padrão. Você pode editar as configurações de um tema secundário sem afetar o tema principal.

Os desenvolvedores também podem criar temas filhos com base em temas personalizados e criar temas filhos usando a CLI usando a documentação do desenvolvedor. Saiba mais sobre o trabalho com temas filhos.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique na pasta @marketplace, para temas do Marketplace de temas, ou na pasta @hubspot, para temas padrão.
3. Clique com o botão direito do mouse em uma pasta do tema e selecione Criar tema secundário.
4. Na caixa de diálogo, insira um nome para o tema secundário.
5. Para alterar o local onde o tema secundário será salvo, clique em Alterar na seção Local do arquivo. Clique em uma pasta e, em seguida, clique em Selecionar.
6. Para personalizar os nomes dos arquivos CSS e JS do tema, clique em Opções avançadas e, em seguida, insira novos nomes de arquivos nos campos CSS e JS .
7. Para finalizar o processo, clique em Criar tema secundário. Você pode editar o estilo do tema filho no editor de conteúdo.

Copiar um tema para outra conta

Você pode copiar uma pasta de tema de uma conta para outra. Você deve ser um usuário com permissões de Ferramentas de design em ambas as contas.

Observação: as pastas de tema nos diretórios @hubspot ou @marketplace não podem ser copiadas entre contas.

Para copiar um tema para uma conta:

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, passe o mouse sobre a pasta de temas que você deseja copiar e clique com o botão direito do mouse na pasta e selecione GerenciarCopiar para outra conta.
3. Na caixa de diálogo, clique no menu suspenso Conta de destino e selecione uma conta. Em seguida, clique em Copiar ativo. A pasta aparecerá na conta de destino assim que o processo de cópia for concluído.
   
   

Carregar um tema

Os usuários nas contas do Content Hub podem comprar os temas da HubSpot pelo Marketplace do ThemeForest da Envato e depois carregá-los no HubSpot pela tela de seleção de tema:

1. Acesse a seção HubSpot CMS Hub do Marketplace doe ThemeForest da Envato.
2. Compre um tema no marketplace.
3. Você receberá um email com um código de compra para o tema comprado. Copie o código de compra.
4. Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
5. No canto superior direito, clique em Criar.
6. Na página Escolher um modelo , clique no menu suspenso Tema,

7. Na página Escolher um tema , clique em Instalar um tema da ThemeForest na parte inferior da página.
8. Na caixa de diálogo, cole o código de compra do e-mail e depois clique em Instalar tema.
9. Na nova aba, entre no ThemeForest Marketplace da Envato para terminar o processo de instalação.
10. Quando você estiver conectado, um banner será exibido no HubSpot. O tema pode levar alguns minutos para ficar disponível.

Excluir um tema

Os temas clonados e carregados podem ser excluídos do gerenciador de design:

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique na pasta com os ativos do tema.
3. Clique no menu suspenso Arquivo e selecione Excluir [nome da pasta].
4. Na caixa de diálogo, marque a caixa de seleção para confirmar que você revisou os dependentes e clique em Excluir esta pasta.

Os temas comprados devem ser desinstalados do Marketplace de modelos:

1. Na sua conta HubSpot, clique no ícone do Marketplace marketplace na barra de navegação superior e selecione Downloads do Marketplace.
2. Na guia Temas, clique no menu suspenso Ações e selecione Desinstalar para o tema aplicável. 
3. Antes de desinstalar, talvez seja necessário alterar o modelo de um post do blog ou página. Saiba mais sobre como alterar um modelo de página ou postagem. 
4. Na caixa de diálogo, clique em Desinstalar.