Saiba mais sobre a fonte do estilo de uma página

Há vários lugares onde o estilo de conteúdo pode ser adicionado no HubSpot, e ele é aplicado em uma ordem específica com base no local onde é adicionado. Abaixo, saiba como o estilo é aplicado, como encontrar estilo em uma página ao vivo e como obter ajuda com edições de design.

Compreender como o estilo é aplicado

CSS O estilo no HubSpot é aplicado em ordem com base no local definido no HubSpot, conforme listado abaixo. Por exemplo, o conjunto de estilos em uma folha de estilos global é substituído pelo conjunto de estilos em uma página específica. 

1. CSS Módulo personalizado
   1. Folhas de estilo anexadas a um módulo.
   2. CSS CSS adicionado ao módulo
   3. CSS dentro da marcação HubL do módulo dentro de um bloco require_css
2. Folhas de estilo adicionadas a um modelo por meio do bloco require_css
3. Folhas de estilo padrão de HubSpot (por exemplo, layout.css)
4. Folhas de estilo anexadas ao modelo
   
   
   
   
5. Folhas de estilo anexadas à guia Configurações da sua página
   
   
   
   
6. Folhas de estilo anexadas às suas configurações para todos os domínios
7. Folhas de estilo anexadas às suas configurações para um domínio específico
8. CSS adicionado às <style>marcas. Por exemplo, o HTML de cabeçalho das configurações do seu site, configurações de página ou modelo.
   
   
   
   
9. Estilos adicionados por meio do editor de página. O HubSpot também adicionará ! marcas importantes a esses estilos. Saiba mais sobre !marcas importantes e como elas afetam o estilo.

Localizar estilo em uma visualização ou página ao vivo

Você pode usar as ferramentas do desenvolvedor em seu navegador para examinar os estilos aplicados ao seu site ao vivo ou uma página de visualização. Cada navegador varia um pouco em como solucionar problemas de estilo.

Para encontrar estilo no Google Chrome:

• Na página de visualização ou ao vivo, clique com o botão direito do mouse no elemento que deseja examinar e selecione Inspecionar.
• No painel Elementos à esquerda, você verá o HTML da página. Você pode clicar nos elementos para exibir seus estilos ou pode usar o ícone do cursor na parte superior esquerda do painel para clicar nos elementos da página.

  

• No painel Estilos à direita, você verá todos os estilos aplicados a esse elemento. É possível marcar e desmarcar as caixas de seleção ao lado de cada estilo para remover e aplicar o estilo. Isso ajudará a restringir qual regra de estilo deve ser alterada.
  
  
  
  
• CSS À direita do campo Passe o mouse sobre o nome de origem para exibir o nome completo:
  • CSS Quando o estilo vier de uma folha de estilo, o nome da folha de estilo aparecerá ao lado da Em seguida, você pode navegar até o gerenciador de design , localizar a folha de estilos e fazer edições conforme necessário.
    
    
    
    
  • CSS Se o nome da origem começar com module, o estilo provavelmente vem do. Passe o mouse sobre o nome de origem para exibir o nome completo do módulo.
    
    
    
    
  • CSS Se o nome de origem for Folha de estilo do agente do usuário , a Você verá isso com mais frequência para o estilo de marca HTML geral, como <p>, <h1>, <h2>, <span>, <div>, etc. Esse estilo é aplicado quando o navegador não consegue encontrar regras gerais de estilo para o elemento, mas pode ser substituído adicionando seus próprios estilos a esse elemento.
    
    
    
    
  • CSS <style> Se o nome de origem for o URL da página, o Por exemplo, o estilo pode ser definido na página ou no HTML de cabeçalho do modelo.
    
    
    
    
  • Se o nome de origem for a URL da página e o estilo for destinado a #hs_cos_wrapper_module_number, o estilo provavelmente está sendo definido na guia Estilos do editor de página. O HubSpot adicionará ! marcas importantes a esses estilos. Saiba mais sobre !marcas importantes e como elas afetam o estilo.
     
    
    
    
  • Se o nome de origem for , o estilo é provavelmente incluído automaticamente com o elemento. CTA widget Geralmente, isso se deve ao estilo definido no editor de um recurso HubSpot incorporável, como um
  • CSS Se element.styleaparecer ao lado da declaração no inspetor, a Estilo in-line é o estilo adicionado diretamente ao código-fonte HTML de uma página, ou aos campos de estilo in-line de um modelo. Por exemplo, o estilo embutido no código-fonte apareceria como <p style="background:purple;">Hello world</p>.
    
    
    

Para obter mais detalhes sobre como inspecionar uma página, consulte a documentação de ajuda do seu navegador da Web:

• Cromo
• FirefoxName
• Borda Microsoft
• Safári

Obter ajuda com edições de design

O melhor recurso para fazer alterações em seus modelos HubSpot ou folhas de estilo é o designer de modelo original. CSS No entanto, há uma variedade de recursos para obter ajuda adicional com estilo de conteúdo, dependendo do seu nível de conforto com solução de problemas HTML e

• Se você se sentir confortável usando as ferramentas de inspeção para solucionar problemas de design no seu modelo:

• • Pesquise e poste no Fórum de Desenvolvimento do CMS na Comunidade para obter dicas, conselhos ou solução de problemas do seu código. 
  • Consulte a documentação de referência do CMS para obter tutoriais, guias e uma visão geral da estrutura do CMS.
  • Conecte-se com a equipe de produtos da HubSpot e outros desenvolvedores que trabalham na HubSpot no CMS Developer Community Slack.

• CSS Se você não se sentir confortável lendo ou editando HTML e

• • Conecte-se com um parceiro HubSpot certificado com conhecimento especializado em design de sites para ajudá-lo a personalizar seus modelos.
  • Use um modelo inicial ou um modelo de tema para editar estilos de página sem escrever nenhum código.
  • Se você estiver usando um modelo comprado do Marketplace de ativos, contato o designer do modelo para perguntas sobre o design da página.