> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt > Use this file to discover all available pages before exploring further. # Drag-&-Drop-Bereich-HubL-Tags > Die HubL-Tags werden zum Erstellen von Drag-&-Drop-Bereichen verwendet, mit denen Entwickler Seitenabschnitte erstellen können, die Layout-, Stil- und Inhaltsänderungen direkt in den Content-Editoren unterstützen. [MitDrag-&-Drop-Bereichen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) können Entwickler Seitenabschnitte und globale Teilvorlagen erstellen, die Layout-, Stil- und Inhaltsänderungen direkt in den Content-Editoren unterstützen. Siehe das [Tutorial zum Erstellen eines Drag-&-Drop-Bereichs](/cms/start-building/building-blocks/drag-and-drop/tutorial) für eine Einführung in das Einrichten von Drag-&-Drop-Bereichen. Drag-&-Drop-Bereiche basieren auf einem 12-spaltigen, responsiven Raster. Drag-&-Drop-Tags rendern Markup mit Klassennamen, die Spalten und Zeilen bezeichnen. Sie müssen ein Stylesheet hinzufügen, das auf diese Klassennamen ausgerichtet ist.  Ein Beispiel für Layout-Stile, die Sie implementieren können, finden Sie in der [CMS Hub Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Ihr Stylesheet kann mithilfe von [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css) zur Vorlage hinzugefügt werden. ### Bitte beachten: Drag-&-Drop-Bereiche können zurzeit noch nicht in [Blogbeiträgen](/cms/start-building/building-blocks/templates/blog) und [E-Mail-Vorlagen](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#email) verwendet werden. ## dnd\_area Ein [Drag-&-Drop-Bereich](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) ist ein 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. Module selbst können keine Drag-&-Drop-Bereiche enthalten. Um Content-Autoren eine Oberfläche zum Hinzufügen einheitlicher Inhalte innerhalb eines Moduls zu bieten, sollten Sie stattdessen [Wiederholfelder und -gruppen](/cms/reference/fields/module-theme-fields#repeaters) verwenden. Ein `dnd_area`-Tag kann die folgenden Parameter enthalten: | Parameter | Typ | Beschreibung | | --------- | ------------ | ---------------------------------------------------------------------------- | | `class` | Zeichenfolge | Eine dem umschließenden div einesdnd\_area hinzugefügte Klasse | | `label` | Zeichenfolge | Wird im Editor zur Kennzeichnung des Bereichs in der Seitenleiste verwendet. | ```text eingabe.txt theme={null} {% dnd_area "unique_name", class="main" %} {% end_dnd_area %} ``` ```text ausgabe.txt theme={null}
``` `dnd_area`-Tags können auch `dnd_section`-Tags enthalten. **Bitte beachten**: Ein Content-Autor kann die Vorlage einer Seite gegen eine andere Vorlage desselben Typs austauschen, je nachdem, ob sie [dnd\_area](/cms/reference/hubl/tags/dnd-areas)-Tags enthält. * Mit dem visuellen Drag-&-Drop-Layout-Editor erstellte 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. ## dnd\_section A [`{% dnd_section %}`](/cms/start-building/building-blocks/sections/sections) ist eine Zeile der obersten Ebene und muss innerhalb eines `{% dnd_area %}`-Tags verschachtelt sein. [Abschnitte können auch als Vorlage definiert werden](/cms/start-building/building-blocks/sections/sections#section-templates) und dann in einen `dnd_area` [aufgenommen](/cms/start-building/building-blocks/sections/sections#section-context) werden. So eignen sie sich ideal für die schnelle Erstellung einer einfachen Vorlage. Ein `dnd_section`-Tag kann die folgenden Parameter enthalten: | Parameter | Typ | Beschreibung | | ---------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Ein Dictionary, das die Angabe einer [Hintergrundfarbe](#background-color) unterstützt. Kann auch als Zeichenfolge angegeben sein. | | `background_image` | Dict | Ein Dictionary, das die Angabe eines [Hintergrundbildes](#background-image) unterstützt. | | `background_linear_gradient` | Dict | Ein Dictionary, das die Angabe eines [linearen Farbverlaufshintergrundes](#background-linear-gradient) unterstützt. | | `full_width` | Boolesch | Ein boolescher Wert, der festlegt, ob der Abschnitt die volle Breite haben soll oder durch einen inneren Container begrenzt wird. | | `margin` | Dict | Ein Dictionary, das das Angeben von Randwerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. | | `max_width` | Ganzzahl | Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt. | | `padding` | Dict | Ein Dictionary, das das Angeben von Auffüllungswerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. | | `vertical_alignment` | Zeichenfolge | Vertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
| ### Bitte beachten: Sie können nur einen Hintergrundparameter pro `dnd_section`-Tag verwenden. ```text eingabe.txt theme={null} {% 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 %} ``` ```text ausgabe.txt theme={null}
``` `dnd_section`-Tags können auch die folgenden Tags enthalten: * `dnd_column` * `dnd_module` ## dnd\_column Ein [`{% dnd_column %}`](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#column) ist ein vertikaler Strukturbaustein, der eine oder mehrere durch seine übergeordnete Zeile definierten Layoutspalten einnimmt. DieseS HubL-Tag muss innerhalb eines `{% dnd_area %}`-Tags verschachtelt sein. Ein `dnd_column`-Tag kann die folgenden Parameter enthalten: | Parameter | Typ | Beschreibung | | ---------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Ein Dictionary, das die Angabe einer [Hintergrundfarbe](#background-color) unterstützt. | | `background_image` | Dict | Ein Dictionary, das die Angabe eines [Hintergrundbildes](#background-image) unterstützt. | | `background_linear_gradient` | Dict | Ein Dictionary, das die Angabe eines [linearen Farbverlaufshintergrundes](#background-linear-gradient) unterstützt. | | `margin` | Dict | Ein Dictionary, das das Angeben von Randwerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. | | `max_width` | Ganzzahl | Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt. | | `padding` | Dict | Ein Dictionary, das das Angeben von Auffüllungswerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. | | `vertical_alignment` | Zeichenfolge | Vertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
| ### Bitte beachten: Sie können nur einen Hintergrundparameter pro `dnd_column`-Tag verwenden. ```text eingabe.txt theme={null} {% dnd_column offset=0, width=12, background_color={ r: 255, g: 0, b: 0, a: 1 }, margin={ "top": "1em", "bottom": "1em" }, %} {% end_dnd_column %} ``` ```text ausgabe.txt theme={null}
``` Ein `dnd_column`-Tag kann auch `dnd_row` enthalten. ## dnd\_row Ein [`{% dnd_row %}`](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#row) ist ein horizontaler Strukturbaustein, der ein verschachteltes 12-spaltiges Layout-Gitter erzeugt, in dem Spalten und Module platziert werden können. DieseS HubL-Tag muss innerhalb eines `{% dnd_area %}`-Tags verschachtelt sein. Ein `dnd_row`-Tag kann die folgenden Parameter enthalten: | Parameter | Typ | Beschreibung | | ---------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Ein Dictionary, das die Angabe einer [Hintergrundfarbe](#background-color) unterstützt. | | `background_image` | Dict | Ein Dictionary, das die Angabe eines [Hintergrundbildes](#background-image) unterstützt. | | `background_linear_gradient` | Dict | Ein Dictionary, das die Angabe eines [linearen Farbverlaufshintergrundes](#background-linear-gradient) unterstützt. | | `margin` | Dict | Ein Dictionary, das das Angeben von Randwerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. | | `max_width` | Ganzzahl | Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt. | | `padding` | Dict | Ein Dictionary, das das Angeben von Auffüllungswerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. | | `vertical_alignment` | Zeichenfolge | Vertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
| ### Bitte beachten: Sie können nur einen Hintergrundparameter pro `dnd_row`-Tag verwenden. ```text eingabe.txt theme={null} {% dnd_row background_color={ r: 123, g: 123, b: 123, a: 1.0 }, margin={ "top": 20, "bottom": 200 }, padding={ "top": 20, "bottom": 200, "left": 20, "right": 20 } %} {% end_dnd_row %} ``` ```text ausgabe.txt theme={null}
``` Eine dnd\_row kann auch die folgenden Tags enthalten: * `dnd_column` * `dnd_module` ## dnd\_module Ein [`{% dnd_module %}`](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#module) ist ein [Modul](https://developers.hubspot.de/docs/guides/cms/content/modules/overview), das von einem div umschlossen wird, dem Layout, Stile und Inhalte hinzugefügt werden können. Das Modul wird durch Verweis auf seinen Pfad angegeben, bei dem es sich entweder um ein HubSpot-Standardmodul (unter Verwendung des `@hubspot/`-Namespace) oder um von Ihnen erstellte Module handeln kann, deren Pfad im Dateiverzeichnisbaum des Design-Managers angegeben wird. DieseS HubL-Tag muss innerhalb eines `{% dnd_area %}`-Tags verschachtelt sein. Ein `dnd_module`-Tag kann die folgenden Parameter enthalten: | Parameter | Typ | Beschreibung | | ---------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `path` | Zeichenfolge | Der Pfad zu einem Modul. | | `horizontal_alignment` | Zeichenfolge | Horizontale Positionierung, unterstützt:`LEFT`, `CENTER`, `RIGHT` | | `offset` | Ganzzahl | Der Abstand von 0 im 12-Spalten-Raster. | | `width` | Ganzzahl | Die Anzahl der Spalten, die das 12-Spalten-Raster belegen. | | `flexbox_positioning` | Zeichenfolge | **Veraltet, nicht verwenden.** Verwenden Sie stattdessen `horizontal_alignment` in Verbindung mit `vertical_alignment` der Zeile oder des Abschnitts.
Flexbox-Positionswert für das Modul. Unterstützt eine Zeichenfolge zur Angabe der vertikalen Position, gefolgt von der horizontalen: | Haben Sie ein altes Modul, dessen Feldname mit einem der oben genannten `dnd_module`-Parameter übereinstimmt? Sie können [Standardwerte über einen Feldparameter übergeben](/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters), ähnlich wie bei einer Feldgruppe. ```text eingabe.txt theme={null} {% dnd_module path="@hubspot/rich_text", offset=0, width=8, %} {% module_attribute "html" %}

Hello, world!

{% end_module_attribute %} {% end_dnd_module %} ``` ```text ausgabe.txt theme={null}

Hello, world!
``` ## Hintergrund Es gibt mehrere Möglichkeiten, Hintergründe für Drag-&-Drop-Elemente in Spalten, Abschnitten und Zeilen festzulegen: [`background_image`](#background-image)[`background_linear_gradient`](#background-linear-gradient) und [`background_color`](#background-color). ### background\_color Die Drag-&-Drop-Tags für Spalten, Abschnitte und Zeilen unterstützen Hintergrundfarben. Sie können die Standard-Hintergrundfarbe für ein Drag-&-Drop-Element mithilfe von `background_color` festlegen. Dieser Parameter basiert auf einer Zeichenfolge und kann die folgenden Formate enthalten, die im folgenden Beispiel beschrieben werden. ```hubl theme={null} {% dnd_section %} // Hex Value (both 3 and 6 char length) {% dnd_column background_color="#F7F7F7" %} {% end_dnd_column %} {% dnd_column background_color="#FFF" %} {% end_dnd_column %} // Both RGB and RGBA {% dnd_column background_color="rgb(255,255,255)" %} {% end_dnd_column %} {% dnd_column background_color="rgba(0,0,0,.25)" %} {% end_dnd_column %} {% end_dnd_section %} ``` ### background\_linear\_gradient Die Drag-&-Drop-Elemente für Spalten, Abschnitte und Zeilen unterstützen lineare Hintergrundverläufe. Mit dem `background_linear_gradient`-Parameter können Sie einen Standardfarbverlauf festlegen. Der Parameter erwartet ein Dictionary. Derzeit werden nur zwei Farbstopps unterstützt. | Parameter | Typ | Beschreibung | | ----------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `direction` | Zeichenfolge | Die Richtung des Farbverlaufs. | | `colors` | Array | Array von Farbzeichenfolgen. Derzeit werden 2 Werte unterstützt, der Anfang und das Ende. Die Werte werden als Zeichenfolgen bereitgestellt, und die folgenden Formate werden unterstützt: | ```hubl theme={null} {% dnd_section background_linear_gradient={ "direction": "to bottom", "colors": [ "#1EB6C3", "#2A2859" ] } %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %} ``` ### background\_image Die Drag-&-Drop-Elemente für Spalten, Abschnitte und Zeilen unterstützen Hintergrundbilder. Sie können ein Standard-Hintergrundbild angeben, indem Sie den `background_image`-Parameter verwenden, der ein Dictionary erwartet. | Schlüssel | Typ | Beschreibung | | -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `backgroundPosition` | Zeichenfolge | Die Hintergrundposition des Bildes. Unterstützt eine Zeichenfolge zur Angabe der vertikalen Position, gefolgt von der horizontalen. | | `backgroundSize` | Zeichenfolge | Die CSS-Eigenschaft für die Hintergrundgröße, die für das Bild verwendet wird.
Unterstützte Werte sind: | | `imageUrl` | Zeichenfolge | Absolute URL zum Bild. | ```hubl theme={null} {% dnd_section background_image = { "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://www.example.com/bg-image.jpg" }, %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %} ``` ## Wie Drag-&-Drop-Stilparameter auf der Seite angezeigt werden Wenn Sie stilbasierte Parameter wie [Hintergründe](#background), Ränder oder Auffüllungen verwenden, werden die Klassennamen automatisch für Ihre Abschnitte, Spalten, Zeilen und Module berechnet. Die von Ihnen zugewiesenen Eigenschaftswerte werden dann zu diesen automatisch erstellten Klassennamen hinzugefügt, und der daraus resultierende CSS-Code wird dann vor dem abschließenden ``-Tag auf der Seite in einem `