Erste Schritte mit Drag-&-Drop-Bereichen

Last updated:
APPLICABLE PRODUCTS
  • 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.

Animation von Modulen, die auf eine Seite gezogen werden, wobei Spalten und Zeilen angepasst werden

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.

1. Eine neue HTML-Vorlage erstellen

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.

2. Einen Drag-&-Drop-Bereich erstellen

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. 

{% dnd_area "body_dnd_area" %} <!-- generates an empty drag and drop area drop-section --> {% end_dnd_area %}

3. Einen Abschnitt mit einem Modul erstellen

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.

{% dnd_area "body_dnd_area" %} {% dnd_section background_image = { 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': 'https://www.dragndrop.com/bg-image.jpg' }, max_width=1000, vertical_alignment='MIDDLE' %} {% dnd_module path='@hubspot/rich_text' %} {% module_attribute "html"%} This is your main headline. Use this space to tell everyone about what you have to offer. {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {% end_dnd_area %}

Jetzt können wir sehen, dass unser Drag-&-Drop-Bereich ein Modul enthält, das Content-Autoren im Content-Editor bearbeiten können. Wir können auch sehen, wie sich das Festlegen einer max_width für den dnd_section auf unseren Inhalt auswirkt. 

Screenshot des Seiten-Editors, bei dem die Modul-Symbolleiste angezeigt wird

4. Mehrere Module einbeziehen

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.

{% dnd_area "body_dnd_area" %} {% dnd_section background_image={ 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': 'https://www.dragndrop.com/bg-image.jpg' }, max_width=1000, vertical_alignment='MIDDLE' %} {% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %} {% module_attribute "html"%} <h1>This is your main headline.</h1> <p>Use this space to tell everyone about what you have to offer.</p> {% end_module_attribute %} {% end_dnd_module %} {% dnd_module path='@hubspot/linked_image', width=4, offset=8, img={ "src": "https://www.dragndrop.com/placeholder-image.jpg", "alt": "Stock placeholder image" } %} {% end_dnd_module %} {% end_dnd_section %} {% end_dnd_area %}

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. 

Screenshot des Seiten-Editors, der ein einem Abschnitt hinzugefügtes Bildmodul zeigt

5. Spalten und Zeilen einbeziehen

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. 

{% dnd_area "body_dnd_area" %} {% dnd_section background_image={ 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': 'https://www.dragndrop.com/bg-image.jpg' }, max_width=1000, vertical_alignment='MIDDLE' %} {% dnd_module path='@hubspot/linked_image', width=6, img={ "src": "https://www.dragndrop.com/placeholder-image.jpg", "alt": "Stock placeholder image" } %} {% end_dnd_module %} {% dnd_column width=6, offset=6 %} {% dnd_row padding={ 'bottom': 15 } %} {% dnd_module path='@hubspot/rich_text' %} {% module_attribute "html"%} <h1>This is your main headline.</h1> <p>Use this space to tell everyone about what you have to offer.</p> {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_row %} {% dnd_row %} {% dnd_module path='@hubspot/form' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

Jetzt haben unsere Content-Autoren zusätzlich zu den Modulen und Abschnitten weitere stilistische und Layoutkontrolle über bestimmte Zeilen und Spalten. 

Bildschirmfoto des Seiten-Editors mit einer zweispaltigen Zeile, einem Bildmodul links, einem Rich-Text-Modul und einem Formularmodul rechts.

6. Generische Stile für Drag-&-Drop-Komponenten festlegen

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:

.dnd-section { padding: 80px 20px; }

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.  

Verwandte Tutorials

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.