Vorlagen mit dem Layout-Editor strukturieren und anpassen

Verwenden Sie den Layout-Editor im Design-Manager, um Drag-&-Drop-Vorlagen zu strukturieren und anzupassen. Durch die Anordnung von Modulen, Gruppen und Spalten können Sie steuern, wie Inhalte auf den verschiedenen Seiten strukturiert werden. Dadurch erhalten Content-Autoren auch mehr Kontrolle im Seiten-Editor.

Bevor Sie loslegen

Bevor Sie Seiten mit dem Layout-Editor im Design-Manager strukturieren und anpassen, sollten Sie die Anforderungen und Überlegungen überprüfen. 

Einschränkungen und Wissenswertes

• Änderungen an einer Vorlage gelten für alle Inhalte, die diese Vorlage verwenden. 
• Einige Funktionen, z. B. flexible Spalten, sind nur für Seiten-Vorlagen verfügbar.

Eine Vorlage strukturieren

Verwenden Sie den Layout-Editor, um zu strukturieren, wie Inhalte innerhalb einer Vorlage organisiert sind.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf eine Vorlage , um sie im Layout-Editor zu öffnen. 

Module hinzufügen und anordnen

Module sind die Bausteine eines Vorlagenlayouts. Durch Ziehen eines Moduls neben ein anderes Modul werden Spalten erstellt. Wenn Sie ein Modul auf ein anderes ziehen, werden die Module gruppiert.

1. Klicken Sie im Inspektor auf + Hinzufügen.
2. Geben Sie Text ein, um nach einem Modul zu suchen, und klicken Sie dann auf das Modul. 
3. Ziehen Sie das Modul in den Layout-Editor.

Spaltenbreiten ändern

So ändern Sie die Breite einer Spalte:

1. Bewegen Sie im Layout-Editor den Mauszeiger zwischen zwei Modulen.
2. Klicken und ziehen Sie horizontal, um die Spaltenbreite anzupassen. 

Module gruppieren

Gruppieren Sie Module, um Abschnitte einer Vorlage zu organisieren.

So gruppieren Sie Module:

1. Wählen Sie im Layout-Editor ein Modul aus.
2. Halten Sie die Strg-Taste (Windows) bzw. Befehlstaste (Mac) gedrückt und wählen Sie zusätzliche Module aus. 
3. Klicken Sie im Inspektor auf das groupModule Symbol Module gruppieren.

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.

So teilen Sie ein Modul auf:

1. Klicken Sie im Layout-Editor auf ein Modul.

2. Klicken Sie im Inspektor auf das splitModule Symbol Modul aufteilen . 

Module zentrieren

Verwenden Sie horizontale Abstandshalter, um Module und Gruppen auf der Seite zu zentrieren, oder fügen Sie auf beiden Seiten Leerräume hinzu. 

So fügen Sie einen horizontalen Abstandshalter hinzu:

1. Klicken Sie im Inspektor auf + Hinzufügen.

2. Geben Sie horizontalen Abstandshalter in das Suchfeld ein. Ziehen Sie dann das Modul " Horizontaler Abstandshalter" an die entsprechende Position auf der Vorlage im Layout-Editor.

3. Um die Größe eines horizontalen Abstandshalters zu ändern, ändern Sie die Breite der Spalte, die ihn von anderen Modulen trennt.

4. Um ein Modul oder eine Gruppe zu zentrieren, fügen Sie auf jeder SeiteH-orizontale Abstandshaltermodule hinzu.

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-Seiten-Vorlage hinzugefügt wird, erhalten Benutzer die Möglichkeit, Module im individuellen Seiten-Editor hinzuzufügen, zu entfernen und neu anzuordnen. 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.

1. Klicken Sie im Inspektor auf + Hinzufügen.

2. Geben Sie im Suchfeld eine flexible Spalte ein. Ziehen Sie dann das Modul Flexible Spalte an die gewünschte Position auf der Vorlage im Layout-Editor.

Passen Sie Ihre Vorlage an

Nachdem Sie das Layout Ihrer Vorlage strukturiert haben, können Sie Module austauschen und andere Vorlagen anpassen.

Moduloptionen bearbeiten

Die Bearbeitungsoptionen eines Moduls umfassen Formatierung und Standardinhalte und können sich je nach Modultyp unterscheiden. Erfahren Sie mehr über das Bearbeiten von Modul-CSS und Standardinhalten und -einstellungen.

1. Klicken Sie im Layout-Editor auf ein Modul. 
2. Passen Sie im Inspektor die Optionen des Moduls an. 

Modul austauschen

Nachdem Sie ein Modul zu Ihrer Vorlage hinzugefügt haben, können Sie es gegen ein anderes Modul austauschen.

1. Klicken Sie im Layout-Editor mit der rechten Maustaste auf das Modul und wählen Sie dann Modul tauschen aus.

2. Wählen Sie im Pop-up das Modul aus, durch das das ursprüngliche Modul ersetzt werden soll.

In globales Modul umwandeln

Konvertieren Sie ein Modul in Ihrer Vorlage in ein globales Modul, das in mehreren Vorlagen verwendet werden kann. Verwenden Sie diese Option, wenn Sie das Modul auf eine bestimmte Weise gestaltet haben oder Standardinhalte im Modul haben, die Sie in anderen Vorlagen wiederverwenden möchten.

1. Klicken Sie im Layout-Editor auf ein Modul.
2. Klicken Sie im Inspektor auf das Dropdown-Menü Mehr und wählen Sie In globales Modul konvertieren aus.
3. Geben Sie im Dialogfeld den Namen des globalen Moduls ein und klicken Sie dann auf Erstellen.

Modul löschen

1. Klicken Sie im Layout-Editor auf ein Modul.

2. Klicken Sie im Inspektor auf das delete Papierkorb-Symbol. 

Vorlage im Finder verwalten

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

1. Klicken Sie im Finder auf den Namen einer Vorlage.
2. Klicken Sie auf das Dropdown-Menü Aktionen und wählen Sie eine Option aus: 
   • In anderen Account kopieren: Kopieren Sie die Vorlage in einen anderen Account, in dem Sie ebenfalls Benutzer sind. Vorlagen, die im Marketplace gekauft wurden, können nicht in andere Portale kopiert werden.
   • Vorlage klonen: Dies erstellt ein genaues Duplikat Ihrer Vorlage und ist nützlich, wenn Sie eine Variante einer bestehenden Vorlage erstellen möchten.
   • Zu HTMLklonen: Hiermit wird eine separate HTML-Version Ihrer Drag-&-Drop-Vorlage erstellt. 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 "Zu HTML klonen" wird hierdurch keine separate HTML-Version Ihrer Vorlage erstellt.
   • Vorlage umbenennen: Bearbeiten Sie den internen Namen Ihrer Vorlage.
   • 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 Seite direkt aus der Vorlage.
   • Vorlage löschen: Mit dieser Option wird die Vorlage gelöscht. Nachdem die Vorlage gelöscht wurde, bleibt sie 30 Tage lang verfügbar, danach wird sie endgültig gelöscht. Um die Vorlage wiederherzustellen, müssen Sie den Kundensupport kontaktieren.