How to convert mockups into template layouts with template builder

Last Updated: June 06, 2014

If you are comfortable working with HTML and CSS and you are looking for instructions that explain how to build custom templates on the HubSpot COS with HTML and CSS, check out designers.hubspot.com

Whenever you decide to build a new website page, it's a good idea to create a mockup or wireframe of the page. They don't need to be pixel perfect, but the more design decisions you can make in the mockup stage, the fewer design decisions and unexpected hurdles you'll run into later.

If you'd like to try using something other than a pencil and paper for your mockups, check out these tools:

You'll use the HubSpot template builder to create template layouts that match the structure of your mockups. So creating mockups ahead of time will help you determine how many template layouts you'll need to build and what content will need to be reused across multiple templates as global content.

What is a template layout?

Template layouts are built by arranging a variety of content modules in a drag and drop interface. Some types of content modules include rich text, forms, menus, social sharing links and images. You can read about all of the content modules here. Use published template layouts to build new website pages (homepages, resource pages, landing pages, thank you pages, blog pages) and emails.

What is a template layout?

Instructions:

Follow these instructions to convert a mockup into a template layout.

Instructions:

1. Go to Template Builder

Go to Content > Design Center.

2. Click on Template Builder in the Design Center Tools side menu

Select Template Builder in the side menu.

2. Click on Template Builder in the Design Center Tools side menu

3. Create a new template

Once you're brought to the template builder, you want to start creating a template layout. Click the New orange button.

3. Create a new template

4. Select the Layout Builder tool

You will be prompted to choose the type of template you want to create and how you'd like to create it.

  • A template built with Layout Builder lets you drag, drop and edit modules to create a template.  
  • A template built with Code Editor lets you create a custom HTML template, stylesheet or javascript file.  Only choose Code Editor if you are an ADVANCED user, familiar with the various types of complex customizations.

You should choose Layout Builder and Page to follow along with these instructions, but the process for using Template Builder to create template layouts for Email, Blog Pages, or System Pages shares the same step.

Click the Create button to continue.

4. Select the Layout Builder tool

6. Name your template layout

You'll want to give your template layout a name so that you can easily find it when creating a new page or email. It's also a good idea to include any details about how the template will be used in its name. This name will only be visible to other users on your HubSpot account and will not be visible to website visitors or email recipients.

6. Name your template layout

7. Choose a folder

When you're choosing the template layout of your page or email in each content tool, you can filter by folder. In this step you should choose which folder you want this template layout to be grouped under. If you'd like to create a new folder, just type the name of the new folder you want to create and press the enter key on your keyboard. Keeping your template layouts organized into folders will make it easier to find the template layout you are looking for when creating new content.

7. Choose a folder

8. Create the structure of your mockup using the tool.

The default template layout is broken up into different modules that you can adjust to create your own custom template. The default template layout looks like this, but you can drag and drop modules, add new rows of modules and swap module type to create the structure of your mockup using the tool.

9. Choose which modules work best for your layout

When you are converting your mockup into a template layout you'll want to swap any content modules in the layout for the one that will best suit the type of content you'll be putting into the finished page or email. To refresh your memory on the different types of content modules, click here.

Template layout and content module editing options

Click on the gear icon in a content module to make changes to it. Your options are:

  • Edit Options
  • Edit CSS (Advanced)
  • Swap Module
  • Make Module Global
  • Split Horizontally
  • Add Module Below
  • Delete Module
Template layout and content module editing options

Edit Options

The edit options feature allows you to change the basic configurations of a module, like the default content, its label in the content editing screen, and its editing preferences. Depending on the type of module, this feature will offer you different options to configure.

Edit Options

Edit CSS

Edit CSS makes it easy to add a CSS class name to the module so that you can apply optional custom styling or add in custom inline styling to a module.

Edit CSS

Swap Module

Swap module lets you choose which type of module you want in that section of the layout. Again, for a more detailed breakdown of the different module types, click here.

Swap Module

Make Module Global

Make module global allows you to turn a module into a global module that can be used across other template layouts and template files. To learn more about global modules, read this help article.

Make Module Global

Delete Module

Delete module deletes the module. There is no prompt to confirm that you're sure, so make sure you want to really delete the module before selecting this option.

Delete Module

Group Modules

If you want multiple modules in one row or column, you can add them by click on the Add module button. This makes it easy to style all the content modules in a column together. You can also drag an existing module on the bottom section of another module to group them together.

Add row

To add another module, you can select Add row at the bottom of the manager, and then use the options explained above to create the module you want.

Add row

Split a row

You can create multiple columns in a section of your template, by splitting a row using the Split button.

Resize modules in a row to adjust column width.

You can drag the divider to resize each column.

Flexible Columns (Advanced)

You can turn a group of modules into a flexible column so that new content modules can be added to that column without leaving the content editor. You should only use this if the template layout your are creating will require a page or email author to add more content areas into the finished content while they are using the content editor. An example of when to use this would be a newsletter template layout that has a varying number of featured stories.

10. Preview your custom template

Once you've manipulated the modules and created a template to your liking, you can preview the template before publishing.  Toggle to Preview on the top of the page.

10. Preview your custom template

You can now see how the template would look when you are editing the content in one of the content tools. Based on what you see, you can toggle back to Edit and make the appropriate changes.

 

7. Finish creating your template layout

Once you've created the perfect template, click the Create button in the top left corner.

7. Finish creating your template layout

Next Article: How to use global content across multiple templates

LOG IN TO YOUR  WEBSITE

Table of Contents

    Get feedback from marketing peers and experts on inbound.org
    Check out Premier Services