Buy Theme
Get notified when updates to CLEAN are released.

brand-canvas-free-download

Take your brand from barely noticed to wildly loved with my Brand Canvas and 3-Step Guide.

Yep. It's totally FREE. No fluff. No B.S.  Just actionable steps you'll wish you took months if not years ago.

 

Curious?? Learn More

    web-creation-series-mega-menu-2

    Everything you need to get started with HubSpot's CMS and build your CLEAN website.

    No developer is needed.  This complete 3-part series includes a step-by-step guide to high-fives all around the office.

     

    Download the Guides

       
      The CLEAN Theme

      Take full advantage of the new and improved HubSpot CMS experience with the CLEAN theme.

      Theme Support & Reference

      Have a question and looking for an answer? I've likely got a video for that or an article that covers it.

      Built for Speed, Performance, AND an awesome UX.

      GTmetrix is the gold standard in analyzing the speed and performance of a website. Here is how the helpfulhero.com homepage (using CLEAN) ranks. Not too shabby for a media-rich page.

      gt-metrix-grade-2-15-21-1

      Report generated: Sat, Apr 23, 2022 at 2:56pm CST

        5 min read

        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:

        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

         

        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? It’s simpler than you’d think.  

        First, choose an original (parent) theme from the HubSpot 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

        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

         

        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

         

        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.

        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

         

        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

         

        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

         

        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

         

        Now, add folders to match the folder structure of the cloned transfer theme. 

         

        Screen Shot 2022-02-04 at 10.10.16 AM

         

        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

         

        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

         

        Select the destination folder in your child theme.

         

        Screen Shot 2022-02-04 at 10.14.50 AM

         

        Do the same thing for your linked CSS file.

         

        Screen Shot 2022-02-04 at 5.07.06 PM

         

        Screen Shot 2022-02-04 at 5.01.35 PM

         

        Now you should see both files sitting happily in their new child theme home. 

         

        Screen Shot 2022-02-04 at 10.16.33 AM

         

        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

        Next, check the 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.  

        introvert-inbound

        An Introvert's Guide to Surviving HubSpot's INBOUND 2022

        Headed to INBOUND 2022?  This exciting experience is sure to throw a ton of new info, ideas, and connections your way. 

        Keep reading for tips on how...

        Read More
        hubspot-pricing

        HubSpot pricing tiers: which should you choose?

        Is HubSpot right for you? If you’re considering a new website, this platform is super easy to use and includes critical tools you need to grow your...

        Read More

        Boost Sales With These 8 Website Features

        Sick of wasting time on the wrong prospects? These vital website elements will help you level up your inbound marketing, qualify more leads, and...

        Read More