CMS Developer Tools

Table of contents
Close

Creating a drag and drop area [BETA]

⚠️ This is a beta pre-release not intended for mission-critical usage. During the beta period expect lots of changes to syntax and capabilities. ⚠️

Drag and drop areas allow developers to create sections of pages that support layout, stylistic and content changes directly within the content editors. This allows developers to create few templates with global structure, that support content creators making a multitude of pages with various purposes and layouts, without ever fumbling with code or requiring new templates for small layout changes. 

dnd_editor

Developers can specify empty drop zones for drag and drop areas, where content creators build their own page content and layout, or, developers can pre-populate drag and drop areas with various modules, layouts, styles and content to act as a starting point for content creators to work with.

This tutorial will take you through setting up a simple drag and drop area.

ℹ️ For more developer resources on drag and drop areas, see the boilerplate for best practices on implementation as well as the drag and drop area HubL tag reference documentation. ℹ️

Create a new HTML template partial

Create a new html template partial to house the HubL and HTML which will make up your drag and drop section. Your drag and drop area partial can be included in other templates using the include HubL tag. 

Create a drag and drop area

A dnd_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. 

This tag on it's own will generate a drop zone for content creators to drag modules into within the content creator. 


{% dnd_area "body_dnd_area" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}

Create a section with a module

A dnd_section is a top-level row, and can only be a direct child of a dnd_area. Sections support a variety of parameters that control default values for stylistic controls content creators have for sections within the content creators.

Let's set a background image, and set a centered vertical alignment and 1000px max-width for child content. For a full list of supported parameters on the drag and drop HubL tags, see the drag and drop area HubL tag reference documentation. 

To prepopulate the section with content, we can use the dnd_module tag to include a module by referencing its path. In this exmample, we are referncing a default HubSpot module, but you can additionally include modules you have built, specifying their path within your Design Tools file tree.

To specify a default value for our dnd_module, we can use the module_attribute tag.


{% dnd_area "body_dnd_area" %}
    {% dnd_section 
        background_image = {
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
          },
          max_width=1000,
          vertical_alignment='MIDDLE'
    %}
        {% dnd_module path='@hubspot/rich_text' %}
            {% module_attribute "label" %}Rich text{% end_module_attribute %}
            {% module_attribute "html"%}
                <h1>This is your main headline.</h1>
                <p>Use this space to tell everyone about what you have to offer.</p>
            {% end_module_attribute %}
        {% end_dnd_module %}
    {% end_dnd_section %}
{% end_dnd_area %}

Now, we can see our drag and drop area contains a module content creators can edit within the content editor. We can also see how setting a max_width on the dnd_section is affecting our content. 

dnd_rich_text

Include multiple modules

To include more than one module, we can use multiple dnd_module tags. By setting the offset and width parameters, which are based off of a 12 column grid, we can place an image module next to our rich text module. 


{% dnd_area "body_dnd_area" %}
    {% dnd_section 
        background_image={
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
        },
        max_width=1000,
        vertical_alignment='MIDDLE'
    %}
        {% dnd_module path='@hubspot/rich_text', width=8, offset=0 %}
            {% module_attribute "label" %}Rich text{% end_module_attribute %}
            {% module_attribute "html"%}
            	<h1>This is your main headline.</h1>
            	<p>Use this space to tell everyone about what you have to offer.</p>
            {% end_module_attribute %}
        {% end_dnd_module %}
        {% dnd_module path='@hubspot/linked_image', width=4, offset=8 %}
            {% module_attribute "label" %}Image{% end_module_attribute %}
            {% module_attribute "img" is_json=True %}
                {
                    "src": "https://www.dragndrop.com/placeholder-image.jpg",
                    "alt": "Stock placeholder image"
                }
            {% end_module_attribute %}
        {% end_dnd_module %}
    {% end_dnd_section %}
{% end_dnd_area %}

Now, we also have an editable image module, as well as a drag handle, allowing content creators to change the width and offset of the modules. We can also see how setting a vertical_alignment on the dnd_section is vertically centering our content. 

dnd_rich_image

Incorporate columns and rows

To make our drag and drop area more complex, we can incorporate rows and columns using the dnd_row and dnd_column tags. Rows and columns act similarly to sections in the content editor, where content creators can drag them around, as well as clone, delete and style the rows and columns. 


{% dnd_area "body_dnd_area" %}
    {% dnd_section 
        background_image={
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
        },
        max_width=1000,
        vertical_alignment='MIDDLE'
    %}
        {% dnd_module path='@hubspot/linked_image', width=6  %}
            {% module_attribute "label" %}Image{% end_module_attribute %}
            {% module_attribute "img" is_json=True %}
                {
                    "src": "https://www.dragndrop.com/placeholder-image.jpg",
                    "alt": "Stock placeholder image"
                }
            {% end_module_attribute %}
        {% end_dnd_module %}
        {% dnd_column width=6, offset=6 %}
            {% dnd_row 
                padding={
                    'bottom': 15
                } 
            %}
                {% dnd_module path='@hubspot/rich_text' %}
                    {% module_attribute "label" %}Rich text{% end_module_attribute %}
                    {% module_attribute "html"%}
                        <h1>This is your main headline.</h1>
                        <p>Use this space to tell everyone about what you have to offer.</p>
                    {% end_module_attribute %}
                {% end_dnd_module %}
            {% end_dnd_row %}
            {% dnd_row %}
                {% dnd_module path='@hubspot/form' %}
                    {% module_attribute "label"%}Form{% end_module_attribute %}
                {% end_dnd_module %}
            {% end_dnd_row %}
        {% end_dnd_column %}
    {% end_dnd_section %}
{% end_dnd_area %}

Now, our content creators will have further stylistic and layout control over specific rows and columns, in addition to modules and sections. 

dnd_area_full

Set generic drag and drop component styles

The various components of drag and drop areas, sections, columns, rows and modules all have classes which can be styled using CSS. The editable styles and options for these components can be set using CSS rather than HubL. For example, default padding can be set on dnd_sections with the CSS:


.dnd-section {
	padding: 80px 20px;
}

The generic CSS selectors for the drag and drop area components are .dnd-section, .dnd-column, .dnd-row and .dnd-module.

For more developer resources on drag and drop areas, see the boilerplate for best practices on implementation as well as the drag and drop area HubL tag reference documentation.