Skip to main content

The outermost container in a drag and drop area is called a section. Sections can't be nested within any other dnd element, but can contain modules, rows, and columns. In the page editor, content creators can add sections to the page, then modify and style them as needed. Content creators can also create and save sections to use on other pages within the same theme, making content creation more efficient.

In this article, learn more about sections and how to use them in the page editor. If you're developing a theme, check out the guide on hiding modules and sections from the page editor to create a more streamlined content creation experience.

page editor add reusable section UI

Sections can be created either in the content editor by a content creator or built by a developer into a dnd_area, with the dnd_section tag.

The styling options available in the editor are available when coding a template as well. For example:

For full documentation of all available drag and drop element parameters and usage examples, learn more about dnd_area tags.

You can use sections to quickly scaffold out templates that are easy to read. Since you are only specifying in context where the template specific instances are different, you can still go back and modify that section template.

Within a theme, you can include preconfigured sections that content creators can add to pages using that theme within the page editor. These reusable sections are built as section template files and are coded within the same syntax that you would use inside a dnd_area.

Below, learn how to create section template files and then reference them in other template files.

Section templates are denoted with templateType: section in their template annotation.

ParameterTypeDescriptionValue
templateTypeStringSets the template type used to determine where the template can be used and what data is available to it.section
labelStringUsed in the page editor to provide a human readable name of the section.
descriptionStringFurther description of the section beyond what you can do with a label. Displays in the page editor. 255 characters maximum.
screenshotPathString/pathPath to a screenshot of the section. This is used to give content creators an easy visual reference for what the section looks like.

A section template must begin and end with a dnd_section tag. Only one dnd_section can exist within a section template. Inside of that section, you can place modules, rows and columns, following the same dnd_area rules that apply when adding a dnd_area to a page template. The exception is that you are defining the content for just a section and its child drag and drop elements.

After creating a section, you can reference it within a dnd_area by using a include_dnd_partial tag. This tag provides the path pointing to the section file, as shown below:

You can use section context variables to override section level and module level default values. Section context variables are defined by you and are not associated directly with the modules and their fields.

In your page template you can set these context variables through the context parameter in the include_dnd_partial tag.

Any variables you add to your context parameter will become available to reference within your section template. The following example shows how to set the image URL and rich text area and button content set in context if it exists.

In section templates, you can add classes to the section wrapper using the class parameter. This will add the class you specify to the class field of the dnd section's html element. It's recommended wherever possible that you use styling controls built into sections to enable content creators to be able to modify them.

The easiest way to preview your section while developing, is to use the Design Manager. Open a template containing a dnd_area which calls your section template using a include_dnd_partial tag. In the top right corner click preview. This way you can keep updating your section and see your changes reflected right away. This is much more efficient than having to create a new page for each change you make.

In the page editor, you can copy the HubL markup for a section to reuse the code as needed. This can be helpful when wanting to recreate drag and drop sections in a coded file.

To copy a section's HubL markup:

  • Navigate to your content:
    • Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
    • Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
  • Hover over a page and click Edit.
  • In the page editor, add the following parameter to the URL, then press Enter: ?developerMode=true.
  • With the page reloaded, you'll now be in developer mode. You can exit developer mode any time by clicking Exit developer mode in the upper right.

exit-developer-mode0

  • Hover over the section you want to copy, then click the down arrow icon. Select Copy as HubL. The HubL markup will then be copied to your clipboard.

copy-section-hubl-menu