Compreender a origem 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. Neste artigo, aprenda como o estilo é aplicado, como encontrar o estilo em uma página ativa e como obter ajuda com edições de design.

Compreender como os estilos são aplicados

Os estilos são aplicados em uma ordem específica com base em onde são adicionados no HubSpot. Por exemplo, os estilos adicionados em uma folha de estilo global são substituídos por estilos adicionados em uma página específica. 

Use esta lista para compreender a origem do estilo de uma página, começando com os estilos aplicados primeiro e terminando com os estilos aplicados por último.

1. Módulo personalizado
   • Folhas de estilo anexadas a um módulo no editor de layout.

• • CSS adicionado à seção module.css de um módulo no editor de módulos.

1. • CSS dentro do HubL marcação do módulo dentro de um require_css block.
2. As folhas de estilo adicionadas a um modelo por meio do require_css block no editor de código.
3. As folhas de estilo padrão do HubSpot (por exemplo, layout.css) no gerenciador de design .
4. Folhas de estilo anexadas ao modelo no editor de layout.

5. Folhas de estilo anexadas na guia de configurações da 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 cabeçalho HTML 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á !important tags a esses estilos. Saiba mais sobre as tags !important e como elas afetam o estilo.

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

Use as ferramentas de desenvolvedor no navegador para encontrar os estilos aplicados ao seu site ativo ou a uma página de visualização. Cada navegador varia um pouco em como solucionar problemas de estilo. No exemplo a seguir, o Google Chrome é usado.

1. Acesse seu conteúdo:
   • Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
2. Clique no nome da página.
3. No editor de conteúdo, clique em Visualização no canto superior direito.
4. Na página de visualização, clique em Abrir em uma nova guia.
5. Na visualização, clique com o botão direito do mouse no elemento que deseja examinar e selecione Inspecionar.
6. No painel Elementos , você verá o HTML da página. Clique nos elementos para visualizar seus estilos.
7. No painel Estilos , revise as regras de CSS aplicadas a esse elemento. Marque e desmarque as caixas de seleção ao lado de cada estilo para remover ou adicionar estilos temporariamente. Isso ajudará a identificar qual regra está afetando o elemento.

8. À direita das regras de CSS, você verá o nome de origem desse estilo. Isso confirma onde a origem do estilo está localizada. Passe o mouse sobre o nome de origem para exibir o nome completo:
   • Se o estilo vier de um arquivo CSS, o nome da folha de estilo aparecerá ao lado da declaração CSS. Acesse o gerenciador de design, encontre a folha de estilos e faça as edições necessárias.

• • Se o nome da fonte começa com module, o estilo é do CSS de um módulo. Passe o mouse sobre o nome da fonte para ver o nome completo do módulo.

• • Se o nome da origem for Folha de estilos do agente do usuário , o estilo fará parte do estilo padrão do navegador.
    • Geralmente, você verá isso para o estilo da tag HTML (por exemplo, <p>, <h1>etc <span> .), quando o navegador não conseguir encontrar regras de estilo para o elemento. 
    • A folha de estilo do agente do usuário pode ser substituída adicionando seus próprios estilos a esse elemento.

• • Se o nome da fonte for o URL da página, o estilo será das tags da <style> página. Por exemplo, o estilo pode ser definido no HTML do cabeçalho da página ou do modelo.

• • Se o nome da fonte for o URL da página e o estilo for direcionado a #hs_cos_wrapper_module_number, o estilo será adicionado na guia Estilos do editor de página. O HubSpot adicionará !important tags a esses estilos. Saiba mais sobre as tags !important e como elas afetam o estilo.

• • Se o nome da fonte for <style>, o estilo será incluído automaticamente no elemento. Muitas vezes, isso ocorre porque o estilo no editor de um ativo incorporável do HubSpot, como um CTA ou agendador de reuniões widget.

• • Se element.style aparecer ao lado da declaração no inspetor, o CSS foi definido em linha. 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 integrado 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
• Microsoft Edge
• 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.

• 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 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.