Why and How to Use Custom Modules on Your Hubspot COS Site

One of the issues I like concerning the HubSpot COS is simply how versatile it may be.

This got here up the opposite day on a weekly name with a consumer whose web page I’m shifting to the HubSpot COS and redesigning within the procedure. I defined how many of the website pages will simply use one or two templates as a result of I’m going to construct customized modules we will be able to upload all over the place.

This manner as a substitute of establishing page-specific templates, I construct only some and upload no matter content material we wish at the web page itself. In this example, it manner including statistics, case research and a testimonial to the web page.

None of this might be carried out with out the power to create customized modules within the HubSpot COS.

In this newsletter I’m going to percentage with you a couple of the explanation why you would need to create customized modules, and the best way to do it.

Why do I desire a customized module in HubSpot?

One manner to think about a customized module is sort of a WordPress widget. A widget is that this factor you’ll upload to widget spaces in a WordPress theme, simplest with HubSpot you are not looking for widget spaces, you wish to have versatile columns. Adding a versatile column to a web page template takes a couple of clicks. Creating a brand new widget space takes customized code and enhancing core php information. Which would you reasonably do?

As I discussed earlier than, some not unusual modules I construct for purchasers are for statistics, case research, testimonials, and so on. Any a part of the web page that should glance and serve as the similar throughout more than one pages however could have other content material relying at the web page is a major goal to be became a customized module.

One of the largest causes to construct a customized module is if in case you have any individual development web page pages who does not understand how to paintings with code, and also you simply need them to have some fields to fill out. A customized module means that you can construct blocks so as to add at a web page stage, so as a substitute of enhancing code to make it glance a definite manner, you’ll merely alternate some choices or textual content.

This will give you huge flexibility in preserving the website’s branding intact with no need to make each and every unmarried web page glance precisely the similar.

How do I construct customized modules in HubSpot?

I’m no longer going to show you the best way to code right here, however I’ll percentage some of the fundamentals you wish to have to understand when development a customized module within the COS.

There are a number of major portions to a customized module:

Custom fields editable on the web page stage

Actual HTML for the module itself

Tokens linking the customized fields to the place they are going to display within the module

One gripe I’ve about customized modules is the shortcoming to reorder the customized fields. So, create your fields together with your consumer in thoughts. I usually put content material pieces first and choices closing, as chances are you’ll upload extra choices someday.

These are the decisions you might have for customized fields:

Text Field – Use this for single-line textual content sections of your customized module, just like the header

Image Field – A unmarried symbol container module that comes with sizing choices, default symbol, and alt textual content parameters

Rich Text Field – A multi-line textual content module that helps the tinyMCE WYSIWYG interface, CTAs, photographs, and same old textual content taste content material

Boolean Field – An on/off checkbox visual within the content material editor interface that permits content material creators to toggle interior content material to be displayed at the web page by means of checking or unchecking the field

Choice Field – A radio choose/pick out record possibility visual within the content material editor that shall we the marketer choose and insert a predefined worth into the content material of the module

Source: HubSpot Custom Modules

Each box you create will generate a token you’ll use to your HTML. On the web page stage, when any individual fills out the Hero Text box, it’s going to populate anyplace the token is.

The HTML you wish to have for a customized module is identical HTML as the rest. You’re development the root for the content material to sit down in. I love to make use of integrated categories for the COS framework, like span6 (part the width of a web page) or span12 (the overall width of the web page).

Since the framework is already responsive for cellular units, the use of the similar categories manner the customized module will likely be responsive as neatly.

Lastly, linking up the sector tokens is so simple as copying the customized box snippet and pasting it into the HTML the place the content material will have to reside. Keep in thoughts that no longer simplest is that this for content material like photographs or textual content, however you’ll additionally use customized fields to modify choices like background colours, div categories and whether or not or to not upload customized CSS to cover a menu on a touchdown web page.

Wrapping Up

Custom modules for the HubSpot COS are a fantastic manner for a internet clothier to construct a website this is simple to care for for long run wishes, and may be versatile for the client whilst making enhancing pages a lot more effective.

Businesses can use them to construct content material blocks that may be unfold around the website and glance constant, however tailor the content material for the web page itself.