How to convert your design to a HubSpot template

Posted by Mariana Morales on June 29, 2016 at 3:00 PM

In HubSpot, Optimize web design

Best practices for website and landing page design, dictate that you should always create a wireframe and mockup of your design before building out your template online. Whether you accomplish this through Photoshop or a mockup program like Mockups.me is up to your designers preference, but the process will help guide how you will build your design in a HubSpot template.

Only once you have finalized your wireframe and mockup should you start your template build in HubSpot. 

HubSpot’s Design Manager allows you to create templates for landing pages, emails, web pages and blog. The builder works on a modules system, where you will need to drag and drop modules in order to map out your pages blocks. This makes recreating your mockup design relatively simple. 


Create a new template and select the Layout Builder tool

Once you have your design and have selected the option to build a template in HubSpot you will need to choose Layout Builder. There is an option for Code Editor. Code Editor is best utilized by advanced HubSpot COS developers, who can help you to achieve customized modules and tools to improve and even match your design.


What to know about HubSpot Modules

HubSpot modules will be used to structure your templates layout. These modules can be dragged and dropped, swapped and halved, third etc. and put into various rows and then grouped for optimization and styling.

HubSpot offers various content modules to help you accomplish your various design needs. They range from Image Slider, to Rich Text and even a Custom HTML module, so you can add customization inline.



Meeting your design needs

To help you accomplish the necessary customizations in HubSpot you will want to access Edit CSS and Edit Options. Here you can change the configurations of each module in order to model the template after your design. If you will need to use a specific module design across all of your template, you can use the Global Module tool. This will allow you to use your customized module across all templates.

 

Why your wireframe is important

When building in the HubSpot COS a wireframe can really come in handy. If you've created a wireframe you will already know and understand how your page will need to be structured to meet your design needs. This means you can quickly and efficently build out your template with the drag and drop builder. 

 

Watch our indepth tutorial:
How to build a HubSpot Template from your PSD file

Now that we have gone over the surface points of using the HubSpot template design tool, it's time to deep dive into the build. We've put together a video tutorial that will walk you through how to recreate your Photoshop designed page or email into a living HubSpot template. Click here to watch the tutorial, or find your way below. 

 

how to build HubSpot templates from a photoshop design file