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.
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 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
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.
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.
Generator has many pre-built reusable sections allowing content creators to drag and drop commonly used content onto pages instantly.
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.
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
Generator is built using responsive web design best practices, intuitively adapting it’s content to mobile, tablet and desktop devices out-of-the-box.
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.
Generator theme users can set custom font sizes for mobile and desktop devices directly from their theme settings.
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
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
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.
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!!!
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.
What we learned
- 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.