Have you ever wanted to build a landing page with a custom background image? How about this… have you ever wanted to build a landing page with a custom background image that your team can change on-the-fly? Well I have! And now I can!
About six months ago I saw a growing set of problems.
- I’m the only one that can do dev work in HubSpot.
- Our design team keeps making awesome stuff that HubSpot isn’t set up to handle out of the box.
- Our content production is increasing rapidly and needs to get out the door just as fast.
This observation led me on a quest to find a solution, one I was certain would exist in HubSpot given my initial understanding of their platform.
So I took it upon myself to look into HubSpot custom modules (this was after lots of research on how the code base works in HubSpot).
I spent a considerable amount of time learning how to build a custom module, and then more time learning how to implement it on a landing page (with custom CSS to help).
So, to get to the good stuff, here is what our new page can do:
In the hero of our landing page, we can now edit everything!
See the GIF below or watch my YouTube clip – make sure you have sound on 🙂
The custom HubSpot module contains the following fields:
- Text Field x 2
- Rich Text Field x 2
- Image Field
- Choice Field (this was for fun but turned out to be very useful)
With our new module in place and HubSpot’s friendly responsive (bootstrap) framework, we’ve got a fully mobile-ready landing page template for our team to use.
This means no more custom templates and CSS files for every new landing page design! WOO HOO!
If you’re looking to get started with this little HubSpot Hack, I’ll save you some time… I’m happy to show you how to build out the module but first, I’m going to go home and get an IPA… I’m a little tired from all this dev work 😉
Stay tuned.