• 

• 

• 

• 

• 

Inspiration

1) Build the best HubSpot CMS theme possible by implementing the most up-to-date HubSpot CMS functionality and web development best practices. 2) Extend the current limitations of HubSpot CMS to give marketers superpowers.

What it does

Generator lets marketers build website pages, landing pages and blogs without code and extends the current limitations of HubSpot CMS to give marketers superpowers.

Accomplishments that we're proud of

Modern HubSpot CMS Development Best Practices

Generator contains truly drag and drop editable modules and templates enabling marketers to build high-converting HubSpot CMS websites, landing pages and blogs without code.

Modularity

Everything from code to UI was built with modulatiry in mind; each module serving a unique purpose and can be adapted across any page for varying use cases.

Accessibility

Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services. All aspects of the Generator theme (even the Microsite!) take into account web accessibility best practices ensuring a rich web experience for all!

Coding best practices

All code is modular and DRY. Vanilla JavaScript (only) was use throughout the theme so there is no reliance on heavy libraries like jQuery or Bootstrap ensuring lightning fast page load times and top tier web performance; this is one of the major reasons why Generator has a 98 score on Google Page Speed !!!

Theme settings and style fields

Theme settings and style fields are consistently grouped with clear tooltips and lables offering greater support for non-technical user.

Learn more about style fields

Drag and Drop Areas

Drag and drop areas in both global and local contexts allow creators to place modules, change layout, and adapt styling on any page with ease.

Learn more about drag and drop areas

Reusable sections

Generator has many pre-built reusable sections allowing content creators to drag and drop commonly used content onto pages instantly.

Learn more about reusable sections

Branding Settings Inheritance

Theme settings and module style fields pull default styling directly from the user’s HubSpot account settings allowing user to make global site updates from one place.

Learn more about brand settings inheritance

Promote HubSpot CMS’s unique features

HubSpot CMS + CRM enable content creators to build powerful websites that convert. But many HubSpot users still aren’t familiar with how to leverage the power of a CRM coonnected to their website. Generator has pre-built templates that levereage cool HubSpot CMS features like content personalization to spark creative ideas in the minds of marketers as they build.

Responsive Web Design

Mobile First

Generator is built using responsive web design best practices, intuitively adapting it’s content to mobile, tablet and desktop devices out-of-the-box.

Responsive Breakpoints

Generator leverages this new HubSpot functionality which allows marketers to control the mobile experience of pages by setting certain styles to apply to mobile separately from desktop.

Learn more about HubSpot’s new responsive breakpoints

Responsive Fonts

Generator theme users can set custom font sizes for mobile and desktop devices directly from their theme settings.

Originality

One of the goals for this theme was to extend the functionality of HubSpot CMS providing unique functionality for marketers which can’t be achieved using other themes.

Dynamic Text Replacement

Employing dynamic text helps PPC marketers create a cohesive experience between their target keywords, ad copy and landing page content; when used correctly dynamic keyword insersion has been proven to increase conversion rates for paid traffic campaigns.

Generator is the only HubSpot website theme that gives marketers the capability to dynamically insert keywords from PPC campaigns into website text based on URL parameters!!! Check out this dynamic keyword insersion example

Website Embedded Chat & Chat Bots

Companies’ conversion rates increase by up to 50% when they make the switch from generic web forms to automated conversations with chatbots. The Generator theme’s custom chat module automatically embeds a HubSpot chat widget directly into a HubSpot website or landing page!!! Check out this embedded HubSpot chatbot example

Microsite!

Need a Microsite? No problem! The Generator theme is the only HubSpot theme that can convert a truly drag and drop website pages into a full screen Microsite!!! Check out this Microsite example

Performant Animations

Using Generator’s enhanced Rich Text and enhanced Image modules, users can choose to animate content when it scrolls into view. These modules provide a modern UX while keeping web performance top of mind by only loading animation code if and when needed.

Check out examples of these enhanced HubSpot modules

Search Engine Optimization

Page Speed Optimization

Generator was built with every conceivable page speed optimization and is (to my knowledge) the fastest loading website theme on HubSpot CMS yielding a Google Page Speed score of 98!!!

Schema Markup

Generator's SEO was taken to the next level with Schema Markup. Websites that use schema markup will rank better in the SERPs than companies without markup. The Generator theme has custom Schema Markup functionality built in, so Blog Templates will rank higher on search engines.

Check out the Google Rich Results Test for Generator’s Blog Template

What we learned

Choosing to rely solely on vanilla JavaScript (and removing jQuery) for enhanced page speed optimization taught me some new and awesome JS fundamentals.

• Choosing to rely solely on vanilla JavaScript (and removing jQuery) for enhanced page speed optimization taught me some new and awesome JS fundamentals.
• You have to stop building exciting new stuff and start focusing on the finish line when there’s a deadline involved 😆
• Working 16 hours per day encourages beard growth
• HubSpot is the best CMS for marketers without question

How we built it

HTML, CSS, JS, HUBL VS CODE

Challenges we ran into

Getting the Microsite to convert a drag and drop page to way longer than expected but ultimately I think it was worth the time and effort to include this feature in the theme.

What's next for Generator HubSpot Website Theme for Marketers

More robust documentation, new and exciting CRO related features, additional blog post templates.

Built With

• coffee
• css
• html
• hubl
• javascript
• love