WordPress-HS-2024-series

Everything you need to know about migrating your website from WordPress to HubSpot.

This step-by-step visual guide will walk you through the process and help get your website all set up on HubSpot.

 

Download Now

    web-creation-series-mega-menu-2024

    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.

      Google PageSpeed Insights is the gold standard in analyzing the speed and performance of a website. Here is how CLEAN Pro ranks. Not too shabby for a media-rich page.

      page-speed-3-7-23

      Report generated: Tues, March 7, 2023, based on Home Page - Opt 1.

        1 min read

        At last! The CLEAN Pro Figma file is here.

        At last! The CLEAN Pro Figma file is here.

        Table of Contents

        To all my fellow designers out there, this one is for you. Today, I'm excited to announce the release of version 1.0 of the CLEAN Pro Figma file. You've been asking for it and I'm happy to finally make it a reality in an effort to help streamline your design workflow.

        What to expect.

        Like my approach with CLEAN, this Figma file will be a constant work in progress with consistent version updates over time.  Version 1.0 is intended to get you movin' and groovin' in your wireframe process with a majority (not all) of the existing CLEAN modules.

        Download CLEAN Figma

         

         

        The basics.

        When opening the Figma file for the first time you'll see the Pages section under the Layers tab. I've done my best to make this as intuitive as possible. 

         

        Screenshot 2023-04-05 at 2.07.26 PM

         

        For the most part, you can start building layouts by clicking Start Designing Here. That will include a starter layout with the header, footer, hero banner, and magic module.  These are really just placeholders to give you a starting point.

         

        Screenshot 2023-04-05 at 2.11.37 PM

         

        From there I would suggest that you head over to the Theme Settings (Brand style) to dial in your fonts, buttons, and colors that many of the components (modules) will use. Here you'll be able to change a variety of aspects. This is just one example.

         

        Screenshot 2023-04-05 at 2.15.06 PM

        Adding components (modules) to your layout.

        There are a couple of ways to do this but the way I suggest to avoid confusion is to simply click the Assets tab in the left-side panel to see the list of custom modules included.

        Simply drag them into your layout.

         

        Screenshot 2023-04-05 at 2.19.06 PM

         

        The same can be done for smaller elements like buttons, form elements, etc.

         

        Screenshot 2023-04-05 at 2.20.16 PM

        Adjusting the column structure

        As you know, CLEAN modules have a lot of built-in flexibility when it comes to selecting how many columns you want as well as the column structure.  Building all these options into a Figma component is nearly impossible but there are a few options for you to use.

        When double-clicking on a component you'll see some options appear in the right sidebar. For example, the number of columns.

         

        Screenshot 2023-04-05 at 2.23.35 PM

         

        Definitely explore these.  They aren't perfect but they will definitely save you some time.

         

        Have feedback?

        As I said, this is the first release of this Figma file and it's only going to get better from here on out. This is where I need your help.  If you see anything that can be improved, I would really appreciate you letting me know.

        Together we can make this awesome and give you yet another tool in your design arsenal.

         

        Introducing the

        Introducing the "Magic Module" and CLEAN Pro's step into 2023.

        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...

        Read More
        10 Best Landing Page Design Trends that will Crush it in 2023

        10 Best Landing Page Design Trends that will Crush it in 2023

        Updated: 11/14/22The fun of creating landing pages is that it gives us the ability to experiment with design, copy, offers, etc. in order to capture...

        Read More
        10 Steps to Redesigning Your Website Like a Pro

        10 Steps to Redesigning Your Website Like a Pro

        Taking on a website redesign project can be both terrifying and thrilling at the same time. In this article I'm going to break down the ten key steps...

        Read More