HubL Reference

Table of contents
Close

Drag and Drop Area HubL Tags

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. 
This functionality is available for accounts with the CMS, Marketing Hub Professional, or Marketing Hub Enterprise.

Drag and drop areas are based off of 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: CMS-Theme-Boilerplate. Your stylesheet can be added to the template using {{ require_css() }}.

Drag-and-drop Area dnd_area

A drag-and-drop area is the 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 name Type Required Description
label string no Used in the editor to label the area in the sidebar
class string no A class added to the wrapping div of a dnd_area

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

Section dnd_section

A 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 name Type Required Description
background_color
dict no A dict which supports specifying a background color
background_image dict no A dict which supports specifying a background image
background_linear_gradient dict no A dict which supports specifying a linear gradient background
max_width integer no A pixel value which sets a content max-width on a wrapping dic
full_width boolean no A boolean which determines if the section is intended to be full width or constrained  by an inner container.
margin dict no A dict which supports specifying margin values
padding dict no A dict which supports specifying padding values
vertical_alignment
string no Vertical alignment of child content. Options: TOP, MIDDLE, BOTTOM

Note: background_color and 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 %}

<div class="row-fluid-wrapper row-depth-1 row-number-1 main-row-0-padding main-row-0-background-image main-row-0-margin">
  <div class="row-fluid ">
  </div>
</div>

Row dnd_row

A 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 name Type Required Description
background_color
dict no A dict which supports specifying a background color
background_image dict no A dict which supports specifying a background image
background_linear_gradient dict no A dict which supports specifying a linear gradient background
margin dict no A dict which supports specifying margin values
padding dict no A dict which supports specifying padding values
vertical_alignment string no Vertical alignment of child content. Options: TOP, MIDDLE, BOTTOM

Note: background_color and 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 %}

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

Column dnd_column

A 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 Name Type Required Description
width integer no The number of columns occupying the 12 column grid
offset integer no The offset from 0 in the 12 column grid
background_color color no A dict which supports specifying a background color
background_image dict no A dict which supports specifying a background image
background_linear_gradient dict no A dict which supports specifying a linear gradient background
margin dict no A dict which supports specifying margin values

Note: background_color and 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 %}

<div
  class="span12 widget-span widget-type-cell cell_1553090755441-margin cell_1553090755441-background-color"
  style=""
  data-widget-type="cell"
  data-x="0"
  data-w="12">

</div>

Module dnd_module

A drag-and-drop module is a module wrapped within a div that 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.

Parameter name Type Required Description
width integer no The number of columns occupying the 12 column grid
offset integer no The offset from 0 in the 12 column grid
path string yes The path to a module
flexbox_positioning string no 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 no LEFT, CENTER, RIGHT

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

<div class="span8 widget-span widget-type-custom_widget main-module-4-flexbox-positioning" 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>