Drag and Drop Area HubL Tags
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.
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
| 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 %}<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>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 |
|---|---|---|
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 |
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 |
vertical_alignment
| String | Vertical alignment of child content. Options:
|
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 %}<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 -->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 |
|---|---|---|
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 |
padding
| Dict | A dict which supports specifying padding values in |
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 %}<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 -->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 |
|---|---|---|
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 |
padding
| Dict | A dict which supports specifying padding values in in |
vertical_alignment
| String | Vertical alignment of child content. Options:
|
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 %}<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>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.
| Parameter | Type | Description |
|---|---|---|
path
Required
| String | The path to a module |
horizontal_alignment
| String | Horizontal positioning, supports:
|
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
|
{% 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>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 expects a dict, denoting the RGBA values for the color you want.
{% dnd_section %}
{% dnd_column
background_color={
'r': 123,
'g': 123,
'b': 123,
'a': 1.0
},
%}
{% end_dnd_column %}
{% end_dnd_section %}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.
| Parameter | Type | Description |
|---|---|---|
direction
| String | The direction of the gradient.
|
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:
|
{% 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 %}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.
| Key | Type | Description |
|---|---|---|
backgroundPosition
| String | The background position of the image. Supports a string indicating vertical position followed by horizontal.
|
backgroundSize
| String | The CSS background size property used for the image.
|
imageUrl
| String | Absolute URL to the image. |
{% 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 %}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.