Ir para o conteúdo principal
Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Landing Pages

Saiba sobre a fonte do estilo de uma página

Ultima atualização: Agosto 3, 2021

Disponível para

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Basic (versão anterior)

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

Saiba como o estilo é aplicado

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

  1. CSS de módulo personalizado
    1. As folhas de estilos anexadas a um módulo.
    2. CSS adicionada à seção CSS de um módulo.
    3. CSS na marcação de HubL do módulo em um require_css block
  2. Folhas de estilos adicionadas a um modelo por meio do require_css block
  3. Folhas de estilos padrão da HubSpot (por exemplo, layout.css)
  4. Folhas de estilos anexadas ao modelo

    design-manager-linked-stylesheet
  5. Folhas de estilos anexadas na guia de configurações da sua página

    page-editor-attach-stylesheet
  6. Folhas de estilos anexadas nas configurações de todos os domínios
  7. Folhas de estilos anexadas em nas configurações de um domínio específico
  8. CSS adicionada dentro das tags <style>. Por exemplo, o HTML principal das configurações de site, configurações de página ou modelo.

    page-editor-head-html
  9. Estilos adicionados por meio do editor de páginas. A HubSpot também adicionará as tags !important a esses estilos. Saiba mais sobre as tags !important e como elas afetam o estilo.

page-editor-styles-tab

Encontrar o estilo em uma página ativa ou de visualização

Você pode usar ferramentas de desenvolvedores no seu navegador para verificar os estilos aplicados ao seu site ativo ou a uma página de visualização. Cada navegador varia ligeiramente o modo de como solucionar o estilo.

Para encontrar o estilo no Google Chrome:

  • Na sua página ativa ou de visualização, clique com o botão direito do mouse no elemento que deseja verificar 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 de cursor no canto superior esquerdo do painel para clicar nos elementos da página.

    inspect-live-page-cursor

  • No painel Estilo à direita, você verá todos os estilos aplicados a esse elemento. Você pode marcar e desmarcar as caixas de seleção ao lado de cada estilo para remover e aplicar o estilo. Isso ajudará a restringir a regra de estilo a ser alterada.

    inspect-live-page
  • À direita das regras de CSS, você verá o nome da fonte desse estilo, que informará a origem dele. Passe o cursor do mouse sobre o nome da fonte para visualizar o nome:
    • Quando o estilo vier de uma folha de estilos, o nome da folha de estilo aparecerá ao lado da declaração de CSS no inspetor. Você pode acessar o gerenciador de design, encontrar a folha de estilo e fazer edições conforme necessário.

      inspect-css-stylesheet-name
    • Se o nome da fonte começar com o módulo, o estilo provavelmente virá da CSS de um módulo. Passe o cursor do mouse sobre o nome da fonte para visualizar o nome do módulo.

      inspect-css-module-name
    • Se o nome da fonte for Folha de estilos de agente do usuário, a CSS fará parte do estilo padrão do navegador. Você verá isso mais frequentemente para o estilo de tag HTML geral, como <p>, <h1>, <h2>, <span>, <div> etc. Esse estilo é aplicado quando o navegador não consegue encontrar as regras gerais de estilo para o elemento, mas pode ser substituído, adicionando seus próprios estilos a esse elemento.

      inspect-css-user-agent
    • Se o nome da fonte for a URL da página, a CSS virá das tags <style> na página. Por exemplo, o estilo pode ser definido no HTML principal da página ou do modelo.

      inspect-css-page-url
    • Se o nome da fonte for a URL da página e o estilo estiver direcionado em #hs_cos_wrapper_module_number, o estilo provavelmente está sendo definido na guia Estilos do editor de páginas. A HubSpot adicionará as tags !important a esses estilos. Saiba mais sobre as tags !important e como elas afetam o estilo.
       

      inspect-css-styles-tab
    • Se element.style aparecer ao lado da declaração no inspetor, a CSS foi definida de modo integrado. O estilo integrado é adicionado diretamente ao código-fonte do HTML de uma página ou a campos de Estilo integrado de um modelo. Por exemplo, o estilo integrado no código-fonte aparecerá como <p style="background:purple;">Olá mundo</p>.

      inspect-css-element-style

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

Obter ajuda com edições de design

O melhor recurso para fazer alterações nos modelos ou nas folhas de estilos da HubSpot é o design do modelo original. No entanto, há vários recursos para obter ajuda adicional com o estilo do conteúdo, dependendo do seu nível de familiaridade em solucionar problemas de HTML e CSS.

  • Se você estiver acostumado a usar as ferramentas do inspetor para solucionar problemas de design no modelo:
  • Se você não estiver acostumado a ler ou editar HTML e CSS nos modelos: