Editar configurações do tema

Um tema é um conjunto de estilos e modelos que você pode aplicar às suas páginas e posts de blog no HubSpot. Para garantir que o conteúdo da web pareça consistente, as configurações de estilo de todas as páginas e posts que usam o mesmo tema são gerenciados nas configurações do tema.

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 limitações e considerações

• As opções de estilo disponíveis nas configurações do tema dependem das opções de campo do tema incluídas pelo desenvolvedor da web que criou o tema.
• As centrais de conhecimento usam uma versão modificada dos temas. Saiba mais sobre como editar as configurações do tema da central de conhecimento. 
• Alguns dos elementos do conteúdo da web são gerenciados em outras partes das configurações da conta, incluindo:
  • Logotipo da empresa: atualize o logotipo da sua empresa no Kit de marca.
  • Menu de navegação: as cores do menu podem ser definidas nas configurações do tema, mas o conteúdo e os links do menu de navegação são gerenciados nas configurações de Navegação. Saiba como criar um menu de navegação, que você pode adicionar ao cabeçalho global ou ao conteúdo do rodapé global no editor de páginas.

Editar configurações do tema

Você pode editar as configurações de um tema a partir do editor de tema completo para qualquer página ou post que use esse tema. Você também pode editar as configurações do tema do site e das landing pages no editor de conteúdo se um Superadministrador tiver incluído a conta no editor de tema universal (BETA). 

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.
   • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
2. Clique no nome do conteúdo. 
3. Para usar o editor de tema completo para páginas e posts:
   • No editor de conteúdo, clique no menu Editar e selecione Tema na barra de ferramentas do editor. Por exemplo, se você estiver usando o tema Elevate, clique no menu Editar e selecione Tema: Elevate.

• • No editor de tema, clique para expandir as seções relevantes (por exemplo, Cores ou Botões) para editar as configurações do tema. 
  • Quando terminar, clique em Publicar tema. Você será direcionado de volta ao editor de conteúdo. 
    

4. Para usar o editor de tema universal (BETA) para páginas:
   • No editor de conteúdo para páginas, clique no ícone Estilos de tema globais na barra lateral esquerda. 
   • Na barra lateral esquerda, clique para expandir as seções relevantes (por exemplo, Cores ou Botões) para editar as configurações do tema. As alterações serão aplicadas a todas as páginas e modelos que usam o tema.

Noções básicas sobre estilos de tema

Dentro das configurações do tema, você pode ter opções de estilo para fontes, cores, botões e links. Você também pode ter configurações adicionais detalhadas para estilos mais específicos na página. As opções de estilo no seu tema são baseadas nos campos de tema incluídos no modelo codificado do seu tema. Se você não conseguir localizar a configuração que está procurando, entre em contato com o designer do modelo para ver quais opções estão incluídas no modelo.

Os exemplos abaixo são um guia geral para quais tipos de opções de estilo podem ser incluídos no seu tema. Para obter uma referência completa dos campos temáticos que podem ser incluídos em seus modelos, consulte a documentação do designer.

Observação: lembre-se de que você pode personalizar fontes, cores e estilos em um módulo rich text da sua página ou substituindo os estilos padrão do seu tema no editor de páginas. Modifique esses estilos apenas se desejar que eles sejam aplicados a todas as páginas usando este tema.

Cores

As configurações de cor do seu tema aplicam uma cor primária, secundária e de plano de fundo a todos os elementos incluídos nos seus modelos de tema. Esses estilos serão aplicados a todos os elementos do seu site. 

Fontes

Escolha uma fonte primária e secundária para aplicar aos títulos, formulários, botões e texto do corpo do seu site. Todas as fontes do Google são suportadas. Clique no círculo de cores para personalizar uma cor de fonte primária e secundária. Você pode escolher um valor de cor simples ou clicar na guia Avançado e escolher um valor hexadecimal específico com um seletor de cores. 

Espaçamento 

As configurações do tema para espaçamento controlam a largura máxima do conteúdo da página ou do post e o espaçamento vertical entre diferentes elementos.

Tipografia

Nas suas configurações de tipografia, você pode controlar as fontes que se aplicam a certos elementos nos seus modelos. Todas as fontes do Google são suportadas. Você também pode selecionar cores personalizadas para determinados títulos, fontes ou links no seu tema.

• Títulos: você pode personalizar a fonte, a cor, o tamanho e o estilo exatos dos títulos incluídos no seu tema.
• Corpo: personalize apenas a fonte, a cor ou o tamanho do texto do corpo da sua página. 
• Links: personalize a cor padrão dos links no seu site. Você também pode personalizar a cor e o comportamento dos links quando um visitante passa o mouse ou clica no seu link.

Botões

Você pode definir cores, fontes e estilos personalizados para botões em suas páginas e blog. No editor de página de uma página específica, você poderá trocar tamanhos ou tipos de botão, dependendo de como o tema foi criado pelo desenvolvedor do site.

• Tamanho: especifique as dimensões dos botões pequeno, regular e grande da sua página. 
• Principal: um botão principal é a ação mais importante que um visitante executa em sua página. Essa cor deve se destacar e chamar a atenção do visitante.
• Secundário: um botão secundário é usado para ações relativamente menos importantes quando já existe um botão principal na sua página. Os botões secundários são normalmente aplicados a páginas para ações de prioridade mais baixa. 
• Simples: estas são as fontes e os estilos padrão aplicados aos módulos simples de botões na sua página.

Formulários

Personalize as cores, fontes, estilos de texto e botões padrão dos seus formulários.

• Título: estes são estilos aplicados ao campo de texto que aparece acima de todo o formulário. Isso normalmente inclui uma saudação e instruções para o preenchimento do formulário. Esses estilos no seu formulário só podem ser gerenciados aqui nas configurações do seu tema.
• Rótulos: estilos aplicados aos rótulos que aparecem acima de um campo de formulário.
• Campos: estilos aplicados aos nomes dos próprios campos do formulário.
• Texto de ajuda: este é o exemplo de conteúdo que aparece dentro de cada campo do formulário, indicando que tipo de informação o visitante deve enviar.
• Enviar: escolha qual estilo e tamanho de botão deve ser aplicado aos seus formulários.
• Cor de fundo: a cor de fundo aplicada ao seu formulário.
• Borda: a cor de borda ao redor dos campos de formulário.
• Deslocamento: a quantidade de espaçamento ao redor do formulário na sua página.

Tabelas

Defina as cores, fontes, espaçamento e bordas padrão das tabelas adicionadas à sua página. Saiba mais sobre como inserir uma tabela no módulo rich text na sua página.

• Cabeçalho da tabela: as cores aplicadas às fontes no cabeçalho da tabela e a cor padrão do plano de fundo em toda a largura da primeira linha da tabela. Você também pode definir uma borda inferior para uma cor de destaque na parte inferior da borda do cabeçalho da tabela.
• Cor da fonte: cor padrão das fontes na sua tabela.
• Cor de fundo: cor de fundo padrão para o fundo das células da sua tabela.
• Borda: a cor, largura e estilo padrão da borda da sua tabela.
• Deslocamento: a quantidade de espaço acima e abaixo da sua tabela na sua página. 

Cabeçalho do site

Essas configurações controlam as cores e as fontes que aparecem no cabeçalho da página, incluindo o menu de navegação. Saiba como configurar seu menu de navegação nas configurações da sua conta. Para definir o logotipo da sua empresa nos modelos do tema, adicione sua imagem de logotipo aos padrões da conta na seção Branding.

• Menu: selecione a cor e o estilo da fonte do seu menu de navegação quando os visitantes visualizarem, passarem o mouse sobre ou clicarem em um item de menu. Esses estilos só podem ser gerenciados aqui nas configurações do seu tema.
• Cor de fundo: cor de fundo padrão para o cabeçalho das células do seu site.
• Borda inferior: se desejar, você pode adicionar uma linha horizontal como uma borda abaixo do cabeçalho do site. Selecione um estilo para ativar a borda inferior e selecione uma cor e largura para a borda.

Rodapé

Essas configurações controlam as cores e as fontes que aparecem no rodapé da página, incluindo os menus de navegação. Saiba como configurar seu menu de navegação nas configurações da sua conta.

• Menu: selecione a cor e estilo da fonte para o menu de navegação no rodapé do tema. Você pode personalizar as cores quando os visitantes visualizam, passem o mouse sobre ou cliquem em um item de menu. Esses estilos só podem ser gerenciados aqui nas configurações do seu tema.
• Cor de fundo: cor de fundo padrão para o rodapé das células do seu site.
• Borda inferior: se desejar, você pode adicionar uma linha horizontal como uma borda abaixo do rodapé do site. Selecione um estilo para ativar a borda inferior e selecione uma cor e largura para a borda.

Blog

Essas configurações controlam o estilo do seu modelo de página de listagem e modelo de postagem no blog.

• Imagens do banner: faça upload de imagens para usar em segundo plano no cabeçalho do modelo do seu blog. Você pode escolher uma imagem para a página inicial do seu blog e uma imagem para aplicar a todas as publicações do seu blog. 
• Tags: defina a cor, as fontes e os estilos padrão das tags do seu blog, que aparecem na parte superior das publicações do seu blog.