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. Benutzerdefiniertes modul CSS
   1. Stylesheets, die an ein Modul angehängt sind.
   2. CSS wurde dem CSS-Abschnitt eines Moduls hinzugefügt.
   3. CSS innerhalb der HubL-Markup der Modul innerhalb eines require_css Blocks
2. Stylesheets, die über den require_css-Block zu einer Vorlage hinzugefügt werden
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 Stile 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 Name der Quelle mit Modul beginnt, stammt das Styling wahrscheinlich vom 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 im Umgang mit den Inspektor-Tools zur Behebung von Design-Problemen bei Ihrer Vorlage vertraut sind:

• • Im CMS-Entwicklungsforum der Community erhalten Sie Tipps und Ratschläge zu Ihrem Code sowie Anweisungen zur Fehlerbehebung.
  • In der Referenzdokumentation für CMS finden Sie Tutorials, Anleitungen und einen Überblick über das CMS-Framework.
  • Kontaktieren Sie das Produkt-Team von HubSpot und andere Entwickler, die in HubSpot arbeiten, über den Slack-Raum für die CMS-Entwickler-Community.

• Wenn Sie keine Erfahrung beim Lesen und Bearbeiten von HTML und CSS in Ihren Vorlagen haben:

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