Working with dnd 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. 

In simpler words, you can change the structure of each page simply by dragging an element from the left bar containing the modules, then placing it in the desired point on the page. Depending on where you place it, a "zone" will automatically be created where the module you have chosen will be inserted; this "zone" can be a section or a column or, finally, a row that ... are all customizable

Comprehensive Hubspot documentation can be found here
a new approach