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. In diesem Artikel erfahren Sie, wie Styling angewendet wird, wie Sie Styling auf einer Live-Seite finden und wie Sie Hilfe bei der Designbearbeitung erhalten.

Verstehen, wie Stile angewendet werden

Stile werden in einer bestimmten Reihenfolge angewendet, je nachdem, wo sie in HubSpot hinzugefügt werden. Beispielsweise werden Stile, die in einem globalen Stylesheet hinzugefügt werden, durch Stile überschrieben, die auf einer bestimmten Seite hinzugefügt wurden. 

Verwenden Sie diese Liste, um die Quelle der Formatierung einer Seite nachzuvollziehen, beginnend mit den zuerst angewendeten Stilen und endend mit den zuletzt angewendeten Stilen.

1. CSS für benutzerdefinierte Module
   • Stylesheets, die an ein Modul im Layout-Editor angehängt sind.

• • CSS dem module.css Abschnitt eines Moduls im Modul-Editor hinzugefügt.

1. • CSS innerhalb des HubL-Markups des Moduls in einem require_css block.
2. Stylesheets, die require_css block über im Code-Editor zu einer Vorlage hinzugefügt wurden.
3. HubSpot-Standard-Stylesheets (z. B. layout.css) im Design-Manager .
4. Stylesheets, die an die Vorlage im Layout-Editor angehängt sind.

5. Stylesheets , die auf der 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 Vorlage .

9. Stile , die über den Seiten-Editor hinzugefügt wurden. HubSpot fügt diesen Stilen auch Tags hinzu !important . Erfahren Sie mehr über !important-Tags und wie sie sich auf das Styling auswirken.

Styling auf einer Vorschau- oder Live-Seite finden

Verwenden Sie die Entwicklertools in Ihrem Browser, um die Stile zu finden, die auf Ihre Live-Website oder eine Vorschauseite angewendet werden. Jeder Browser unterscheidet sich geringfügig in der Fehlerbehebung beim Styling. Im folgenden Beispiel wird Google Chrome verwendet.

1. Gehen Sie zu Ihrem Content:
   • Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
   • Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
2. Klicken Sie auf den Namen Ihrer Seite.
3. Klicken Sie im Content-Editor oben rechts auf Vorschau.
4. Klicken Sie auf der Vorschauseite auf In neuer Registerkarte öffnen.
5. Klicken Sie in der Vorschau mit der rechten Maustaste auf das Element , das Sie untersuchen möchten, und wählen Sie dann Untersuchen aus.
6. Im Fenster Elemente sehen Sie den HTML-Code der Seite. Klicken Sie auf die Elemente , um ihre Stile anzuzeigen.
7. Überprüfen Sie im Bereich Stile die CSS-Regeln, die auf dieses Element angewendet wurden. Aktivieren und deaktivieren Sie die Kontrollkästchen neben den einzelnen Stilen, um Stile vorübergehend zu entfernen oder hinzuzufügen. Dadurch lässt sich leichter identifizieren, welche Regel das Element beeinflusst.

8. Rechts neben den CSS-Regeln sehen Sie den Quellnamen für dieses Stil. Dadurch wird bestätigt, wo sich die Quelle des Stylings befindet. Bewegen Sie den Mauszeiger über den Namen der Quelle , um den vollständigen Namen anzuzeigen:
   • Wenn das Styling aus einer CSS-Datei stammt, erscheint der Name des Stylesheets neben der CSS-Deklaration. Navigieren Sie zum Design-Manager, suchen Sie das Stylesheet und nehmen Sie die gewünschten Änderungen vor.

• • Wenn der Quellname mit "module" beginnt, stammt das Styling aus dem CSS eines Moduls. Bewegen Sie den Mauszeiger über den Quellennamen , um den vollständigen Namen des Moduls anzuzeigen.

• • Wenn der Quellname User-Agent-Stylesheet lautet, ist das Styling Teil des Standardstylings des Browsers.
    • Dies wird in der Regel bei HTML-Tag-Stilen (z. B. <p>, <h1> <span> usw.) angezeigt, wenn der Browser keine Stilregeln für das Element finden kann. 
    • Das User-Agent-Stylesheet kann überschrieben werden, indem Sie Ihrem Element Ihre eigenen Styles hinzufügen.

• • Wenn der Quellname die Seiten-URL ist, stammt das Styling von <style> den -Tags auf der Seite. Zum Beispiel könnte das Styling im Header-HTML der Seite oder Vorlage festgelegt werden.

• • Wenn der Quellname die Seiten-URL ist und das Styling auf #hs_cos_wrapper_module_number ausgerichtet ist, wird das Styling auf der Registerkarte Stile des Seiten-Editors hinzugefügt. HubSpot fügt diesen Stilen Tags hinzu !important . Erfahren Sie mehr über !important-Tags und wie sie sich auf das Styling auswirken.

• • Wenn der Quellname lautet <style>, wird das Styling automatisch in das -Element aufgenommen. Dies liegt häufig an Styling im Editor eines einbettbaren HubSpot-Elements, z. B. eines CTA oder eines Meeting-Widgets.

• • 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 wird Inline-Styling im Quellcode 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.