Die Quelle des Stylings einer Seite verstehen

Es gibt mehrere Stellen, an denen Content Styling in HubSpot hinzugefügt werden können, und sie werden in einer bestimmten Reihenfolge angewendet, je nachdem, wo sie hinzugefügt werden. Nachfolgend erfahren Sie, wie Styling angewendet wird, wie Sie Styling auf einer Live-Seite finden und wie Sie Hilfe beim Bearbeiten eines Designs erhalten.

Verstehen, wie Styling angewendet werden

CSS-Styling in HubSpot wird in einer Reihenfolge angewendet, die sich danach richtet, wo es wie unten aufgeführt in HubSpot festgelegt ist. Beispielsweise wird Styling, das in einem globalen Stylesheet festgelegt ist, durch Styling überschrieben, das auf einer bestimmten Seite festgelegt ist. 

1. CSS für benutzerdefinierte Module
   1. Stylesheets, die an ein Modul angehängt sind.
   2. CSS, das dem CSS-Abschnitt eines Moduls hinzugefügt wurde.
   3. CSS innerhalb eines require_css-Blocks innerhalb des HubL-Markups des Moduls
2. Stylesheets, die über den require_css Block zu einer Vorlage hinzugefügt wurden
3. HubSpot-Standard-Stylesheets (z. B. layout.css)
4. An die Vorlage angehängte Stylesheets
   
   
   
   
5. Stylesheets , die an die Registerkarte "Einstellungen" Ihrer Seite angehängt sind
   
   
   
   
6. Stylesheets in Ihren Einstellungen für alle Domains
7. Stylesheets, die in Ihren Einstellungen für eine bestimmte Domain angehängt sind
8. CSS innerhalb <style> der Tags hinzugefügt. Zum Beispiel der Header-HTML Ihrer Website-Einstellungen, Seiteneinstellungen oder Vorlagen.
   
   
   
   
9. Stile , die über den Seiten-Editor hinzugefügt wurden. HubSpot fügt außerdem !important-Tags zu diesen Stilen hinzu. Erfahren Sie mehr über !important-Tags und wie sie sich auf das Styling auswirken.

Styling auf einer Vorschau- oder Live-Seite finden

Sie können Entwickler-Tools in Ihrem Browser verwenden, um die Stile zu überprüfen, die auf Ihre Live-Website oder eine Vorschauseite angewendet wurden. Jeder Browser unterscheidet sich geringfügig in der Fehlerbehebung beim Styling.

So finden Sie Styling in Google Chrome:

• Klicken Sie auf Ihrer Vorschau- oder Live-Seite mit der rechten Maustaste auf das Element, das Sie untersuchen möchten, und wählen Sie dann Untersuchen aus.
• Im Bereich "Elemente " auf der linken Seite sehen Sie den HTML-Code der Seite. Sie können entweder auf die Elemente klicken, um ihre Stile anzuzeigen, oder Sie können das Cursorsymbol oben links im Fenster verwenden, um auf On-Page-Elemente zu klicken.

  

• Im Bereich "Stile " auf der rechten Seite sehen Sie alle Stile, die auf dieses Element angewendet wurden. Sie können die Kontrollkästchen neben jedem Stil aktivieren und deaktivieren, um den Stil zu entfernen und zu übernehmen. So können Sie die zu ändernde Stilregel weiter eingrenzen.
  
  
  
  
• Rechts neben den CSS-Regeln sehen Sie den Quellennamen für dieses Styling, der Ihnen sagt, woher das Styling stammt. Bewegen Sie den Mauszeiger über den Namen der Quelle , um den vollständigen Namen anzuzeigen:
  • Wenn die Stile aus einem Stylesheet stammen, wird der Name des Stylesheets neben der CSS-Deklaration im Inspektor angezeigt. Sie können dann zu Ihrem Design-Manager navigieren, das Stylesheet finden und die gewünschten Änderungen vornehmen.
    
    
    
    
  • Wenn der Quellname mit "module" beginnt, stammt das Styling wahrscheinlich aus dem CSS eines Moduls. Bewegen Sie den Mauszeiger über den Namen der Quelle , um den vollständigen Namen des Moduls anzuzeigen.
    
    
    
    
  • Wenn der Name der Quelle Benutzer-Agent-Stylesheet lautet, ist das CSS Teil des Standard-Stylings des Browsers. Diese Einstellung wird am häufigsten bei allgemeinen HTML-Tag-Styling wie <p>, <h1>, <h2>, <span> <div>, usw. angezeigt. Dieses Styling wird angewendet, wenn der Browser keine allgemeinen Styling-Regeln für das Element finden kann. Es kann jedoch überschrieben werden, indem Sie dem Element Ihre eigenen Stile hinzufügen.
    
    
    
    
  • Wenn es sich bei dem Quellennamen um die Seiten-URL handelt, stammt das CSS aus <style> den Tags auf der Seite. Das Styling kann beispielsweise im HTML-Seiten- oder Vorlagen-Header festgelegt werden.
    
    
    
    
  • Wenn es sich bei dem Quelle-Namen um die Seiten-URL handelt und der Styling auf #hs_cos_wrapper_module_number ausgerichtet ist, wird der Styling wahrscheinlich auf der Registerkarte "Stile " der Seiten-Editor festgelegt. HubSpot fügt diesen Stilen !important-Tags hinzu. Erfahren Sie mehr über !important-Tags und wie sie sich auf das Styling auswirken.
     
    
    
  • Wenn der Quellenname <style> ist, wird das Styling wahrscheinlich automatisch in das Element aufgenommen. Häufig liegt dies daran, dass Styling im Editor einer einbettbaren HubSpot Ressource festgelegt wurde, z. B. einer CTA oder einer Meeting-Widget.
  • Wenn element.style neben der Deklaration im Inspektor angezeigt wird, wurde das CSS inline festgelegt. Inline-Styling ist Styling, das direkt in den HTML-Quellcode einer Seite oder in die Inline-Styling-Felder einer Vorlageeingefügt wird. Beispielsweise würde inline Styling in Quelle Code als <p style="background:purple;">"Hello World"</p> angezeigt.
    
    

Weitere Informationen zum Überprüfen einer Seite finden Sie in der Hilfedokumentation Ihres Webbrowsers:

• Chrom
• Firefox
• Microsoft Edge
• Safari

Hilfe bei Designänderungen erhalten

Für Änderungen an Ihren HubSpot-Vorlagen oder -Stylesheets wenden Sie sich am besten an den ursprünglichen Designer Ihrer Vorlage. Es gibt jedoch eine Reihe von Ressourcen, die Ihnen zusätzliche Hilfe bei der Formatierung von Inhalten bieten, je nachdem, wie vertraut Sie mit der Behebung von Fehlern bei HTML und CSS sind.

• Wenn Sie mit den Inspektor-Tools zur Behebung von Designproblemen Ihrer Vorlage vertraut sind:

• • Suchen und posten Sie im CMS-Entwicklungsforum in der Community, um Tipps, Ratschläge oder Fehlerbehebungen für Ihren Code zu erhalten.
  • In der CMS-Referenzdokumentation finden Sie Tutorials, Leitfäden und einen Überblick über das CMS-Framework.
  • Vernetzen Sie sich mit dem Produktteam von HubSpot und anderen Entwicklern, die in HubSpot arbeiten, über die Slack-Community für CMS-Entwickler.

• Wenn Sie sich beim Lesen oder Bearbeiten von HTML und CSS in Ihren Vorlagen nicht wohl fühlen:

• • Wenden Sie sich an einen zertifizierten HubSpot-Partner mit Erfahrung im Website-Design, der Sie bei der Anpassung Ihrer Vorlagen unterstützt.
  • Verwenden Sie eine Design-Vorlage, um Seitenstile zu bearbeiten, ohne Code schreiben zu müssen.
  • Wenn Sie eine Vorlage verwenden, die Sie im Ressourcen-Marketplace gekauft haben, Kontakt Sie den Designer der Vorlage, wenn Sie Fragen zum Design Ihrer Seite haben.