--- title: How to boost your website with HubSpot themes description: How to build a HubSpot website using the CMS (no development training necessary). image: https://blog.helpfulhero.com/hubfs/boost-website.jpg --- 5 min read # How to boost your website with HubSpot themes [![Picture of Miriam-Rose LeDuc](https://blog.helpfulhero.com/hubfs/Miriam-8sq.jpg) Miriam-Rose LeDuc ](https://blog.helpfulhero.com/author/miriam-rose-leduc) : February 7, 2022 [design](https://blog.helpfulhero.com/tag/design) [template updates](https://blog.helpfulhero.com/tag/template-updates) [tutorial](https://blog.helpfulhero.com/tag/tutorial) [CLEAN Theme Updates](https://blog.helpfulhero.com/tag/clean-theme-updates) [CMS](https://blog.helpfulhero.com/tag/cms) ![How to boost your website with HubSpot themes](https://blog.helpfulhero.com/hubfs/boost-website.jpg) **Table of Contents** [Heading](https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes#) [Heading](https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes#) HubSpot’s CMS is a powerful hub for designing and organizing your web content. For those of us non-developers, though, the idea of learning this backend system may feel overwhelming at first. True story: I didn’t know a thing about web design when I first got started, so you’re in good company. :) Stick with me for a few minutes, and you’ll feel confident in your ability to build a kick-ass HubSpot website. We’ll go over: - [Why you’d be smart to use a theme](https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes#smart) - [Child themes: the key to customization and ease](https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes#child-themes) - [How to keep your site updated](https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes#updates) Ready to take your site-building skills to a new level? Let’s do it.     ### Why you'd be smart to use a theme Themes make designing websites in HubSpot so darn easy. These collections of templates (like web, blog, and landing pages), modules (like text, video, and images), and global design features give your site that consistent brand look and feel. The HubSpot drag and drop editor is also a delight to use, making the user experience super smooth.   ![drag-n-drop](https://blog.helpfulhero.com/hs-fs/hubfs/CLEAN-images/gifs/drag-n-drop.gif?width=740&name=drag-n-drop.gif)   Plus, HubSpot makes site updates seamless with themes, but there are some important caveats (keep reading). ### Child themes: the key to customization and ease ##### What’s a child theme? It used to be that you had to choose between getting theme updates or customizing your site at the code level. But now, it's possible to do both. Thanks, child themes!   IMPORTANT: child themes are different from cloned themes. Cloned themes are customizable but won’t get the awesome theme updates when new versions are released. Child themes give you the best of both worlds. :) Even if you don’t have any custom features planned at the moment, it’s wise to start with a child theme in the event you change your mind. Child themes let you: - Make code-level changes to modules or templates - Create unique versions of global elements (ie., header or footer) - Add new custom modules or templates ##### How do I create a child theme? [So, how can you create a child theme? ](https://blog.helpfulhero.com/hubfs/video-embeds/Child-Theme-New.mp4)It’s simpler than you’d think.   First, choose an original (parent) theme from the HubSpot Template Marketplace. We’ll be using our CLEAN theme as an example here, so if that’s what you’re working with, sweet! Otherwise, you can still follow along, but it may look different on your end. After choosing your theme, go to your design tools (under Marketing → Files and Templates). Look to the menu on the left, find the CLEAN-6-1-theme folder under Helpful Hero, and right-click. You’ll see an option to create a child theme. Hit it!   ![Screen Shot 2022-02-04 at 9.41.59 AM-1](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%209.41.59%20AM-1.png?width=400&name=Screen%20Shot%202022-02-04%20at%209.41.59%20AM-1.png) Name your child theme (like CLEAN X Your Company). Don’t worry about the CSS or JavaScript under Advanced options (unless you’re a developer and want to customize specific files without affecting other parts of the site).   ![Screen Shot 2022-02-04 at 9.49.05 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%209.49.05%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%209.49.05%20AM.png)   Click create child theme. It’ll buffer for 10 - 15 seconds, and then BOOM! You’ve got a child theme. ##### How do I create new pages with my child theme? But hold on, now what? How do you actually create your site pages? Go to Marketing → Website → Website Pages and hit create new website page. You’ll be prompted to select a theme. Look for the CLEAN X Your Company child theme you just created and click it.   ![Screen Shot 2022-02-04 at 9.54.46 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%209.54.46%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%209.54.46%20AM.png)   Next, you’ll see some choices for the page template you want to use. What you choose here is totally up to you and depends on the type of page you want to build. Pick a template, any template. Now you can create a new page in your child theme! Have fun with that drag and drop editor. ;)   ##### How do I customize my child theme? If you’ve decided to implement any custom features, this section is for you. [For the video version, check this out.](https://blog.helpfulhero.com/hubfs/Child-Theme-Editing.mp4) Step 1: Pick a module to customize. First, decide which module you need to customize.  Let's say you've decided to add some features to your Hero Banner, for example.  Step 2: Clone the original theme. Head back to Marketing → Files and Templates → Design Tools and locate the original theme files.  Right-click on the original theme, and create a cloned version.   ![Screen Shot 2022-02-04 at 10.12.16 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%2010.12.16%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%2010.12.16%20AM.png)   You may find it helpful to name it something like transfer only since you’ll need it temporarily to move modules or files. Step 3: Take note of the file structure. Next, notice the file structure in your cloned theme.  In this case, the module you want to edit (Hero Banner) is nested under the modules folder.   ![Screen Shot 2022-02-04 at 10.13.29 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%2010.13.29%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%2010.13.29%20AM.png)   Pro tip: don't forget to check the CSS folder!  Chances are, the module you want to customize is linked to a CSS stylesheet.  In this example, you'll find the hero-banner.css file under CSS → modules.   ![Screen Shot 2022-02-04 at 12.46.50 PM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%2012.46.50%20PM.png?width=400&name=Screen%20Shot%202022-02-04%20at%2012.46.50%20PM.png)   Step 4: Recreate the file structure in your child theme. Next, find your child theme files.  You'll see just the fields.json and theme.json files, for starters.   ![Screen Shot 2022-02-04 at 10.04.40 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%2010.04.40%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%2010.04.40%20AM.png)   Now, add folders to match the folder structure of the cloned transfer theme.    ![Screen Shot 2022-02-04 at 10.10.16 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%2010.10.16%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%2010.10.16%20AM.png)   In this case, we'll want to add a modules folder and a CSS folder with a nested modules subfolder so that it looks like this:   ![screenshot](https://blog.helpfulhero.com/hs-fs/hubfs/screenshot.jpg?width=400&name=screenshot.jpg)   Step 5: Move your files. Now that your file structure is ready to go, head back to your cloned transfer theme, right-click on the module you want to edit, and hit Move module.   ![Screen Shot 2022-02-04 at 10.14.19 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%2010.14.19%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%2010.14.19%20AM.png)   Select the destination folder in your child theme.   ![Screen Shot 2022-02-04 at 10.14.50 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%2010.14.50%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%2010.14.50%20AM.png)   Do the same thing for your linked CSS file.   ![Screen Shot 2022-02-04 at 5.07.06 PM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%205.07.06%20PM.png?width=400&name=Screen%20Shot%202022-02-04%20at%205.07.06%20PM.png)   ![Screen Shot 2022-02-04 at 5.01.35 PM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%205.01.35%20PM.png?width=400&name=Screen%20Shot%202022-02-04%20at%205.01.35%20PM.png)   Now you should see both files sitting happily in their new child theme home.    ![Screen Shot 2022-02-04 at 10.16.33 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202022-02-04%20at%2010.16.33%20AM.png?width=400&name=Screen%20Shot%202022-02-04%20at%2010.16.33%20AM.png)   Step 6: Check for linked files. Before you edit your module, double-check the linked files in the sidebar on the right. If you see anything in here that you haven't already transferred, do that now. Pro tip: only pull in CLEAN modules, templates, or files that you ABSOLUTELY NEED to customize into your child theme since customized files won’t be overwritten by theme updates. More on that below. ### How to keep your site updated Here are some crucial things to know before installing an update (especially if you’re using a child theme): - The update WILL only alter the original PARENT theme files and pass-through to any CHILD themes you have set up. - The update WILL NOT overwrite any modified module, files, etc., in your CHILD theme (see step above). That’s why you should only bring over files you need to customize to avoid missing out on theme updates. - The update WILL NOT alter any CLONED versions of the theme in your account. Now that we’ve got that out of the way, how will you know when it’s time to do an update? ##### When to update your theme First, check to see which version of CLEAN you’re using. Go to Marketing > Files and Templates > Design Tools and find your @marketplace folder. Click either your cloned or original theme files, and open the theme.json file. The version number will be on line 6.   ![Screen Shot 2021-06-09 at 6.38.49 AM](https://blog.helpfulhero.com/hs-fs/hubfs/Screen%20Shot%202021-06-09%20at%206.38.49%20AM.png?width=740&name=Screen%20Shot%202021-06-09%20at%206.38.49%20AM.png) Next, [check the release notes](https://www.helpfulhero.com/clean/release-notes) to see which version of CLEAN is the latest. As of the date of this article, V.36 is the latest.   Does the version number from the release notes match the number from line 6 in your theme.json file? You’re good! Otherwise, it’s time for an update. Pro tip: if it’s time for an update, double-check the release notes to see if there are any additional steps you need to take. ##### How to update your theme Here’s how to take advantage of awesome theme updates. Go to your Content Settings and click the Marketplace & Downloads link in the sidebar. You'll see the list of your marketplace assets and a button that says Install update. Click it, and enjoy your updated theme!   ### You have so got this! You’re about to have a functional, flexible site that’s easy to edit, looks awesome, and converts. Just follow the steps outlined above, and you’ll be the hero of your company.   - [Tweet](https://twitter.com/share) [![Introducing the CLEAN timeline module (plus Kevin’s life story)](https://blog.helpfulhero.com/hubfs/Blog-Post-Image---3.png) ](https://blog.helpfulhero.com/introducing-the-clean-timeline-module) #### [Introducing the CLEAN timeline module (plus Kevin’s life story)](https://blog.helpfulhero.com/introducing-the-clean-timeline-module) ![Picture of Miriam-Rose LeDuc](https://blog.helpfulhero.com/hs-fs/hubfs/Miriam-8sq.jpg?width=30&name=Miriam-8sq.jpg) [Miriam-Rose LeDuc](https://blog.helpfulhero.com/author/miriam-rose-leduc) 2022 is around the corner, and what better way to ring in the new year than with a fresh CLEAN feature? Today you’ll learn how the new timeline... [design](https://blog.helpfulhero.com/tag/design) [tutorial](https://blog.helpfulhero.com/tag/tutorial) [CLEAN Theme Updates](https://blog.helpfulhero.com/tag/clean-theme-updates) [CMS](https://blog.helpfulhero.com/tag/cms) [Read More](https://blog.helpfulhero.com/introducing-the-clean-timeline-module) [![Save This: The Shortcut You Need](https://blog.helpfulhero.com/hubfs/My%20project%20(4).jpg) ](https://blog.helpfulhero.com/website-shortcut) #### [Save This: The Shortcut You Need](https://blog.helpfulhero.com/website-shortcut) ![Picture of Kevin Fremon](https://blog.helpfulhero.com/hs-fs/hubfs/photos/kevin-fremon-avatar-2017-small.jpg?width=30&name=kevin-fremon-avatar-2017-small.jpg) [Kevin Fremon](https://blog.helpfulhero.com/author/kevin-fremon) What if you could shave hours off your website build? HubSpot's saved sections help you create mini templates that you can copy from one page to... [design](https://blog.helpfulhero.com/tag/design) [tutorial](https://blog.helpfulhero.com/tag/tutorial) [CMS](https://blog.helpfulhero.com/tag/cms) [productivity](https://blog.helpfulhero.com/tag/productivity) [web design](https://blog.helpfulhero.com/tag/web-design) [Read More](https://blog.helpfulhero.com/website-shortcut) [![Introducing the ](https://blog.helpfulhero.com/hubfs/magic-module-feat-image.jpg) ](https://blog.helpfulhero.com/introducing-the-magic-module-and-clean-pros-step-into-2023) #### [Introducing the "Magic Module" and CLEAN Pro's step into 2023.](https://blog.helpfulhero.com/introducing-the-magic-module-and-clean-pros-step-into-2023) ![Picture of Kevin Fremon](https://blog.helpfulhero.com/hs-fs/hubfs/photos/kevin-fremon-avatar-2017-small.jpg?width=30&name=kevin-fremon-avatar-2017-small.jpg) [Kevin Fremon](https://blog.helpfulhero.com/author/kevin-fremon) Today, I'm super excited to announce the beta release of the all-new "Magic Module" that will be included in the CLEAN Pro (v58) update. This is the... [UX](https://blog.helpfulhero.com/tag/ux) [CLEAN Theme Updates](https://blog.helpfulhero.com/tag/clean-theme-updates) [CMS](https://blog.helpfulhero.com/tag/cms) [Read More](https://blog.helpfulhero.com/introducing-the-magic-module-and-clean-pros-step-into-2023) ```json { "@context" : "https://schema.org", "@id" : "https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes#blogposting", "@type" : "BlogPosting", "articleSection" : [ "Why you'd be smart to use a theme", "Child themes: the key to customization and ease", "How to keep your site updated", "You have so got this!" ], "author" : { "@type" : "Person", "name" : "Miriam" }, "breadcrumb" : { "@type" : "BreadcrumbList", "itemListElement" : [ { "@type" : "ListItem", "item" : "https://blog.helpfulhero.com", "name" : "Home", "position" : 1 }, { "@type" : "ListItem", "item" : "https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes", "name" : "How to boost your website with HubSpot themes", "position" : 2 } ] }, "description" : "How to build a HubSpot website using the CMS (no development training necessary).", "headline" : "How to boost your website with HubSpot themes", "image" : "https://blog.helpfulhero.com/hubfs/boost-website.jpg", "inLanguage" : "en", "isPartOf" : { "@type" : "WebSite", "name" : "Helpful Hero", "url" : "https://blog.helpfulhero.com" }, "keywords" : [ "HubSpot themes", "HubSpot CMS", "child themes", "HubSpot website builder", "drag and drop editor", "HubSpot template marketplace", "website customization", "HubSpot design tools", "theme updates", "no-code website design" ], "mainEntityOfPage" : { "@id" : "https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes", "@type" : "WebPage" }, "mentions" : [ "design", "template", "updates", "tutorial", "CLEAN" ], "potentialAction" : [ { "@type" : "ReadAction", "target" : "https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes" } ], "publisher" : { "@id" : "https://helpfulhero.com/#organization" }, "timeRequired" : "PT8M", "url" : "https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes", "wordCount" : 1480 } ``` ```json { "@context" : "https://schema.org", "@id" : "https://helpfulhero.com/#organization", "@type" : "Organization", "address" : { "@id" : "https://helpfulhero.com/#address" }, "alternateName" : [ "Helpful Hero" ], "contactPoint" : { "@id" : "https://helpfulhero.com/#contact-general" }, "description" : "Helpful Hero creates HubSpot website themes, templates, and resources that help teams build better websites on HubSpot.", "email" : "kevin@helpfulhero.com", "knowsAbout" : [ "hubspot", "website theme", "website development" ], "legalName" : "Lightbulb Moment Labs, Inc.", "logo" : { "@id" : "https://helpfulhero.com/#logo" }, "name" : "Helpful Hero", "sameAs" : [ "https://www.youtube.com/helpfulhero", "https://www.x.com/helpfulhero.com" ], "telephone" : "13108005066", "url" : "https://www.helpfulhero.com" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://helpfulhero.com/#website", "@type" : "WebSite", "name" : "Helpful Hero", "publisher" : { "@id" : "https://helpfulhero.com/#organization" }, "url" : "https://helpfulhero.com/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://superschema.ai/registry/blog-helpfulhero-com#profile", "@type" : "ProfilePage", "mainEntity" : { "@id" : "https://helpfulhero.com/#organization" }, "publisher" : { "@id" : "https://superschema.ai/#organization" }, "url" : "https://superschema.ai/registry/blog-helpfulhero-com" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://helpfulhero.com/#logo", "@type" : "ImageObject", "url" : "https://www.helpfulhero.com/hs-fs/hubfs/logos/HelpfulHero-Logo-Color.png?width=800&height=172&name=HelpfulHero-Logo-Color.png" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://helpfulhero.com/#address", "@type" : "PostalAddress", "addressCountry" : "USA", "addressLocality" : "Whitefish", "addressRegion" : "MT", "postalCode" : "59937" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://helpfulhero.com/#contact-general", "@type" : "ContactPoint", "contactType" : "general", "email" : "kevin@helpfulhero.com", "telephone" : "13108005066", "url" : "https://www.helpfulhero.com/contact" } ```