Enabling drag and drop in the global content editor
a week ago - last edited a week ago
Good news! We recently added drag and drop editing to global content, making it easier than ever to customize the headers and footers of your website.
Similar to drag and drop editing in landing pages and website pages, you'll need to enable drag and drop in the code of the template, which requires some web development knowledge. For more information about that, check out our developer resources here.
Luckily, if you're using one of HubSpot's default themes, we've already done the work for you. As of today, the "Martech" HubSpot theme now comes with fully drag and drop editable footers. Over the next few weeks, we'll be adding drag and drop to the rest of HubSpot's default themes as well.
For now, you won't be able to change the layout inside the header area of a default theme, but with drag and drop areas above and below the header, it's easy to add banners or messages that you want front and center for your website visitors.
How to enable drag and drop global content editing in HubSpot default themes
When you edit the global content of a HubSpot default theme, you'll see a module in your sidebar called "Drag and drop". When you click on the "drag and drop" module, you'll see a toggle that enables drag and drop editing for your footer.
When you toggle drag and drop to "On", you'll see that your footer reverts to its default state. That means that any content you’ve changed or added since you started with your theme will go back to the original content that came with the theme. Unfortunately, you’ll need to re-add your content (like text, links, and images) back to your footer.
However, you can always toggle the “drag and drop” toggle back to “off” to get your content back. Switching back and forth will make it easier to update the drag and drop version of your footer with your website’s footer content.
Frequently asked questions
How do I know if I’m using a HubSpot default theme?
All of the HubSpot default themes are available in the “HubSpot Themes” section in the screen that appears when you click to create a new page. If you’re using one of the themes that appears there, you’re using a HubSpot default theme and you’ll just need to toggle drag and drop editing on in the global content editor to get started.
What if I’m not using a HubSpot default theme, but I still want drag and drop editing for my global content?
You’ll need to have a developer add some code to your templates that enables drag and drop editing in your global content. To add drag and drop to your global partials that aren't part of a HubSpot default theme, you can follow the same implementation of drag and drop areas as you would for coded templates.
What is happening when I toggle drag and drop on in my HubSpot default theme?
The template switches your existing footer with a new footer that’s enabled for drag and drop. That’s why you’ll notice that any content you’ve added to your footer is reverted to the content that originally came with your theme. Because of that, you’ll need to re-add your content to the drag and drop-enabled version of your footer.
If I turn on drag and drop editing, can I ever go back?
Yes! If you turn on drag and drop, then turn it off, you’ll see your previous content come right back. You can continue turning the toggle on and off to switch back and forth. It’s a good way to fill in your drag and drop-enabled footer and add your footer content back in.
If a lot of time passes or you make lots of changes and you want to go back, you can use your revisions tool to go back to a previous version as well.
If I turn on drag and drop, will my website show the HubSpot theme default content?
Nothing will change on your website until you click the “Publish” button in the top right corner of the global content editor. That way, you can safely change your footer, then hit publish when you’re ready for the world to see your changes.
Why can’t I drag and drop things inside my header?
The menu and logo in your header are coded so that they are responsive on mobile. Allowing additional modules to your header with drag and drop runs the risk of breaking that responsiveness on mobile devices. Some developers may prefer not to make a header support drag and drop, for the sake of better controlling the experience of editing the header.
You can, however, use drag and drop editing above and below your header.
Do I have to switch my footer to drag and drop?
No. Switching to drag and drop is completely optional. If you like the layout of your footer, you can simply leave it static.