Drag-&-Drop-Bereich-HubL-Tags

Last updated:

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 Blog-Beiträ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:

ParameterTypeDescription Default
class
String

Eine dem umschließenden div eines dnd_area hinzugefügte Klasse
label
String

Wird im Editor zur Kennzeichnung des Bereichs in der Seitenleiste verwendet.
{% dnd_area "unique_name", class="main" %} {% end_dnd_area %}<div class="container-fluid main"> <div class="row-wrapper"> <div class="row-fluid"> <div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12"> </div> </div> </div> </div>

dnd_area-Tags können auch dnd_section-Tags enthalten.

Bitte beachten Sie: 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

Ein {% dnd_section %} ist eine Zeile der obersten Ebene und muss innerhalb eines {% dnd_area %}-Tags verschachtelt werden. Abschnitte können auch als Vorlage definiert 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:

ParameterTypeDescription
background_color
Dict

Ein Dictionary, das die Angabe einer Hintergrundfarbe unterstützt. Kann auch als Zeichenfolge angegeben sein.

background_image
Dict

Ein Dictionary, das die Angabe eines Hintergrundbildes unterstützt.

background_linear_gradient
Dict

Ein Dictionary, das die Angabe eines linearen Farbverlaufshintergrundes unterstützt.

full_width
Boolean

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 die Angabe von Werten für den Rand 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
Integer

Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt.

padding
Dict

Ein Dictionary, das die Angabe 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
StringVertikale 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 %}<div class="row-fluid-wrapper row-depth-1 row-number-1 unique_name-row-0-background-image dnd-section unique_name-row-0-max-width-section-centering unique_name-row-0-margin unique_name-row-0-padding"> <div class="row-fluid "> </div><!--end row--> </div><!--end row-wrapper -->

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:

ParameterTypeDescription
background_color
Dict

Ein Dictionary, das die Angabe einer Hintergrundfarbe unterstützt.

background_image
Dict

Ein Dictionary, das die Angabe eines Hintergrundbildes unterstützt.

background_linear_gradient
Dict

Ein Dictionary, das die Angabe eines linearen Farbverlaufshintergrundes unterstützt.

margin
Dict

Ein Dictionary, das die Angabe von Werten für den Rand 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
Integer

Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt.

padding
Dict

Ein Dictionary, das die Angabe 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
StringVertikale 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 %}<div class="span12 widget-span widget-type-cell unique_name-column-1-margin unique_name-column-1-background-color unique_name-column-1-vertical-alignment dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> </div><!--end widget-span -->

Ein dnd_column-Tag kann auch dnd_rowenthalten.

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:

ParameterTypeDescription
background_color
Dict

Ein Dictionary, das die Angabe einer Hintergrundfarbe unterstützt.

background_image
Dict

Ein Dictionary, das die Angabe eines Hintergrundbildes unterstützt.

background_linear_gradient
Dict

Ein Dictionary, das die Angabe eines linearen Farbverlaufshintergrundes unterstützt.

margin
Dict

Ein Dictionary, das die Angabe von Werten für den Rand 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
Integer

Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt.

padding
Dict

Ein Dictionary, das die Angabe 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
StringVertikale 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 %}<div class="row-fluid-wrapper row-depth-1 row-number-1 main-row-0-padding main-row-0-background-color main-row-0-margin"> <div class="row-fluid "> </div> </div>

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:

Use this table to describe parameters / fields
ParameterTypeDescription
path
Erforderlich
String

Der Pfad zu einem Modul.

horizontal_alignment
String

Horizontale Positionierung, unterstützt:

LEFT, CENTER, RIGHT

offset
Integer

Der Abstand von 0 im 12-Spalten-Raster.

width
Integer

Die Anzahl der Spalten, die das 12-Spalten-Raster belegen.

flexbox_positioning
Veraltet
String

Veraltet, nicht verwenden. Verwenden Sie stattdessen horizontal_alignment in Verbindung mit der 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 %}<div class="span8 widget-span widget-type-custom_widget" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_main-module-1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module" > <span id="hs_cos_wrapper_module-1_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h1>Hello, world!</h1> </span> </div> </div>

Hintergrund

Es gibt mehrere Möglichkeiten, Hintergründe für Drag-&-Drop-Elemente in Spalten, Abschnitten und Zeilen festzulegen: background_image, background_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 Parameter background_linear_gradient können Sie einen Standardfarbverlauf festlegen. Der Parameter erwartet ein Dictionary. Derzeit werden nur zwei Farbstopps unterstützt.

ParameterTypeDescription
direction
String

Die Richtung des Farbverlaufs.

  • to bottom
  • to top
  • to left
  • to right
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:

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

Use this table to describe parameters / fields
SchlüsselTypeDescription
backgroundPosition
String

Die 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
backgroundSize
String

Die CSS-Eigenschaft für die Hintergrundgröße, die für das Bild verwendet wird.
Unterstützte Werte sind:

  • cover
  • contain
  • auto
imageUrl
String

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

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.