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 first custom module as part of a much greater update to the CLEAN Pro series that will be incrementally rolled out in the coming year.

This monumental leap forward is geared to serve two main objectives:

1. Provide even more design/UX flexibility so you can craft beautiful, modern, and unique page layouts.
2. Increase page speed and performance through a more refined code set and finer grain control over what features (code) get loaded on the page.
   
   

This is a Beta Release!

For the first month or two, the Magic Module will be in a "beta release period." Like with all new software or major feature releases, there can sometimes be small kinks to work out. I intentionally design CLEAN modules to be incredibly versatile and with that comes a myriad of edge cases. Some of which slip through Kip's QA testing. 

This is where I need your help. 

If you happen to notice a bug when using the module or maybe you even have an idea for an additional feature that would make it NEXT-LEVEL, please, do me a solid and let me know.

You can report bugs or submit ideas and feedback here. I'll get Kip right on it.

Quick Note: The Magic Module is not included in any of the existing CLEAN templates by default while it's in the beta period. To use it, you must drag-n-drop it into the page.

Overview of Awesomeness

Here is the TLDR; version of what's included in the Magic Module along with jumping-off points that go into more detail.

• Section, Row, and Column Styling
  Now you'll have even more control over the building blocks that contain content.
• Better Background Video Support
  Improved video looping, placement, and layering if you want to get fancy.
• Include up to Six Content Columns
  Easily select how many columns you want along with specific mobile stacking order.
• Load only the Extra JavaScript Features you need
  Optimizing for SEO is now even easier with the ability to turn on/off features.
• Improved Adding, Editing, and Organizing Content
  It's now even easier to add content to each column and control the order in which it's displayed.
• Enhanced Control of Animations
  More animation options, including the ability to animate an entire column (plus its individual elements).
• Parallax Scroll Features for Content Elements
  Make your pages feel more fluid and dynamic with enhanced scroll effects.
• Improved Lottie File Integration
  Adding Lottie Files to your pages is now far easier and way cooler.
• Have Questions? Jump to the FAQ section
  There's a lot here. I'd have questions too.

This covers many of the high-level updates and improvements that you'll get to experience using this module.  There are a bunch of other little subtleties and style attributes you'll discover as you start experimenting with it.

Section, Row, and Column Styling

Just so that we're on the same page, here's how these elements will look in the HubSpot CMS.

You'll notice when using the Magic Module that the Styles tab is now available. In it, you'll be able to control various aspects of the Section (outer container), Row (inner container), and Columns (content containers).

Let's take a quick peek into the /// Column Settings so you can get the lay of the land. This is where you'll be able to set things like the background, spacing, and more advanced Design Extras for each column in your layout.

Design Extras

This is where things get really fun, albeit these are advanced-level features.  Here you'll be able to control things like:

• Border styles
• Rounded corner effects
• The vertical alignment of the content
• Overlap effects by shifting the column up or down into neighboring sections.
• Drop Shadow effects
• ...and more.

Better Background Video Support

One of the more common questions I've received... Ok ok, let's be real. They were more like friendly complaints about the current background video feature throughout CLEAN. The issue was that when the video completed its loop there was a very subtle but noticeable flash in the transition because of a feature that allows multiple clips to automatically be stitched together. Since most people only upload one video clip, the "stitching feature" was useless, so I scrapped it.

Looping flash be gone!

The Magic Module will support a single video clip for both the Section and Row background, which removes the flash and gives you a seamless video loop.

Reduced JavaScript

Because the video stitching feature is being removed, the JavaScript that was required has been removed too. Hello, faster page loading. :)

Video Positioning Control

Since the video is meant to cover the entire background of the container (section or row) and to allow for different screen sizes and ratios, a portion of the video is always going to get cropped out. 

Well, now you'll have more control over the video's position, and can decide if you'd rather show the top, center, or bottom of the video.

Include up to Six Content Columns

The beauty of using CLEAN modules is that they give you far more control over the column's structure and how it's displayed on mobile.  Up until now, most CLEAN modules let you add up to four columns with a few exceptions.

Now you can easily set up to six columns, have control over the arrangement, and even set a priority stacking order when viewed on mobile.

Load only the Extra JavaScript you Need

To further streamline the CLEAN Pro theme's code set and reduce unnecessary loading of JavaScript and CSS, you'll now have the power to turn off any cool features you don't need (like Lottie animation or rotating text). 

I'll be honest, this feature may take a little getting used to since it requires an extra step. I'd love to know what you think.

Under the START HERE section, you'll see where you can turn each of these on.

IMPORTANT NOTE: When you're building a page, pay attention to what you're optimizing for (either UX or SEO). If you're optimizing a page for SEO, I'd encourage you to keep the bells & whistles to a bare minimum. 

Have you seen this article of mine?
5 Tips to Increase the Speed & Performance of your Web Pages

Improved Adding, Editing, and Organizing Content

I want to give you (and let's be honest... myself) a better way of adding various content types to a specific column without locking the content into a specific stacked format.  Ladies and gents, now we have it!

In each content column, you'll see you can add multiple of the following content types:

• Rich text
• Image
• Icon
• Form
• CTA, Button, Modal Pop-Up
• Lottie Animation
• Rotating Text (popular in the Hero Banner)

Then you can easily drag-n-drop to rearrange their order.

Enhanced Control of Animations

I'm just as excited about this one as you are. Believe me! Let's just make a promise to each other right now.  Wait, wait... This needs to be a pinky promise.

Just because we can add an animation to something doesn't mean we should.

Pinky swear?  Ok, me too! :)

I say that in jest while also being 100% serious. Animations are awesome but like all things, they're best used in moderation.

With all that said, you now have far greater control over the types of animations you can add, their speed, delay, and how many times they repeat.

You can animate an entire column and even the elements within it. It's pretty rad! 

Just remember our promise. :)

Parallax Scroll Feature for Content Elements

I'm sure you've been to a website where various elements on the page subtly move at different speeds as you scroll down the page. It's a very "gee-wiz" feature, and I freakin' love it. Once again, only when used with restraint. 

Now, you'll be able to achieve the same look and feel with the Magic Module.

When selecting from the list of animation types, choose Parallax Element. You can use this feature on the entire column, or for individual content types in the column.

Use the slider to set how fast you want the element to scroll up or down the page (0.1 can go a long way).

Warning: This is an advanced-level feature and you may have to play with it to really make it look great, but the options are endless. Also, this feature will only apply to tablet and desktop devices. It's currently disabled for mobile devices. 

Improved Lottie File Integration

Lottie files are growing in popularity due to their file size and ability to add a level of pizzazz to any website.  Their growing library of animated illustrations is pretty awesome if I do say so myself.

Now you can include a Lottie file simply by copying/pasting the Lottie Animation URL into the Magic Module.

Then, directly in the module, you can control the size and position of the Lottie Animation.

Frequently Asked Questions

Here are some of the questions I've been getting. Maybe you have the same one.

Q: Why do you call it the "Magic Module"?

Well, it sounds cool plus I'm a fan of alliteration. In all seriousness... There are a handful of modules in the CLEAN theme which are multi-purpose and can do a lot. That's the Magic Module x 1,000,000! It's the type of module that someone can get extremely creative with when building out a page. In short... It's MAGIC.

Q: Will this module replace any of the existing CLEAN modules?

It's been designed in a way to eventually take the place of current modules like the Hero Banner, Image and Text, and Multi-Column Content modules. It can do pretty much everything these modules can do, and then some. From a technical standpoint, those existing CLEAN modules will never be removed from your account. 

Q: Why didn't you just update one of the existing modules with this cool stuff?

My #1 priority when releasing theme updates and improvements to various modules is to never do something that could break your website. Over the past couple of years, the HubSpot team has been adding a lot of great new features. The only way (currently) to take advantage of these new features is by building and releasing new modules and doing it in a way that will support future updates.

Q: Is it safe to use the Magic Module on my live website while in beta?

Yes. However, I'd encourage you to do extra testing when using this module for a page you're pushing live. Especially, if you plan on using some of the more advanced-level design features.

Q: What if I notice a bug, something funky, typo, or have feedback?

If you're really pushing the Magic Module to the limits, then a little bug may show itself. Before reporting it, I encourage you to explore all the options in the module to ensure you haven't overlooked a setting or switch. For all bug reports, ideas, and feedback you can go here. I greatly appreciate your help.

Wrapping it all up...

It never ceases to put a huge grin on my face when I see a unique and beautiful website created with CLEAN. Especially, when I have to look at the code to verify it's a CLEAN website. The Magic Module pushes even further in this direction to give you the tools and power to craft and optimize a beautiful website.