webdew-logo-new_v2-1
   
webdew-logo-new_v2-1
Close
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
website-green-icon
Websites
  • Website Designing
  • Website Development
  • Website Migration
  • HubSpot Website
  • WordPress Website
  • Growth-Driven Design
video-blue-icon
Videos
  • 3D Videos
  • 2D Animation
  • Whiteboard Animation
  • Video Ads
  • Explainer Videos
  • Testimonial Videos
  • Onboarding Videos
  • Tutorial Videos
  • Social Media Videos
  • Product Demo Videos
marketing-yellow-icon
Marketing
  • Inbound Marketing
  • Inbound Consulting
  • Marketing Automation
  • Search Engine Optimization
  • Brand Domains
hubspot-red-icon
HubSpot
  • HubSpot Apps
  • HubSpot Themes
  • HubSpot Migration
  • HubSpot Onboarding
  • HubSpot Management
  • HubSpot Development
  • HubSpot Audit
  • Free HubSpot Demo
  • HubSpot Diamond Partner
webdew-logo-new_v2-1
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

How to create HubSpot themes in Boilerplate?

How to create HubSpot themes in Boilerplate?-vbh
Tag: HubSpot
Author: Nardeep Singh
Nardeep Singh
Quick Links

Subscribe to Our Blog

Never Miss Any Update From Us !

HubSpot CMS is undoubtedly one of the best solutions to build and maintain amazing websites. However, while it’s a fantastic platform to have at your disposal, not every individual has the required skills to create a full-fledged website on HubSpot. 

This is where HubSpot CMS themes swoop in. HubSpot themes are pre-built packages of incredible assets that require no coding experience and are also entirely customizable. Incredible, right?

Read on to find out what HubSpot themes are, why you should consider using one, and how to get started with HubSpot CMS themes.

What is a theme?

HubSpot offers a huge collection of themes for you to use, transform, or use as a referral to create your own website theme. You can easily download HubSpot themes to your local environment using the HubSpot CLI tools and modify or extend those themes as per your application. 

List of best handpicked HubSpot templates from marketplace

A theme is usually a set of files for a website, including:

  • Coded templates: These are a set of templates for your website, including the homepage, landing page, about page, and blog templates. Although these templates are custom-coded by a developer, the content and layout can be effortlessly customized using the drag and drop page editor.
  • Modules: You can add and customize a set of unique theme modules on any page template in that particular theme. 
  • Global content: This is the content repeated on multiple pages, such as the website header or footer. You can edit the global setting in HubSpot theme, and global content and directly using the drag and drop page editor.
  • Theme settings: These are the default settings for templates in your theme, including the font, colors, and spacing. Any page with a theme template will have consistent styling. Besides, you can edit existing theme template in HubSpot.

Features of HubSpot themes

  • HubSpot themes allow content creators to customize each one of their templates using a central admin panel - all without the need for hiring a HubSpot web developer. 
  • HubSpot themes help establish brand consistency within multiple templates.
  • Custom modules that belong to a theme can be found quickly using the page builder.
  • The drag and drop grid and columns in HubSpot themes empower marketers to create or adjust layouts without having to hire a web developer.
  • Themes are simpler to work with for developers since they can be developed locally using either a CLI or HubSpot CMS Theme Boilerplate.
benefits-of-using-hubspot-themes

Getting started with HubSpot themes

Note that you need to have the CMS CLI installed.

How to edit existing theme template in HubSpot: A step by step guide

Step 1: Create a Boilerplate project

Run the “hs create website-theme my-website-theme” command to make a “my-website-theme” directory having files from the CMS theme Boilerplate.

Step 2: Upload the CMS Boilerplate

Run the "hs upload my-website-theme my-website-theme" command to upload the Boilerplate to your account's Design Manager under a folder titled "my-website-theme."

The files for the theme will, by default, be uploaded to HubSpot live within the root directory, while all other files in the Boilerplate are the supporting files. 

Step 3: Create a page

On the HubSpot dashboard, navigate to Marketing > Website > Website Pages, and select "Create." Pick a template from your newly uploaded theme by selecting the CMS Theme Boilerplate you uploaded from under the "Your Themes" section and then select one of the templates within it.

Step 4: Edit theme fields

Now that you have created a page switch to the theme editor. Navigate to "Design" and then "Edit Theme Settings" on the left of the theme editor. This is where you can change your existing theme settings. Once you publish changes to theme settings, the styles across your pages will be updated.

Step 5: Make local changes

Get back to your terminal, and run the "hs watch my website-theme my-website-theme" command. This command manages your local directory and automatically uploads the subsequent changes to your HubSpot account on every file save.

Create website with HubSpot CMS Boilerplate: A comprehensive guide

Step 6: Add a theme field

Go to fields.json in your local CMS Boilerplate to manage the available fields in the theme editor sidebar. To add a new field to specify the footer's height, go to "footer" at the bottom of your fields.json file and save it. Now refresh the theme previewer to preview the new field in the left-hand sidebar.

Step 7: Test changes

Refresh the theme editor page to see your new field under the footer. Update the footer height value to have it reflected instantly in the preview. You can set a background color for the footer to see the changes more readily.

HubSpot-themes

Congratulations on setting up your HubSpot theme successfully!

You can now easily create more theme fields and customize them as per your projects. HubSpot features various default themes that come with the HubSpot CMS Hub. You can easily access these themes to view, clone, or modify, and once you get the hang of themes, you can efficiently use them in the real world.

Know the actual HubSpot CMS cost to create powerful websites

The Bottom Line

Remember, there is no one-size-fits-all theme. What works for someone else might not work for you at all. So you need to keep a couple of things in mind while selecting a theme. For starters, aesthetics matter; however, the reason themes exist in the first place is to make it feasible to develop new pages. Second, the theme must be customizable within the HubSpot CMS framework. Besides, a theme must have all the core templates, such as homepage, blog, about us, products, etc.

Before selecting a theme in HubSpot:

  • Consider your budget, what components you need, and how it works.
  • Go through the demo pages and find out what all makes sense for your website.
  • Remember, some things can be adjusted easily, such as color palettes, while some changes may require additional effort.

HubSpot themes are an incredible advancement and will undoubtedly help HubSpot developers do their job more efficiently. To learn more about custom HubSpot themes, do get in touch with us!

Editor: Richa Sharma

Design HubSpot website without coding

Related Blogs

What is HubSpot CMS and its interesting benefits?-vbh
HubSpot

What is HubSpot CMS and its interesting benefits?

HubSpot themes vs templates: Here's what you need to know!-vbh
HubSpot

HubSpot themes vs templates: Here's what you need to know!

HubSpot CMS Hub Pricing: A look into every tier of growth-vbh
HubSpot

HubSpot CMS Hub Pricing: A look into every tier of growth

review-star

Based on 1000+ Reviews on

footer-dot-logo-img
  • Hubspot_Logo-icon
  • clutch_Logo-icon
  • upwork_Logo-icon
  • designrush_Logo-icon
  • goodfirms_Logo-icon
  • g2_Logo-icon
WE ARE GLOBAL
  • US-flag
  • CA-flag
  • IN-flag
  • GB-flag

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

Copyright © 2019 - 2021 Webdew Labs Inc. All Rights Reserved

Copyright © 2016 - 2021 Webdew Private Limited. All Rights Reserved

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

WE ARE SOCIAL
  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
Terms of Services
Privacy Policy