Hola! ¡Tenemos nuestra Comunidad en Español!

Global custom modules - in - HTML coded templates?

SOLVE
Regular Contributor

Hi,

How do you make 'custom modules' global when making templates in HTML (no drag-n-drop)?

When building your website templates, some template-parts are global. Like the 'header', the 'footer', maybe even a slideshow wich is visible on all pages.

Look at this screenshot, and see how i 'include' these global template parts:
Schermafbeelding 2017-01-04 om 16.54.15.pngHTML template preview

 

The included global template-parts are alsow pure HTML.  Wich is fine if you know HTML, etc..., but for a client who doesn't know any of this, and wants to change, lets say his contact information in the footer or add a slide to the sideshow, this is a horrible user experience. And even worse... he can mess up the html code.

What i would like to do is make global custom modules of these included template-parts, where a client can enter his content in text fields etc... and see his changes take effect all over the website.

These custom modules have to be gobal, because you don't want a user to go trough dozens of pages to change some content.

Anyone know how to get this done?

1 Accepted solution

Accepted Solutions
Advisor

@Dallas_Antwerp Rather than using a flex column, which has limitations as you know, have you tried using HubDB? I think that's exactly what you need in this case.

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
11 Replies
HubSpot Employee

Hi @Dallas_Antwerp,

 

At this time it is not possible to make Custom Modules global in the HubSpot COS. @stefen @ndwilliams3 have either of you come across any workarounds for this type of issue?

 

Rami 

Regular Advisor

I can't think of a workaround off the top of my head! I'll think about it and see if i come up with anything.

 

Highlighted
Advisor

You can manually link to a global group or a global module in your coded template by finding the ID of the global group/module and then linking to it like so:

{% include 'generated_global_groups/Unique_ID_Goes_here.html' %}

The ID can be found on the Global Content page. It's not listed for the groups but the number at the end of the link is the ID for the groups (see screenshot).

Untitled-1.png

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Regular Contributor

Thanks @stefen @ndwilliams3 @relabidin,

I did some testing and your solution seems to work well for some basic build-in modules. Build-in modules like 'Single line of text', 'Rich text editor' work like a charm.

The first issue i encountered was with more complex modules like 'Flexible column'. These modules can't be made global (yet).

Here is a preview of the 'drag-n-drop' template i made, that i could use to group all global modules. As you can see 'Flexible column' doesn't have an option to make it global.

Schermafbeelding 2017-01-05 om 10.59.02.png

 

This is quite a big deal, because most of the websites i make, include plugins like 'Isotope.js' and 'Slick.js'. In the example above the 'Flexible column' would act as a container for Isotope items. It would be good if a client could just add more 'Isotope grid items' to a (global) flexibel column.

Here i have an example of an 'isotope filtered listing' that has to be global. Look for 'Our work' section.
http://storyme-dev-2717749-2717749.hs-sites.com/page-with-filtered-listing

 

Right now this section is hardcoded in html and included in the page template. Adding one more item would be very difficult for a client who doesn't know html, css, js...
Here i have a screenshot of one isotope item in code. It would be great if this could be integrated into a module, wich can be added to a (global) flexible column.

Schermafbeelding 2017-01-05 om 11.34.34.png

 

If you guys know any workaround for this? That would be great!

Greetings, Kenneth

 

Reply
0 Upvotes
Advisor

@Dallas_Antwerp Rather than using a flex column, which has limitations as you know, have you tried using HubDB? I think that's exactly what you need in this case.

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Regular Contributor

Thanks for the tip.

Until we can flag 'custom modules' as global in html coded templates... hubDB will have to do.

Reply
0 Upvotes
Occasional Contributor

So awesome ! Thank you for the fast reply !

I was a bit confused by the link as I understand the ID where to dinf it but couldn't make any relationship at "generated_global_groups/" with any global group name but seems that is a specific path, if I am not wrong.

 

Regards

Robert

Occasional Contributor

I've been looking for a similar solution and it's kind of dumbfounding that this functionality doesn't exist.   I don't want to control all of the global module content, I want to hand it off to marketing to manage with a simple form input as it shows on an individual page.   Having to trust clients to enter the design manager to alter defaults is not what most developers need or want.   Whether this be accessing a custom module or the HubDB, same thing.  This should be editable globally instead of on a per-page basis, which is just dangerous.  Speaking of, can I lock a module via code if I'm not using the template manager?   Because at least that would stop clients from changing module content on individual pages.

 

Note: Accessing HubDB requires users clicking on the Content dropdown, clicking Website Pages, finding and clicking the "More" link in the left sidebar, clicking HubDB, then clicking the DB you want to edit (5 clicks).  This is far from user-friendly.  Any easier way beside building a client page for direct admin links? 

Reply
0 Upvotes
Occasional Contributor

Bump

Occasional Contributor

This is a valid issue... I'm using custom modules within custom templates - no drag/drop/bootstrap. I'm also working in design beta.

 

When I create a custom module, I have the option of making it global. But if I clone an existing module to make a global version of it, I don't get that option. I can change it to a different type of module, i.e. blog or page - but not global. I reached out to support and learned the only way to convert is to set up a grid template, pull the module in and convert it. This takes me around the world to accomplish something simple. 

 

This makes for a good feature request. Could we get an option via the actions or module-type link to make a custom module global? Or is there a snippet of hubl that we can add when calling the module to prevent editing at the page level?

Reply
0 Upvotes
New Contributor

I would love this too, any updates?

Reply
0 Upvotes