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?
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.
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.
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?
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.
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.
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?
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.
@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.
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?
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.).
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 ?
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.
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?
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.
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?
@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.
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?