Zum Hauptinhalt springen
MitDrag-&-Drop-Bereichen 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 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. Ihr Stylesheet kann mithilfe von {{ require_css() }} zur Vorlage hinzugefügt werden.

​
Bitte beachten:

Drag-&-Drop-Bereiche können zurzeit noch nicht in Blogbeiträgen und E-Mail-Vorlagen verwendet werden.

​
dnd_area

Ein Drag-&-Drop-Bereich 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 verwenden. Ein dnd_area-Tag kann die folgenden Parameter enthalten:
ParameterTypBeschreibung
classZeichenfolgeEine dem umschließenden div einesdnd_area hinzugefügte Klasse
labelZeichenfolgeWird im Editor zur Kennzeichnung des Bereichs in der Seitenleiste verwendet.
{% dnd_area "unique_name", class="main" %}

{% end_dnd_area %}
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-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 %} ist eine Zeile der obersten Ebene und muss innerhalb eines {% dnd_area %}-Tags verschachtelt sein. Abschnitte können auch als Vorlage definiert werden und dann in einen dnd_area aufgenommen werden. So eignen sie sich ideal für die schnelle Erstellung einer einfachen Vorlage. Ein dnd_section-Tag kann die folgenden Parameter enthalten:
ParameterTypBeschreibung
background_colorDictEin Dictionary, das die Angabe einer Hintergrundfarbe unterstützt. Kann auch als Zeichenfolge angegeben sein.
background_imageDictEin Dictionary, das die Angabe eines Hintergrundbildes unterstützt.
background_linear_gradientDictEin Dictionary, das die Angabe eines linearen Farbverlaufshintergrundes unterstützt.
full_widthBooleschEin boolescher Wert, der festlegt, ob der Abschnitt die volle Breite haben soll oder durch einen inneren Container begrenzt wird.
marginDictEin 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_widthGanzzahlEin Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt.
paddingDictEin 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_alignmentZeichenfolgeVertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
  • TOP
  • MIDDLE
  • BOTTOM

​
Bitte beachten:

Sie können nur einen Hintergrundparameter pro dnd_section-Tag verwenden.
{% 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 %}
dnd_section-Tags können auch die folgenden Tags enthalten:
  • dnd_column
  • dnd_module

​
dnd_column

Ein {% dnd_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:
ParameterTypBeschreibung
background_colorDictEin Dictionary, das die Angabe einer Hintergrundfarbe unterstützt.
background_imageDictEin Dictionary, das die Angabe eines Hintergrundbildes unterstützt.
background_linear_gradientDictEin Dictionary, das die Angabe eines linearen Farbverlaufshintergrundes unterstützt.
marginDictEin 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_widthGanzzahlEin Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt.
paddingDictEin 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_alignmentZeichenfolgeVertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
  • TOP
  • MIDDLE
  • BOTTOM

​
Bitte beachten:

Sie können nur einen Hintergrundparameter pro dnd_column-Tag verwenden.
{% dnd_column
offset=0,
width=12,
background_color={
r: 255,
g: 0,
b: 0,
a: 1
},
margin={
"top": "1em",
"bottom": "1em"
},
%}

{% end_dnd_column %}
Ein dnd_column-Tag kann auch dnd_row enthalten.

​
dnd_row

Ein {% dnd_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:
ParameterTypBeschreibung
background_colorDictEin Dictionary, das die Angabe einer Hintergrundfarbe unterstützt.
background_imageDictEin Dictionary, das die Angabe eines Hintergrundbildes unterstützt.
background_linear_gradientDictEin Dictionary, das die Angabe eines linearen Farbverlaufshintergrundes unterstützt.
marginDictEin 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_widthGanzzahlEin Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt.
paddingDictEin 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_alignmentZeichenfolgeVertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
  • TOP
  • MIDDLE
  • BOTTOM

​
Bitte beachten:

Sie können nur einen Hintergrundparameter pro dnd_row-Tag verwenden.
{% 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 %}
Eine dnd_row kann auch die folgenden Tags enthalten:
  • dnd_column
  • dnd_module

​
dnd_module

Ein {% dnd_module %} ist ein Modul, 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:
ParameterTypBeschreibung
pathZeichenfolgeDer Pfad zu einem Modul.
horizontal_alignmentZeichenfolgeHorizontale Positionierung, unterstützt:LEFT, CENTER, RIGHT
offsetGanzzahlDer Abstand von 0 im 12-Spalten-Raster.
widthGanzzahlDie Anzahl der Spalten, die das 12-Spalten-Raster belegen.
flexbox_positioningZeichenfolgeVeraltet, 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:
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
Haben Sie ein altes Modul, dessen Feldname mit einem der oben genannten dnd_module-Parameter übereinstimmt? Sie können Standardwerte über einen Feldparameter übergeben, ähnlich wie bei einer Feldgruppe.
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
<h1>Hello, world!</h1>
{% end_module_attribute %}
{% end_dnd_module %}

​
Hintergrund

Es gibt mehrere Möglichkeiten, Hintergründe für Drag-&-Drop-Elemente in Spalten, Abschnitten und Zeilen festzulegen: background_imagebackground_linear_gradient und 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. 
{% 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.
ParameterTypBeschreibung
directionZeichenfolgeDie Richtung des Farbverlaufs.
  • to bottom
  • to top
  • to left
  • to right
colorsArrayArray 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:
  • RGB
  • RGBA
  • 3 char hex
  • 6 char hex
  • 8 char hex
{% 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üsselTypBeschreibung
backgroundPositionZeichenfolgeDie Hintergrundposition des Bildes. Unterstützt eine Zeichenfolge zur Angabe der vertikalen Position, gefolgt von der horizontalen.
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
backgroundSizeZeichenfolgeDie CSS-Eigenschaft für die Hintergrundgröße, die für das Bild verwendet wird.
Unterstützte Werte sind:
  • cover
  • contain
  • auto
imageUrlZeichenfolgeAbsolute URL zum Bild.
{% 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, 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 </body>-Tag auf der Seite in einem <style>-Tag platziert. Drag-&-Drop-Stile können auch an verschiedenen Haltepunkten unterschiedlich sein, um eine responsive Umgebung zu bieten.
Last modified on December 10, 2025