If you’ve stumbled upon this page it’s likely because you’re ready to upgrade your online presence but you don’t want to use some boilerplate template. You want a high-quality website that’s fresh and fun and easy to use — something that really represents the heart of your brand. So you hop into your trusty HubSpot account and navigate over to the CMS Hub.
The good news: You’re in the right place.
The bad news: You can’t dive straight into the page builder and bust out a website this afternoon.
First, you have to start at the beginning, which in HubSpot means choosing a website theme. This is kind of like a template for your website, except bigger and better. Your theme determines the overall design of your website from page layouts to content blocks to custom forms. And the best part? You can make them all your own!
To help walk us through the ins and outs of HubSpot website themes, I brought in Shelby Arnett, Senior UX/UI Designer here at Lone Fir. She’ll take us through the difference between themes and templates, things to consider before choosing your theme, her favorite HubSpot themes and some tips for starting your website design project.
Themes vs. Templates
First and foremost, you might be wondering “What the heck is a theme? Doesn’t HubSpot use templates?” The simple answer is yes, HubSpot still uses templates but now in a much more effective format.
In the past, HubSpot has offered template packs that you could customize to fit your business. These came with a few different page types and easy-to-use templates with the same general design. The only problem is that sometimes you didn’t have the page templates you needed and it was difficult to make changes site-wide. That resulted in design inconsistencies that presented a fractured brand experience.
To solve those issues, HubSpot moved their website framework completely over to themes. When you go to build your HubSpot website, you’ll notice that you now have to choose a theme instead of just a template page. Themes are packages of templates and modules that include a variety of options for a variety of page types.
“What’s really cool about themes is that they also include global settings that allow you to customize your branding across the entire site, all at once,” Shelby says. “This saves a ton of time and helps you ensure that your site feels consistent across all your pages.”
It’s important to note that purchasing a single template or template pack is now a thing of the past. Don’t panic, though. You still have say over what templates you use within your theme. Shelby explains that every time you create a new website page, you can pick from a list of templates within your theme. So you still have a lot of autonomy in designing your website.
Choosing Your Theme
The first thing to know when choosing a theme is that each one has unique functionalities and capabilities. Every theme includes:
- A list of web page, landing page, blog page and system page templates (think 404 error pages, email subscription pages, etc.)
- Sections
- Modules (also known as components)
- Style settings – fonts, colors, spacing, etc.
The combination of all these elements will make up the overall design of your website. Keep in mind that the type of sections and modules in your theme will dictate the capabilities of your website. So if you know you need a specific functionality, be sure to review the details of your theme before purchasing to ensure it can support that feature.
Just like with template packs, themes are mostly a paid feature of HubSpot’s website design platform. You can choose from a smaller selection of free themes, but these are fairly limited in capabilities and usually only work well for small websites.
“When it comes to price, you’re typically getting what you pay for,” Shelby says. “If you need to build a larger, more robust website, it’s worth paying for a more expansive theme to ensure you have all the features you need to create a great user experience.”
What to Consider
Shelby notes that the most important thing to focus on when choosing a theme is its capabilities. She recommends considering these four aspects of a theme:
- What templates and modules are included? Do they fit the needs of your website? Hint: This is easiest to answer after you’ve determined what you need your website to accomplish for your business.
- What support does the theme’s developer offer? Are they easy to contact if you have questions? (Note: Although HubSpot can offer support for their CMS and web building tools, the developer is who you should reach out to for questions or issues about the theme itself.)
- What is the site’s load speed? This is a critical SEO ranking factor and a good developer will value the importance of keeping load speeds down through clean, simple coding. Many themes mention site performance as a benefit in their description, so just make sure you dive into the details before making your choice.
- How are the reviews? Reading about other users’ experience with the theme can alert you to any unresolved issues or shortcomings of the theme, which can save you lots of time when designing.
In addition to these four things, you want to make sure you like the way your theme looks on the page. Sometimes it can be hard to get an idea of what a finished website looks like with the available page templates, so Shelby recommends using the theme demo to see a real-life example.
“The demo lets you explore the different page templates and modules before you purchase the theme. Pay special attention to the theme’s header, footer, and blog templates. These three elements are typically more ‘locked-in’ when it comes to customization, so you want to make sure you like them pretty much as is.”
Although each page offers some level of customization via the HubSpot drag-and-drop editor, the foundational design of your theme will shine through no matter what. It’s important that you like how the demo site looks by default before moving forward because even with customization, that will be the starting point for building out all of your web pages.
“It can be difficult to tell exactly how customizable things are until after you’ve purchased and downloaded the theme,” Shelby says. “That’s why I always recommend people choose themes that they like as shown in the demo so customization is more of a perk than a necessity.”
Our Favorite HubSpot Themes
With so many options to choose from, we understand that you might need some help narrowing it down. So let us introduce you to our two favorite HubSpot themes: CLEAN Pro and Atomic.
CLEAN Pro
Shelby describes this package as “a solid theme with a healthy number of page templates and modules.” It’s a straightforward design that has everything you need where you need it, with some bonus customization options.
“One of my favorite things about this theme is the developer, Kevin,” Shelby says. “He’s very kind and quick to respond to questions. He even offers 2 free hours of theme customization support!”
The full version of CLEAN Pro is $997 and it comes with 10 page types and 10 page features. Additional details listed in its HubSpot Marketplace description include:
- 100% Drag-n-Drop
- Totally customizable (colors, buttons, fonts, EVERYTHING)
- Multi-Language Ready
- Mega-Menu Options
- Mobile friendly design
- Video options
For businesses that want the design but don’t need quite so many capabilities, there’s also CLEAN Lite for just $100. With this theme, you get access to all the same page types but fewer features. It’s still a drag-and-drop format, still customizable, multi-language ready and mobile friendly. You just lose access to some of the more advanced features like the mega menu and video options.
Atomic
Similar to CLEAN, Atomic has a large library of page templates and modules so you can build a comprehensive website with lots of fun features.
“What I really appreciate about Atomic is not only the variety of components available, but the layout and customization options within each module,” Shelby says. “It allows you to take the same module and use it in a variety of ways.”
This theme also offers two different blog listing templates, which gives you a bit more variety than CLEAN does if you plan to make content one of the focuses of your website. Others features listed in HubSpot Marketplace include:
- 47 unique ready-to-use and fully drag-and-drop templates (in page editor)
- 210+ components at your fingertips
- Mega menu builder
- Regular updates (new components)
- Theme settings: easily update brand colors, fonts, font sizes, logos, and spacing
- Fully supported by the developer
Atomic’s full version is also $997, but unlike CLEAN Lite, Atomic Lite is a free version of the full theme. Note that you do lose a good bit of capabilities and the template library when you choose Lite, but it does still equip you to create a basic professional website suited for small businesses or those that don’t need advanced features.
Tips for Getting Started
Lots of things will go through your head when you start on a website design project. To help you orient yourself and focus on what will bring the most success, Shelby offers three pieces of advice.
Make a Wireframe
Although the HubSpot CMS makes website building easy, that doesn’t mean you get to skip the planning process. Shelby highly recommends creating a wireframe to evaluate how your custom theme needs to be built and what the pages will look like.
A website wireframe is a key part of the planning process and often keeps you from making time-consuming mistakes. “No website project should start without a wireframe,” Shelby says. “Even if you’re using a template, your wireframe helps you plan what pages you need, what they will look like and what needs to go on them.”
In the wireframe phase, Shelby recommends figuring out what capabilities you need for your website so you can make an informed decision as you shop around the HubSpot Theme Marketplace. This will help you choose a theme that supports your needs and makes it easier to create a plan of attack for your site structure.
Consider Your Customization
Shelby notes that most of the customization within your HubSpot theme is pretty easy to accomplish on your own. If you like the way your theme looks by default, you can easily add in all of your branding from the global settings. Even further customizations like swapping out sections or removing and adding content blocks are quick fixes if you’re comfortable using the HubSpot web editor.
“Using a web designer to build your HubSpot theme website could help it go faster and give you another perspective, but it’s definitely not required,” Shelby says. “The only time you would need to enlist more help is if you want to add customizations that aren’t already in the theme. In that case, you’d need a web developer to hop in and build that functionality for you.”
Have an Action Plan
“It’s never wise to just dive in and start building,” Shelby notes. “You need to have a plan of action. Without it, you’ll have to do a lot of backtracking and redesigning as you go.”
This is especially true if you’re moving into a theme that’s very different from your current website. The page length might be shorter on your new web pages, which means you have less space for content. The functionalities might be different which means rethinking some aspects of your user experience. Even something as simple as the size of the header image can prove a headache if you aren’t prepared.
Shelby notes that planning for all these areas is important when migrating a website over to a new design, but you should pay special attention to your content. “Be prepared to take some time to decide what content is worth bringing over and what can be left behind. This helps you save space and focus on the most important messaging for your new website.”
Go Forth and Design
HubSpot’s website themes make it easy to design a cohesive, professional website without needing advanced web design skills. Be sure to consider the functionality you need, the demo website’s design and the level of customization you’ll need before selecting a theme for your website. This will help you ensure you choose a package that best meets your needs and matches your brand.
As you start designing your website, keep these 5 homepage best practices in mind to set yourself up for success!
