Os arquivos CSS (Folhas de Estilo em Cascata) são arquivos codificados que selecionam elementos da sua página e controlam sua apresentação. Os arquivos CSS não podem ser anexados a e-mails ou modelos de e-mail.
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.
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:
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.
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:
* 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.
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:
Acesse seu conteúdo:
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:
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.