Become a HubSpot power user — join us for HubSpot Training Day 2017.

Gewusst wie: So können Sie Vorlagen-Layouts strukturieren und anpassen

Zuletzt aktualisiert am: May 18, 2016

Anforderungen

Produkt: HubSpot Marketing
Abonnement: Basic, Pro, & Enterprise
Im vorherigen Tutorial in diesem Leitfaden haben Sie gelernt, wie Sie ein neues Vorlagen-Layout erstellen. In diesem Artikel zeigen wir Ihnen nun, wie Sie bereits erstellte Vorlagen ändern und bearbeiten können.

Strukturierung Ihrer Vorlage

Mit dem Vorlagendesigner im Design-Manager können Sie schnell Layouts für Ihre Inhalte erstellen, ohne dass Sie HTML-Code eingeben müssen. Bevor Sie Ihre Vorlage strukturieren können, müssen Sie zuerst die Vorlage für die Bearbeitung auswählen.
Choose teplate

Fügen Sie Module per Drag-and-Drop hinzu

Sie haben verschiedene Möglichkeiten, ein Modul zu einem Layout hinzuzufügen. Am schnellsten geht es, indem Sie auf die Schaltfläche Add Row (Zeile hinzufügen) klicken. Ziehen Sie dann das Modul einfach an die gewünschte Stelle in Ihrem Layout. Wenn Sie Module über andere Module legen, werden entweder Spalten erstellt oder Module zu Gruppen zusammengefasst.
Drag and drop

Änderung der Spaltenbreite

Um die Breite einer Spalte zu ändern, bewegen Sie einfach Ihren Mauszeiger zwischen zwei Module und ziehen Sie die Spalten horizontal nach links oder rechts (so wie in der folgenden Grafik dargestellt). 

HubSpot Help article screenshot

Gruppierung von Modulen

b

Erweiterte Informationen

Der Template Builder (Vorlagendesigner) arbeitet mit einem responsiven Raster aus 12 Spalten. Das Raster basiert auf einer CSS-Datei, die automatisch die Breite eines jeden Moduls für die unterschiedlichen Gerätegrößen berechnet. Wenn Sie die Breite einer Spalte durch Ziehen ändern, wird das HTML-Klassenattribut für dieses Modul angepasst und HubSpot übernimmt die Breite entsprechend. Diese Funktion spart Webdesignern Unmengen an Zeit, denn sie müssen sich nicht mehr mit der Festlegung der Breite einzelner Module herumschlagen, sondern nur noch eine Maximalbreite für den gesamten Container festlegen. Die Spalten werden auf Mobilgeräten automatisch übereinander dargestellt, ohne dass Ihr Webdesigner auch nur eine einzige Zeile Code schreiben muss. Nähere Informationen darüber, wo Sie CSS hinzufügen können, finden Sie weiter unten in diesem Leitfaden.

Aus technischer Sicht fügen Sie durch die Gruppierung zusätzliche Wrapping-Markups zu Ihrer Modulauswahl hinzu. Sie können diesem Markup auch IDs oder Klassen zuweisen, um den Bereich und seine Inhalte gezielt zu gestalten oder auszuwählen.

Weiterlesen

Modulgruppen sind Modulelemente, die verschiedene Abschnitte einer Seite bilden. Wählen Sie Group (Gruppieren) aus, um Module zu gruppieren. 

Klicken Sie dann auf die Module, die Sie gerne zu einer Gruppe zusammenfassen möchten. Nachdem Sie eine gültige Auswahl für die Gruppierung getroffen haben, klicken Sie auf Create Group (Gruppe erstellen).

Im unten stehenden Beispiel werden verschiedene Module zu einem „Titel“ für die Seite gruppiert. In einem späteren Abschnitt dieses Leitfadens zeigen wir Ihnen auch noch, wie Sie Gruppen auf „global“ setzen und übergreifend für verschiedene Vorlagen verwenden können.  

 

Group modules

Horizontal teilen

Das Modul Split Horizontally (Horizontal teilen) teilt das Modul in zwei Hälften, es werden also zwei Module erstellt.

Split Horizontally

Sie können ein Modul entweder über das Einstellungsmenü (Zahnradsymbol) teilen oder Sie fahren mit der Maus über das Modul und klicken auf Split (Teilen), so wie in der folgenden Grafik dargestellt.

Split

Fügen Sie unten ein Modul hinzu

Wenn Sie Add Module (Modul hinzufügen) auswählen, wird unter dem aktuellen Modul ein weiteres Modul hinzugefügt. Diese beiden Module werden daraufhin zu einer Gruppe zusammengefasst. Gruppen sind Modulelemente, die mit einem zusätzlichen Markup versehen und durch die Kategorisierung als ein Element entsprechend gestaltet werden können.

Add module below

Vorlage benutzerdefiniert anpassen

Nachdem Sie das allgemeine Layout Ihrer Vorlage strukturiert haben, können Sie Module austauschen oder andere benutzerdefinierte Änderungen vornehmen, damit sich die Vorlage leichter gestalten lässt.

HubSpot Help article screenshot

Bearbeitung von Optionen

Mit der Funktion Edit options (Optionen bearbeiten) können Sie die grundlegenden Konfigurationen eines Moduls ändern. Diese Einstellungen umfassen in der Regel die standardmäßig festgelegten Inhalte, die Beschriftung im Bearbeitungsfenster für Inhalte und andere Moduleinstellungen. Je nach Modulart können Sie mit dieser Funktion andere Optionen konfigurieren. Nähere Informationen zu Standardinhalten und Einstellungen finden Sie weiter unten in diesem Leitfaden.

Edit options

CSS bearbeiten

Mithilfe der Funktion Edit CSS (CSS bearbeiten) können Sie ganz einfach das HTML-Markup Ihrer Vorlage anpassen. Weitere Informationen über das Hinzufügen von Klassen, IDs, Inline-Stylings und Wrapping-Markups finden Sie weiter unten in diesem Leitfaden.

Edit CSS

Modul tauschen

Mit der Funktion Swap module (Modul tauschen) können Sie festlegen, welche Modulart Sie in diesem Abschnitt der Vorlage verwenden möchten. Weiter unten in diesem Leitfaden stellen wir Ihnen die unterschiedlichen Module detailliert vor.

Swap module

Modul global übernehmen

Mit der Funktion Make module global (Modul global übernehmen) können Sie ein Modul global für andere Vorlagen übernehmen. Weitere Informationen zur Verwendung von globalen Inhalten finden Sie weiter unten in diesem Leitfaden.

Make global module

Modul löschen

Mit Delete module (Modul löschen) können Sie das Modul löschen. Wenn Sie ein Modul löschen, wird ein Hinweis angezeigt, der Sie darüber informiert, für wie viele Seiten oder E-Mails diese Vorlage verwendet wird. Alle Inhalte in diesem Modul werden verworfen. Wählen Sie Discard All (Alle verwerfen) aus, um das Modul zu löschen und alle Inhalte in diesem Modul zu entfernen. Mit einem Klick auf See what you‘re discarding (Welche Inhalte werden verworfen) sehen Sie, welche Inhalte sich auf der Seite befinden.  

Sollten Sie versehentlich Inhalte verworfen haben, die Sie wieder herstellen möchten, ist das ebenfalls möglich. Verwenden Sie dafür die vorherige Version des Moduls, die Sie unter Actions > Revision History (Aktionen > Bearbeitungsverlauf) finden.

Delete module

Weitere Vorlagenaktionen

Neben den Moduloptionen gibt es einige wichtige Aktionen, die sich für Sie bei der Arbeit an Ihren Vorlagen als nützlich erweisen können.  Unter dem Menü Actions (Aktionen) stehen Ihnen die folgenden Optionen zur Verfügung:

  • Save (Speichern): Damit speichern Sie den Entwurf der Vorlage, an der Sie gerade arbeiten. Sie übernehmen aber keine Änderungen für bereits veröffentlichte Inhalte, die diese Vorlage verwenden.
  • Move or rename template (Vorlage verschieben oder umbenennen): Mit dieser Option können Sie eine Vorlage umbenennen oder sie in einen anderen Ordner verschieben.
  • Clone (Klonen): Damit duplizieren Sie Ihre Vorlage.  Diese Funktion spart viel Zeit, wenn Sie eine andere Variante einer bereits vorhandenen Vorlage erstellen möchten.
  • Clone to file (In Datei klonen): Mit dieser Option erstellen Sie eine separate HTML-Version Ihrer Vorlage. Solch eine Datei ist hilfreich, wenn Sie sich mehr Kontrolle über Ihr Markup wünschen, die über den Template Builder (Vorlagendesigner) hinaus geht. Außerdem erhalten Sie so Einblick in die Codes Ihrer Vorlagen. Aber denken Sie bitte daran, dass HTML-Vorlagen für Ihre internen Nutzer weniger Flexibilität bieten.
  • Create a page from template (Seite aus Vorlage erstellen): Mit dieser Option können Sie direkt im Design Manager (Design-Manager) eine Vorlage erstellen.
  • View revisions (Bearbeitungen anzeigen): Bei dieser Option sehen Sie den Bearbeitungsverlauf. Dort können Sie Ihre Vorlage wieder auf eine zuvor veröffentlichte Version zurücksetzen. Der Bearbeitungsverlauf für Vorlagen wird unabhängig von den Seitenbearbeitungen gespeichert und immer dann aktualisiert, wenn Sie eine Vorlage veröffentlichen. Mit der Auto-Save-Funktion werden keine Versionen erstellt.
  • Pages using template (Seiten, die Vorlagen verwenden): Hier sehen Sie eine Liste mit Seiten, auf denen die Vorlage verwendet wird.
  • Delete (Löschen): Damit löschen Sie die Vorlage. Im Moment gibt es keine Möglichkeit, gelöschte Vorlagen wiederherzustellen.
  • Make basic / Make responsive (email only) (Einfaches Design/responsives Design [Nur E-Mail]): Diese Option legt fest, ob Ihre E-Mail-Vorlagen ein einfaches Design verwenden (d. h. eine feste Breite, wie unter Content Settings > Email [Inhaltseinstellungen > E-Mail] festgelegt) oder ob sie ein responsives Design (d. h. flexibel an die Größe des Gerätebildschirms angepasst) verwenden. Diese Option steht nur für E-Mail-Vorlagen zur Verfügung.
Actions

Vorheriger Artikel:

Weiter zum nächsten Artikel: