Personalizar um tema de central de conhecimento

Você pode personalizar a aparência da sua central de conhecimento selecionando o layout e configurando o tema no editor de temas. Você também pode ver como o tema da central de conhecimento aparecerá nos modelos, em diferentes idiomas e em diferentes tamanhos de tela.

Antes de começar

Antes de começar a trabalhar com esse recurso, certifique-se de compreender totalmente quais etapas devem ser executadas com antecedência, bem como as limitações do recurso e as possíveis consequências de usá-lo.

Compreender os requisitos

• Permissões de superadministrador.
• Permissão para as Configurações da central de conhecimento e para as Configurações de conteúdo e tema globais, além de uma licença atribuída do Service Hub. Saiba mais sobre os preços com base em licenças da HubSpot.

Compreender limitações e considerações

• Essas ferramentas só estão disponíveis para centrais de conhecimento migradas. Saiba mais sobre a migração da central de conhecimento.
• Para centrais de conhecimento que não foram migradas, saiba mais sobre como criar e personalizar uma central de conhecimento antiga.
• Você não pode personalizar sua central de conhecimento no Gerenciador de design nem usar temas personalizados.

Exibir um tema de central de conhecimento

Depois de criar a central de conhecimento, você poderá ver a aparência do tema no editor de temas. Você pode ver a aparência do tema em diferentes modelos, idiomas e tamanhos de tela. 

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3.  Para exibir um modelo com conteúdo de amostra, clique no menu suspenso Exibir em na parte superior esquerda e selecione um modelo. As alterações no tema serão aplicadas a todos os modelos da central de conhecimento.

4. Para exibir um modelo em diferentes idiomas, clique no segundo menu suspenso no canto superior esquerdo e selecione um idioma.

5. Para ver como um modelo será exibido em diferentes dispositivos, clique nos ícones de dispositivo na parte superior do editor ou insira uma largura de tela em pixels. 

Editar as cores, a tipografia e o layout de um tema de central de conhecimento 

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Para alterar as cores de um tema, clique para expandir a seção Cores. Em seguida, insira um valor hexadecimal ou selecione uma cor no seletor de cores para os campos Principal, Secundário, Destaque e Plano de fundo do corpo. As cores da marca serão exibidas para cada opção.
4. Para alterar a tipografia de um tema, clique em Tipografia:
   • Nas seções Principal e Secundário, clique no menu suspenso fonte e selecione uma fonte. Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada.
   • Para editar o cabeçalho, o corpo ou a tipografia de um link, clique para expandir a seção Cabeçalho (H1-H6), Corpo ou Link:
     • Clique no menu suspenso Fontes e selecione uma fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada.
     • Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
5. Para alterar o layout de um tema, clique para expandir a seção Layout e selecione uma opção (por exemplo, Blocos ou Mínimo). Diferentes opções de layout suportarão diferentes opções de estilo.
6. Quando terminar, clique em Publicar tema na parte superior direita.

Editar estilos de cabeçalho do tema da central de conhecimento

Você pode editar os estilos de cabeçalho do tema da central de conhecimento, incluindo a largura do cabeçalho, a barra superior, o seletor de idioma, o menu, o botão e a barra de pesquisa. Você também pode editar cores, fontes e estilos ao passar o mouse nesses elementos.

Largura do cabeçalho

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Cabeçalho na barra lateral esquerda.
4. Na seção Cabeçalho, selecione Largura total ou Largura do conteúdo.

Barra superior do cabeçalho

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Cabeçalho na barra lateral esquerda.
4. Na seção Cabeçalho, clique para expandir a seção Barra superior.
5. Para editar a cor do plano de fundo, insira um valor de código hexadecimal ou selecione uma cor de plano de fundo no seletor de cores para o campo Cor de plano de fundo.
6. Clique no menu suspenso Fontes e selecione uma fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada.
7. Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
8. Quando terminar, clique em Publicar tema na parte superior direita.

Seletor de idioma no cabeçalho

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Cabeçalho na barra lateral esquerda.
4. Na seção Cabeçalho, clique no Seletor de idioma.
5. Na seção Seletor de idioma, clique em Menus suspensos.
6. Clique para expandir a seção Plano de fundo.
7. Insira um valor de código hexadecimal ou selecione uma cor no seletor de cores para os campos Cor e Passar o mouse 
8. Para editar a transparência, insira um valor percentual no segundo campo. Por exemplo, uma transparência de 100% será opaca, enquanto uma transparência de 0% não será visível. 
9. Quando terminar, clique em Publicar tema na parte superior direita.

Menu do cabeçalho

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Cabeçalho na barra lateral esquerda.
4. Na seção Cabeçalho, clique em Menu.
5. Para editar estilos de listas suspensas, clique em Listas suspensas:
   • Clique para expandir a seção Plano de fundo e insira um valor de código hexadecimal ou selecione uma cor no seletor de cores para os campos Cor e Passar o mouse. Para editar a transparência, insira um valor percentual no segundo campo. 
     
   • Clique para expandir a seção Texto. Em seguida, clique no menu suspenso de fonte e selecione uma fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada.
   • Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
6. Para editar o estilo do texto da fonte, clique para expandir a seção Texto:
   • Clique no menu suspenso Fontes e selecione uma fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada. 
   • Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
7. Para editar a cor do plano de fundo, clique para expandir a seção Plano de fundo e insira um valor de código hexadecimal ou selecione uma cor no seletor de cores.
8. Quando terminar, clique em Publicar tema na parte superior direita.

Botões de cabeçalho

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Cabeçalho na barra lateral esquerda.
4. Na seção Cabeçalho, clique em Botão.
5. Para editar a fonte, clique para expandir a seção Texto:
   • Clique no menu suspenso Fontes e selecione uma fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada.
   • Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
6.  Para editar o plano de fundo, clique para expandir a seção Plano de fundo e insira um valor de código hexadecimal ou selecione uma cor no seletor de cores. Para editar a transparência, insira um valor percentual.
7. Para editar o estilo da borda, clique para expandir a seção Borda, clique no menu suspenso Estilo e selecione um estilo de borda (por exemplo, Pontilhado).
8. Para editar o estilo de canto, clique para expandir a seção Canto. Em seguida, insira um valor de pixel (por exemplo, 30px) no campo Raio.
9. Para editar o estilo ao passar o mouse, clique em Passar o mouse:
   • Clique para expandir a seção Texto.
     • Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
     • Para aplicar estilos de texto de fonte, selecione o italicizeIconícone de itálico ou underlineIcon ícone de sublinhado.
   • Clique para expandir a seção Plano de fundo e insira um valor de código hexadecimal ou selecione uma cor no seletor de cores. Para editar a transparência, insira um valor percentual.
   • Clique para expandir a seção Borda e clique no menu suspenso Estilo para selecionar um estilo de borda (por exemplo, Pontilhado).
10. Quando terminar, clique em Publicar tema na parte superior direita.

Barra de pesquisa de cabeçalho

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Cabeçalho na barra lateral esquerda.
4. Na seção Cabeçalho, clique na Barra de pesquisa.
5. Para editar o plano de fundo, clique para expandir a seção Plano de fundo e, em seguida, clique no menu suspenso Tipo de plano de fundo para selecionar uma opção (por exemplo, Cor, Imagem ou Gradiente). As opções de estilo adicionais serão exibidas dependendo do tipo de plano de fundo selecionado.
6. Para editar os estilos de texto do rótulo, clique para expandir a seção Texto do rótulo: 
   • Clique no menu suspenso Fontes e selecione uma fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada.
   • Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
7. Para editar o estilo da fonte de entrada, clique para expandir a seção Entrada e, em seguida, insira um valor de código hexadecimal ou clique no seletor de cores para selecionar uma cor. Para editar a transparência, insira um valor percentual.
8. Quando terminar, clique em Publicar tema na parte superior direita.

Editar estilos de rodapé de um tema de central de conhecimento

Você pode editar os estilos de rodapé do tema da central de conhecimento, incluindo a largura do rodapé, o plano de fundo, o menu, o texto e os ícones sociais. Você também pode editar cores, fontes e estilos ao passar o mouse nesses elementos.

Largura e plano de fundo do rodapé

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Rodapé na barra lateral esquerda.
4. Para alterar a largura do rodapé, selecione Largura total ou Largura do conteúdo no campo Largura do rodapé.
5. Para alterar a cor do plano de fundo do rodapé, insira um valor de código hexadecimal ou clique no seletor de cores para selecionar uma cor.

Menu do rodapé

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Rodapé na barra lateral esquerda.
4. Na seção Rodapé, clique para expandir a seção Menu.
5. Para editar os estilos de fonte do menu, clique no menu suspenso Fontes e selecione uma fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada.
6. Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
7. Quando terminar, clique em Publicar tema na parte superior direita.

Texto do rodapé

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Rodapé na barra lateral esquerda.
4. Na seção Rodapé, clique para expandir a seção Texto.
5. Para editar os estilos de fonte do menu, clique no menu suspenso Fontes e selecione uma fonte. As opções adicionais de estilo de fonte (por exemplo, espessura, tamanho ou maiúsculas/minúsculas) dependerão da fonte selecionada.
6. Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor de fonte.
7. Quando terminar, clique em Publicar tema na parte superior direita.

Ícones sociais de rodapé

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Tema.
3. Clique em Rodapé na barra lateral esquerda.
4. Na seção Rodapé, clique para expandir a seção Ícones sociais.
5. Para alterar o tamanho dos ícones sociais, clique no menu suspenso Tamanho do ícone e selecione uma opção (por exemplo, Pequeno, Regular ou Grande).
6. Para alterar a forma dos ícones sociais, clique no menu suspenso Forma do ícone e selecione uma opção (por exemplo, Círculo ou Quadrado).
7. Para alterar a cor dos ícones sociais, insira um valor de código hexadecimal ou clique no seletor de cores para selecionar uma cor no campo ícone de cor.
8. Para alterar a cor do plano de fundo dos ícones sociais, insira um valor de código hexadecimal ou clique no seletor de cores para selecionar uma cor no campo Plano de fundo. Para editar a transparência, insira um valor percentual. 
9. Para alterar o alinhamento dos ícones sociais, clique nos ícones blockAlignmentLeftIcon Alinhar à esquerda, blockAlignmentCenterIcon Centralizar ou blockAlignmentRightIcon Alinhar à direita no campo Alinhamento.
10. Quando terminar, clique em Publicar tema na parte superior direita. 

Editar o conteúdo de um tema de central de conhecimento

Você pode editar o conteúdo do cabeçalho e do rodapé da central de conhecimento. As alterações publicadas ficarão visíveis em todas as páginas da central de conhecimento.

Conteúdo do cabeçalho

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Cabeçalho.
3. No editor de conteúdo global, clique no ícone siteTree índice na barra lateral esquerda.
4. Na barra lateral esquerda, clique no módulo Cabeçalho do site.
5. Para editar o conteúdo do logotipo do cabeçalho, clique para expandir a seção Logotipo:
   • Para substituir o logotipo padrão, ative a opção Substituir logotipo padrão ou clique em Editar logotipo padrão neste domínio para atualizar o logotipo padrão.
   • Se você optou por substituir o logotipo padrão, poderá clicar em Carregar ou Procurar imagens para adicionar um novo logotipo.
   • Para mostrar o nome da sua empresa quando um logotipo não estiver definido, ative a opção Mostrar o nome da empresa quando o logotipo não estiver definido.
   • Para adicionar um link de URL ao seu logotipo, insira um URL no campo Link.
   • Clique em Aplicar opções para ver suas alterações.
6. Para editar o conteúdo do menu de cabeçalho, clique para expandir a seção Menu:
   
   • Para exibir um menu de cabeçalho, clique no menu suspenso Menu e selecione um menu.
   • Para editar um menu de cabeçalho existente, clique em Editar.
   • Para criar um novo menu de cabeçalho, clique em Criar novo.
   • Para editar o número de ramos secundários da árvore de menus que podem ser exibidos no menu de cabeçalho, use os ícones upIcon aumentar e downIcon diminuir no campo Níveis máx. 
   • Clique em Aplicar opções para ver suas alterações.
7. Para editar o conteúdo do botão do cabeçalho, clique em Botão:
   
   • Para adicionar um botão ao cabeçalho, marque a caixa de seleção Adicionar botão.
   • Para editar o texto do botão no cabeçalho, insira o texto no campo Texto do botão. 
   • Para editar o link do URL do botão, clique no menu suspenso Link para e selecione uma opção (por exemplo, Externo). Campos adicionais serão exibidos dependendo da opção selecionada.
   • Para que o link de URL do botão seja aberto em uma nova janela, ative a opção Abrir link em uma nova janela. 
   • Para editar o tipo de link do botão, marque a caixa de seleção ao lado de Sem acompanhamento.
   • Para adicionar um ícone ao botão, marque a caixa de seleção Adicionar ícone:
     • Clique em Substituir para alterar o ícone do botão. 
     • Clique no menu Posição e selecione a posição do ícone de botão.
   • Clique em Aplicar opções para ver suas alterações.
8. Para editar o conteúdo do seletor de idioma, clique para expandir a seção Seletor de idioma:
   
   • Para adicionar o seletor de idioma ao cabeçalho, marque a caixa de seleção Adicionar seletor de idioma.
   • Para editar o modo de exibição do seletor de idioma, clique no menu suspenso Modo de exibição e selecione uma opção (por exemplo, Localized, PageLang, Hybrid).
   • Clique em Aplicar opções para ver suas alterações.
9. Para editar o conteúdo das opções de suporte adicionais, clique para expandir a seção Opções de suporte adicionais:
   
   • Para mostrar um link do portal do cliente, ative a opção Mostrar link do portal do cliente. No campo Texto do link do portal do cliente, insira o texto que será exibido aos visitantes.
   • Para mostrar uma entrada de conteúdo restrito, ative a opção Mostrar entrada de conteúdo restrito. Nos campos Texto do link de entrada e Texto do link de saída, insira o texto que será exibido aos visitantes.
   • Para mostrar um formulário de suporte, ative a opção Formulário de suporte e selecione um formulário no menu suspenso Formulário. Nos campos Link do texto do formulário de suporte e Título do formulário de suporte, insira o texto que será exibido aos visitantes.
   • Clique em Aplicar opções para ver suas alterações.
10. Quando terminar, clique em Publicar em [#] ativos na parte superior direita.

Conteúdo do rodapé

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. No canto superior direito, clique no menu suspenso Configurar e selecione Rodapé.
3. No editor de conteúdo global, clique no ícone siteTree índice na barra lateral esquerda.
4. Para exibir um menu de rodapé, clique no módulo Menu de rodapé: 
   
   • Clique no menu suspenso Menu e selecione um menu.
   • Para editar um menu de rodapé existente, clique em Editar.
   • Para criar um novo menu de rodapé, clique em Criar novo.
   • Para editar o número de ramos secundários da árvore de menus que podem ser exibidos no menu de rodapé, use os ícones upIcon aumentar e downIcon diminuir no campo Profundidade de exibição do menu. 
   • Para mostrar o menu de rodapé, marque a caixa de seleção Mostrar menu.
   • Clique em Aplicar opções para ver suas alterações.
5. Para editar o conteúdo do logotipo do rodapé, clique no módulo Logotipo: 
   
   • Para substituir o logotipo padrão, ative a opção Substituir logotipo padrão ou clique em Editar logotipo padrão neste domínio para atualizar o logotipo padrão.
   • Se você optou por substituir o logotipo padrão, poderá clicar em Carregar ou Procurar imagens para adicionar um novo logotipo.
   • Para personalizar como o logotipo do rodapé é carregado, clique no menu suspenso Carregamento de imagens e selecione Padrão do navegador, Lento ou Rápido.
   • Para adicionar um URL de link ao logotipo do rodapé, insira o texto do URL no campo URL do link.
   • Clique em Aplicar opções para ver suas alterações.
6. Para editar o conteúdo do endereço do rodapé, clique no módulo Endereço do rodapé:
   
   • Clique em Editar na exibição expandida.
   • No editor de conteúdo global, insira o texto para o endereço do rodapé.
   • Clique em Fechar exibição expandida na barra lateral esquerda.
7. Para editar o conteúdo "Seguir na rede social" do rodapé, clique no módulo Seguir na rede social:
   
   • Na seção Links sociais, clique no ícone editIconeditar ou deleteIcon excluir para editar ou excluir um link social existente. Para adicionar um link social, clique no botão + Adicionar. 
   • Para mostrar os ícones para seguir nas redes sociais, marque a caixa de seleção Mostrar ícones.
8. Para editar o conteúdo de direitos autorais do rodapé, clique no módulo Direitos autorais do rodapé:
   • Clique em Editar na exibição expandida.
   • No editor de conteúdo global, insira o texto para os direitos autorais do rodapé.
   • Clique em Fechar exibição expandida na barra lateral esquerda.
9. Quando terminar, clique em Publicar em [#] ativos na parte superior direita.