Gewusst wie: So verwenden Sie Standardinhalte und erweiterte Optionen für die Optimierung Ihrer Vorlagen zur Inhaltserstellung

Zuletzt aktualisiert am: May 18, 2016

Anforderungen

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

Ein wesentlicher Vorteil des HubSpot COS ist die Möglichkeit, Ihre Vorlagen zu optimieren, damit sich Ihre Marketer ausschließlich auf die Inhaltserstellung konzentrieren können. Seitenersteller haben zwar noch immer die Möglichkeit, im Editor gestalterisch kreativ zu sein, doch je mehr Zeit am Anfang auf die Einrichtung der Inhaltselemente und die Gestaltung einer Vorlage verwendet wird, desto mehr Zeit sparen Ihre Marketer im Nachhinein.  

In diesem Anschnitt verwenden Sie Standardinhalte und CSS-Optionen, um Ihre Vorlagen für die Inhaltserstellung zu optimieren.

Standardinhalte zum Modul hinzufügen

HubSpot Academy

Bewährte Methoden

Wenn Sie im Design Manager (Design-Manager) eine Vorlage erstellen, stellen Sie sich vor, Sie erstellen eine „Modellseite“ oder „Modell-E-Mail“, auf der alle zukünftigen Seiten oder E-Mails aufbauen werden.

In den vorherigen Kapiteln dieses Handbuches haben Sie erfahren, wie man Vorlagen strukturiert und welche Module im Design Manager (Design-Manager) verfügbar sind. Nachdem Sie mit den richtigen Modulen eine Vorlage erstellt haben, sollten Sie diese mit Standardinhalten füllen.

Weiterlesen

Durch Hinzufügen von Standardinhalten können Sie anstelle eigener Texte und Komponenten die Stocktexte, Platzhalter, Bilder usw. des Moduls verwenden. Das Einfügen von Standardinhalten erleichtert es Ihnen, für dieses spezifische Modul alle Formatierungen vorzunehmen und Optionen einzurichten.

Wenn Sie dann bereit sind, aus der Vorlage eine Seite oder E-Mail zu erstellen, können Sie die Standardinhalte der Vorlage ganz einfach austauschen und ändern.   

Um einem Modul Standardinhalte hinzuzufügen, klicken Sie auf das Zahnrad-Symbol in dem Modul, das Sie anpassen möchten, und dann auf Edit Options (Optionen bearbeiten).

Edit options

Fügen Sie ein internes Label (Label) hinzu, um Ihre Vorlagen besser zu organisieren.  Das Label hat keinen Einfluss auf den HTML-Code Ihrer Vorlage, doch es hilft Ihnen, nicht den Überblick zu verlieren, falls Sie mit vielen verschiedenen Vorlagen arbeiten. In diesem Beispiel wurden einer Modulgruppe und einem Rich-Text-Modul die Labels „sidebar“ (Seitenleiste) und „bio“ (Bio) zugewiesen.  

Label

Im Abschnitt Modules defaults (Modul-Standardwerte) im Pop-up-Fenster Edit options (Optionen bearbeiten) werden alle Standardoptionen angezeigt, die für das jeweilige Modul verfügbar sind. Mit einem Formularmodul können Sie zum Beispiel entscheiden, welches Formular in einer Vorlage standardmäßig angezeigt werden soll, während Sie mit einem Rich-Text-Modul dem jeweiligen Modul Ihren eigenen Text hinzufügen können.  

Default content

Nachdem Sie Ihre Standardinhalte hinzugefügt oder Ihre Standardoptionen eingerichtet haben, können Sie sich ansehen, wie Ihre Vorlage mit Standardinhalten auf Ihrer Website aussehen würde. Klicken Sie dazu auf den Button Preview (Vorschau). Wenn Sie im Design Manager (Design-Manager) mit Standardinhalten arbeiten, brauchen Sie die App nicht zu verlassen, um sich eine Vorschau Ihrer Seiten anzusehen.

Wenn Sie bereit sind, diese Änderungen zu veröffentlichen, klicken Sie auf Publish Changes (Änderungen veröffentlichen), um die Vorlage zu aktualisieren.

Module sperren

Gelegentlich gibt es in einer Vorlage Bereiche, die einer besonderen erweiterten Anpassung oder zusätzlicher unbearbeiteter HTML-Codes bedürfen, auf die Ihre Inhaltsersteller keinen Zugang haben sollen. Zum Beispiel wenn Sie eine Landing-Page-Vorlage mit einer Bildergalerie verwenden, die benutzerdefinierten HTML-Code enthält, und Sie nicht möchten, dass Ihre internen Benutzer über den Inhalts-Editor auf diesen Code Zugriff haben. Wenn Sie verhindern möchten, dass Ihre Inhaltsersteller im Inhalts-Editor ein bestimmtes Modul bearbeiten, können Sie das Modul sperren, indem Sie auf das Zahnradsymbol > Lock Module (Modul sperren) klicken.  Ist das Modul gesperrt, wird stattdessen die Option Unlock Module (Modul entsperren) angezeigt.

In diesem Beispiel wird zum Modul Custom HTML (Benutzerdefiniertes HTML) ein Einbettungscode für einen Twitter-Feed hinzugefügt. Da für die Inhaltsersteller keine Notwendigkeit besteht, diesen Twitter-Feed zu ändern, ist das Modul gesperrt.

Lock module

Ist ein Modul gesperrt, wird ein Schloss-Symbol angezeigt. Bitte beachten Sie außerdem, dass alle Module einer Blog-Vorlage automatisch gesperrt sind. Um die betreffenden Abschnitte Ihrer Vorlage bearbeitbar zu machen, können Sie sie auf der Beitragsebene entsperren. Denken Sie daran, dass, falls der Inhalt des Moduls auf der Seiten- oder Beitragsebene überschrieben wird, Änderungen der Standardinhalte jenes Moduls keinen Einfluss auf den neuen Inhalt der jeweils geänderten Seiten haben.

Lock symbol

CSS-Optionen der Vorlage benutzerdefiniert anpassen

Nachdem Sie Ihre Vorlage strukturiert und Stockinhalte hinzugefügt haben, können Sie sich nun mit der ästhetischen Präsentation Ihrer Website befassen. In einem späteren Kapitel des Handbuches erfahren Sie, wie Sie mithilfe von CSS-Dateien den Look Ihrer Website gestalten können. Je nach Designkomplexität Ihrer Website sollten Sie unter Umständen jedoch zunächst Ihre Vorlage etwas mehr individuell anpassen, ehe Sie mit dem Schreiben Ihrer CSS-Datei beginnen.

Wie bereits erwähnt, fügen sich die Struktur und der Inhalt einer HubSpot-Vorlage zu einer HTML-Website zusammen. Obwohl Sie während der Vorlagenerstellung mit dem Template Builder (Vorlagendesigner) keinen vollen Zugriff auf das HTML-Markup haben, können Sie über die Funktion Edit CSS  (CSS bearbeiten) Klasse, StilID-Eigenschaften sowie zusätzliches Wrapping-Markup zu Ihren Modulen hinzufügen, damit Sie besser unterscheiden können, welche Abschnitte gestaltet werden sollen.

Wählen Sie einen Abschnitt aus, den Sie personalisieren möchten. Klicken Sie auf das Zahnrad und dann auf Edit CSS (CSS bearbeiten).

Edit CSS

Die verfügbaren Optionen variieren, je nachdem, ob Sie ein E-Mail-Vorlage-Modul, ein Seitenmodul oder eine Modulgruppe personalisieren.

Benutzerdefinierte CSS-Klasse

Mit der Eigenschaft HTML class attribute (HTML-Klasse) können Sie in Ihren Vorlagen Module festlegen, damit diese mittels CSS gestaltet werden. Obwohl Ihre Vorlage bereits über zahlreiche Standardklassen verfügt, geben benutzerdefinierte Klassen Designern mehr Kontrolle über das Aussehen einer Vorlage und bewahren gleichzeitig die Flexibilität des Template Builder (Vorlagendesigners).  

In diesem Beispiel wird dem Rich-Text-Modul die Klasse „bio“ hinzugefügt. Dies fügt dem Container-Div-Tag (einem HTML-Tag, der einen Bereich oder einen Abschnitt einer Seite angibt) des Moduls die HTML-Eigenschaft class="bio" hinzu. Indem Sie dem Modul so im Prinzip einen Namen geben, können Sie nun in dieser benutzerdefinierten Klasse in Ihrer CSS-Datei gezielt nach diesem Klassen- bzw. Zielelement suchen. Diese Option wird nicht für E-Mail-Vorlagen empfohlen, da manche E-Mail-Clienten keine Stil-Tags unterstützen.  

Custom class

In Ihrer primären oder benutzerdefinierten CSS-Datei können Sie gezielt den Container-Div für Stil auswählen, indem Sie Ihre benutzerdefinierte Klasse auswählen und verschiedene CSS-Eigenschaften anwenden. Dieses Handbuch stellt zwar kein Lehrbuch für CSS dar, dennoch geben wir Ihnen einige einfache Beispiele für das Targeting von benutzerdefinierten Klassen mit CSS. Um zum Beispiel den Hintergrund des Moduls mit benutzerdefinierter Klasse „bio“ farbig zu gestalten, könnten Sie ein CSS wie im nachstehenden Beispiel schreiben:

.bio{
background: #CCCCCC;
}
Sie können in Ihrem Modul nicht nur den Container-Div bearbeiten, sondern auch spezifische Elemente. In diesem Fall können Sie verschachtelte oder weiterentwickelte Selektoren verwenden. Wenn es zum Beispiel um den gesamten Absatztext innerhalb des Bio-Moduls geht, könnten Sie einen verschachtelten Selektor wie im nachstehenden Beispiel schreiben:

.bio p{
color: #000000;
}

Benutzerdefinierte Inline-Stile

Inline-CSS ist ein Gestaltungscode, der innerhalb Ihrer HTML-Tags geschrieben wird. Durch Hinzufügen von CSS-Eigenschaften und -Werten in dieses Feld wird Ihr Code auf den Container-Div des Moduls angewendet.

In diesem Beispiel werden „margin“ und „color“ verwendet, um die Abstände und die Farbe des Moduls anzupassen. Dieser Eintrag fügt die HTML-Eigenschaft style="margin-top:30px; color: #00349e;" zum Container-Div des Moduls hinzu.

Während diese Option für schnelle Korrekturen einer bestimmten Seitenvorlage praktisch sein kann, eignet sie sich weniger gut als die zuvor beschriebene Klassenfunktion, da Sie den Code innerhalb einzelner Module ändern müssen anstatt in einem globalen Stylesheet.

Inline styling

E-Mail-Clienten sind in ihrer HTML- und CSS-Darstellung deutlich eingeschränkter als moderne Webbrowser. Daher ist Inline-CSS das beste Mittel, Ihre E-Mails auf eine Weise zu gestalten, die von allen Clienten unterstützt wird. E-Mail-Module verfügen über zusätzliche benutzerfreundliche Optionen zum Hinzufügen von Inline-CSS, wie unten abgebildet.  

Email CSS

Benutzerdefiniertes Wrapping-HTML

Obwohl der „Drag-and-Drop“-Editor des Template Builder (Vorlagendesigners) Designern keinen vollständigen Zugriff auf das HTML-Markup einer Seite gewährt, können Sie zusätzliches Wrapping-HTML um bestimmte Module herum hinzufügen.  Diese Option dient fortgeschrittenen Benutzern und Designern, die mehr Kontrolle über den HTML-Code einer Vorlage benötigen, aber dennoch die Flexibilität des Template Builder (Vorlagendesigners) gegenüber einer fest codierten HTML-Vorlage bewahren wollen.

Um diese Funktion zu implementieren, schreiben Sie Ihren HTML-Markup und fügen Sie dann den html HubL token (HTML-HubL-Token) überall dort ein, wo der Modulcode dargestellt werden soll. In diesem Beispiel wird ein HTML5-Aside-Tag zum Umschließen des Moduls verwendet.

Wrapping HTML

Benutzerdefinierte CSS-ID

Die Eigenschaft HTML ID ist für alle Modulgruppen als Option verfügbar. Ähnlich wie Klassen ermöglichen Ihnen IDs, Bereiche Ihrer Vorlage zu benennen, auf die Ihr CSS abzielt.  Doch im Gegensatz zu Klassen sollten IDs einmalig sein (nur einmal pro Vorlage); und sie sind in Bezug auf die CSS-Spezifizität übergeordnet.  

Im nachstehenden Beispiel bekommt eine Modulgruppe auf einer Seite die ID „sidebar“ (Seitenliste).  Dieser Eintrag aktualisiert den Container-Div-Tag der Gruppe auf die HTML-Eigenschaft ID="sidebar". Indem Sie der Modulgruppe so im Prinzip einen Namen geben, können Sie nun in dieser benutzerdefinierten Klasse in Ihrer CSS-Datei gezielt nach diesem Klassen- oder Zielelement suchen.

Custom ID

Um die gesamte Gruppe mit einer benutzerdefinierten ID zu versehen und einen Rahmen hinzuzufügen, könnten Sie ein CSS wie im nachstehenden Beispiel schreiben:

Sie sollten das CSS Ihrer primären CSS-Datei oder zusätzlichen benutzerdefinierten CSS-Dateien hinzufügen.

#sidebar{
border: 1px solid red;
}

Body-CSS bearbeiten

Nun sind Sie in der Lage, Klasseneigenschaften hinzuzufügen, dem Body-HTML-Tag ein Inline-CSS und dem Kopfzeilen-Tag der Vorlage zusätzliche CSS-Dateien, Skripts und anderen Code hinzuzufügen. Um zu diesen Optionen zu gelangen, klicken Sie auf das Menü Edit  (Bearbeiten) am oberen Rand des Design Manager (Design-Manager).

Body CSS

Vorheriger Artikel:

Weiter zum nächsten Artikel: