> ## 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.

# Erstellen eines Drag-&-Drop-Bereichs

> Verwendung von Drag-&-Drop-Bereichen zur Unterstützung von Content-Autoren, damit diese schnell und einfach Layout, Stil und Inhalt ändern können

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "Unterstützte Produkte",
    description: "Erfordert eines der folgenden Produkte oder höher.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "Kostenlos",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Unterstützte Produkte" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="professional" />
</Accordion>

[Drag-&-Drop-Bereiche](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) 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.

<Frame>
  <img src="https://newinboundblog.hubspot.com/hubfs/a%20new%20approach.gif" alt="Animation von Modulen, die auf eine Seite gezogen werden, wobei Spalten und Zeilen angepasst werden" />
</Frame>

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](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html) für Best Practices zur Implementierung sowie in der [Referenzdokumentation für HubL-Tags für Drag-&-Drop-Bereiche](/cms/reference/hubl/tags/dnd-areas).

<Warning>
  **Hinweis**: 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 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.
</Warning>

<Steps>
  <Step title="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.

    <Info>
      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](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.
    </Info>
  </Step>

  <Step title="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.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
    	<!-- generates an empty drag and drop area drop-section -->
    {% end_dnd_area %}
    ```
  </Step>

  <Step title="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](/cms/reference/hubl/tags/dnd-areas).

    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.

    ```hubl theme={null}
    {% 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.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_text.png" alt="Screenshot des Seiten-Editors, bei dem die Modul-Symbolleiste angezeigt wird" />
    </Frame>
  </Step>

  <Step title="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.

    ```hubl theme={null}
    {% 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.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_image.png" alt="Screenshot des Seiten-Editors, der ein einem Abschnitt hinzugefügtes Bildmodul zeigt" />
    </Frame>
  </Step>

  <Step title="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.

    ```hubl theme={null}
    {% 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.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_area_full.png" alt="Screenshot des Seiten-Editors mit einer zweispaltigen Zeile, einem Bildmodul links, einem Rich-Text-Modul und einem Formularmodul rechts." />
    </Frame>
  </Step>

  <Step title="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:

    ```css theme={null}
    .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](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/css/objects). Ihr Stylesheet kann mithilfe von [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css) zur Vorlage hinzugefügt werden.
  </Step>
</Steps>

## Verwandte Tutorials

* [Erste Schritte mit Designs](/cms/start-building/building-blocks/themes/getting-started)
* [Erste Schritte mit benutzerdefinierten Modulen](/cms/start-building/building-blocks/modules/overview)
* [Hinzufügen von Designfunktionen zu einer vorhandenen Website](/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)