Ultima atualização: Janeiro 19, 2023
CSS (folhas de estilos de carreira) são arquivos codificados que selecione elementos da sua página e controle sua apresentação. Pense em seu modelo personalizado de HTML como a estrutura do seu site e no CSS como a superfície.
Este artigo mostra como criar, publicar e anexar um arquivo CSS no HubSpot. Você pode aprender aqui como fazer mudanças simples no design de uma página específica. Se estiver usando um modelo de tema, saiba como editar as configurações do tema.
Criar um novo arquivo CSS
- Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
- Clique no ícone de pasta no canto superior esquerdo para expandir o menu da barra lateral. Em seguida, clique em Arquivo > Novo arquivo.
- Na caixa de diálogo, clique em folha de estilos CSS. Depois, insira um nome para sua folha de estilos CSS e clique em Criar.
Editar o 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 visualizar como seu HubL será renderizado, clique para ativar o botão Mostrar saída no canto superior do editor. Um painel será aberto à direita com a visualização renderizada.
Para ver uma lista de seletores de CSS padrão para modelos do HubSpot, confira o Boilerplate CSS.
Antes de publicar, verifique se seu código tem erros do HubL. Há três lugares para encontrar erros ou avisos do HubL em um módulo personalizado ou arquivo codificado:
- No console de erros ao longo da parte inferior do editor de código.
- No ponto de erro ao longo do lado esquerdo do editor de código.
- Na barra de rolagem no lado direito do editor.
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.
No console de erros, haverá links para os erros do HubL ou avisos em seu código ou módulo personalizado. Passe o ponteiro do mouse sobre os indicadores de erro vermelhos no lado esquerdo do editor de código para ver o erro ou aviso em seu código. Clicar no erro ativará o cursor para todos os erros ou avisos nessa linha. Clicar em uma anotação na barra de rolagem levará a essa parte do arquivo.
Você também pode clicar em um número de linha no editor de código e fazer com que o URL do arquivo seja atualizado. Isso permite compartilhar um link ao seu código e direcionar outras pessoas exatamente onde você está trabalhando no arquivo.
Após editar o arquivo, clique em Publicar alterações no canto superior direito. Para chamar esta folha de estilos em outro modelo codificado, copie a URL da planilha clicando em Ações > Copiar URL pública no menu da barra lateral à esquerda.
Anexar ao modelo
No HubSpot, você pode adicionar folhas de estilos ao seu conteúdo de maneiras diferentes. Veja abaixo a ordem em que as folhas de estilos anexadas estão vinculados ao seu site:
- public_common.css * - uma folha de estilos usada principalmente pelo aplicativo da HubSpot, mas também para determinados recursos do site.
- HTML de cabeçalho nas instruções em Site > Páginas - vincule as tags adicionadas ao <head> global do site.
- Layout.css ** - o arquivo responsivo de CSS padrão, de acordo com todos os layouts de modelos de arrastar e soltar.
- Folhas de estilos anexadas nas configurações em Site > Páginas - folhas de estilo anexadas a todos seu site.
- Folhas de estilos anexadas nas configurações em Site > Blog - folhas de estilo anexadas ao seu blog (substituem as folhas globais de site).
- Folhas de estilos vinculadas*** - folhas de estilo anexadas no layout do modelo.
- Marcação <head> adicional no modelo - vincule as tags adicionadas ao <head> de um layout de modelo específico.
- Folhas de estilos específicas de página - folhas de estilo anexadas em configurações de uma página.
- 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.
* Obrigatório
** Obrigatório para layouts de arrastar e soltar
*** Método recomendado de anexo de folha de estilos para layout de modelos
Para anexar folhas de estilos a um modelo, abra o modelo em seu gerenciador de design. No menu da barra lateral à direita, em Opções de cabeçalho e corpo, selecione um arquivo no menu suspenso Adicionar ao lado das folhas de estilos vinculadas.
Você pode editar ou remover uma folha de estilos que já está vinculada ao passar o ponteiro do mouse sobre ele e clicar em Editar para fazer alterações ou no X para removê-la.
Após adicionar uma folha de estilos, clique em Publicar alterações no canto superior direito para aplicar suas alterações nas páginas ativas usando o modelo.
Anexar ou remover folhas de estilos em uma página específica (Marketing Hub Professional e Enterprise somente)
Observação: esta opção não está disponível para modelos de tema. Saiba como editar as configurações do tema.
Para adicionar ou remover um estilo específico de página da seção de configurações da página de edição:
- Navegue até páginas do site ou landing pages.
- Passe o mouse sobre a página e clique em Editar.
- Na página do editor, clique na guia Configurações na parte superior da página.
- Role a tela para baixo e clique em Opções avançadas.
- Em Folhas de estilos de página, clique no menu suspenso Anexar uma folha de estilos e selecione a folha que deseja anexar. Clique no botão X ao lado da folha de estilos que quer remover.
- Clique em Salvar e Publicar no canto superior direito.
Você também pode desativar as folhas de estilos que são herdadas pela página do modelo ou domínio. Quando desativadas, essas folhas de estilos não serão aplicadas à sua página:
- Na mesma guia Configurações do editor de página, selecione Desativado no menu suspenso ao lado de suas folhas de estilos incluídas.
- Clique em Salvar e Publicar no canto superior direito.
Anexar ou remover folhas de estilos em um nível de domínio (Marketing Hub Professional e Enterprise somente)
Observação: os modelos de tema devem incluir a anotação enableDomainStylesheets: true para usar as folhas de estilo em nível de domínio. Saiba mais sobre as anotações do modelo.
Para adicionar ou remover uma folha de estilos de todos os conteúdos em um domínio:
- Na sua conta da HubSpot, clique no ícone de configurações na barra de navegação principal.
- No menu da barra lateral, clique em Site > Páginas.
- Clique no menu suspenso para selecionar o domínio do qual deseja atualizar as configurações.
- Na guia Modelos , role até CSS e folhas de estilos. Para adicionar uma folha de estilos, clique em + Adicionar folha de estilos. Clique no X ao lado de uma folha de estilos anexada para removê-la.
- Clique em Salvar.
Observação: ao fazer o downgrade para as ferramentas de inicialização ou gratuitas do HubSpot, as folhas de estilo de nível de domínio anexadas permanecerão ativas até que sejam removidas. 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 downgrande de uma assinatura.
