Um tema é um conjunto de estilos e modelos que você pode aplicar as páginas do site 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. Você pode personalizar suas configurações de tema no editor de páginas enquanto trabalha, clicando na guia Design no painel esquerdo da página do editor. As configurações de tema podem ser ajustadas com controles intuitivos, como alternadores, interruptores e seletores de cores.
Antes de começar
As configurações globais de temas controlam as principais cores, fontes e estilos de botão das páginas usando seus modelos de temas. Parte do conteúdo do seu site é gerenciado em outras partes das configurações da sua conta, incluindo:
- Logotipo da sua empresa: atualize o logotipo da sua empresa em Padrões da conta na guia Branding.
- Seu menu de navegação: as cores do menu são definidas em configurações do tema, mas o conteúdo do seu menu de navegação e os links são gerenciados nas configurações de Navegação. Aprenda 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.
- Seu domínio para publicação: todas as contas CMS Hub Professional podem conectar um domínio de marca e todas as contas CMS Hub Enterprise podem conectar dois domínios de marca. Todas as contas podem hospedar vários subdomínios para esses domínios de marca. Saiba como conectar seu domínio na ferramenta de gerenciador de domínio para a publicação da página.
Editar configurações do tema
Para editar as configurações do tema, primeiro você precisará criar uma página com um modelo de tema. As configurações do tema podem ser acessadas no editor de páginas, clicando na guia Design à esquerda. Em seguida, clique em Editar configurações do tema.
Observações: cada tema foi criado com uma combinação única de opções por um desenvolvedor de site, então você verá opções de estilo ligeiramente diferentes com base nos componentes incluídos no seu tema.
A personalização de cores, fontes e espaçamento definirá os estilos padrão para todos os elementos da sua página. Se você deseja editar detalhes específicos, como cores de links, cores de botões ou cores de formulário padrão, clique em Editar ao lado de Mais configurações para exibir configurações adicionais de temas disponíveis para seus modelos.
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 configurações mais específicas para títulos, fontes e links, clique em Editar.
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 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 foram incluídas no modelo.
O exemplo abaixo é um guia geral para quais tipos de adicionais 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 de texto rico da sua página ou substituindo 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 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.
- 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.
Saiba mais sobre como inserir uma tabela no 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. 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.