Specify a drag and drop area in a custom email template (BETA)
This functionality is in beta and requires your account to be ungated. By participating in this beta you agree to HubSpot's Developer Terms and Developer Beta Terms. Please note that this functionality is currently under development and is subject to change based on testing and feedback.
-
Marketing Hub
- Professional or Enterprise
-
Content Hub
- Professional or Enterprise
Drag and drop areas allow developers to create sections of custom email templates that support layout, stylistic and content changes directly within the email editor. This allows developers to create fewer email templates with global structure, that support content creators making a multitude of pages with various purposes and layouts.
Create a new html template that will include the HubL and HTML code which will make up your drag and drop section:
- In your HubSpot account, navigate to Marketing > Files and Templates > Design tools.
- In the left sidebar, create a new file by clicking File > New file.
- In the dialog box, click the What would you like to build today? dropdown menu and select HTML + HubL.
- Click Next.
- Click the Template type dropdown menu then select Email.
- Enter a name for the template.
- To update the template's location, click Change under File location, then select a new folder where the template will be created.
- Click Create.
Review the following required and optional tags you can include in the <head>
section of your email template for styling and compatibility purposes:
{{ dnd_area_stylesheet }}
This tag will provide the following:
- Adds associated media queries
- Fixes known styling issues in Outlook
- Resets margins and paddings
- Enables anti-aliasing
- Adds some CSS
To ensure that your template renders consistently across all major email clients, you can also include the following optional HubL tags to your template:
{{ email_header_includes }}
This tag will inject CSS into your template to help render styling consistently, fix common styling issues, and add metadata to the email's HTML. When parsing this HubL tag, the following content will be added within the <head> of the email's HTML:
Parameter | Description |
---|---|
<meta name="x-apple-disable-message-reformatting"> |
Prevent iOS 11 from automatically scaling emails |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
Informs browsers and email clients how you expect them to interpret different characters. |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
This tag enables CSS3 and media queries on Windows Phone 7.5, informs Internet Explorer to render content in the highest mode possible, and allows the browser to choose which version of Internet Explorer that the email should be rendered with. |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
Sets the viewable area to the width of the device screen, which helps make your email responsive. |
{{ reset_css_stylesheet }}
Including this tag will fix a number of styling issues in Outlook, and will also reset your email's margins and paddings.
{{ outlook_background_snippet }}
This tag will set the background image or color in Outlook, providing that you've specified an associated background CSS rule.
After you add the {{ dnd_area_stylesheet }}
HubL tag and any other optional tags to the <head>
of your template, you can configure a dnd_area
in the template body.
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.
The drag-and-drop area can be enclosed within either a <div>
or a <table>
. One constraint of the drag-and-drop area is that the minimum width is set to 624 pixels, and this value cannot be overridden.
This tag on its own will generate a drop zone for content creators to drag modules into within the email editor.
The following code would specify an empty drag and drop area:
You can also customize your drag and drop area to specify default sections and columns by using the dnd_section
and dnd_column
fields.
For example, the following HubL code would specify a drag and drop area with 3 columns:
dnd_row
HubL tag is not currently supported in email templates.
To pre-populate a section with content, you can use the dnd_module
tag to include a module by referencing its path. The module must be added within a section and column to pre-populate the drag-and-drop area with content.
In the example below, a default HubSpot module is referenced, but you can also include modules you've built, by specifying their path within your Design Tools file tree.
To specify a default value for the dnd_module
, you can use the module_attribute
tag.
Each drag and drop HubL tag (e.g., dnd_area
, dnd_section
, dnd_column
etc.) includes different parameters that you can use to provide default styling and specify other behavior, such as the label that will appear in the email editor sidebar.
To learn more about the parameters available for each tag, check out the links below for each tag:
Thank you for your feedback, it means a lot to us.