Gewusst wie: So können Sie CSS-Dateien erstellen, bearbeiten und anfügen, um Ihre Website zu gestalten

Zuletzt aktualisiert am: May 18, 2016

Anforderungen

Produkt: HubSpot Marketing
Abonnement: Basic, Pro, & Enterprise

Mit dem Design-Manager macht HubSpot Designern die Erstellung und Pflege von Stylesheets leicht. CSS bzw. Cascading Style Sheets sind kodierte Dateien, die die Darstellung für ausgewählte Elemente auf Ihrer Seite steuern. Sie können sich die Vorlagen, die Sie erstellen, und die HTML-Codes darin wie ein Knochengerüst für Ihre Website vorstellen und das CSS wie die Haut.

In diesem Artikel wird schrittweise erläutert, wie Sie eine CSS-Datei in HubSpot erstellen, veröffentlichen und anfügen. Wenn Sie nicht gern mit CSS-Dateien arbeiten oder lediglich einige einfache Designänderungen auf einer bestimmten Seite vornehmen möchten, lesen Sie diesen Artikel mit einer Anleitung zur Verwendung der Registerkarte Style (Stil).

 

Navigieren Sie zum Design Manager (Design-Manager).

Wenn Sie eine neue CSS-Datei erstellen oder eine vorhandene CSS-Datei bearbeiten möchten, navigieren Sie zum Design-Manager: Content > Design Manager (Inhalte > Design-Manager).

Navigate to Design Manager
Wenn Sie vom technischen Kundendienst von HubSpot zu HubSpot migriert wurden, wurden für Sie bereits einige standardmäßige CSS-Dateien erstellt. Bei Bedarf können Sie Ihren Designer bitten, diese Dateien zu ändern, um die Darstellung Ihrer Website anzupassen. Die Namen und Erläuterungen der vom technischen Kundendienst hinzugefügten Dateien finden Sie hier. Nachdem Sie die Datei gefunden haben, können Sie zu Schritt 3 weitergehen.

Neue kodierte Datei erstellen

Klicken Sie auf den Ordner Coded Files(Kodierte Dateien), und klicken Sie dann auf die blaue Schaltfläche New Coded File (Neue kodierte Datei).

New coded file

Klicken Sie auf die Option Code Editor (Code-Editor) und anschließend auf die Option Page (Seite). Klicken Sie als Nächstes auf die blaue Schaltfläche Create (Erstellen).

Datei benennen und speichern

Wählen Sie einen Ordner aus, in dem das neue CSS-Stylesheet erstellt werden soll. Sie können auch einen neuen Ordner erstellen. Wählen Sie dazu den übergeordneten Ordner und klicken Sie auf New Folder (Neuer Ordner). Benennen Sie den neuen Ordner. Als Nächstes müssen Sie die CSS-Datei benennen. Der Dateiname muss die Erweiterung .css haben. Klicken Sie abschließend auf Save (Speichern), um Ihre neue CSS-Datei zu erstellen. 

Name and save file

CSS bearbeiten

Nachdem Sie eine CSS-Datei erstellt oder eine vorhandene CSS-Datei geöffnet haben, können Sie diese im Code-Editor bearbeiten. Der Code-Editor von HubSpot unterstützt neben standardmäßigen CSS-Dateien auch HubL-Variablen und -Makros, die Ihnen die Pflege Ihres CSS-Stylesheets erleichtern. 

Eine Liste der standardmäßigen CSS-Selektoren für HubSpot-Vorlagen finden Sie unter Boilerplate CSS (CSS-Vorlagen). 

Edit CSS

Datei veröffentlichen

Klicken Sie auf Publish Changes (Änderungen veröffentlichen), um die CSS-Datei zu kompilieren und zu minimieren. 

Publish changes

An Vorlage anfügen

Um Stylesheets an ein Vorlagen-Layout anzufügen, öffnen Sie die Vorlage und klicken Sie auf Actions > Edit Head (Aktionen > Kopfbereich bearbeiten). Öffnen Sie das Stylesheet und klicken Sie auf +Add Stylesheets (+Stylesheets hinzufügen). Wählen Sie das Stylesheet aus, klicken Sie auf Add (Hinzufügen), Save (Speichern) und Publish Changes (Änderungen veröffentlichen).

HubSpot Help article screenshot
Sie können CSS-Dateien zwar auch auf der Domain- oder Seitenebene anfügen, aber es empfiehlt sich, diese immer auf der Vorlagenebene anzufügen. Unter Umständen möchten Sie Domain-Stylesheets deaktivieren, um das Risiko widersprüchlicher Codes möglichst auszuschließen. Weitere Informationen dazu, wo CSS-Dateien angefügt werden können, erhalten Sie in diesem Artikel.

Primäre CSS-Datei

HubSpot Academy

Bewährte Methoden

Welche Codes letztendlich in Ihrer primären CSS-Datei enthalten sind, hängt von der Komplexität Ihres Websitedesigns ab. Wir haben hier einige Empfehlungen für Sie zusammengestellt:
  • Responsives CSS: Sie können den required_base.css-Code von HubSpot einschließen, um Ihre Vorlage responsiv zu machen.
  • Standardisiertes CSS: Alle Codes, die Sie zu allen Ihren Seiten hinzufügen möchten, damit Ihre Seiten in den Browsern einheitlich wiedergegeben werden, können zur primären CSS-Datei hinzugefügt werden.  
  • Max. Containerbreite: Das COS von HubSpot ist automatisch responsiv. Sie müssen jedoch die maximale Breite der Inhaltsbereiche auf Ihren Seiten angeben.  Weitere Informationen zur Anwendung einer maximalen Breite auf Ihre Container finden Sie in diesem Artikel.
  • Fließender Mediencode: Machen Sie Bilder und Videos responsiv. Das spezielle CSS, mit dem Sie Bilder responsiv machen können, finden Sie hier.
  • Responsiver Tabellencode: Tabellen können die Responsivität unterbrechen. Daher können Sie alle Codes zur Gestaltung der Stile von Tabellendaten zur primären CSS-Datei hinzufügen.
  • Gestaltung der Stile von anderen Standardmodulen: Die Gestaltung der Stile von Standardmodulen wird im letzten Abschnitt dieses Benutzerhandbuchs erläutert.  Beispielsweise sollten Sie Stile für das Slider (Schieberegler)-Modul zum primären CSS hinzufügen, um Darstellung und Verhalten des Moduls in allen Vorlagen einheitlich zu gestalten.
Weiterlesen

Eine primäre CSS-Datei ist eine CSS-Datei, die automatisch in alle Ihre Vorlagen eingeschlossen wird (sofern sie nicht deaktiviert wurde). Eine primäre CSS-Datei spart Ihren Designern Zeit, insbesondere wenn Ihr Unternehmen vorhat, mehrere Designs zur Verwendung in Ihren diversen Werkzeugen in HubSpot zu erstellen.

Wenn Sie am Ende mehrere Versionen von der Darstellung einer Website erstellen oder Kampagnen mit unterschiedlichem Branding benötigen, müssen Sie unter Umständen recht viel von dem Basiscode immer wieder neu schreiben. In diesem Fall können Sie alle Ihre globalen Codes in einer primären CSS-Datei unterbringen. Für diverse kampagnenspezifische ästhetische Entscheidungen können dann zusätzliche Stylesheets geschrieben werden.

Vorheriger Artikel:

Weiter zum nächsten Artikel: