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.
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.
Please note: modifying a section will update it across all instances of that section, except for existing pages that use a template that references the section. Pages previously created with a template that had an included section in it will instead need to be manually updated to use the new version of the section. This prevents accidentally making breaking changes. To update a section to the latest version, a content creator can navigate to the page editor, add the new section to the page, then delete the old version.
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
Please note: to make a section available for multiple themes, you'll need to add the section template file to each theme. Similarly, sections created by content creators in the content editor will only be available within that theme.
Below, learn how to create section template files and then reference them in other template files.
Sets the template type used to determine where the template can be used and what data is available to it.
Used in the page editor to provide a human readable name of the section.
Further description of the section beyond what you can do with a label. Displays in the page editor. 255 characters maximum.
Path 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:
In the above example, note the context argument in the
include_dnd_partial tag. This allows you to pass instance specific variables from the page template to the section, overriding the default values in the section file. See section context for more information.
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
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.
Notice everywhere context variables are used, there is an
|| OR filter to provide fallback default content if none is provided. For example, in the button module, if
context.buttonText has a value, the page will use it. Otherwise, the text is set to
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.
Please note: section classes are only supported in section templates.
Content creators can't edit, add, or remove classes. They can only be "removed" by recreating a section manually in the editor.
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:
- 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.
- 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.
Thank you for your feedback, it means a lot to us.