Zum Hauptinhalt
Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
Landing Pages

Die Quelle des Stylings einer Seite verstehen

Zuletzt aktualisiert am: April 30, 2021

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Ehemaliges Marketing Hub Basic

Es gibt mehrere Orte, an denen Styling von Inhalten in HubSpot hinzugefügt werden kann, und es wird in einer bestimmten Reihenfolge basierend darauf, wo sie hinzugefügt werden, angewendet. 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 benutzerdefiniertes Modul
    1. Stylesheets, die zu einem Modul gehören.
    2. CSS, das dem CSS-Abschnitt eines Moduls hinzugefügt wurde.
    3. CSS im HubL-Markup des Moduls innerhalb eines require_css-Blocks
  2. Stylesheets, die über den require_css-Block zu einer Vorlage hinzugefügt wurden
  3. HubSpot-Standard-Stylesheets (z. B. layout.css)
  4. Stylesheets, die zur Vorlage gehören

    design-manager-linked-stylesheet
  5. Stylesheets, die auf der Registerkarte „Einstellungen“ Ihrer Seite angehängt sind

    page-editor-attach-stylesheet
  6. Stylesheets, die in Ihren Einstellungen für alle Domains angehängt sind
  7. Stylesheets, die in Ihren Einstellungen für eine bestimmte Domain angehängt sind
  8. In <style>-Tags hinzugefügtes CSS. Beispielsweise der Kopfzeilen-HTML Ihrer Website-Einstellungen, Seiteneinstellungen oder Vorlage.

    page-editor-head-html
  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.

page-editor-styles-tab

Styling auf einer Vorschau- oder Live-Seite finden

Sie können Entwicklertools in Ihrem Browser verwenden, um die auf Ihrer Live-Website oder einer Vorschauseite angewendeten Stile zu analysieren. Bei jedem Browser ist die Behebung von Styling-Fehlern etwas anders.

So finden Sie Styling in Google Chrome:

  • Klicken Sie auf Ihrer Vorschau- oder Live-Seite mit der rechten Maustaste auf das Element, das Sie überprüfen möchten, und wählen Sie dann „Untersuchen“ aus.
  • Im Bereich „Elemente“ links sehen Sie den HTML der Seite. Sie können entweder auf die Elemente klicken, um ihre Stile anzuzeigen, oder Sie können das Cursor-Symbol oben links im Bereich verwenden, um auf On-Page-Elemente zu klicken.

    inspect-live-page-cursor

  • Im Bereich „Stile“ auf der rechten Seite sehen Sie alle Stile, die auf dieses Element angewendet werden. Sie können die Kontrollkästchen neben jedem Stil aktivieren und deaktivieren, um den Stil zu entfernen und zu übernehmen. So können Sie besser eingrenzen, welche Stilregel geändert werden muss.

    inspect-live-page
  • Rechts neben den CSS-Regeln wird der Name der Quelle für diesen Stil angezeigt. Er gibt an, woher die Stile stammen. 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 gehen, um Ihr Stylesheet zu finden und die erforderlichen Änderungen vorzunehmen.

      inspect-css-stylesheet-name
    • Wenn der Name der Quelle mit Modul beginnt, stammen die Stile wahrscheinlich aus dem CSS eines Moduls. Bewegen Sie den Mauszeiger über den Namen der Quelle, um den vollständigen Namen des Moduls anzuzeigen.

      inspect-css-module-name
    • Wenn der Name der Quelle Stylesheet des Benutzer-Agents ist, ist das CSS Teil des Standard-Stylings des Browsers. Sie sehen dies am häufigsten für allgemeines HTML-Tag-Styling wie <p>, <h1>, <h2>, <span>, <div> usw. Dieses Styling wird angewendet, wenn der Browser keine allgemeinen Styling-Regeln für das Element finden kann. Sie können jedoch durch Hinzufügen Ihrer eigenen Stile zu diesem Element überschrieben werden.

      inspect-css-user-agent
    • Wenn der Name der Quelle die Seiten-URL ist, stammt das CSS aus <style>-Tags auf der Seite. Beispielsweise können die Stile im Seiten- oder Vorlagen-Kopfzeilen-HTML festgelegt werden.

      inspect-css-page-url
    • Wenn der Name der Quelle die Seiten-URL ist und das Styling von #hs_cos_wrapper_module_number kommt, werden die Stile wahrscheinlich auf der Registerkarte „Stile“ des Seiten-Editors festgelegt. HubSpot fügt diesen Stilen !important-Tags hinzu. Erfahren Sie mehr über !important-Tags und wie sie sich auf Styling auswirken.
       

      inspect-css-styles-tab
    • Wenn element.style neben der Deklaration im Inspektor erscheint, wurde das CSS inline festgelegt. Inline-Stile sind Stile, die direkt zum HTML-Quellcode einer Seite oder den Inline-Styling-Feldern einer Vorlage hinzugefügt werden. Inline-Stile in Quellcode würde beispielsweise als <p style="background:purple;">Hallo Welt</p> angezeigt.

      inspect-css-element-style

Weitere Informationen zum Untersuchen einer Seite finden Sie in der Hilfedokumentation für Ihren Webbrowser:

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 CMS-Referenzdokumentation finden Sie Tutorials, Leitfäden und einen Überblick über das CMS-Framework.
    • Treten Sie in Kontakt mit dem Produktteam von HubSpot und anderen Entwicklern, die in der CMS Developer Slack Community an HubSpot arbeiten.
  • Wenn Sie keine Erfahrung beim Lesen und Bearbeiten von HTML und CSS in Ihren Vorlagen haben: