Drag and drop capability on landing pages

Hello,

Similar to the functionality for eDM templates, it would be great to have the option to drag and drop modules on landing pages. At the moment, if you want to delete or add to an existing template, you have to build from scratch or clone and even then, doesn't allow for flexibility for a one-off page. I'd like to use the template as a starting point and build the page up from there without having to build out too many templates. 

20 Replies
New Contributor

I'd wish for that.

Regular Contributor

Yes this is a great idea. The drag and drop editor on email is already great addition. 

 

If this were extended to landing pages it would be revolutionary. The design manager is fairly cumbersome to use especially when it is attached to stylesheets etc. It's hard to build beautiful clean pages without prior knowledge. 

Status updated to: In Beta
HubSpot Employee

There are multiple things that are all related here.

First - what is possible today:
Landing Pages fully support Flexible columns. Flexible columns are a verticle space you can drop modules into, re-order them, etc from the page editor screen.
How to add them in Drag n Drop Templates

How to add flexible columns in coded templates

 

There is an active developer Beta for coded Drag n Drop areas in Pages/landing pages.This is not to be confused with drag and drop templates. It is a new functionality that enables marketers to drag and drop modules along 2 axis as well as some other customization options.

If you are a developer and wish to take part in the beta please join the developer slack and read the notes in #drag-n-drop-pages. This is an open beta, you do not need to request access. The slack however will have the latest up-to-date information in the event any functionality changes.

A developer focused talk was delivered during the HubSpot Community Developer Meetup this year during Inbound week. This may help you understand some concepts.

 

Again this is a beta, functionality and is subject to change at any time, see disclaimer in the link to the talk above. Thank you for participating, please let us know any feedback you have in the slack channel.

New Contributor

Email drag and drop editor has been an awesome addition and big productivity booster - nice job!  Would love to see the same capability for building landing pages.

Occasional Contributor

I stand behind your wish and miss this dearly in today's hubspot solution. Email drag and drop now works very well - but the landing pages have a way to go.

New Contributor

Hello,

 

I love to learn when would the drag and drop functionality for landing pages be available for marketing enterprise users

 

Thanks

Status updated to: Delivered
HubSpot Employee

Drag and Drop Areas 
The dnd_area syntax that supports the new drag-and-drop page editing experience is out of beta and available to all accounts! Drag and drop areas represent the future of how marketer-friendly websites are built on the HubSpot CMS, while allowing developers to utilize coded files, and the tools and technologies they prefer. To get started building using drag and drop areas, follow the getting started guide. You can can check out the #hs-cms-boilerplate templates, which utilize this syntaxAs always, please send any feedback along in #drag-n-drop-pages In our Developer Slack.
https://designers.hubspot.com/docs/tutorials/drag-and-drop-areas
https://designers.hubspot.com/docs/hubl/hubl-supported-tags/dnd-areas

To be clear though need to be added through code. A template needs to be built with a drag and drop area inside of it.

Flex columns and drag and drop areas are different concepts, though similar. Flexible columns offer the ability to place and re-arrange modules in a vertical manner. Drag and drop areas similarly allow placing and re-arranging modules but they are not limited to one direction, you can place modules side by side, contain them in sections and more.

Occasional Contributor

@jmclaren 
thanks for the information.
Are dnd_areas supposed to work in blog-post templates?
Because they do not for me. It works in a website template, but doesn't in a blog template where I would need it.

If I add a empty dnd_area to a blog post template and try to save it, I get a error message in the error console (see screenshot) and the template is not saved.

dnd_area_error.png

Thanks for the information!

HubSpot Employee

At this time dnd_area and flexible columns as you suspected, do not work in blog posts.

I do not have any announcements at this time on support for those features in blog posts, but we hear you, I will relay your feedback.

Regular Contributor

The beta version is really disapointing. We should be able to drag and drop modules, without being restricted to the template we chose and the columns that it has. I would love to be able to customize my landing pages just like I do with my emails!

New Contributor

The irony being that Hubspot USED to have this capability for everything (including LPs). They simply need to bring it back and stop selling out to agencies. 

Regular Contributor

@jmclaren I wouldn't say this idea has been delivered. The latest update isn't at all what I expected. I would love to customize my landing pages like I do with my emails, without being restricted to columns! It's really frustrating to have to switch templates or create new ones just to be able to do a simple thing such as putting a form next to a text bloc. 

HubSpot Employee

@Katia, if you don't mind, could you elaborate more on what you are wanting to see?

In the mean time let me make sure we're on the same page by showing you the experience I've been talking about.

With Themes, global content, and drag and drop areas, you can:

The interface is very similar to the one found in the drag and drop email builder. Drag modules from the left into the layout you want, adjust styling as you see fit, and publish.

Like the drag and drop email builder you can choose from pre-built HubSpot themes or have a developer add these features to your site.

Create website content using a theme
For Developers: Getting started with themes

 

You mentioned frustration about needing to switch templates or create new ones. It sounds like you have a website that was built for you before these features existed. You might like the existing appearance of your site and not want a redesign. These features can be added individually as desired to existing websites by developers.

 

For the most flexibility and customizability through the page editor, the theme needs to be built with it in mind.  Many of the features don't make sense to retroactively add to existing websites. For example - if your site was built custom for your company, the colors, typography etc, should already be correct to your brand. So adding controls for those settings may not be valuable. To make existing templates more flexible developers can clone an existing template and change flexible columns to drag and drop areas. 

Regular Contributor

@jmclarenThank you for the explanation! Now I know that the problem comes from the templates that were made for us, not from HubSpot (the themes that were made still make sense however). I don't need to redesign anything, but I would like our existing templates to be more flexible. As I said, If a template is designed with a form on top and text bloc on the bottom, I can't put them side to side, even with the drag and drop feature. Like you said, I would just need to change flexible columns on my templates to drag and drop areas, how can I do that?

HubSpot Employee

Hi Katia, i wrote up a guide for this. Its aimed at developers since the changes need to be made at the template level. The specific part that you want for being able to rearrange the form and text block is drag and drop areas. Once drag and drop areas have been added you can edit your page and drag and drop the modules as you see fit.

 

https://designers.hubspot.com/tutorials/add-theme-features-to-existing-sites

Regular Contributor

@jmclaren The changes worked! It's awesome, thank you!

Regular Contributor

Thanks @jmclaren for publishing the article on how to add theme capabilities. It's the best explanation I've seen of the new tools.

 

I am not a developer but thought I would try out the new drag and drop widget. I spent the last hour trying to create a simple drag-and-drop template with just our global header, a dnd_area and our global footer. I got it to work, sort of, but there is still unwanted margin between the bottom of my global header and the dnd module.

 

I have to say that I am getting frustrated with the Hubspot CMS. I was hoping that the new version would make it possible for a marketer to quickly design simple pages without hiring a developer. That doesn't appear to be the case, unless you are starting from scratch with one of the handful of Hubspot's premade themes.

 

Our site was built a couple of years ago, at significant expense for our small business, using mostly the drag-and drop tools in the Design Manager. I've never been very comfortable (or successful) cloning and modifying our templates, and it's made it difficult to create one-off pages and landing pages. I'd like to be able to A/B test pages and quickly build new pages, but that involves hiring a developer, so it rarely happens. I feel locked into our current design.

 

I guess I was hoping that the new CMS would be simpler for the non-coder. I've used many of the visual builders out there--Squarspace, Wix, Webflow, and Wordpress theme builders like Divi--and they all seem much more intuitive.

 

Why, for instance, do I have to clone a template to HTML and manually change a flexible column module to a drag-and-drop module? It seems that there should be an easier way for those of us whose sites were built on the legacy CMS to use the new features.

HubSpot Employee

Hey @Katia, so glad to hear it, thank you for responding back!

---

Hi there @ericthomas,

 

Without hiring a developer or learning to implement it yourself, you will need to either use one of the premade themes, or purchase a theme from the asset marketplace (coming soon). The development cost for cloning your templates and replacing flexible columns with dnd_areas should be much less expensive than a website redesign. If interested in that I would suggest either going to the company that built your existing site, or check out our list of agencies that do development. What you described with placing your header, above a dnd_area, and adding a footer - Hiring a developer to just adjust the styles that were causing it to look strange, would also likely be much less expensive than a redesign.

To your comment about other visual builders. Visual builders come at the cost of power. The more you make the visual builder powerful, the more restricted the platform tends to become. While not every company needs advanced functionality, developers can add it. If you transfer all of the power to the visual builder, you hinder the ability for the developer to add those advanced capabilities. The way we've approached CMS Hub is different from the other platforms. We focused on striking the balance between content creator freedom of design/creation, and the developer's ability to do what they do best. Giving the best of both worlds. What we have now is just the start. We plan to keep expanding the abilities that content creators have, and it won't come at the cost of developer power.

 

Before I joined HubSpot ~10 months ago I was a developer at an agency. My job was to make websites using whatever platform fit the customer best, almost always it meant a visual builder was necessary. I've built with almost all of the tools you mentioned. I know my words will seem biased, being a HubSpotter - but I truly believe CMS Hub strikes that balance better than any other platform right now. We aim to keep that balance, while adding more and more flexibility and control for both content creators and developers. Also remember, while your templates weren't built with these features in mind, you don't need to update CMS Hub. It's already up-to-date and the features are there, you just need templates with those features added.

Regarding having to clone the template to HTML,  we are actively thinking about ways to make it easier for companies with older existing sites to use the new features. I don't have anything specific to announce at this time. Appreciate your patience as we continuously iterate to deliver the best experience we can.

Occasional Contributor

Hi all - want to jump in here as well as definitely experiencing issues due to this change.

"we are actively thinking about ways to make it easier for companies with older existing sites to use the new features."

I really wish HS gave more thought here into companies with legacy setups. For example, we recently re-launched our website and wanted to update our TYPs and LPs to match - all built through HS - as we've done several times in the past. Due to these changes and updated drag and drop, I'm now stuck in a place where our old thank you pages are using the flexible column setup and our new templates - matching our new theme we paid for - are using dnd-areas.

 

This means basically we need to rebuild 200+ pages to get them to match our new site theme, as none of our older content can switch into dnd-area templates. Adding to the issue is without hiring a dev, there's no way to have us save "pre-sets" so we could quickly save module layouts we use frequently.

To be honest, I would have rather gotten templates that simply worked on our content rather than forced into this dnd-area setup. What should be a huge help and benefit overall is definitely a major issue for us now because of this, and I would love some sort of update. As certainly there will be others facing similar experiences, and it's put us in a bit of a bind.

HubSpot Employee

Hi JSG3,

To be clear, you are not required to upgrade templates to use dnd_areas. Flexible columns will continue to work and there's no plan to sunset them.

It does not make sense to upgrade 200+ pages to use dnd_area to make them look the same as they are now. Changing to dnd_areas on it's own will not suddenly result in an increase in leads or profits. As you said they were built with flexible columns, they already have a great degree of power and flexibility to them as a result.

Making dnd_area versions of the existing templates is most useful for new pages, or for when you want to revamp an existing one of those pages. If your existing pages are serving their business purpose as is, and you wouldn't normally be doing a redesign of the page's template, then it doesn't make much sense to convert. 

This feature is additive, and a different concept than flexible columns, it is not a requirement. Flexible columns and dnd_areas can be used in tandem in the same templates. We do advise having at least 1 template that uses dnd_areas in themes, to give content creators flexibility. That however is just a recommendation, you can still build with flexible columns.

Hope that helps.