5 things to know about your design and HubSpot templates

Posted by Mariana Morales on June 15, 2016 at 12:16 PM

In HubSpot

The HubSpost COS can help your website and landing pages stand out from the competition, with templated and custom building options the COS becomes easy to use when you take the time to learn it's capabilities. 

You've created a beautiful and strategic design for your client and/or your business and now you need to implement that design. Below are 5 things that will make it easier for recreating your design and HubSpot templates. 

 

Your building options within the HubSpot COS

HubSpot’s COS, gives users the ability to create emails, landing pages, blogs, and entire websites that integrate with HubSpot’s inbound marketing tools. The COS is a great tool to utilize for your custom website development or template development. The COS offers pre-built templates and a basic template builder tool with no coding required. If you want a custom website you will have the capability to build your own templates using the HubSpot Markup Language (HubL) within the Code Editor.

 

How you can use HubSpot modules

You can add the module by simply clicking the “Add Row” button. Once it’s added you can drag the module to wherever you want it displayed on your layout. Dragging the modules on top of other modules will either create columns or group the modules.

Module groups are units of modules that make up different sections of your page and can be created by clicking the “Group…” button. Once you click the selected modules you’d like in the group, click “Create Group” and you’ll have your group.

 

Customizing the modules and template

Once you’ve structured the general layout of your template using various modules, you now have the ability to custom each module to fit your design. Tip: modules are ease to swap out, just press "swap module."  To add customization to your modules, you can use CSS coding or use HubSpot's built in edit options.

 

Locking Modules

Lock modules that you do not want others to touch. To get your design right, used advanced customization or the addition of raw HTML that you don’t want others to touch, and that’s where locking the module becomes effective. If you want to prevent marketers from being able to edit the module from within the content editor click the gear icon > Lock Module. A lock symbol will appear on the module showing it’s locked. This function also serves as a reminder to marketers that this module is customized. 

 

Cloning and Clone to file

Take advantage of the cloning tool, to add efficiency to your development process.  Use the clone tool to create a duplicate of the template and customize the clone without affecting the existing template. 

Clone to file creates a separate HTML version of your template. Although HTML templates are less flexible for your internal users, it’s more helpful than what is available through template builder by giving you more control over your markup.

 

Custom modules

You can create your own custom module to fit your desing needs. These custom modules can be used by creating custom editiable content objects that can maintain a specific style and be used across all of your templates. They’re the best solution for content that has slight variations between pages but requires a consistent look in styling needs.

 

HubSpot COS developer

Computan is a certified HubSpot development agency, we assist HubSpot marketing agencies in the back-end technicalities of HubSpot so that they can achieve their design needs. If you are struggling to transfer your design to a HubSpot template, we can assist. Take advantage of our free technical assessment offer and we can deliver you solutions to your inbox. Outsourcing web development for HubSpot may be the digital solution you need.

web design checklist