Drag and Drop Area HubL Tags

Last updated:

Drag and drop areas allow developers to create sections of pages that support layout, stylistic and content changes directly within the content editors. See the creating a drag and drop area tutorial for an introduction to setting up drag and drop areas. 

Drag and drop areas are based on a 12 column responsive grid. Drag and drop tags render markup with class names designating columns and rows.  You are responsible for adding a stylesheet to target those class names. An example of layout styles you could implement can be found in the HubSpot CMS Boilerplate. Your stylesheet can be added to the template using {{ require_css() }}.

Drag-and-drop Area dnd_area

A drag-and-drop area is a container that makes a portion of the web page editable in terms of its structure, design, and content. The body of a {% dnd_area %} tag supplies the default content for the drag-and-drop area.

Possible children:

dnd_section

Parameter Type Description Default
class
String

A class added to the wrapping div of a dnd_area

label
String

Used in the editor to label the area in the sidebar.

{% dnd_area "unique_name", class="main" %}

{% end_dnd_area %}

Drag-and-drop Section dnd_section

A {% dnd_section %} is a top-level row, and can only be a direct child of a drag-and-drop area. This HubL tag must be nested within a {% dnd_area %} tag.

Possible children:

- dnd_column
- dnd_module

Parameter Type Description Default
background_color
Dict

A dict which supports specifying a background color

background_image
Dict

A dict which supports specifying a background image

background_linear_gradient
Dict

A dict which supports specifying a linear gradient background

full_width
Boolean

A boolean which determines if the section is intended to be full width or constrained by an inner container

margin
Dict

A dict which supports specifying margin values

max_width
Integer

A pixel value which sets a content max-width on a wrapping dic

padding
Dict

A dict which supports specifying padding values

vertical_alignment
String

Vertical alignment of child content. Options: TOP, MIDDLE, BOTTOM

Note: background_color, background_image, and background_linear_gradient are mutually exclusive.

{% dnd_section
  background_image={
    'backgroundPosition': 'MIDDLE_CENTER',
    'backgroundSize': 'cover',
    'imageUrl': 'https://example.com/path/to/image.jpg'
  },
  margin={
    'top': 20,
    'bottom': 200
  },
  padding={
    'top': 20,
    'bottom': 200,
    'left': 20,
    'right': 20
  },
  max_width=1200,
  vertical_alignment='MIDDLE'
%}

{% end_dnd_section %}

Drag-and-drop Column dnd_column

A {% dnd_column %} is a vertical structural building block that occupies one or more layout columns defined by its parent row. This HubL tag must be nested within a {% dnd_area %} tag.

Possible children:

- dnd_row

Parameter Type Description Default
background_color
Dict

A dict which supports specifying a background color

background_image
Dict

A dict which supports specifying a background image

background_linear_gradient
Dict

A dict which supports specifying a linear gradient background

margin
Dict

A dict which supports specifying margin values

padding
Dict

A dict which supports specifying padding values

vertical_alignment
String

Vertical alignment of child content. Options: TOP, MIDDLE, BOTTOM

Note: background_color, background_image, and background_linear_gradient are mutually exclusive.

{% dnd_column
  offset=0,
  width=12,
  background_color={
    r: 255,
    b: 0,
    g: 0,
    a: 1
  },
  margin={
    'top': 20,
    'bottom': 200
  },
%}

{% end_dnd_column %}

Drag-and-drop Row dnd_row

A {% dnd_row %} is a horizontal structural building block that creates a nested 12-column layout grid in which columns and modules can be placed. This HubL tag must be nested within a {% dnd_area %} tag.

Possible children:

- dnd_column
- dnd_module

Parameter Type Description Default
background_color
Dict

A dict which supports specifying a background color

background_image
Dict

A dict which supports specifying a background image

background_linear_gradient
Dict

A dict which supports specifying a linear gradient background

margin
Dict

A dict which supports specifying margin values

padding
Dict

A dict which supports specifying padding values

vertical_alignment
String

Vertical alignment of child content. Options: TOP, MIDDLE, BOTTOM

Note: background_color, background_image, and background_linear_gradient are mutually exclusive.

{% 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 %}

Drag-and-drop Module dnd_module

A {% dnd_module %} is a module wrapped within a div where layout, styles and content can be added. The module is specified by referencing its path, which can either be a HubSpot default module (using the @hubspot/ namespace), or modules you have built, specifying their path within your Design Tools file tree. This HubL tag must be nested within a {% dnd_area %} tag.

Use this table to describe parameters / fields
Parameter Type Description Default
path
Required
String

The path to a module

flexbox_positioning
String

Flexbox position value for the module. Options: TOP_LEFT, TOP_CENTER, TOP_RIGHT, MIDDLE_LEFT, MIDDLE_CENTER, MIDDLE_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT

horizontal_alignment
String

LEFT, CENTER, RIGHT

offset
Integer

The offset from 0 in the 12 column grid

width
Integer

The number of columns occupying the 12 column grid

{% dnd_module
  path="@hubspot/rich_text",
  offset=0,
  width=8,
  flexbox_positioning="TOP_CENTER"
%}
  {% module_attribute "html" %}
    <h1>Hello, world!</h1>
  {% end_module_attribute %}
{% end_dnd_module %}