Skip to main content

Drag and drop areas allow developers to create sections of pages and global partials 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'll need to add 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() }}.

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.

Modules themselves cannot contain drag and drop areas. To provide content creators an interface for adding uniform content within a module, use repeatable fields and groups instead.

A dnd_area tag can contain the following parameters:

ParameterTypeDescription
classStringA class added to the wrapping div of a dnd_area
labelStringUsed in the editor to label the area in the sidebar.

dnd_area tags can also contain dnd_section tags.

A {% dnd_section %} is a top-level row, and must be nested within a {% dnd_area %} tag. Sections can also be defined as a template, and then included into a dnd_area, making them ideal for quickly scaffolding out a template.

A dnd_section tag can contain the following parameters:

ParameterTypeDescription
background_colorDictA dict which supports specifying a background color. Can also be provided as a string.
background_imageDictA dict which supports specifying a background image.
background_linear_gradientDictA dict which supports specifying a linear gradient background.
full_widthBooleanA boolean which determines if the section is intended to be full width or constrained by an inner container.
marginDictA dict which supports specifying margin values in cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, and %. When no unit of measure is provided, the default of px is applied.
max_widthIntegerA pixel value which sets a content max-width on a wrapping dict.
paddingDictA dict which supports specifying padding values in cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, and %. When no unit of measure is provided, the default of px is applied.
vertical_alignmentStringVertical alignment of child content. Available options include:
  • TOP
  • MIDDLE
  • BOTTOM

dnd_section tags can also contain the following tags:

  • dnd_column
  • dnd_module

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.

A dnd_column tag can contain the following parameters:

ParameterTypeDescription
background_colorDictA dict which supports specifying a background color.
background_imageDictA dict which supports specifying a background image.
background_linear_gradientDictA dict which supports specifying a linear gradient background.
marginDictA dict which supports specifying margin values in cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, and %. When no unit of measure is provided, the default of px is applied.
max_widthIntegerA pixel value which sets a content max-width on a wrapping dict.
paddingDictA dict which supports specifying padding values in cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, and %. When no unit of measure is provided, the default of px is applied.
vertical_alignmentStringVertical alignment of child content. Available options include:
  • TOP
  • MIDDLE
  • BOTTOM

A dnd_column tag can also contain 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.

A dnd_row tag can include the following parameters:

ParameterTypeDescription
background_colorDictA dict which supports specifying a background color.
background_imageDictA dict which supports specifying a background image.
background_linear_gradientDictA dict which supports specifying a linear gradient background.
marginDictA dict which supports specifying margin values in cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, and %. When no unit of measure is provided, the default of px is applied.
max_widthIntegerA pixel value which sets a content max-width on a wrapping dict.
paddingDictA dict which supports specifying padding values in cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, and %. When no unit of measure is provided, the default of px is applied.
vertical_alignmentStringVertical alignment of child content. Available options include:
  • TOP
  • MIDDLE
  • BOTTOM

A dnd_row can also contain the following tags:

  • dnd_column
  • 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 the design manager file tree.

This HubL tag must be nested within a {% dnd_area %} tag.

A dnd_module tag can contain the following parameters:

ParameterTypeDescription
pathRequiredStringThe path to a module.
horizontal_alignmentStringHorizontal positioning, supports:LEFT, CENTER, RIGHT
offsetIntegerThe offset from 0 in the 12 column grid.
widthIntegerThe number of columns occupying the 12 column grid.
flexbox_positioningDeprecatedStringDeprecated do not use. Instead, use horizontal_alignment in tandem with the row or section's vertical_alignment instead.
Flexbox position value for the module. Supported a string indicating vertical position followed by horizontal:
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT

There are a few ways to set backgrounds on column, section and row dnd elements, background_image, background_linear_gradient, and background_color.

The column, section, and row dnd tags support background colors. You can set the default background color for a drag and drop element using background_color. This parameter is a string based parameter and can include the following formats outlined in the example below.

The column, section and row dnd elements support background linear gradients. You can set a default gradient using the background_linear_gradient parameter. The parameter expects a dict. Currently only supports two color stops.

ParameterTypeDescription
directionStringThe direction of the gradient.
  • to bottom
  • to top
  • to left
  • to right
colorsarrayArray of color strings. Currently supports 2 values, the start and end. Values are provided as strings, and the following formats are supported:
  • RGB
  • RGBA
  • 3 char hex
  • 6 char hex
  • 8 char hex

The column, section and row dnd elements support background images. You can provide a default background image by using the background_image parameter which expects a dict.

KeyTypeDescription
backgroundPositionStringThe background position of the image. Supports a string indicating vertical position followed by horizontal.
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
backgroundSizeStringThe CSS background size property used for the image.
Supported values are:
  • cover
  • contain
  • auto
imageUrlStringAbsolute URL to the image.

When you are using style based parameters such as backgrounds, margins, or padding, the class names are automatically computed for your sections, columns, rows, and modules. The property values you have assigned are then added to those automatically created class names and the resulting CSS code is then placed before the closing </body> tag on the page in a <style> tag.