HubSpot Themes Made Simple: A Step-by-Step Guide

HubSpot CMS acts as a one-stop system used to build and maintain websites effectively. The impressive platform provides a lot of bells and whistles, but not everyone knows exactly how to actively build websites on HubSpot. Many users are familiar with the tried-and-true template. They might wonder about HubSpot themes vs. templates.

Themes, which are pre-built bundles, offer more ease of use. They require no coding experience and are fully customizable. Once you’re familiar with themes, it’s easy to discard templates. The hardest part of the whole process is picking a theme.

What are HubSpot Themes?

HubSpot themes are drag and drop templates, style settings, modules, and content favored by marketers to create and manage a website layout and content solo (no need for a developer). Content creators can now single-handedly build and manage a website on HubSpot with ease.

HubSpot Themes vs. Templates: Don’t Confuse HubSpot Themes with Templates

On June 20, 2020, HubSpot launched themes on the marketplace. Prior to the appearance of themes, the only template packs available lacked versatility. Before themes, website creators spent a significant amount of time monitoring the website to ensure consistency from page to page. However, HubSpot lacked the power it boasts today in those days, so developers had to work harder.

Templates were the old way of creating HubSpot sites. Non-developers commonly used them, but they often proved challenging to work with because they lacked the capabilities of the new drag and drop website builder.

With HubSpot themes, you’ll need HubSpot Marketing Professional, HubSpot CMS Hub Professional, or Enterprise.

Compared to templates, HubSpot themes offers the following features:

Far more portable between accounts
Customize all templates using HubSpot theme settings in one central admin panel.
Form theme between multiple templates.
Handy drag and drop grid with columns so you can adjust layers easily
Quickly find custom modules from the page builder.
Develop a theme locally with a command-line interface along with HubSpot CMS Theme boilerplate.

Benefits of HubSpot Themes

HubSpot themes have revolutionized the way that creators can develop websites. Hands-down, themes are

Benefits of HubSpot themes include:

Ease of use
Consistency in creation throughout the website makes creating global content a breeze.
Reusable elements so you won’t face needing to craft and new components.
Saves time and money.
No code changes are required to manage website brandings.
Copy a HubSpot theme and use it on a multitude of accounts or share with another.
Fully customizable so you can make a website that truly stands out from the competition.

Are HubSpot Themes Always the Number One Choice?

When weighing HubSpot themes vs. templates, most will pick the theme option, but it might not be the best choice in some circumstances.

Landing Pages – Themes or Templates?

HubSpot themes feature many different benefits, but they are not suitable for every situation. If you decide to design a landing page and run a campaign, you might want to forego themes. Landing pages lack a global content header and footer. They also don’t follow any design pattern. Yes, you can use custom themes modules for landing pages, but there just aren’t many elements.

Single Page Design – Weighing HubSpot Themes vs. Templates

If your goal is to create a single-page website, then don’t use the HubSpot theme. Think about it – the HubSpot theme is thus named because it is a tool that creates a ‘theme’ throughout the many pages; home page, product page, service page, team page, about us page, contact us page, and others. There is flow and unity. However, with a single-page website, a more suitable choice remains a design template.

An Option: Templates Within Themes

There is no correct answer. You should pick the option that is easiest and lets you execute your goals. Also, affordability remains a crucial component for many working within the constraints of a tight budget.

One thing to note, there are templates within the theme modules section. They are easy to locate and a great option. If you want a single-page website, then you can turn to the templates within themes.

Without a doubt, most marketers are not using the HubSpot theme because they create multi-page websites. They want to streamline the creation process so it’s quick and stress-free but having the option of using templates built within themes is a nice perk when needed.

Different Types of Templates Within HubSpot CMS

You’ll find the following templates within theme modules:

Page templates for single websites and landing pages.
Blog templates to form individual blog posts or singular blog listing pages
Email templates.
System templates for password prompt, email subscriptions, and error pages.

Where to Get Themes? HubSpot Marketplace

Themes are available on HubSpot Marketplace, an online directory that offers thousands of products used to build websites. Themes, modules, and templates are all options available for purchase (there are also free options).

You can find exactly what you are seeking by searching using provider, category, or price on the site. You can also set your search criteria to find the most popular offerings according to the download number.

Build a Theme or Purchase One?

The answer to this question clearly depends on your skill level, time, and budget. Is your design complex? If you are working with existing brand guidelines and can afford it, go with a theme.

Those with experience as a developer or the support of such an individual might want to create a theme because it gives them more control over the final creation. A word of warning: HubSpot is not exactly easy, and there is a learning curve, so building a theme from scratch might prove more challenging than you initially thought.

You can also customize a theme from the Marketplace using the expertise of a HubSpot developer.

Will I Need to Know How to Code to Use HubSpot Themes?

No, you do not need to know how to code to use HubSpot Themes. You can create dynamic, unique pages with a custom skeleton. You customize the skeletons to fit and form your pages based on your vision. Some knowledge of HubSpot CMS user interface is a nice perk and will make the process easier, but it’s not mandatory. Most people can figure things out quickly due to the ease of the drag and drop functionality. Overall, it’s not that complicated to use.

The Perks of Themes for Developers

Developers are singing praises for HubSpot themes because it makes their lives easier. Developers can effortlessly create a variety of reusable modules for their needed themes with far less coding. It saves them valuable time and headaches. Themes have become a valued tool in the toolkit of most developers. HubSpot has strengthened the component-based software engineering, so you only must develop one time but can use the coding anywhere.

Developers can even make a profit by selling their themes on the marketplace! What a great incentive to learn and use HubSpot Themes.

Understanding How Themes are Customizable

The themes are delightfully customizable. You can change the margins, paddings, color pallets, global content, and fonts. If you don’t like a theme’s color, swap it out for one that you find more appealing. The same can be done with the font. Play with things and truly customize the entire layout to meet your website needs. You can change so many elements that you’ll be able to make things look like you envision.

Understanding the Modules of Themes

Think of the modules of themes as building blocks (or Lincoln logs). You probably loved playing with Legos as a child, so this is like the childhood plastic pieces in a virtual world for adults. Overall, modules are fun, exciting, and easy to use.

Let’s examine the modules. A single module isn’t anything exciting, and you might wonder what is the big deal? However, when you start building with the modules, things come together and form a solid structure. You can rapidly create something stellar without missing a beat. You’ll assemble the modules to make your dreams a reality.

How do Modules Work?

Modules are easy to work with. Think of them as building blocks. You simply drag and drop them to incorporate them into a theme effectively. The modules provide site-wide consistency. Even with custom modules, you can customize the modules perfectly.

Create and customize the following using modules and drag and drop:

Hero sections
Carousels
Accordions
Pricing tables
Team bios
Image sliders
Galleries
Tabbed content
Custom buttons
And more!

Module Use Example – How to Use Modules in Themes

When you open a module, you’ll notice on the left are editing options. You can use the options to make changes within the built module.

Changes include:

Positioning and repositioning
Color choices and adjustments for mobile or desktop.
Text edits
Personalization tokens to improve the user’s experience
Add or resize an image
Add image alt text
Add, show, or edit all calls to action (CTAs)

You can also adjust section spacing to avoid cognitive friction, which might occur if module elements are placed too close to each other. You can also make the necessary adjustments if the elements are positioned too far apart. Finally, test and achieve balance with the module.

Effortlessly Drag and Drop the Modules Wherever Needed

With drag and drop, you can create as many modules as you want. They are easy to edit and work with. Many developers say that working with them is even an enjoyable and ‘fun’ experience.

Efficient and Easy

Modules are completely reusable, so you can use them throughout your website to create a theme and similar feel for each page. They are very efficient because you can quickly move them from one place on a page to another by dragging and dropping them.

Exceptional Time-Savings

You’ll also save a considerable amount of time because you don’t want to recreate the module components from scratch. You can reuse the modules or modify them between website design projects. Modules are one of the best (if the BEST) for saving time!

Tweak When Needed

After you create modules with CSS, HubL, and HTML, you can customize each one when needed. There is no reason to hire an expensive designer if all the module needs are a minor tweak. You can easily carry out the task yourself.

Pick the Best Theme

Themes are as varied as users. What works well for one person might not for another. Luckily, you can choose the theme that best suits your needs. Let’s explore the steps and considerations involved in picking a HubSpot theme.

Aesthetics Matter

Yes, when picking a theme for any website, aesthetics matter. You want the website visitor to enjoy exploring the site visually. If it’s unsightly or difficult to navigate, then a visitor will quickly click away. Your website’s search engine rank will take a significant hit if visitors regularly abandon your website because they don’t find it visually satisfying.

Not to mention, if you are an eCommerce site or offering a service, then your chances of increased traffic and conversion take a horrific hit. You want your website to be aesthetically pleasing, easy to navigate, and worthwhile for the visitor.

Themes let you build truly beefy pages. It is completely customizable in the HubSpot CMS framework. You’ll also have the core of templates for the homepage, blog, products, about us, and more.

When picking a theme in HubSpot, consider our budget and the necessary elements. Examine the demo pages and make note of things. You can change colors, etc., to customize the page.

How Much Do HubSpot Themes Cost?

You’ll find HubSpot themes that fit almost any budget. Prices range from $50 to $1,500.

The Drop and Drag Ease of Themes

HubSpot theme’s claim to fame is the drag and drop editing feature, and it’s worth all the hype. All themes are developed with the particular drag and drop code which lets you effortlessly unlock all the features in the HubSpot website builder. You can then manage your site content and page layout with each and never worry about code!

Global theme settings are easy to use, and you can manage all global elements. Customize the website’s header, footer, navigation, colors, fonts, buttons, and style.

With templates, it was common for custom models to get lost due to the many site modules. Content craters would struggle to find suitable modules so they could add them to their pages. Theme modules are quick and easy to find – no hunting needed! Look at the top section, and you’ll see theme modules.

Step by Step Create a Theme Project

Let’s look at the steps needed to create a theme project.

Make sure you have

CMS CLI

installed before you start.
If necessary, download themes from the

Asset Marketplace

, but CMS Hub accounts already have access to some default

HubSpot themes

.
From your HubSpot account, you’ll navigate to

Marketing>Website>Website Pages.
Navigate to Marketing >Landing Pages
Look in the top right-hand corner of the screen. You’ll see a create dropdown menu.
Click on the dropdown menu
Click on the

Create

page button
A dialog box will open.
Enter the page name
Click the

Create Page

button.
Click on the template tab. You’ll see templates from your active theme in the T

heme

templates section.
Select a template that is

not included in your active theme

.
Click on

Other Templates
Click

Template
Look to the top right and find

Preview.
Click on

Preview

to look at selected templates.
Select a

Template

and then go on to the content editor.
Use the

Drag and Drop Editor
If you are happy, then click the

Update

or

Publish

button to save your changes and make them live.

How to Apply a Theme Template to a Blog

Let’s examine the step-by-step process of how to apply a theme template to a blog. It is straightforward. By examining your blog setting, you can set your blog to use the same themes as your website pages. Remember the blog post and the blog listing page templates are both selected separately.

Steps to apply a theme template to your blog:

Go to your

HubSpot Account
Look for the

settings icon

within the main navigation bar and click on it.
Look to the left sidebar menu and navigate to the

Website >Blog
You might have numerous blogs, so you’ll want to click on the

Select a blog to modify

button.
A drop-down menu will appear.
Click on

blog
Click on the tab labeled

Templates.
Within the

Blog post

and

Blog post listing sections

, you’ll see an

Actions dropdown menu.
Click on the

Change template

tab
Look at the

Theme Selection

section.
Select and click on a

Theme
Select a

Template

for use in the theme
Click the

Done

button on the bottom right
Click the

Save

button located on the bottom left of the screen after setting the blog post and blog posting page templates.

Editing Theme Settings

You can always customize the appearance and style of the theme that you choose. With impressive versatility, you can change anything such as colors, spacing, or font. You’ll find all the options with the theme settings. When You edit styles, they are applied to all the pages and theme modules categorized in the theme.

The term theme refers to the style and templates you can use on your website’s pages and blogs within HubSpot. You’ll want to focus on creating consistency within the themes. Yes, you can use style settings for all pages by using the same theme in your managed theme settings.

If you want to customize your website at any time further, then you can click on the Design tab in the left panel of the page editor. The theme settings can then be adjusted using intuitive controls like switches, toggles, and color pickers.

Managing Themes

You can easily edit, copy a theme, or clone it to another HubSpot account with the design manager. You can even delete themes, cloned themes, and custom themes.

Clone a Theme

To edit coded files of default themes, they must be cloned. Custom themes and themes purchased at the Asset Marketplace can be cloned and edited directly.

From your HubSpot account, go to

Marketing>Files and Templates> Design tools
Look at the finder and click the

HubSpot folder.

Within the folder, you’ll find all

themes and default modules

(including

email drag and drop modules

).
Right-click on the

theme folde

r and then click on

Clone theme.
Type in the theme name and click

Create

The above process will copy the theme directly into the root folder, and it will then be listed in the finder. You can find it just as you would in other folders.

How to Copy a Theme to Another Account

Copying a theme to another account is remarkably easy. You simply must be the user who has complete permission to Design tools permission for both accounts.

Go to your HubSpot account

Marketing>Files and Templates>Design Tools
Pick the theme folder you want to copy and hover over it.
Right-click. on the folder
Choose

Copy to a different account
Select the account and click

Copy Asset
The folder will appear instantly in the specified account once the copying process completes.

It should be noted that you cannot copy theme folders between accounts in the HubSpot or the marketplace directories.

How to Upload a Theme to HubSpot

If you are a CMS Hug user, then you can download HubSpot Themes from Envato’s ThemeForest Marketplace and Upload them into HubSpot.

Go to the

HubSpot CMS Hub

in

Envato’s ThemeForest Marketplace.
Find a theme to purchase and download
Double click the downloaded theme, expand the compressed file, and create a folder that holds the new theme and its documentation.
Go to your HubSpot account and click on the

Settings icon

(found within the

Navigation bar)
On the left sidebar of the menu, go to

Websites >Themes
On the top right, click on

Upload Theme
You’ll find the theme in your computer’s files under the new file.

Once your theme uploads, a banner appears at the top of the page. The upload can take several minutes before it is on HubSpot.

Deleting a Theme

You can delete default HubSpot themes, uploaded themes, and cloned themes from the design manager.

Go to your HubSpot account

Marketing >Files and Templates>Design Tools
Within the finder, click on the folder that contains the theme’s assets
Click on the file dropdown menu
Pick

Delete

(filename)
A

dialog box

will appear – select I am sure that I want to delete this file by clicking on the checkbox and then click

Delete this folder.

Uninstall purchased themes from the Asset Marketplace

Click on the Marketplace icon located in the

main navigation bar
Go to the

Purchased tab
Hover the mouse over the theme and click on

Actions

to bring down the dropdown menu
Select

Uninstall
A dialogue box will appear, and you can click

Uninstall

again.

After examining HubSpot theme vs. templates, the appeal of themes is undeniable. It is the wave of the future because of ease of use due to the drag and drop features. Best of all, you don’t even really have to give up templates because some remain available in the theme’s modules.

Whether you are building a multi-page website using themes or creating. a single page with templates, you’ll enjoy the many benefits of HubSpot themes which is a step forward past standard templates.