Criar, editar e anexar arquivos CSS

Folhas de estilo em cascata ( CSS ) controlam a apresentação visual das páginas do seu site selecionando e estilizando os elementos da página. Use o gerenciador de design para criar novos arquivos CSS, editar os existentes e anexá-los a modelos, páginas específicas ou domínios inteiros.

Para alterações simples no design de uma página específica, saiba mais sobre como editar o conteúdo da página no editor de conteúdo. Se estiver usando um modelo de tema, saiba mais sobre como editar as configurações do tema.

Criar um novo arquivo CSS

1. Na sua conta HubSpot, clique em Mais e navegue até Conteúdo > Gerenciador de Design. Se Mais não aparecer na sua conta, navegue diretamente para Conteúdo > Gerenciador de Design.
2. No localizador, clique em Arquivo > Novo arquivo no canto superior esquerdo.
3. Na caixa de diálogo, clique no menu suspenso e selecione CSS + HubL. 
4. Clique em Próximo.
5. Digite um nome para o arquivo no campo Nome do arquivo .
6. Para alterar o local do arquivo, clique em Alterar. Na caixa pop-up, selecione um novo local de arquivo. 
7. Quando terminar, clique em Criar.

Editar um arquivo CSS

Depois de criar ou abrir um arquivo CSS existente, faça suas edições no editor de código. Além de CSS padrão, o editor de código é compatível com as variáveis do HubL e macros para simplificar seu CSS.

Para ver uma lista de seletores de CSS padrão para modelos do HubSpot, confira o Boilerplate CSS.

1. { local.navDesignManager }}
2. No localizador, clique em Arquivo > Novo arquivo ou abra um arquivo CSS existente.
3. No editor de código, insira ou atualize o CSS para fazer suas edições. 

Para visualizar como seu HubL será renderizado, clique no botão Mostrar saída ativado na parte superior do editor. Um painel será aberto à direita com a visualização renderizada.

Verificar quanto a erros

Antes de publicar, verifique se seu código tem erros do HubL. Os erros aparecem no console na parte inferior, no ponto de erro à esquerda e na barra de rolagem à direita do editor de código.

Erros impedem a publicação em vermelho, enquanto as advertências gerais estarão em amarelo. Na parte inferior do editor de código, clique em Mostrar detalhes para ver mais informações sobre erros no console de erros e Ocultar detalhes para recolher o console de erros.

Publicar um arquivo CSS

Após editar o arquivo CSS, clique em Publicar alterações no canto superior direito. Para chamar esta folha de estilos em outro modelo codificado, clique no menu suspenso Ações no localizador e selecione Copiar URL público. 

Anexar folhas de estilo aos ativos

Anexe folhas de estilos aos seus modelos, páginas individuais ou a um domínio inteiro. As folhas de estilo são aplicadas em uma ordem específica com base no local onde estão anexadas. A lista abaixo reflete a ordem em que são aplicados em seu site:

1. public_common.css (obrigatório): uma folha de estilos usada principalmente pelo aplicativo da HubSpot, mas também para determinados recursos do site.
2. HTML de cabeçalho: vincule as tags adicionadas ao global <head> do seu site nas configurações da página de conteúdo >.
3. Layout.css (obrigatório para layouts de arrastar e soltar): arquivo de CSS responsivo padrão anexado a todos os layouts de modelos de arrastar e soltar.
4. Folhas de estilo anexadas (páginas): folhas de estilo anexadas a todo o site nas configurações da página de conteúdo >.
5. Folhas de estilo anexadas (Blog): folhas de estilo anexadas ao seu blog (substitui as planilhas globais do site) nas configurações do Blog de conteúdo >.
6. Folhas de estilos vinculadas (recomendado para layouts de modelo): folhas de estilo anexadas no layout do modelo.
7. <head> Marcação adicional no modelo: vincule as tags adicionadas ao <head> de um layout de modelo específico.
8. Folhas de estilos específicas de página: folhas de estilo anexadas em configurações de uma página.
9. HTML de cabeçalho de página: vincule as tags adicionadas ao <head> de uma página específica nas configurações da página.

Anexar folhas de estilo aos modelos

As folhas de estilo podem ser anexadas aos modelos de arrastar e soltar no inspetor dentro do gerenciador de design. Para modelos codificados, as folhas de estilo são adicionadas diretamente no editor de código.

Modelos de arrastar e soltar

1. Na sua conta HubSpot, clique em Mais e navegue até Conteúdo > Gerenciador de Design. Se Mais não aparecer na sua conta, navegue diretamente para Conteúdo > Gerenciador de Design.
2. No localizador, clique no nome do arquivo de modelo de arrastar e soltar.
3. No inspetor, clique no menu suspenso Adicionar na seção Folhas de estilos vinculadas e selecione sua folha de estilos. Para remover uma folha de estilo, clique em X.
4. Quando terminar, clique em Publicar alterações no canto superior direito para aplicar suas alterações às páginas ativas usando o modelo.

Modelos codificados

Para modelos codificados, as folhas de estilo são anexadas diretamente no editor de código usando <link> tags ou a tag HubL no <head> do arquivo. Saiba mais sobre modelos codificados na documentação do desenvolvedor.

Anexar folhas de estilo a uma página específica

Observação: esta opção não está disponível para modelos de tema. Saiba como editar as configurações do tema.

Para anexar um estilo específico de página a partir da seção de configurações do editor de conteúdo:

1. Acesse seu conteúdo:

   • Páginas do site: Na sua conta HubSpot, clique em Mais e navegue até Conteúdo > Páginas do site. Se Mais não aparecer na sua conta, navegue diretamente para Conteúdo > Páginas do site.
   • Landing pages: Na sua conta HubSpot, clique em Mais e navegue até Conteúdo > Landing Pages. Se Mais não aparecer na sua conta, navegue diretamente para Conteúdo > Landing Pages.
2. Clique no nome da página.
3. No editor de conteúdo, clique no menu Configurações e selecione Avançado. 
4. Na caixa de diálogo, na seção Folhas de estilo, clique no menu suspenso Anexar uma folha de estilo e selecione uma folha de estilo. Para remover uma folha de estilo, clique no X ao lado da folha de estilo.
5. Para desativar as folhas de estilo herdadas do modelo ou domínio, clique no menu suspenso ao lado da folha de estilos e selecione Desativado.

Anexar folhas de estilo do domínio

Observação: os modelos de tema devem incluir a anotação enableDomainStylesheets: true para usar folhas de estilo em nível de domínio. Saiba mais sobre anotações de modelo.

Para anexar uma folha de estilos a um domínio inteiro:

1. Na sua conta HubSpot, clique no ícone de settings icon na barra de navegação superior.
2. No menu da barra lateral, clique em Páginas de conteúdo >.
3. Clique no menu suspenso para selecionar o domínio do qual deseja atualizar as configurações.
4. Na guia Modelos , na seção Folhas de estilo CSS, clique em + Adicionar folha de & estilos. Para remover uma folha de estilo, clique no X ao lado da folha de estilos anexada.
5. Clique em Salvar.

Observação: ao fazer downgrade para o HubSpot Starter ou ferramentas gratuitas, as folhas de estilo em nível de domínio anexadas permanecerão ativas até que você as remova. Depois que todas as folhas de estilo forem removidas, você não poderá mais anexar folhas de estilo no nível do domínio. Saiba mais sobre como fazer o downgrade de uma assinatura.