How to Create and Edit HubSpot CMS Modules

  • read
How to Create and Edit HubSpot CMS Modules

Have you heard of HubSpot modules but not sure what they are or how to use them in your pages? This tutorial will show you how to build a basic module that you can use to experiment and test how modules can make your website tailored to your needs.

What is a HubSpot CMS Module?

Modules are reusable components that page editors can use when adding the content to a web page. Picture this scenario, lets say you want to have a landing page that has form on the right and rich text on the left. So you use the basic page builder and create a section, and drag and drop a rich text module and form module into the page. So another way of thinking of modules are “things” that make up your page. The sections and columns are the page structure that hold and position these things.

You can create your own custom modules for anything you can think of. Want a listing of videos that open a pop-up when you click on them? Or how about a FAQ accordion that can change colors and fonts depending on the business unit? All of these things can be created, using input data fields and some HTML CSS JS to style this content.

Step 1 – Create New Module

First in the top header navigation go to Marketing > Design Tools. Then right click on a folder in the left sidebar for the location you would like your module to be saved at. Click on “New file in [your folder name]”

Then Choose Module from the file type dropdown menu

Step 2 – Module Settings

Next you will see a settings panel appear with various options. below is a short description of each of these options.

Where would you like to use this module?

Most often you are going to just want your module available in pages. But here you can specify other places to use your module like in blog posts or even quotes.

Module content scope

If someone edits the module do you want it to apply to all instances of the module being used across your entire site? If so, choose the global option. If not, choose the local option that makes each module instance unique and independent of other pages.

File Name

This is the name of the module used in the file system. You can use spaces but I often use a developer style naming convention of lowercase and hyphens for spaces. This just helps keep things consistent.

hubspot cms module editor

  • A: This is the HTML structure box and is the place you will add your module field data snippets in. This tells the system where and how to display the content.
  • B: If your module has unique CSS styles they will go here
  • C: If your module has unique JS styles they will go here
  • D: When you are building a new module, I recommend unchecking this box to prevent another user from using your module before it is complete. When this is checked it will be visible in the page editor in the left sidebar menu.
  • E: After you make edits to your module, you will be given the option to preview or publish your menu. I recommend publishing your module after each major change you make to prevent losing any of your work.
  • F: As you build your module and edit field settings you will be taken to different tabs, this is module breadcrumbs and when clicked can take you back to the main screen.
  • G: This text label is what is shown in the page editor. Update this if you would like this to be different from your original module name. When I create modules I use lowercase letters and hyphens for spaces. Then in the label I make it more readable by using title case and spaces.
  • H: This is where you will be doing most of your work by adding the input fields for your module. Also think about how you might want to group these fields. A way to think about these groups is to think of things as objects. For example, if I wanted to create a module for an image gallery I would have multiple “Slide Items” that all contain an image and a caption. “Slide Items” would be the group name and the fields would be an image field and a rich text field for the caption.
  • I: Do you want the content editor to be able to modify the default styling of the module? If so, you can add a styles tab to your module to allow them to do  so.

Step 3 – Add Data Input Fields

Click on the “Add Field” to open up a dialog box for all of the field types available. Visit this page to learn more about all of the field types available.

For this example I am adding rich text field. By default your field name will be automatically created using your label text. This can be changed after you have written your label if you would like. I often make my field names more concise.

Step 4 – Copy Field Snippets to HTML

In my example below I created two fields. A rich text and a plain text field by click on Actions and then Copy Value Only (B). I then pasted each field value code snippet inside some empty divs. If this all seems new to you, thats ok just ignore the code for now and just see how I am creating a data input and then specifying a data output in my module html box.

Step 5 – Publish and Preview the Module

In the top right corner you click the “Preview” button to test your module. Rich text supports common text formatting options like bold, italic, bullets, and images. Plain text is just without any of those formatting options available.

Conclusion

This HubSpot CMS tutorial is just a basic introduction to creating and editing modules. I suggest building a test module and experiment with the different fields and options. Also visit the developer documentation on modules for more detail on how to edit and display your module field data.

View my HubSpot CMS Modules



Related posts

Written by: Jacob Lett, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn


Category: Tutorials
Tags: , ,