Ask Me Anything about the new Design Manager!

Highlighted
HubSpot Product Team

Hi everyone! I'm Jeffrey Vocell, a Product Marketing Manager at HubSpot and I'm joined by my Product Expert colleagues from Support. With the new Design Manager now in open beta (sign-up here if you don't have it yet), we're here to answer any questions about how to use it, HubL, and anything else to do with Design Manager.

 

To be clear -- we won't be able to help with custom design or building a site/page. If you need help building a website, or just a page we recommend checking out the Marketplace for templates or reaching out to a partner that can help

 

Here are a few to help get you started:

  • What is different about the new Design Manager?
  • What's new with modules?
  • What are some tips & tricks that I should know about the new Design Manager?

Looking forward to your questions!

0 Upvotes
25 Replies 25
Highlighted
New Contributor

How do the new modules work? Is there something I have to do to mark field as editable?

 

I've built a test module to play around with so I get familiar with them before I'll have to migrate everything but all I get is "This module does not have any editable options." message, no matter how many fields I place in. And there has been no response on dev forums when I asked there.

Highlighted
HubSpot Product Team

Hey @danaketh ,  could you point to the post you're referring to, or a link to the module you're working on? I'd be happy to take a look at the module itself.

 

Adding fields in the right-hand pane in the module editor should create fields that are editable in the content editors by default, but you can toggle that in Edit Field -> Editor Options -> Prevent Editing in Content Editors .

 

Once you've added those module fields on the right-hand side, you should be able to edit their values in the content editor context. Adding the respective snippets for each field's value in the module's source code itself will render the field values (either the defaults or what's been edited at the content-level) in the content where the module is rendered.

0 Upvotes
Highlighted
New Contributor

Considering it does require valid access, I guess I can just link it here like this:

 

https://app.hubspot.com/design-manager/2049682/modules/5580902228

 

Module is called Brand and it is really just a test. Maybe I'm just doing something wrong.

0 Upvotes
Highlighted
HubSpot Product Team

Hey @danaketh , thanks for the link! I'd expect those fields to be editable-- in fact, I was able to recreate a nearly identical module to your example module that is editable (in the previewer and in the page editor context), so I'm not sure what's going on with that first one.

 

I'll have to take a deeper look into this particular module, but in the meantime, are you able to create new modules with editable fields?

0 Upvotes
Highlighted
New Contributor

Thanks for looking into it @kleonard,

I think I've found where the problem is. You can check it there. I've made two new modules. One Global and one Local. In Global, I can't do a thing, the options are not showing up. But Local works just fine.

 

I haven't checked the documentation for the difference between them. I'd have expected them to be completely the same with only difference being in access or something. But since this option is new, I guess I'll need to read more about it.

0 Upvotes
Highlighted
HubSpot Product Team

Ah, yes-- that's it @danaketh. When the module's set to global, all of the fields will be locked. While this is working as intended, I think we could do a better job of exposing whether something is global in the UI, though. I'll talk to the team about this and write up an issue for it. While you're editing or previewing the module, there's no clear indication it's scoped globally.

Highlighted
Visitor

Hey Jeffery,

 

I had a question about file structure in Design Manager - So I noticed we are now able to rename folders and easily create and manage folders (This is awesome by the way). I was wondering how Hubspot handles the renaming of a folder - If I rename a folder, will this break all my files that are attached to an HTML page? 

 

Thanks!

Highlighted
HubSpot Product Team

Hey @Josh108. Great question. For the most part, as long as you are attaching stylesheets, or JS via the app, nothing should be impacted by a filename change.

 

If you are attaching stylesheets through the app (i.e. editing head in the template) and then change the filename, it will not break.

 

Any JS files should also now be attached to the template using the tool rather than using the global footer technique, which means any filename changes will not break the page as well. And all files should scripts with <link> or <tag> as a way to pull in other files, those may not automatically update and we recommend using the in-app method.

Highlighted
HubSpot Product Team

@aquandt@ndwilliams3, @SvenVanbrabant@jausura I noticed here you were looking for more information about the new Design Manager, so I thought'd I'd tag you in Jeffrey's AMA thread in case you have any outstanding questions, feedback or your own insights to share. Smiley Happy

Highlighted
Top Contributor

Hi Jeffery,

 

I'm interested in the migration process when switching to the new design manager, how does this affect my existing content?

 

As I begin to port templates and local and global modules aross to the new design manager, can i expect any conflicts between modules and templates. For example if i update a global module such as a header or footer, can that change be read by any templates that have yet to be migrated?

 

Thanks

Highlighted
HubSpot Product Team

Hey @matttunney, when you're opted into the new Design Manager, all of your templates and files are brought over and should word identical to how they did previously.

 

Modules created in the old design manager will be brought over as-is and will continue to work in content as they did previously, but will need to be upgraded to be edited in the new Design Manager. Once you opt to upgrade, you'll be prompted to choose a host template type (page, blog, or email) where the module will be used. After the upgrade, you'll need to republish the module, which will then update all instances of the module. 

 

One thing to keep in mind here is there are some things that were permitted in the old module editor that will not pass validation in the new module editor. If that's the case with a module you're upgrading, we won't allow you to publish and affect your existing modules until the errors have been resolved. (examples include: nested modules (modules inside of modules), include/import tags, raw hubl fields, etc.).

0 Upvotes
Highlighted
Occasional Contributor

Hi Jeffrey,

 

Great intiative Smiley Happy

If I create a landing page A using template A and published this LP A. I want to create a LP B slightly different and I want to edit template A instead of cloning and editing the template. So if I edit template A, will this affect my already published LP A ?

 

Thanks,

Alexandra 

0 Upvotes
Highlighted
HubSpot Product Team

Hi @Alexandra. If I'm understanding your question, you want to have different content (or layouts?) on two pages that are using the same template. Is that correct?

 

If that is the case, then I would recommend adding a "Flexible Column" module to your layout and a marketer could customize the content they want on different pages that use the same template.

0 Upvotes
Highlighted
New Contributor

Are there any plans to allow us to make editable templates for website/landing pages from a coded file and import these straight into Design Manager as we currently can for email templates?

  • What I'm looking for is an easy method to move custom templates between accounts (i.e., dev and production) without needing the package them up as market place template  downloads.

Also any plans to allow us to connect to Design Manager from an external IDE, so changes can be tested locally first?

0 Upvotes
Highlighted
New Contributor

I've been playing with the new modules since they released them in beta and I've seen their files on the FTP. So I believe that is going to be an option. One that is quite important for us too.

0 Upvotes
Highlighted
New Contributor | Diamond Partner

I know renaming modules that are already being used can create issues. Is it safe to move templates, files and modules into new folders without it creating any issues? Is it safe to re-organize our design manager?

0 Upvotes
Highlighted
HubSpot Employee

@ccooney Modules can now be renamed and don't need to be replaced at the template level (like they had to in v1).

 

Moving folders shouldn't be an issue. However, there is a potential for issues if you're moving v1 files in v2, and then switch back to v1. I would personally hold off on moving existing files around until you're positive that you won't be switching back to the old system for any reason.

0 Upvotes
Highlighted
Occasional Contributor

I build landing page templates for my team. If a team member is building a page and wants a form instead of a rich text box for a particular page’s layout, I usually clone the template, change the module, and then switch the template on the page level. Is there a more efficient way to swap module types?

0 Upvotes
Highlighted
HubSpot Employee

@priscillam you can use a flex-column in your template. This will allow you to add/ remove/ reorder modules within the flex column at the page level.

Highlighted
Top Contributor | Gold Partner

Is it still bootstrap 2-ish? 

0 Upvotes
Highlighted
HubSpot Product Team

Hi @mrspabs. Yes, we are still using a forked version of Bootstrap 2. We are working on some things within the new Design Manager to make this easier, so stay tuned.

0 Upvotes
Highlighted
Occasional Contributor

I noticed on the new design manager that there's a "No errors found" green button at the bottom. What types of errors would the Design Manager show? Thanks!

0 Upvotes
Highlighted
Inbound Professor

Hey @priscillam, the errors console shows HubL validation errors. If you want to try it out, throw a "{%" (unclosed HubL declaration) somewhere in the HTML+HubL field. It will give you an error message with a bit of context about where the error occured.

Highlighted
Regular Contributor

Hey Jeffrey,

 

Thanks for starting this thread, really helpful. Love the new Design Manager, been using it extensively. I have some questions about the updated custom modules, if you don't mind:

 

1. Are the product team actively working on enabling smart content for modules? Do you know if it's something we can expect in the near future?

 

2. Are there any plans to make editing custom modules more intuitive for the user? When editing a page, with Hubspot's standard modules such as Rich Text, you can edit the text (WYSIWYG) within the page itself. Just wondering if that will be possible with custom modules in the future.

 

Thanks again, great work!

0 Upvotes
Highlighted
HubSpot Product Team

Hi @Hubmate. Thanks for the questions.

 

1. Are the product team actively working on enabling smart content for modules? Do you know if it's something we can expect in the near future? 

 

Yes. We are actively working on the ability to make Custom Modules smart. I can't offer an exact timeframe, but it should be relatively soon. 

 

2. Are there any plans to make editing custom modules more intuitive for the user? When editing a page, with Hubspot's standard modules such as Rich Text, you can edit the text (WYSIWYG) within the page itself. Just wondering if that will be possible with custom modules in the future.

 

This one is difficult. When you think about a custom module, virtually anything can reside within it -- so turning that into an easy to use visual editor naturally presents some challenges. That said, we would love to hear about how you are using custom modules and if there are opportunities to make the visual editing experience better in some ways. Feel free to send me a DM and we can talk about specific use cases or examples.

0 Upvotes