Erste Schritte mit Drag-&-Drop-Bereichen
Marketing Hub
- Professional or Enterprise
CMS Hub
- Professional or Enterprise
Mit Drag-&-Drop-Bereichen können Entwickler Seitenabschnitte erstellen, die Layout-, Stil- und Inhaltsänderungen direkt in den Content-Editoren unterstützen. Dies ermöglicht es Entwicklern, einige Vorlagen mit globaler Struktur zu erstellen, die Content-Autoren bei der Erstellung einer Vielzahl von Seiten mit verschiedenen Zwecken und Layouts unterstützen, ohne dass sie jemals mit Code arbeiten müssen oder neue Vorlagen für kleine Layoutänderungen benötigen.

Entwickler können leere Ablagezonen für Drag-&-Drop-Bereiche festlegen, in denen Content-Autoren ihren eigenen Seiteninhalt und ihr eigenes Layout erstellen. Alternativ können Entwickler Drag-&-Drop-Bereiche mit verschiedenen Modulen, Layouts, Stilen und Inhalten vorab füllen, die Content-Autoren als Ausgangspunkt für ihre Arbeit dienen.
In diesem Tutorial lernen Sie, wie Sie einen einfachen Drag-&-Drop-Bereich einrichten. Weitere Ressourcen für Entwickler zu Drag-&-Drop-Bereichen finden Sie in der Boilerplate für Best Practices zur Implementierung sowie in der Referenzdokumentation für HubL-Tags für Drag-&-Drop-Bereiche.
Bitte beachten: Ein Content-Autor kann die Vorlage einer Seite gegen eine andere Vorlage desselben Typs austauschen, je nachdem, ob sie dnd_area-Tags enthält.
- Mit dem visuellen Layout-Editor erstellte Drag-&-Drop-Vorlagen können gegen andere Drag-&-Drop-Vorlagen oder Code-Vorlagen mit oder ohne dnd_area-Tags ausgetauscht werden.
- Code-Vorlagen mit dnd_area-Tags können nur gegen andere Code-Vorlagen mit dnd_area-Tags ausgetauscht werden.
- Code-Vorlagen ohne dnd_area--Tags können nur gegen andere Code-Vorlagen ohne dnd_area-Tags ausgetauscht werden.
Erstellen Sie eine neue HTML-Vorlage, die den HubL- und HTML-Code enthält, aus dem Ihr Drag-&-Drop-Bereich dann besteht.
Drag-&-Drop-Bereiche basieren auf einem 12-spaltigen, responsiven Raster. Drag-&-Drop-Tags rendern Markup mit Klassennamen, die Spalten und Zeilen bezeichnen. Sie sind für das Hinzufügen eines Stylesheets verantwortlich, das auf diese Klassennamen abzielt. Ein Beispiel für Layoutstile, die Sie implementieren können, finden Sie hier: CMS-Theme-Boilerplate. Ihr Stylesheet kann mithilfe von {{ require_css() }}
zur Vorlage hinzugefügt werden.
Ein dnd_area ist der Container, der einen Teil der Webseite in Bezug auf Struktur, Design und Inhalt bearbeitbar macht. Der Text eines dnd_area-Tags liefert den Standardinhalt für den Drag-&-Drop-Bereich.
Dieses Tag allein erzeugt eine Ablagezone, in die Content-Autoren im Content-Editor Module ziehen können.
Ein dnd_section ist eine Zeile der obersten Ebene und kann nur ein direktes untergeordnetes Element eines dnd_area sein. Abschnitte unterstützen eine Reihe von Parametern, die die Standardwerte für die stilistischen Steuerelemente bestimmen, die Content-Autoren für Abschnitte in den Content-Editoren haben.
Legen Sie also ein Hintergrundbild fest, und legen Sie eine zentrierte vertikale Ausrichtung und eine maximale Breite von 1.000 Pixel für untergeordnete Inhalte fest. Eine vollständige Liste der unterstützten Parameter für die Drag-&-Drop-HubL-Tags finden Sie in der Referenzdokumentation für HubL-Tags für Drag-&-Drop-Bereiche.
Um den Abschnitt mit Inhalt zu füllen, können wir das dnd_module-Tag verwenden, um ein Modul einzubinden, indem wir auf seinen Pfad verweisen. In diesem Beispiel verweisen wir auf ein standardmäßiges HubSpot-Modul, aber Sie können zusätzlich von Ihnen erstellte Module einbeziehen, indem Sie deren Pfad im Dateiverzeichnisbaum Ihrer Design-Tools angeben.
Um einen Standardwert für unser dnd_module festzulegen, können wir das module_attribute-Tag verwenden.
Um mehr als ein Modul einzubinden, können wir mehrere dnd_module-Tags verwenden. Durch Festlegen der offset- und width-Parameter, die auf einem 12-Spalten-Raster beruhen, können wir ein Bildmodul neben unserem Rich-Text-Modul platzieren.
Jetzt haben wir auch ein bearbeitbares Bildmodul sowie einen Ziehgriff, mit dem Content-Autoren die Breite und den Versatz der Module ändern können. Wir können auch sehen, wie durch Festlegen einer vertical_alignment im dnd_section unser Inhalt vertikal zentriert wird.

Um unseren Drag-&-Drop-Bereich komplexer zu gestalten, können wir Zeilen und Spalten mithilfe der dnd_row- und dnd_column-Tags einbinden. Zeilen und Spalten verhalten sich ähnlich wie Abschnitte im Content-Editor, in dem Content-Autoren sie verschieben, klonen, löschen und formatieren können.
Die verschiedenen Komponenten von Drag-&-Drop-Bereichen, Abschnitten, Spalten, Zeilen und Modulen haben alle Klassen, die mit CSS formatiert werden können. Die bearbeitbaren Stile und Optionen für diese Komponenten können mit CSS und nicht mit HubL festgelegt werden. Zum Beispiel kann die Standardauffüllung in dnd_sections mit CSS festgelegt werden:
Die generischen CSS-Selektoren für die Komponenten von Drag-&-Drop-Bereichen sind .dnd-section, .dnd-column, .dnd-row und .dnd-module. Abgesehen von diesen Klassen mit dnd-Präfix basieren die tatsächlichen Rasterklassennamen im Markup auf Bootstrap-2-Namen. Das bedeutet nicht, dass Sie Bootstrap 2 mit Drag-&-Drop-Bereichen verwenden müssen. Wenn Sie einen dnd_area
zu Ihrer Seite hinzufügen, sind Sie für die Angabe der Stile verantwortlich, mit denen das Raster funktioniert. Ein Beispiel für Layoutstile, die Sie implementieren können, finden Sie hier: CMS-Theme-Boilerplate. Ihr Stylesheet kann mithilfe von {{ require_css() }}
zur Vorlage hinzugefügt werden.
Weitere Ressourcen für Entwickler zu Drag-&-Drop-Bereichen finden Sie in der Boilerplate für Best Practices zur Implementierung sowie in der Referenzdokumentation für HubL-Tags für Drag-&-Drop-Bereiche.
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.