Removable Modules in Landing Page while Editing the Page

Occasional Contributor

How can make landing page's modules to be deleted for any customization without effecting the original template used in the background? I need urgent help. Thanks

Reply
0 Upvotes
7 Replies 7
Highlighted
Advisor

Hi @MaisamAbbas

what exactly do you mean by "deleted for any customization"?

If you want to modify an existing template and have the ability to "jump" back to the non changed version quickly, you can clone the template.

For that go to the design manager, select the template you want to modify in the left "tree view", navigate to "Files-> "clone TEMPLATENAME". After you've done this you can rename and move it to another folder(recommended).

Bildschirmfoto 2019-11-04 um 08.47.17.png

 

If you want to add a custom module to a landing page and show it only on certain pages, you can add a "boolean" function to the module.

 

 

regards,

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Occasional Contributor

Hi @Anton 

Actually, I knew this before that we need a clone template for new pages, but by exploring I found somehow that we need to use flexible columns for adding removable modules to template and then in "Edit Page" we can add or remove more modules in flexible columns. After trying on that, I found a problem that how can I add classes to the modules on the left while on "Edit Page" section.

here I share two screen shots, one is my template and the other is "Edit Page" and I want to use flexible columns in template, but how can I add all modules(e.g. richtext, image, header etc.)  if I want to use flexible columns.

Modules.PNGtemplate modulesModules-Edit.pngedit page modules

Reply
0 Upvotes
Advisor

Hi @MaisamAbbas 

thank you for the information. 
Simple answer is: you can't add classes to modules in the "edit page" editor. You can add classes to only a few HubSpot modules in the design manager.  

 

1. create your own "basic modules"

This should be the the most easiest solution.

Since you most likely can't edit "HubSpot basic modules"(even when you clone them) you've to create your own modules with a little bit of a twist. 

 

Example(rich text module):

Bildschirmfoto 2019-11-04 um 22.22.12.pngcloned basic HubSpot rich text module

Bildschirmfoto 2019-11-04 um 22.27.31.pngcustom rich-text module with class inputSo - what's the difference?

The custom rich-text module got a wrapping div around the rich-text "input" with an input field for classes. By that you have the ability to add classes to the wrapping div. 

Notice that the "class widget" is a "simple text" widget - not a "rich text" widget. 

 

Here's a preview from the "edit page" mode

Bildschirmfoto 2019-11-04 um 22.37.49.png

 

and a preview from the Google inspector

Bildschirmfoto 2019-11-04 um 22.39.43.png

 

You can do this with every basic HubSpot module. 

 

 

Does this help you?

 

 

regards,

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Occasional Contributor

Hi @Anton 

 

As you have explained very well and with very beautiful way. Working on custom module is easy in some cases, but my clients asked me to add ( removable modules ) as like in flex columns here.  The problem is how can I add classes to removable modules inside a flex column?

You can see here, I want to add classes to each section of flex-colums, e.g. I want to add class ".page-center" to whole flex column, then ".main-content" to Header then ".body-content" to richtext and so on. How can i acheive this kind of scanario?

flex-cols-with-classes.png

Reply
0 Upvotes
Advisor

Hi @MaisamAbbas ,

Thanks for the screenshot. To be honest, I've never seen anything like it. Smiley Surprised

Maybe it's a template thing. Which one do you use?

Do you have some HubSpot browser extensions which could display this kind of informations? (Honestly I can't imagine this)

 

@Jsum@Stephanie-OG@dennis_e do you have an idea what it could be? @jennysowyrda do you know someone who could know something about this?


As I've mentioned before: You have to add classes in the design manager (or in custom modules). Most likely because that's a "guarantee" that every page based on this template looks the same.

Furthermore:  I've checked all "default" HubSpot modules in the design manager inside of a flex-column and this is the result:

 

  • Follow me: not possible to add custom classes
  • Form: not possible to add custom classes
  • Google Search: not possible to add custom classes
  • Header: not possible to add custom classes
  • Image Gallery: not possible to add custom classes
  • Image: not possible to add custom classes
  • Language Switcher: not possible to add custom classes
  • Logo: not possible to add custom classes
  • Menu: not possible to add custom classes
  • One Line of Text: not possible to add custom classes
  • Page Footer: not possible to add custom classes
  • Password Promt: not possible to add custom classes
  • Post Filter: not possible to add custom classes
  • Post Listing: not possible to add custom classes
  • RSS Listing: not possible to add custom classes
  • Rich Text: not possible to add custom classes
  • Section Header: not possible to add custom classes
  • Simple Menu: not possible to add custom classes
  • Site Search Input: not possible to add custom classes
  • Site Search Results: not possible to add custom classes

 

even after I've added a class to the flex-column in the design manager it didn't showed up in the page editor. That's why I assume that it's something "special". Maybe a setting or something.

 

 

best,

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Advisor | Platinum Partner

@MaisamAbbas , I am unclear why you cannot use custom modules that you create as @Anton has suggested.  You will be able to add a field for a custom class.  could be a text field, could be a dropdown select.  Replicate the hubspot modules with your own and you will be good to go

dennis
Esteemed Advisor

Hi @MaisamAbbas ,

 

Here is a post about creating modules and using flexible column templates: https://community.hubspot.com/t5/Share-Your-Work/Integrate-Frameworks-in-COS-Bootstrap-4-example/td-...

 

You can use a choice module, in the custom module editor, to apply class choices to elements in your custom module. 

- Jonathan Sumner
Reply
0 Upvotes