We all know HubSpot’s default modules come with restrictions, and that’s why we take the custom module route. But, often, companies get confused about how many custom modules and which custom modules are needed to build a good operational website.
AvantaHub researched and narrowed down the custom modules that you can reuse anywhere on the website. You know how much development time you reduce when you have ready-to-use custom modules that you can reuse repeatedly.
Hero Sections
The hero section is the above-the-fold section of any page or the section just below the menu. It usually contains a background image, a persuasive heading and sub-heading, and a call to action. You have the following combinations in your Hero section.
- Image in the background and text in the foreground
- The image on the right and the text on the left
- The image on the left and the text on the right
- Text on a colored background
- Text and the abstract graphics
The best part of this section is that you can use it as a heading for any section where you want to display short and catchy text. Not necessarily it has to be on the top of the page. Toggle images or text right or left, add your own content, and your section is good to go live.
Column Module
Columns modules are versatile and support any content form. The column modules can support whether you have a three-heading, a two-heading, or a four-heading content part. Simply give the option to add the columns. Commonly used column modules are;
- Three-column module with icons, headings, rich text, and CTA
- Six-column module with icons, heading, rich text, and CTA. In this structure, there are two rows and three columns in each row.
- Four-column module with icons, heading, rich text and CTA
- Eight-column module with icons, heading, rich text, and CTA. In this structure, there are two rows and four columns in each row.
Accordions and Carousels
A website carousel displays a series of images or videos that can be clicked or scrolled through. Now, imagine what you can put in the placeholders
- Team members and their designation will make it a good team section
- Clients and their reviews will make it a good testimonial section
- Client’s logo and client’s name will make it a good client section
- A photographer can put images to showcase in that carousel
- If you have a short product line, you can display your products there along with CTA on their detailed page.
It’s your section; display whatever you want. Test your creativity.
Tabbed Content
Tabbed content is used to display when you set sub-sets to display in the content. You can display titles, text, CTAs, and images in the tabbed section.
- Services, sub-services, images, and CTAs everything in the tabbed content section
- The famous ‘why hire us?’ or ‘why choose us?’ section. Mention the reasons to hire, along with a short description.
- In the case of running a small eCommerce store on your HubSpot website, you can display product details, reviews, features, and images in the tabbed content section.
You can incorporate anything in the tabbed section custom module and even decrease or increase the tabs. It can fit on any page.
Pricing Table
Some people like to display the pricing table on the website, while some don’t want to display that. They want to pitch the price to the ones who are interested only. However, a pricing table can also be used to display features. Simply remove the pricing from the table and leave the features in there.
The other way you can use the pricing table custom module is by displaying the comparison of features between the tools.
And, of course, if you like to display the pricing table, you can always do that any way you want.
Social Media Widgets
It is a good widget to have. Your website visitors can view your social media’s latest posts from all the platforms you created widgets for.
With social media widgets on the page, even your static pages look dynamic because the latest content on social media widgets constantly changes when you publish a post. So, on every visit, even the repeat visitor will find unique content in that section.
Custom Buttons
Like a good antique collector, some people have an obsession with custom buttons. You cannot have enough of these. However, there are a few types that are used throughout the website. You can embed them in any module with a toggle On/Off feature.
Ensure that you are tracking the performance of your CTAs, and where they are placed.
Lead Forms
Don’t you love these? The ultimate tool for marketers is from where they see website visitors getting converted into leads, and in the process of doing so, they capture the required data such as name, email, company, phone number, etc. You can have the following form modules
- Standard contact form
- Book a meeting form along with calendar availability
- Start a Project form
Things to Take Care of While Designing a Custom Module
Naming Convention of Modules
One simple rule to follow here – be as clear as possible about field names. For example, if the field is about the background image, don’t simply write ‘image’ in the field. Write ‘background image.’
Headings, subheadings, bullets, and paragraphs are all text forms, so writing only a ‘text field’ might confuse the page editor. Clearly mention the field for heading, subheading, bullets, and rich text.
While writing the module name, mention the exact features. If it is a column module, write the number of columns it has. Also, mention if the module is Global or Local. For example, if you have a three-column module, both local and global, write like this;
three-column-module-local
three-column-module-global
Proper Linking
If you are building a custom module on forms to book a meeting, a social media widget, or a CTA module, then make sure that linking is done properly. The submitted forms go into the right email and are properly tracked at the backend.
Responsive Custom Modules
This goes without saying that any module you design must look good on a desktop and a mobile screen. Once the module development is done, test it for the most used screen sizes and see how it looks.
AvantaHub is here to help with custom module designing and development.
