Creating well-designed web pages and email templates used to be restricted to experienced developers until HubSpot launched the drag and drop editor. The editor, first released in 2018, has had several iterations over the years, culminating with CMS Hub. Now both marketers and developers alike can build stunning pages and emails using it.

So, what exactly can (and can’t) you do with it? Check out our overview of the page and email drag and drop editor below.

Page Editor

When creating a web or landing page, the drag and drop editor gives you control over the design, content, and layout. It’s available in pages created with starter templates, HubSpot theme templates, or coded templates with drag and drop areas built-in.

How do you use it, though?

Each page is divided into sections with modules on the right-hand side. You’ll see the editor on the left-hand side, where you can click on standard modules like rich text, images, CTAs, and drag and move them over to the right-hand side. Then you can click the module and edit it. You can click and drag modules, entire sections, and rows to rearrange whole parts of your page.

Want to edit global content? You can. You’ll need a developer to enable it, but you can add, remove, and rearrange content within a global group using the editor once that’s done. Similarly, you can use smart content in custom modules on the page drag and drop editor. You’ll see this by hovering a module and clicking on the dropdown. This is also how you edit, style, clone, and delete modules with the page editor.

Limitations of the Page Editor

While the tool empowers marketers and developers to build great pages, there are some caveats. Fortunately, there are also some remedies. Take a look:

1. The editor currently allows only one responsive breakpoint. This breakpoint can only change the padding and margins of sections, columns, and default Hubspot modules and offer a Hide option. Because of this, you can’t change the padding on a section displayed on a tablet then change it again on mobile. As a workaround, a developer can create modules for entire sections which can control these things more finely – at the cost of not being able to drag-and-drop within those modules.
2. While the editor allows you to change the background color of a section, there’s no option for changing text colors within it. This means that, if you choose a dark background (or a light background, if your site is normally dark), all the text will be unreadable by default. In rich text modules, you can work around this using the editor’s inline style controls. Other modules will need to have equivalent custom modules with options to control the color theme created by a developer. 
3. Some functionality may require a combination of modules to work. If you wanted to create subpage navigation, you’d need a module for the main navigation and a module to allow users to add IDs to sections to be used for the link anchors.

Email Editor

If email is a key communication channel for your team, you’ll be thankful for different drag and drop editing capabilities. To use this editor, you’ll start by working off a template and then dragging and dropping the elements you need. The editor comes with various templates to help you get started, including event invites, welcome campaigns, sales emails, and more.

When using the editor, you’ll see your email on the right-hand side of your editing page and the tool, with modules, on the left-hand side. You’ll be able to edit things like the font, headings, colors, border, and spacing. Some additional great features to note:

• Every email built in the editor is clean and responsive!
• You can use the editor to convert any email to an automated one under “Actions” (Pro and Enterprise tiers only).
• Your recipients and send and schedule tools are combined into one screen to make scheduling your emails easy.
• You can use smart content with the drag and drop editor.

Limitations of the Email Editor

Like the page editor, the drag and drop email editor has some limitations to be aware of. Some do have workarounds, though. Here’s a taste:

1. If styles are added to a module in a style block, a warning message will be displayed in the email. This does NOT stop the email from being sent, and as long as custom classes are used, it will unlikely affect future updates to drag and drop emails.
2. The drag and drop editor will only allow you to design emails choosing a web-safe font from a pre-selected list HubSpot offers.
3. The default HubSpot image module does not remove side padding on mobile like other modules. If you need to remove it for mobile, create a custom module instead.
4. You cannot change gaps between columns. You can create a custom module to rectify this issue and use hs_padded class to change padding on mobile. Additionally, vertical alignment is not a setting. If columns need to be center or bottom aligned vertically, use a custom module!
5. You can’t delete or change the “View in Browser” text with the editor. You can hide it by setting its font size to 0 and the color to the same as the background color.

Wrapping Up

Even with a few limitations, the drag and drop editor is a simple way to design your web pages, landing pages, and emails. And, if you do run into trouble with it, you can always reach out to a seasoned developer or a HubSpot agency, like Lynton, for help! Just reach out to us here.