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.
CMS-General

CSS-Dateien erstellen, bearbeiten und anhängen, um Ihre Website zu gestalten

Zuletzt aktualisiert am: Februar 14, 2019

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic

CSS (Cascading Style Sheets) sind kodierte Dateien, die Elemente Ihrer Seite auswählen und deren Präsentation steuern. Stellen Sie sich das HTML Ihrer benutzerdefinierten Vorlage als die Knochen und das CSS als die Haut Ihrer Website vor. 

In diesem Artikel erfahren Sie, wie Sie eine CSS-Datei in HubSpot erstellen, veröffentlichen und einfügen. Hier erfahren Sie, wie man einfache Designänderungen an einer bestimmten Seite vornimmt.

Bitte beachten Sie: Wenn Sie vom technischen Serviceteam von HubSpot nach HubSpot migriert wurden, haben Sie bereits einige Standard-CSS-Dateien für sich erstellt. Falls erforderlich, arbeiten Sie mit Ihrem Designer zusammen, um diese Dateien zu ändern, um das Aussehen Ihrer Website anzupassen.

Eine neue CSS-Datei erstellen

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Klicken Sie auf das Ordnersymbol Ordner in der oberen linken Ecke, um das Seitenleistenmenü zu erweitern. Klicken Sie dann auf Datei > Neue Datei.
Neue codierte Datei
  • Klicken Sie im Dialogfeld auf CSS-Stylesheet. Geben Sie einen Namen für Ihr CSS-Stylesheet ein und klicken Sie auf Erstellen.

Bearbeiten der 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

Prüfen Sie vor der Veröffentlichung Ihren Code auf HubL-Fehler. Es gibt drei Stellen, um HubL-Fehler oder -Warnungen in einem benutzerdefinierten Modul oder einer codierten Datei zu finden:

  • In der Fehlerkonsole am unteren Rand des Code-Editors.
  • In der Fehlerleiste auf der linken Seite des Code-Editors.
  • In der Bildlaufleiste auf der rechten Seite des Editors.

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 zu schließen.

In der Fehler-Konsole gibt es Links zu allen HubL-Fehlern oder -Warnungen in Ihrem Code oder benutzerdefinierten Modul. Bewegen Sie den Mauszeiger über die roten Fehlermeldungen auf der linken Seite des Code-Editors, um den Fehler oder die Warnung in Ihrem Code anzuzeigen. Wenn Sie auf den Fehler klicken, wird Ihr Cursor zu allen Fehlern oder Warnungen in dieser Zeile geführt. Wenn Sie auf einen Hinweis in der Bildlaufleiste klicken, gelangen Sie zu diesem Teil der Datei.

Sie können auch auf eine Zeilennummer im Code-Editor klicken und die URL der Datei entsprechend aktualisieren lassen. Auf diese Weise können Sie einen Link zu Ihrem Code mit anderen teilen und sie genau dorthin leiten, wo Sie in der Datei arbeiten.  

Klicken Sie nach der Bearbeitung der Datei oben rechts in der oberen Ecke auf Änderungen veröffentlichen. Wenn Sie dieses Stylesheet in einer anderen codierten Vorlage aufrufen möchten, kopieren Sie die URL des Sheets, indem Sie auf Aktionen > Öffentliche URL kopieren in der linken Seitenleiste klicken.

CSS bearbeiten

An Vorlage anfügen

In HubSpot können Sie Stylesheets auf verschiedene Weise an Ihre Inhalte anhängen. Nachfolgend finden Sie die Reihenfolge, in der angehängte Stylesheets auf Ihrer Website verlinkt sind:

  1. public_common.css * - ein Stylesheet, das hauptsächlich von der HubSpot-App verwendet wird, aber auch für bestimmte Funktionen der Website.
  2. Header-HTML in den Einstellungen unter Website > Seiten - Link-Tags, die dem globalen der Website hinzugefügt wurden.https://designers.hubspot.com/docs/cos/included-cos-files#layout-css
  3. Angehängte Stylesheets in den Einstellungen unter Website > Seiten - Stylesheets, die an Ihre gesamte Website angehängt sind.
  4. Angehängte Stylesheets in den Einstellungen unter Website > Blog - Stylesheets, die an Ihren Blog angehängt sind (überschreibt globale Sheets der Website).
  5. Verlinkte Stylesheets*** - Stylesheets, die im Vorlagenlayout eingebunden sind.
  6. Zusätzliches Markup in der Vorlage - Link-Tags, die dem eines bestimmten Vorlagenlayouts hinzugefügt wurden.
  7. Seitenspezifische Stylesheets - Stylesheets, die in den Einstellungen einer Seite angehängt sind.Seitenkopf-HTML - Link-Tags, die dem einer bestimmten Seite in den Einstellungen der Seite hinzugefügt wurden.* Erforderlich
  8. **Erforderlich für Drag-and-Drop-Layouts
  9. ***Empfohlene Methode für Stylesheet-Anhänge für Vorlagenlayouts  Um Stylesheets an eine Vorlage anzuhängen, öffnen Sie die Vorlage in Ihrem Design-Manager. Wählen Sie im rechten Seitenmenü unter Kopf- und Körperoptionen eine Datei aus dem Hinzufügen-Dropdown-Menü neben Verlinkte Stylesheets.

Sie können ein bereits angehängtes Stylesheet bearbeiten oder entfernen, indem Sie mit der Maus darüber fahren und auf Bearbeiten klicken, um Änderungen daran vorzunehmen, oder auf X, um es zu entfernen.

Nachdem Sie ein Stylesheet hinzugefügt haben, klicken Sie oben rechts auf Änderungen veröffentlichen , um Ihre Änderungen auf die Live-Seiten unter Verwendung der Vorlage anzuwenden. 

HubSpot-Hilfeartikel – Screenshot

Anhängen oder Entfernen von Stylesheets auf einer bestimmten Seite

So fügen Sie ein seitenspezifisches Stylesheet aus dem Einstellungsbereich des Seiteneditors hinzu oder entfernen es:

/articles/kcs_article/account/a-guide-to-hubspots-new-navigationNavigieren Sie zu Webseiten oder zu Landing Pages. 

Bewegen Sie den Mauszeiger über Ihre Seite und klicken Sie auf Bearbeiten

Klicken Sie im Seiteneditor oben auf Einstellungen.

  • Klicken Sie unter Seiten-Stylesheets auf das Dropdown-Menü Stylesheet anhängen und wählen Sie das Sheet aus, das Sie anhängen möchten. Klicken Sie auf das X neben dem Stylesheet, das Sie entfernen möchten.
  • Klicken Sie in der oberen rechten Ecke auf Speichern und Veröffentlichen .  
  • Sie können auch Stylesheets deaktivieren, die von der Vorlage oder Domäne an die Seite vererbt werden. Wenn sie deaktiviert sind, werden diese Stylesheets nicht auf Ihre Seite angewendet:
  • Wählen Sie auf der gleichen Einstellungen-Registerkarte im Seiteneditor die Option Deaktiviert aus dem Dropdown-Menü neben Ihren enthaltenen Stylesheets.

Klicken Sie Speichern und Veröffentlichen in der oberen rechten Ecke.

Anhängen oder Entfernen von Stylesheets auf Domain-Ebene

  • So fügen Sie ein Stylesheet hinzu oder entfernen es von allen Inhalten in einer Domäne: 

Klicken Sie im Seitenleistenmenü auf Website > Seiten. 

Scrollen Sie auf der RegisterkarteVorlagen zu CSS & Stylesheets. Um ein Stylesheet hinzuzufügen, klicken Sie auf + Stylesheet hinzufügen. Klicken Sie auf X neben einem angehängten Stylesheet, um es zu entfernen. 

Klicken Sie auf Speichern. 

  • Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das Zahnradsymbol settings, um die Einstellungen aufzurufen.
  • Scrollen Sie auf der RegisterkarteVorlagen zu CSS & Stylesheets. Um ein Stylesheet hinzuzufügen, klicken Sie auf + Stylesheet hinzufügen. Klicken Sie auf X neben einem angehängten Stylesheet, um es zu entfernen. 
  • Klicken Sie auf Speichern