CSS-Dateien erstellen, bearbeiten und anhängen

Cascading Stylesheets (CSS ) steuern die visuelle Darstellung der Seiten Ihrer Website, indem Sie Seitenelemente auswählen und gestalten. Verwenden Sie den Design-Manager, um neue CSS-Dateien zu erstellen, vorhandene zu bearbeiten und sie an Vorlagen, bestimmte Seiten oder ganze Domains anzuhängen.

Wenn Sie einfache Designänderungen an einer bestimmten Seite vornehmen möchten, erfahren Sie in diesem Artikel mehr über das Bearbeiten von Seiteninhalten im Content-Editor. Wenn Sie eine Design-Vorlage verwenden, erfahren Sie hier mehr über das Bearbeiten Ihrer Design-Einstellungen.

Eine neue CSS-Datei erstellen

1. Klicken Sie in Ihrem HubSpot-Account auf Mehr und gehen Sie dann zu Content > Design-Manager. Wenn Mehr nicht in Ihrem Account angezeigt wird, gehen Sie direkt zu Content > Design-Manager.
2. Klicken Sie im Finder oben links auf Datei > Neue Datei.
3. Klicken Sie im Dialogfeld auf das Dropdown-Menü und wählen Sie CSS + HubL aus. 
4. Klicken Sie auf „Weiter“.
5. Geben Sie im Feld Dateiname einen Namen für Ihre Datei ein.
6. Um den Speicherort der Datei zu ändern, klicken Sie auf Ändern. Wählen Sie im Pop-up-Fenster einen neuen Dateispeicherort aus. 
7. Wenn Sie fertig sind, klicken Sie auf Erstellen.

Bearbeiten Sie eine CSS-Datei

Nachdem Sie eine bestehende CSS-Datei erstellt oder geöffnet haben, nehmen Sie Ihre Änderungen im Code-Editor vor. Zusätzlich zum Standard-CSS unterstützt der Code-Editor HubL-Variablen und Makros , um die Pflege Ihres CSS zu erleichtern.

Eine Liste der Standard-CSS-Selektoren für HubSpot-Vorlagen finden Sie unter Boilerplate CSS .

1. { local.navDesignManager }}
2. Klicken Sie im Finder auf Datei > Neue Datei oder öffnen Sie eine vorhandene CSS-Datei.
3. Geben Sie im Code-Editor das CSS ein oder aktualisieren Sie es, um Ihre Änderungen vorzunehmen. 

Um in einer Vorschau anzuzeigen, wie Ihr HubL dargestellt wird, klicken Sie auf den Schalter Ausgabe anzeigen am oberen Rand des Editors. Auf der rechten Seite wird ein Fenster mit der gerenderten Vorschau geöffnet.

Auf Fehler prüfen

Prüfen Sie vor der Veröffentlichung Ihren Code auf HubL-Fehler. Fehler werden in der Konsole unten angezeigt, die Fehlerleiste links und die Bildlaufleiste rechts im Code-Editor.

Fehler, die Sie von der Veröffentlichung ausschließen, sind rot, während allgemeine Warnhinweise gelb sind. Klicken Sie unten im Code-Editor auf Details anzeigen, um weitere Informationen zu den Fehlern in der Fehlerkonsole anzuzeigen, und auf Details ausblenden, um die Fehlerkonsole einzuklappen.

Veröffentlichen Sie eine CSS-Datei

Nachdem Sie Ihre CSS-Datei bearbeitet haben, klicken Sie oben rechts auf Änderungen veröffentlichen . Um dieses Stylesheet in einer anderen Code-Vorlage aufzurufen, klicken Sie im Finder auf das Dropdown-Menü Aktionen und wählen Sie Öffentliche URL kopieren aus. 

Stylesheets an Inhaltselemente anhängen

Fügen Sie Stylesheets Ihren Vorlagen, einzelnen Seiten oder einer ganzen Domain hinzu. Stylesheets werden in einer bestimmten Reihenfolge angewendet, abhängig davon, wo sie angehängt sind. Die folgende Liste gibt die Reihenfolge wieder, in der sie auf Ihrer Website angewendet werden:

1. public_common.css (erforderlich): ein Stylesheet, das hauptsächlich von der HubSpot-App verwendet wird, aber auch für bestimmte Funktionen der Website.
2. Header-HTML: Link-Tags, die in > den Einstellungen für Content-Seiten der globalen <head> Version Ihrer Website hinzugefügt wurden.
3. Layout.css (erforderlich für Drag-&-Drop-Layouts): standardmäßige responsive CSS Datei, die an alle Drag-&-Drop-Vorlage-Layouts angehängt ist.
4. Angehängte Stylesheets (Seiten): Stylesheets, die in den Einstellungen der Content-Seite >an Ihre gesamte Website angehängt sind.
5. Angehängte Stylesheets ( Blog ): Stylesheets, die in > den Content-Blog-Einstellungen an Ihren Blog angehängt sind (überschreibt globale Sheets der Website).
6. Verlinkte Stylesheets (empfohlen für Vorlagen-Layouts): Stylesheets, die im Vorlagen-Layout eingebunden sind.
7. Zusätzliches <head> Markup in der Vorlage: Link-Tags, die dem <head> eines bestimmten Vorlagenlayouts hinzugefügt wurden.
8. Seitenspezifische Stylesheets: Stylesheets, die in den Einstellungen einer Seite eingebunden sind.
9. Seiten-Header-HTML: Link-Tags, die dem <head> einer bestimmten Seite in den Einstellungen der Seite hinzugefügt wurden.

Stylesheets an Vorlagen anhängen

Stylesheets können an Drag-&-Drop-Vorlagen im Inspektor im Design-Manager angehängt werden. Bei Code-Vorlagen werden Stylesheets direkt im Code-Editor hinzugefügt.

Drag-&-Drop-Vorlagen

1. Klicken Sie in Ihrem HubSpot-Account auf Mehr und gehen Sie dann zu Content > Design-Manager. Wenn Mehr nicht in Ihrem Account angezeigt wird, gehen Sie direkt zu Content > Design-Manager.
2. Klicken Sie im Finder auf den Namen Ihrer Drag-&-Drop-Vorlagen-Datei.
3. Klicken Sie im Inspektor im Abschnitt Verlinkte Stylesheets auf das Dropdown-Menü Hinzufügen und wählen Sie Ihr Stylesheet aus. Um ein Stylesheet zu entfernen, klicken Sie auf X.
4. Wenn Sie fertig sind, klicken Sie oben rechts auf Änderungen veröffentlichen, um Ihre Änderungen auf die Live-Seiten anzuwenden, die die Vorlage verwenden.

Kodierten Vorlagen

Bei Code-Vorlagen werden Stylesheets direkt im Code-Editor mithilfe <link> von Tags oder dem HubL-Tag im <head> der Datei angehängt. Erfahren Sie in der Entwicklerdokumentation mehr über Code-Vorlagen.

Stylesheets an eine bestimmte Seite anhängen

Bitte beachten: Diese Option ist nicht für Designvorlagen verfügbar. Erfahren Sie, wie Sie Ihre Designeinstellungen bearbeiten.

So hängen Sie ein seitenspezifisches Stylesheet aus dem Einstellungsbereich des Content-Editors an:

1. Gehen Sie zu Ihrem Content:

   • Website-Seiten:Klicken Sie in Ihrem HubSpot-Account auf Mehr und gehen Sie dann zu Content > Website-Seiten. Wenn Mehr nicht in Ihrem Account angezeigt wird, gehen Sie direkt zu Content > Website-Seiten.
   • Landingpages: Klicken Sie in Ihrem HubSpot-Account auf Mehr und gehen Sie dann zu Content > Landingpages. Wenn Mehr nicht in Ihrem Account angezeigt wird, gehen Sie direkt zu Content > Landingpages.
2. Klicken Sie auf den Namen Ihrer Seite.
3. Klicken Sie im Content-Editor auf das Menü Einstellungen und wählen Sie Erweitert aus. 
4. Klicken Sie im Dialogfeld im Abschnitt Stylesheets auf das Dropdown-Menü Stylesheet anhängen und wählen Sie ein Stylesheet aus. Um ein Stylesheet zu entfernen, klicken Sie auf X neben dem Stylesheet.
5. Um Stylesheets zu deaktivieren, die von der Vorlage oder Domain übernommen werden, klicken Sie auf das Dropdown-Menü neben dem Stylesheet und wählen Sie Deaktiviert aus.

Domain-Stylesheets anhängen

Bitte beachten: Design-Vorlagen müssen die Annotation enableDomainStylesheets: true enthalten, um Stylesheets auf Domain-Ebene verwenden zu können. Erfahren Sie mehr über Vorlagen-Anmerkungen.

So hängen Sie ein Stylesheet an eine gesamte Domain an:

1. Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das Zahnradsymbol, um die Einstellungen aufzurufen.
2. Klicken Sie in der Seitenleiste auf Contentseiten > .
3. Klicken Sie auf das Dropdown-Menü , um die Domain auszuwählen, für die Sie die Einstellungen aktualisieren möchten.
4. Klicken Sie auf der Registerkarte Vorlagen im Abschnitt CSS-Stylesheets & auf + Stylesheet hinzufügen. Um ein Stylesheet zu entfernen, klicken Sie auf das X neben dem angehängten Stylesheet.
5. Klicken Sie auf „Speichern“.

Bitte beachten: Wenn Sie auf die Starter- oder kostenlosen Tools von HubSpot herabstufen, bleiben auf Domain-Ebene angehängte Stylesheets aktiv, bis Sie sie entfernen. Sobald alle Stylesheets entfernt sind, können Sie auf Domain-Ebene keine Stylesheets mehr anhängen. Erfahren Sie mehr über das Herabstufen eines Abonnements.