Landing Page Background Images with Rich Text On Top [HubSpot Hack]

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.

  1. I’m the only one that can do dev work in HubSpot.
  2. Our design team keeps making awesome stuff that HubSpot isn’t set up to handle out of the box.
  3. 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)

ScreenCaptureProject1

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.

Mobile Response

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.

About The Author — Mike Rizzo
Mike Rizzo

Mike Rizzo, is the Community-led Founder of MO Pros and MarketingOps.com. With his extensive background in marketing Mike helped build, launch, manage and optimize Mavenlink's first-ever user community and Client Advisory Board programs. He is the founder of MO Pros - The Community for Marketing Operations Pros that is growing with an average of 110 new members every month. He is also the co-host of the podcast called Ops Cast by MO Pros. As the founder of MarketingOps.com, Mike is taking a community-led approach to building resources that are purpose-built for MO Pros.

Related free workshops

Button in Google Sheets to trigger a Google Script to send multiple rows to Zapier

Zapier Import Multiple Rows from Google Sheets

Anyone who has worked with Google Sheets in Zapier is likely to have run into the issue of needing to import more than the 20-row maximum imposed when using the Google Sheets app. This post will show you how to overcome this limitation and import multiple rows from Google Sheets into Zapier using some JavaScript and webhooks.

Become a member

MarketingOps.com Launches Career and Community Platform for Marketing Operations Professionals

Community-led platform offers networking opportunities, career development tools, and educational resources for more than 3,000 “MO Pros” IRVINE—MarketingOps.com, a new platform for marketing operations professionals, launched today. The website aims to serve the 12 million global professionals in the industry—starting with the 2,800 members of the existing MO Pros community:

Become a member
Zapier nested looping horizontal flow diagram

Zapier Nested Looping using Webhooks & Python

Banging your head against the wall because of the 500 iteration limit on the “Looping by Zapier” action? Well make like Freddie Mercury and break free by using webhooks and Python in Zapier to achieve nested looping so that you can do as many iterations as you need!

Become a member