Site iconSite icon Inbound Results

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

admin
website_experience_designwebsite_experience_design

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:

Benefits of HubSpot Themes

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

Benefits of HubSpot themes include:

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:

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:

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: 

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.

  1. Make sure you have CMS CLI installed before you start. 
  2. If necessary, download themes from the Asset Marketplace, but CMS Hub accounts already have access to some default HubSpot themes. 
  3. From your HubSpot account, you’ll navigate to Marketing>Website>Website Pages. 
  4. Navigate to Marketing >Landing Pages 
  5. Look in the top right-hand corner of the screen. You’ll see a create dropdown menu.
  6. Click on the dropdown menu
  7. Click on the Create page button
  8. A dialog box will open. 
  9. Enter the page name
  10. Click the Create Page button.
  11. Click on the template tab. You’ll see templates from your active theme in the Theme templates section. 
  12. Select a template that is not included in your active theme. 
  13. Click on Other Templates 
  14. Click Template 
  15. Look to the top right and find Preview. 
  16. Click on Preview to look at selected templates.
  17. Select a Template and then go on to the content editor. 
  18. Use the Drag and Drop Editor 
  19. 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: 

  1. Go to your HubSpot Account
  2. Look for the settings icon within the main navigation bar and click on it. 
  3. Look to the left sidebar menu and navigate to the Website >Blog 
  4. You might have numerous blogs, so you’ll want to click on the Select a blog to modify button.
  5. A drop-down menu will appear.
  6. Click on blog 
  7. Click on the tab labeled Templates. 
  8. Within the Blog post and Blog post listing sections, you’ll see an Actions dropdown menu.
  9. Click on the Change template tab 
  10. Look at the Theme Selection section.
  11. Select and click on a Theme
  12. Select a Template for use in the theme
  13. Click the Done button on the bottom right
  14. 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. 

  1. From your HubSpot account, go to Marketing>Files and Templates> Design tools 
  2. 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). 
  3. Right-click on the theme folder and then click on Clone theme. 
  4. 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. 

  1. Go to your HubSpot account Marketing>Files and Templates>Design Tools
  2. Pick the theme folder you want to copy and hover over it. 
  3. Right-click. on the folder
  4. Choose Copy to a different account 
  5. Select the account and click Copy Asset
  6. 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.

  1. Go to the HubSpot CMS Hub in Envato’s ThemeForest Marketplace.
  2. Find a theme to purchase and download
  3. Double click the downloaded theme, expand the compressed file, and create a folder that holds the new theme and its documentation. 
  4. Go to your HubSpot account and click on the Settings icon (found within the Navigation bar) 
  5. On the left sidebar of the menu, go to Websites >Themes 
  6. On the top right, click on Upload Theme 
  7. 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.    

  1. Go to your HubSpot account Marketing >Files and Templates>Design Tools
  2. Within the finder, click on the folder that contains the theme’s assets
  3. Click on the file dropdown menu
  4. Pick Delete (filename)
  5. 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 

  1. Click on the Marketplace icon located in the main navigation bar
  2. Go to the Purchased tab
  3. Hover the mouse over the theme and click on Actions to bring down the dropdown menu
  4. Select Uninstall
  5. 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.

Exit mobile version