Drag and Drop Area HubL Tags

Last updated:
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 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 areas can't be used in blog listing, blog post, and email templates at this time.

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. Modules cannot contain drag and drop areas, if trying to provide content creators an interface for adding uniform content within a module, use repeatable fields and groups.

Possible children:

- dnd_section

ParameterTypeDescription 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

ParameterTypeDescription
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 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_width
Integer

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

padding
Dict

A 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_alignment
StringVertical 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': 32,
    'bottom': 32
  },
  padding={
    'top': '1em',
    'bottom': '1em',
    'left': '1em',
    'right': '1em'
  },
  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

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

padding
Dict

A 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_alignment
String

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

offset
Integer

The offset from 0 in the 12 column grid

width
Integer

The number of visual columns occupied in the 12 column grid

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

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

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

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

padding
Dict

A dict which supports specifying padding values in 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_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
ParameterTypeDescription
path
Required
String

The path to a module

horizontal_alignment
String

Horizontal positioning, supports:

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

flexbox_positioning
Deprecated
String

Deprecated do not use. It is best to 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

Have an old module which has a field name that matches one of the dnd_module parameters above? You can pass default values through a fields parameter, much like you would a field group.

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

Background

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

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. 

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

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
direction
String

The direction of the gradient.

  • to bottom
  • to top
  • to left
  • to right
colors
array

Array 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
HubL 
{% 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

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.

Use this table to describe parameters / fields
KeyTypeDescription
backgroundPosition
String

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

The CSS background size property used for the image.
Supported values are:

  • cover
  • contain
  • auto
imageUrl
String

Absolute URL to the image.
HubL 
{% 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 %}

How dnd style parameters translate to the page

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.