Unterstützte Produkte
Erfordert eines der folgenden Produkte oder höher.
Marketing HubMarketing HubProfessional
Content HubContent HubProfessional
Letzte Änderung: 28. August 2025
Drag-&-Drop-Bereiche sind Abschnitte einer Vorlage, die als leere Container fungieren und direkt im Seiten-Editor geändert werden können. Durch die Integration von Drag-&-Drop-Bereichen in eine Vorlage können Content-Autoren Module nach Bedarf im Seiten-Editor hinzufügen und verwalten, anstatt sich auf statische Module zu verlassen, die in die Vorlage integriert sind.
Animation von Modulen, die auf eine Seite gezogen werden, wobei Spalten und Zeilen angepasst werden
Neben der Verwendung von Drag-&-Drop-Bereichen als leere Ablagezonen für Content-Autoren können Sie auch Drag-&-Drop-Bereiche mit verschiedenen Modulen, Layouts und Content vorab als Ausgangspunkt füllen. 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.
Hinweis: 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.
Wenn die Seitenvorlage ausgetauscht wird, bleiben alle vorhandenen Inhalte, die den Drag-&-Drop-Bereichen der ersten Vorlage hinzugefügt wurden, erhalten.
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 Layout-Stile, die Sie implementieren können, finden Sie in der CMS-Boilerplate von HubSpot. 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.Als Beispiel wird mit dem folgenden Code ein Abschnitt mit einem Hintergrundbild (background_image) erstellt. Dieser Bereich wird durch einen vertical-alignment-Parameter zentriert und hat eine maximale Breite von 1000px für untergeordneten Content. 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 Content vorab zu füllen, enthält der Code auch ein dnd_module-Tag, um ein Modul einzuschließen, indem auf dessen Pfad verwiesen wird. In diesem Beispiel ruft das dnd_module das Standard-Rich-Text Modul von HubSpot ab, wie durch den path-Parameter festgelegt. Ein Standardwert für das Rich-Text-Modul wird mit dem module_attribute-Tag angegeben.
{% 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 %}
Dies führt dazu, dass die Drag-&-Drop-Fläche ein Modul enthält, das Content-Autoren im Content-Editor bearbeiten können. Beachten Sie, wie sich das Festlegen von max_width in dnd_section auf den Content auswirkt.
Screenshot des Seiten-Editors, bei dem die Modul-Symbolleiste angezeigt wird
4

Mehrere Module einbeziehen

Um mehr als ein Modul einzubinden, verwenden Sie mehrere dnd_module-Tags. Durch Festlegen der offset- und width-Parameter, die auf einem 12-Spalten-Raster beruhen, können Sie ein Bildmodul neben dem Rich-Text-Modul platzieren, wie unten dargestellt.
{% 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>


Use this space to tell everyone about what you have to offer.
            {% 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 hat die Seite ein bearbeitbares Bildmodul sowie ein Drag-Handle, mit dem Content-Autoren die Breite und den Versatz der Module ändern können. Beachten Sie, wie durch Festlegen von vertical_alignment in dnd_section der Inhalt vertikal zentriert wird.
Screenshot des Seiten-Editors, der ein einem Abschnitt hinzugefügtes Bildmodul zeigt
5

Spalten und Zeilen einbeziehen

Um den Drag-&-Drop-Bereich komplexer zu gestalten, können Sie 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 oder 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>


Use this space to tell everyone about what you have to offer.
          {% 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 Content-Autoren zusätzlich zu den Modulen und Abschnitten weitere Stil- und Layoutoptionen für bestimmte Zeilen und Spalten.
Screenshot 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 dnd-Präfix-Klassen 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 Layout-Stile, die Sie implementieren können, finden Sie in der CMS-Boilerplate von HubSpot. Ihr Stylesheet kann mithilfe von {{ require_css() }} zur Vorlage hinzugefügt werden.

​
Verwandte Tutorials