Central de conhecimento HubSpot

Editar as configurações de tema

Written by HubSpot Support | 15/mar/2020 17:19:40

A tema é um conjunto de estilos e modelos que você pode aplicar ao seu páginas de sites e blogs no HubSpot. Para garantir que seu site pareça consistente, as configurações de estilo de todas as páginas que usam o mesmo tema são gerenciadas nas suas configurações de tema.

Antes de começar

As configurações de tema controlam as principais cores, fontes e estilos de botão para as páginas usando seus modelos de tema.

Observe: as opções de estilo disponíveis na configuração do seu tema dependem do opções de campo de tema incluído pelo desenvolvedor web que criou seu tema.

Parte do conteúdo do seu site é gerenciado em outras partes das configurações da sua conta, incluindo:

Editar configurações de tema

Você pode editar as configurações de um tema no editor de conteúdo para qualquer página ou postagem usando esse tema: 

  • Acesse seu conteúdo:

    • Páginas do site:
    • Landing Pages:
    • Blog:
  • Clique no nome do seu conteúdo. 
  • No editor de conteúdo, clique no botão Editar menu e selecione 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. Para personalizar mais configurações específicas para cabeçalhos, fontes e links, clique em Editar ao lado de Mais configurações.

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 

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

Mais configurações

Nas configurações do seu tema, você pode ter configurações detalhadas adicionais para estilos mais específicos da sua página. As opções de estilo no seu tema são baseadas no campos temáticos incluído 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 foram incluídas no modelo.

O exemplo abaixo é um guia geral para quais tipos de adicionais podem ser incluídos no seu tema. Para uma referência completa dos campos temáticos que podem ser incluídos em seus modelos, consulte o documentação de designers.

Observe: lembre-se de que você pode personalizar fontes, cores e estilos em um módulo de rich text na 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.

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. 
  • Primário: 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 às páginas para ações de prioridade mais baixa. 
  • Simples: estas são as fontes e estilos padrão aplicados a fontes simples módulos de botão em 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.

  • 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. 

Aprender mais sobre como inserir uma tabela em um módulo rich text 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. Aprender como configure seu menu de navegação nas configurações da sua conta. Para definir o logotipo da sua empresa nos modelos de tema, adicione a imagem do seu logotipo aos padrões da sua conta no Marca seção.

  • Cardápio: selecione a cor e o estilo da fonte para o seu menu de navegação quando os visitantes visualizam, passam o mouse ou clicam 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. Aprender como configure seu menu de navegação nas configurações da sua conta. 

  • Cardápio: selecione a cor e o estilo da fonte para o menu de navegação no rodapé do seu 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.