One of many issues I really 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 shopper whose web site I am shifting to the HubSpot COS and redesigning within the course of. I defined how a lot of the website pages will simply use one or two templates as a result of I will construct customized modules we will add in all places.
This implies as a substitute of constructing page-specific templates, I construct just some and add no matter content material we would like on the web page itself. On this case, it means including statistics, case research and a testimonial to the web page.
None of this may very well be carried out with out the power to create customized modules within the HubSpot COS.
On this article I will share with you a number of the explanation why you’d need to create customized modules, and tips on how to do it.
Why do I want a customized module in HubSpot?
A method to consider a customized module is sort of a WordPress widget. A widget is that this factor you may add to widget areas in a WordPress theme, solely with HubSpot you do not want widget areas, you want versatile columns. Including a versatile column to a web page template takes a number of clicks. Creating a brand new widget space takes customized code and enhancing core php information. Which might you slightly do?
As I discussed earlier than, some widespread modules I construct for purchasers are for statistics, case research, testimonials, and so forth. Any a part of the web site that should look and performance the identical throughout a number of pages however may have totally different content material relying on the web page is a main goal to be was a customized module.
One of many largest causes to construct a customized module is when you have got somebody constructing web site pages who would not know tips on how to work with code, and also you simply need them to have some fields to fill out. A customized module lets you construct blocks so as to add at a web page stage, so as a substitute of enhancing code to make it look a sure manner, you may merely change some choices or textual content.
This offers you monumental flexibility in protecting the positioning’s branding intact with out having to make each single web page look precisely the identical.
How do I construct customized modules in HubSpot?
I am not going to show you tips on how to code right here, however I am going to share a number of of the fundamentals you want to know when constructing a customized module within the COS.
There are a number of major components to a customized module:
Customized fields editable on the web page stage
Precise HTML for the module itself
Tokens linking the customized fields to the place they will present within the module
One gripe I’ve about customized modules is the lack to reorder the customized fields. So, create your fields along with your consumer in thoughts. I usually put content material objects first and choices final, as you might add extra choices sooner or later.
These are the alternatives you have got for customized fields:
Textual content Area – Use this for single-line textual content sections of your customized module, just like the header
Picture Area – A single picture container module that features sizing choices, default picture, and alt textual content parameters
Wealthy Textual content Area – A multi-line textual content module that helps the tinyMCE WYSIWYG interface, CTAs, photos, and commonplace textual content fashion content material
Boolean Area – An on/off checkbox seen within the content material editor interface that enables content material creators to toggle internal content material to be displayed on the web page by checking or unchecking the field
Alternative Area – A radio choose/decide listing possibility seen within the content material editor that lets the marketer choose and insert a predefined worth into the content material of the module
Supply: HubSpot Customized Modules
Every area you create will generate a token you need to use in your HTML. On the web page stage, when somebody fills out the Hero Textual content area, it should populate wherever the token is.
The HTML you want for a customized module is similar HTML as the rest. You are constructing the inspiration for the content material to take a seat in. I like to make use of built-in courses for the COS framework, like span6 (half the width of a web page) or span12 (the total width of the web page).
Because the framework is already responsive for cellular gadgets, utilizing the identical courses means the customized module shall be responsive as effectively.
Lastly, linking up the sector tokens is so simple as copying the customized area snippet and pasting it into the HTML the place the content material ought to dwell. Remember the fact that not solely is that this for content material like photos or textual content, however you can even use customized fields to alter choices like background colours, div courses and whether or not or to not add customized CSS to cover a menu on a touchdown web page.
Wrapping Up
Customized modules for the HubSpot COS are a tremendous manner for an online designer to construct a website that’s simple to take care of for future wants, and can also be versatile for the client whereas making enhancing pages a lot less complicated.
Companies can use them to construct content material blocks that may be unfold throughout the positioning and look constant, however tailor the content material for the web page itself.