Letzte Änderung: 28. August 2025
Der äußerste Container in einem Drag-&-Drop-Bereich wird als Abschnitt bezeichnet. Abschnitte können nicht innerhalb eines anderen dnd-Elements verschachtelt werden, jedoch Module, Zeilen und Spalten enthalten. Im Seiten-Editor haben Content-Autoren die Möglichkeit, der Seite Abschnitte hinzufügen und diese dann nach Bedarf zu ändern und zu gestalten. Content-Autoren können auch Abschnitte erstellen und speichern, um sie auf anderen Seiten innerhalb desselben Designs zu verwenden, wodurch das Erstellen von Inhalten effizienter wird. In diesem Artikel erfahren Sie mehr über Abschnitte und wie sie sich im Seiten-Editor verwenden lassen. Wenn Sie ein Design entwickeln, lesen Sie bitte auch die Anleitung zum Ausblenden von Modulen und Abschnitten im Seiten-Editor, um die Content Erstellung effizienter zu gestalten.
Seiten-Editor fügt wiederverwendbare Abschnitts-UI hinzu

​
Überblick

Abschnitte können entweder im Content-Editor von einem Content-Autor erstellt oder von einem Entwickler mit dem dnd_section-Tag in ein dnd_area-Element eingebaut werden. Die im Editor verfügbaren Styling-Optionen stehen Ihnen auch beim Kodieren einer Vorlage zur Verfügung. Zum Beispiel: 
<main class="body-container-wrapper">
  {% dnd_area 'dnd_area'
    label='Main section',
  %}
    {% dnd_section
      background_image={
        'backgroundPosition': 'MIDDLE_CENTER',
        'backgroundSize': 'cover',
        'imageUrl': 'https://example.com/path/to/image.jpg'
      },
      margin={
        'top': 32,
        'bottom': 32
      },
      padding={
        'top': '1em',
        'bottom': '1em',
        'left': '1em',
        'right': '1em'
      },
      max_width=1200,
      vertical_alignment='MIDDLE'
    %}

    {% end_dnd_section %}

  {% end_dnd_area %}
</main>
Eine vollständige Dokumentation aller verfügbaren Parameter für Drag-&-Drop-Elemente und Anwendungsbeispiele finden Sie in diesem Artikel über dnd_area-Tags. Sie können Abschnitte verwenden, um schnell ein Gerüst für leicht lesbare Vorlagen zu erstellen. Da Sie nur im Kontext angeben, wo sich die vorlagenspezifischen Instanzen unterscheiden, können Sie immer noch zurückgehen und diese Abschnittsvorlage ändern.
Hinweis: Wenn Sie einen Abschnitt ändern, wird er in allen Instanzen dieses Abschnitts aktualisiert, mit Ausnahme bestehender Seiten, die eine Vorlage verwenden, die auf den Abschnitt verweist. Seiten, die zuvor mit einer einen Abschnitt enthaltenen Vorlage erstellt wurden, müssen manuell aktualisiert werden, um die neue Version des Abschnitts zu verwenden. Dadurch wird verhindert, dass versehentlich inkompatible Änderungen vorgenommen werden. Um einen Abschnitt auf die neueste Version zu aktualisieren, kann ein Content-Autor zum Seiten-Editor gehen, den neuen Abschnitt zur Seite hinzufügen und dann die alte Version löschen.

​
Wiederverwendbare Abschnitte erstellen

Innerhalb eines Designs ist es möglich, vorkonfigurierte Abschnitte einzufügen, die Content-Autoren dann unter Verwendung dieses Designs im Seiten-Editor zu diesem Design hinzufügen können. Solche wiederverwendbaren Abschnitte werden als Abschnittsvorlagendateien erstellt und innerhalb der gleichen Syntax kodiert, die Sie in einem dnd_area-Element verwenden.
Hinweis: Um einen Abschnitt für mehrere Designs verfügbar zu machen, müssen Sie die Abschnittsvorlagendatei zu jedem Design hinzufügen. Abschnitte, die von Content-Autoren im Content-Editor erstellt wurden, sind ebenfalls nur innerhalb dieses Designs verfügbar.
Im Folgenden erfahren Sie, wie Sie Abschnittsvorlagendateien erstellen und dann in anderen Vorlagendateien darauf verweisen können.

​
Vorlage Dateien für Abschnitte

Abschnitt Vorlagen werden in ihrer Vorlagenanmerkung mit templateType: section gekennzeichnet. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
ParameterTypBeschreibungWert
templateTypeZeichenfolgeLegt den Vorlagentyp fest, der verwendet wird, um zu bestimmen, wo die Vorlage verwendet werden kann und welche Daten dazu zur Verfügung stehen.section
labelZeichenfolgeWird im Seiten-Editor verwendet, um einen für Menschen lesbaren Namen des Abschnitts bereitzustellen.
descriptionZeichenfolgeWeitere Beschreibung des Abschnitts, die über die Möglichkeiten eines Labels hinausgeht. Wird im Seiten-Editor angezeigt. Maximal 255 Zeichen.
screenshotPathZeichenfolge/PfadPfad zu einem Screenshot des Abschnitts. Dies wird verwendet, um Content-Autoren eine einfache visuelle Referenz dafür zu geben, wie der Abschnitt aussieht.
Eine Abschnittsvorlage muss mit einem dnd_section-Tag beginnen und enden. In einer Abschnittsvorlage kann nur ein dnd_section-Tag vorhanden sein. Innerhalb dieses Bereichs können Sie Module, Zeilen und Spalten platzieren, wobei Sie den gleichen dnd_area-Regeln folgen, die beim Hinzufügen von einem dnd_area-Element zu einer Seitenvorlage gelten. Die Ausnahme besteht darin, dass Sie den Content nur für einen Abschnitt und dessen untergeordnete Drag-&-Drop-Elemente definieren. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
{% dnd_section
 padding={
   'top': 200,
   'right': 20,
   'bottom': 200,
   'left': 20
 },
 background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778,
 vertical_alignment='MIDDLE'
%}
 {% dnd_column %}
   {% dnd_row %}
     {% dnd_module path='@hubspot/rich_text' %}
     {% module_attribute 'html' %}
       <div style="text-align: center">
         {{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }}
       </div>
     {% end_module_attribute %}
     {% end_dnd_module %}
   {% end_dnd_row %}
   {% dnd_row %}
     {% dnd_module
       path='../modules/button',
       button_text={{ context.buttonText || 'Subscribe' }}
       horizontal_alignment='CENTER'
     %}
     {% end_dnd_module %}
   {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}

​
Eine Teilversion des Abschnitts zu einer Vorlage hinzufügen

Nachdem Sie einen Abschnitt erstellt haben, können Sie innerhalb eines dnd_area-Elements darauf verweisen, indem Sie ein include_dnd_partial-Tag verwenden. Dieses Tag stellt den Pfad bereit, der auf die Abschnittsdatei verweist, wie unten dargestellt: 
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
   {# Banner Section #}
   {% include_dnd_partial path='../sections/banner.html' context={} %}
   {# End Banner Section #}
{% end_dnd_area %}
Beachten Sie im obigen Beispiel das Kontext-Argument im include_dnd_partial-Tag. Auf diese Weise können Sie instanzspezifische Variablen von der Seitenvorlage für den Abschnitt übernehmen und die Standardwerte in der Abschnittsdatei überschreiben. Weitere Informationen finden Sie im Abschnittskontext.

​
Bereichsinhalt

Sie können Bereichskontextvariablen verwenden, um die Standardwerte auf Abschnitts- und Modulebene zu überschreiben Abschnittskontextvariablen werden von Ihnen selbst definiert und sind nicht direkt mit den Modulen und ihren Feldern verknüpft. In Ihrer Seitenvorlage können Sie diese Kontextvariablen über dem context-Parameter im include_dnd_partial-Tag festlegen. 
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}

   {# Banner Section #}
   {% include_dnd_partial path='../sections/banner.html'
     context={
       'content': '<h1 style="color: #fff;">Home Page</h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>',
       'buttonText': 'Buy Now'
     }
   %}
   {# End Banner Section #}

{% end_dnd_area %}
Auf alle Variablen, die Sie Ihrem context-Parameter hinzufügen, kann in Ihrer Abschnittsvorlage verwiesen werden. Das folgende Beispiel zeigt, wie die Bild-URL, der Rich-Text-Bereich und die Schaltfläche im Kontext festgelegt werden, falls vorhanden. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
{% dnd_section
  background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778
%}
 {% dnd_column %}
   {% dnd_row %}
     {% dnd_module path='@hubspot/rich_text' %}
     {% module_attribute 'html' %}
       <div style="text-align: center">
         {{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }}
       </div>
     {% end_module_attribute %}
     {% end_dnd_module %}
   {% end_dnd_row %}
   {% dnd_row %}
     {% dnd_module
       path='../modules/button',
       button_text={{ context.buttonText || 'Subscribe' }}
       horizontal_alignment='CENTER'
     %}
     {% end_dnd_module %}
   {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}
Beachten Sie, dass überall dort, wo Kontextvariablen verwendet werden, ein || ODER-Filter vorhanden ist, um Standard-Content bereitzustellen, falls keiner angegeben wurde. Wenn beispielsweise im Schaltflächen-Modul „if“ einen Wert hat, context.buttonText wird er von der Seite verwendet. Andernfalls wird der Text auf Subscribe festgelegt.

​
Sektionsklassen

In Abschnittsvorlagen können Sie dem Abschnitt-Wrapper mithilfe des Klassenparameters Klasse hinzufügen. Dadurch wird die von Ihnen angegebene Klasse dem Klassenfeld des im dnd_section-Abschnitt vorhandenen HTML-Element hinzugefügt. Es wird empfohlen, nach Möglichkeit Styling-Steuerelemente zu verwenden, die in die Abschnitte integriert sind, damit Content-Autoren diese ändern können.
Hinweis: Abschnittsklassen werden nur in Abschnittsvorlagen unterstützt.
{% dnd_section
 class='my-hero-section'
 padding={
   'top': 200,
   'right': 20,
   'bottom': 200,
   'left': 20
 },
 background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778,
 vertical_alignment='MIDDLE'
%}
...
Content-Autoren können keine Klassen bearbeiten, hinzufügen oder entfernen. Diese lassen sich nur „entfernen“, indem dazu ein Abschnitt manuell im Editor neu erstellt wird.Außerdem sollten Sie es vermeiden, das Layout von untergeordneten Abschnitten mit CSS oder JavaScript zu ändern. Denn das kann dazu führen, dass der Content-Autor Probleme mit den Seiten-Editor hat.

​
Berichtsvorschau anzeigen

Die einfachste Möglichkeit, während der Entwicklung eine Vorschau des jeweiligen Abschnitts anzuzeigen, ist die Verwendung des Design-Managers. Öffnen Sie eine Vorlage, die ein dnd_area enthält, wodurch Ihre Abschnittsvorlage mithilfe eines include_dnd_partial-Tags aufgerufen wird. Klicken Sie oben rechts auf „Vorschau“. Auf diese Weise können Sie Ihren Abschnitt ständig aktualisieren und die entsprechenden Änderungen umgehend visuell überprüfen. Das ist viel effizienter, als für jede Änderung eine neue Seite erstellen zu müssen.

​
Abschnitts-HubL kopieren

Im Seiten-Editor können Sie das HubL-Markup für einen Drag-&-Drop-Abschnitt kopieren, um den Code bei Bedarf wiederzuverwenden. Dies kann hilfreich sein, wenn Sie einen Drag-&-Drop-Abschnitt in einer Code-Datei neu erstellen wollen. Das HubL-Markup eines Abschnitts kopieren:
  • Gehen Sie zu Ihrem Inhalt:
    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Marketing > ** Website ** > ** Website-Seiten**.
    • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Landingpages.
  • Bewegen Sie den Mauszeiger über eine Seite und klicken Sie auf „Bearbeiten“.
  • Fügen Sie im Seiten-Editor den folgenden Parameter zur URL hinzu und drücken Sie dann die Eingabetaste: ?developerMode=true
  • Wenn die Seite neu geladen wird, befinden Sie sich jetzt im Entwicklermodus. Sie können den Entwicklermodus jederzeit beenden, indem Sie oben rechts auf Entwicklermodus beenden klicken.
exit-developer-mode0
  • Bewegen Sie den Mauszeiger über den Abschnitt, den Sie kopieren möchten, und klicken Sie dann auf das Symbol mit dem nach unten gerichteten Pfeil. Wählen Sie Als HubL kopieren aus. Das HubL-Markup wird dann in Ihre Zwischenablage kopiert.
copy-section-hubl-menu

​
Verwandte Ressourcen