> ## 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-Bereiche in einer benutzerdefinierten E-Mail-Vorlage bestimmen

> So bestimmen Sie Drag-&-Drop-Bereiche in einer benutzerdefinierten E-Mail-Vorlage

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>

[Mit Drag-&-Drop-Bereichen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) haben Entwickler die Möglichkeit, Abschnitte mit benutzerdefinierten E-Mail-Vorlagen zu erstellen, die Änderungen an Layout, Stil und Content direkt im E-Mail-Editor zulassen. Entwickler können so anhand einer kleinere Anzahl von E-Mail-Vorlagen mit globaler Struktur Content-Autoren in die Lage versetzen, eine Vielzahl von Seiten mit unterschiedlichen Zwecken und Layouts zu erstellen.

<Warning>
  **Hinweis:** Benutzerdefinierte E-Mail-Vorlagen dürfen nur einen Drag-&-Drop-Bereich enthalten.
</Warning>

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

    * Gehen Sie dazu in Ihrem HubSpot-Account zu **Content** > **Design-Manager**.
    * Erstellen Sie in der linken Seitenleiste eine neue Datei, indem Sie auf **Datei** > **Neue Datei** klicken.
    * Klicken Sie im Dialogfeld auf das Dropdown-Menü **Was möchten Sie erstellen?** und wählen Sie **HTML und HUBL** aus.
    * Klicken Sie auf **Weiter**.
    * Klicken Sie auf das Dropdown-Menü **Vorlagentyp** und wählen Sie dann **E-Mail** aus.
    * Geben Sie einen **Namen** für die Vorlage ein.
    * Um den Speicherort der Vorlage zu aktualisieren, klicken Sie unter *Dateispeicherort* auf **Ändern** und wählen Sie dann einen neuen Ordner aus, in dem die Vorlage erstellt wird.
    * Klicken Sie auf **Erstellen**.
  </Step>

  <Step title="HubL-Tags zum Vorlagen-Header hinzufügen">
    Beachten Sie die folgenden erforderlichen und optionalen Tags, die Sie aus Gründen des Stylings und der Kompatibilität in den `<head>`-Abschnitt Ihrer E-Mail-Vorlage einfügen können:

    ### Erforderliche Daten

    `{{ dnd_area_stylesheet }}`

    Dieses Tag stellt Folgendes bereit:

    * Fügt zugehörige Medienabfragen hinzu
    * Behebt bekannte Styling-Probleme in Outlook
    * Setzt Ränder und Auffüllungen zurück
    * Aktiviert Anti-Aliasing
    * Fügt etwas CSS hinzu

    ### Optionale Tags

    Um sicherzustellen, dass Ihre Vorlage auf allen gängigen E-Mail-Clients einheitlich dargestellt wird, können Sie auch die folgenden optionalen HubL-Tags zu Ihrer Vorlage hinzufügen:

    * `{{ email_header_includes }}`: Mit diesem Tag wird CSS in Ihre Vorlage eingefügt, um das Styling konsistent darzustellen, häufige Styling-Probleme zu beheben und Metadaten zum HTML-Code der E-Mail hinzuzufügen. Beim Parsen dieses HubL-Tags wird der folgende Content innerhalb des `<head>` im HTML-Code der E-Mail hinzugefügt:

    | Parameter                                                                 | Beschreibung                                                                                                                                                                                                                                                   |
    | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `<meta name="x-apple-disable-message-reformatting">`                      | Verhindern, dass iOS 11 automatisch E-Mails skaliert                                                                                                                                                                                                           |
    | `<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`     | Informiert Browser und E-Mail-Clients darüber, welche unterschiedlichen Zeichen von ihnen erwartet werden                                                                                                                                                      |
    | `<meta http-equiv="X-UA-Compatible" content="IE=edge">`                   | Ermöglicht CSS3- und Medienabfragen unter Windows Phone 7.5, informiert Internet Explorer, Content im höchstmöglichen Modus zu rendern, und ermöglicht es dem Browser, auszuwählen, mit welchem Version von Internet Explorer die E-Mail gerendert werden soll |
    | `<meta name="viewport" content="width=device-width, initial-scale=1.0"/>` | Legt die sichtbare Fläche auf die Breite des Gerätebildschirms fest, wodurch Ihre E-Mail responsiv wird                                                                                                                                                        |

    * `{{ reset_css_stylesheet }}`: Durch das Einfügen dieses Tags werden eine Reihe von Styling-Problemen in Outlook behoben und die Ränder und Auffüllungen Ihrer E-Mail werden zurückgesetzt.

    * `{{ outlook_background_snippet }}`: Mit diesem Tag wird das Hintergrundbild oder die Hintergrundfarbe in Outlook festgelegt, sofern Sie eine zugehörige CSS-Regel für den Hintergrund angegeben haben.
  </Step>

  <Step title="Einen Drag-&-Drop-Bereich erstellen">
    Nachdem Sie das `{{ dnd_area_stylesheet }}`-HubL-Tag und alle anderen optionalen Tags zum `<head>` Ihrer Vorlage hinzugefügt haben, können Sie einen `dnd_area` im Text der Vorlage konfigurieren.

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

    Der Drag-&-Drop-Bereich kann entweder in einem `<div>` oder einem `<table>` enthalten sein. Eine Einschränkung des Drag-&-Drop-Bereichs besteht darin, dass die Mindestbreite auf 624 Pixel festgelegt ist. Dieser Wert kann nicht überschrieben werden.

    Dieses Tag allein erzeugt eine Ablagezone, in die Content-Autoren im E-Mail-Editor Module ziehen können.

    Der folgende Code würde einen leeren Drag-&-Drop-Bereich angeben:

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

    ### Einen Drag-&-Drop-Bereich mit leeren Spalten erstellen

    Sie können Ihren Drag-&-Drop-Bereich auch anpassen, um Standardabschnitte und -spalten anzugeben, indem Sie die Felder `dnd_section` und `dnd_column` verwenden.

    Der folgende HubL-Code würde beispielsweise einen Drag-&-Drop-Bereich mit 3 Spalten angeben:

    ```hubl theme={null}
    {% dnd_area "main" %}
      {% dnd_section padding={'top': 25, 'bottom': '20} %}
        {% dnd_column width=4 %}
        {% end_dnd_column %}
        {% dnd_column width=4 %}
        {% end_dnd_column %}
        {% dnd_column width=4 %}
        {% end_dnd_column %}
      {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    <Warning>
      Das `dnd_row`-HubL-Tag wird <u>derzeit nicht</u> in E-Mail-Vorlagen unterstützt.
    </Warning>
  </Step>

  <Step title="Drag-&-Drop-Bereich mit Modulen hinzufügen">
    Um den Abschnitt vorab mit Inhalt zu füllen, können wir das `dnd_module`-Tag verwenden, um ein Modul einzubinden, indem wir auf seinen Pfad verweisen. Das Modul muss innerhalb eines Abschnitts und einer Spalte hinzugefügt werden, damit der Drag-&-Drop-Bereich vorab mit Content gefüllt wird.

    Im folgenden Beispiel wird auf ein Standard-HubSpot-Modul verwiesen, aber Sie können auch von Ihnen erstellte Module einbeziehen, indem Sie deren Pfad im Dateiverzeichnisbaum Ihrer Design-Tools angeben.

    Um einen Standardwert für Ihr `dnd_module` festzulegen, können Sie das `module_attribute`-Tag verwenden.

    ```hubl theme={null}
    {% dnd_area "main", full_width=False %}
    	{% dnd_section padding={
    	            'top':'25',
    	            'bottom':'20'
    	            }, full_width=False %}
    	  {% dnd_column width=6 %}
    	    {% dnd_module path='@hubspot/image_email', img={
    	                    'alt':'NavyLogo',
    	                    'height':38,
    	                    'src':'email_dnd_template_images/NavyLogo.png',
    	                    'width':120
    	                    }, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
    	                    'padding-bottom':'10px',
    	                    'padding-left':'20px',
    	                    'padding-right':'20px',
    	                    'padding-top':'10px'
    	                    } %}
    	    {% end_dnd_module %}
    	  {% end_dnd_column %}
    	  {% dnd_column width=6 %}
    	  {% end_dnd_column %}
    	{% end_dnd_section %}
    {% end_dnd_area %}
    ```
  </Step>

  <Step title="Drag-&-Drop-Vorlage weiter anpassen und gestalten">
    Jedes Drag-&-Drop-HubL-Tag (z. B. `dnd_area`, `dnd_section`, `dnd_column` usw.) enthält verschiedene Parameter, die Sie verwenden können, um ein Standard-Styling bereitzustellen und andere Verhaltensweisen festzulegen, z. B. das Label, das in der Seitenleiste des E-Mail-Editors angezeigt wird.

    Um mehr über die für die einzelnen Tags verfügbaren Parameter zu erfahren, sehen Sie sich die folgenden Links für die einzelnen Tags an:

    * [dnd\_area](/cms/reference/hubl/tags/dnd-areas#dnd-area)
    * [dnd\_section](/cms/reference/hubl/tags/dnd-areas#dnd-section)
    * [dnd\_column](/cms/reference/hubl/tags/dnd-areas#dnd-column)
    * [dnd\_module](/cms/reference/hubl/tags/dnd-areas#dnd-module)
  </Step>
</Steps>