Zum Hauptinhalt
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.

Layoutvorlagen strukturieren und anpassen

Zuletzt aktualisiert am: Juni 28, 2023

Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Ehemaliges Marketing Hub Basic

Lernen Sie, wie Sie Ihre bestehende Drag-and-Drop-Vorlage einrichten und anpassen und mit Modulen, Gruppen und Spalten als Bausteine Ihrer Vorlage arbeiten.

Vorlagen strukturieren

Mit dem Layout-Editor im Design-Manager können Sie Ihr Inhaltslayout schnell erstellen, ohne HTML schreiben zu müssen.

  • Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.
  • Klicken Sie im Finder auf eine Vorlage , um diese zu bearbeiten.

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

Um ein Modul zu einem Layout hinzuzufügen, klicken Sie oben im Layout-Inspektor auf „+ Hinzufügen“ Suchen Sie oder wählen Sie ein Modul aus, und ziehen Sie es an den Ort, an dem das Modul im Layout angezeigt werden soll. Wenn Sie Module über andere Module legen, werden entweder Spalten erstellt oder Module zu Gruppen zusammengefasst.

Spaltenbreiten ändern

Um die Breite einer Spalte zu ändern, bewegen Sie den Mauszeiger zwischen die Module und klicken und ziehen Sie horizontal.

Module gruppieren

Modulgruppen sind Moduleinheiten, die verschiedene Abschnitte einer Seite bilden.

Um zwei Module zu gruppieren, klicken Sie auf das erste Modul, halten Sie die Strg-Taste/Befehlstaste gedrückt und wählen Sie dann das zweite Modul aus. Wiederholen Sie diesen Schritt, wenn Sie mehr als zwei Module gruppieren. Klicken Sie als Nächstes auf das Gruppen-Symbol groupModule im Modul-Inspektor.

Bitte beachten Sie Folgendes: Modulgruppen dürfen keine Bereichstrenner kreuzen oder eine teilweise ausgewählte Gruppe von Modulen enthalten.

Module horizontal teilen

Die Aufteilung eines Moduls teilt das Modul in zwei Hälften, wodurch zwei Module entstehen. Um ein Modul aufzuteilen, klicken Sie auf das Modul und dann auf Symbol für Modul teilen splitModule im Modul-Inspektor. Alternativ können Sie auch mit der rechten Maustaste auf das Modul im Layout klicken und Modul teilen auswählen.

Module zentrieren

Mit horizontalen Abstandshaltern können Sie Module und Gruppen auf der Seite zentrieren oder auf beiden Seiten Leerraum hinzufügen. Um einen horizontalen Abstandhalter hinzuzufügen, klicken Sie oben im Layout-Inspektor auf „+ Hinzufügen“. Suchen Sie „Horizontaler Abstandhalter“ und ziehen Sie dies dann in die Vorlage.

Um die Größe eines horizontalen Abstandshalters zu ändern, ändern Sie die Breite der Spalte, die ihn von anderen Modulen trennt. Um ein Modul oder eine Gruppe zu zentrieren, fügen Sie auf jeder Seite horizontale Abstandshalter hinzu. 

add-horizontal-spacer

Flexible Spalte hinzufügen

Flexible Spalten wurden entwickelt, um das Content-Management auf Seitenebene für die Content-Ersteller einfacher zu machen. Wenn eine flexible Spalte zu einer HubSpot-Seitenvorlage hinzugefügt wird, erhalten Benutzer die Möglichkeit, Module im persönlichen Seiten-Editor hinzuzufügen, zu entfernen und zu wiederholen. Diese Funktion ermöglicht es Designern, weniger Vorlagen zu erstellen, während sie gleichzeitig den Marketingfachleuten die Flexibilität geben, jede Seite an ihre Bedürfnisse anzupassen.

Um eine flexible Spalte hinzuzufügen, klicken Sie oben im Layout-Inspektor auf „+ Hinzufügen“. Suchen Sie „Flexible Spalte“ und ziehen Sie dies dann in die Vorlage.

Bitte beachten:
  • Flexible Spalten können nur zu Seitenvorlagen hinzugefügt werden, nicht aber zu E-Mail- oder Blogvorlagen.
  • Module, die zu flexiblen Spalten hinzugefügt werden, können keine CSS-Klassen, kein Inline-Styling und keinen HTML-Umbruch haben, der mit ihnen verbunden ist. Der flexiblen Spalte selbst müssen Gestaltungsoptionen hinzugefügt werden.

 


Vorlagen anpassen

Wenn Sie das allgemeine Layout Ihrer Vorlage strukturiert haben, können Sie Module austauschen und andere benutzerdefinierte Änderungen vornehmen.

Moduloptionen bearbeiten

Sie können die Optionen eines Moduls bearbeiten, indem Sie auf das Modul im Layout-Editor klicken. Im Modul-Inspektor sehen Sie rechts die editierbaren Optionen des Moduls. Diese Optionen enthalten in der Regel Stile, Standardinhalte und Editor-Optionen und können je nach Art des Moduls variieren. Erfahren Sie mehr über die Bearbeitung von Modul-CSS und Standardinhalten und -einstellungen.

Optionen bearbeiten

Modul austauschen

Nachdem Sie ein Modul zu Ihrer Vorlage hinzugefügt haben, können Sie es gegen ein anderes Modul austauschen. Klicken Sie mit der rechten Maustaste auf das Modul im Layout-Editor und klicken Sie dann auf Modul austauschen. Wählen Sie im Dropdown-Menü das Modul aus, um das ursprüngliche Modul zu ersetzen.

In globales Modul umwandeln

Sie können ein Modul in Ihrer Vorlage in ein globales Modul umwandeln, das in mehreren Vorlagen verwendet werden kann. Dies ist nützlich, wenn Sie das Modul auf eine bestimmte Art und Weise gestaltet haben und/oder über Standardinhalte im Modul verfügen, die Sie in anderen Vorlagen wiederverwenden möchten.

  • Klicken Sie im Layout-Editor auf das Modul .
  • Klicken Sie im Modul-Inspektor auf das Dropdown-Menü „Mehr“ und wählen Sie die Option „In globales Modul umwandeln“.
  • Geben Sie im Dialogfeld den Namen des globalen Moduls ein und klicken Sie dann auf Erstellen.

Modul löschen

Um ein Modul zu löschen, klicken Sie im Layout-Editor auf das Modul , dann auf das Symbol Papierkorb delete im Modul-Inspektor. Alternativ können Sie mit der rechten Maustaste auf das Modul klicken und Modul löschen wählen.

Vorlage im Finder verwalten

Neben Ihren Moduloptionen gibt es mehrere Aktionen, die Sie für Ihre Vorlage durchführen können.

  • Klicken Sie oben rechts in der Vorlage auf das Ordner-Symbol folder.
  • Klicken Sie mit der rechten Maustaste auf den Namen der Vorlage. Im Dropdown-Menü können Sie die folgenden Optionen anpassen:
    • In Portale kopieren: Kopieren Sie die Vorlage in ein anderes Portal, in dem Sie ebenfalls ein Benutzer sind. Bei Marketplace gekaufte Vorlagen werden nicht in andere Portale kopiert.
    • Vorlage klonen: Dies erstellt ein genaues Duplikat Ihrer Vorlage und ist nützlich, wenn Sie eine Variante einer bestehenden Vorlage erstellen möchten.
    • In HTML klonen: Dies erzeugt eine separate HTML-Version Ihrer Vorlage. Dies ist hilfreich, wenn Sie mehr Kontrolle über Ihr Markup benötigen, oder wenn Sie mehr darüber erfahren möchten, wie Vorlagen kodiert werden.
    • Vorlagenquelle anzeigen: Zeigt den HTML-Quellcode der Vorlage an. Im Gegensatz zur Option „In HTML klonen“ erstellt diese keine separate HTML-Version Ihrer Vorlage.
    • Vorlage umbenennen: Damit können Sie den internen Namen Ihrer Vorlage bearbeiten.
    • Abhängige Elemente anzeigen: Zeigt alle Seiten, E-Mails oder Blogs an, die derzeit die Vorlage verwenden.
    • Bearbeitungsverlauf anzeigen: Zeigen Sie den Bearbeitungsverlauf Ihrer Vorlage an und wählen Sie, ob Sie Ihre Vorlage zu einer zuvor veröffentlichten Version zurücksetzen möchten.
    • E-Mail/Seite erstellen: Erstellen Sie eine E-Mail oder Landing-Page/Website-Seite direkt aus der Vorlage.
    • Vorlage löschen: Damit können Sie die Vorlage löschen. Nach dem Löschen bleibt eine Vorlage für 30 Tage verfügbar und wird danach dauerhaft gelöscht. Um die Vorlage wiederherzustellen, müssen Sie den Kundensupport kontaktieren
  • Auf diese Optionen kann auch über die obigen Dropdown-Menüs „Datei“ und „Aktionen“ zugegriffen werden.

War dieser Artikel hilfreich?
Dieses Formular wird nur verwendet, um Feedback zur Dokumentation zu sammeln. Erfahren Sie, wie Sie Hilfe bei Fragen zu HubSpot erhalten können.