{"id":151457,"date":"2016-07-29T01:18:45","date_gmt":"2016-07-29T01:18:45","guid":{"rendered":"https:\/\/mikedrizzo.com\/?p=151457"},"modified":"2016-07-29T01:18:45","modified_gmt":"2016-07-29T01:18:45","slug":"landing-page-background-images-with-rich-text-on-top-hubspot-hack","status":"publish","type":"post","link":"https:\/\/mikedrizzo.com\/2016\/07\/29\/landing-page-background-images-with-rich-text-on-top-hubspot-hack\/","title":{"rendered":"Landing Page Background Images with Rich Text On Top [HubSpot Hack]"},"content":{"rendered":"

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\u00a0now I\u00a0can!<\/p>\n

About six months ago I saw a growing set of problems.<\/p>\n

    \n
  1. I’m the only one that can do dev work in HubSpot.<\/li>\n
  2. Our design team keeps making awesome stuff that HubSpot isn’t set up to handle out of the box.<\/li>\n
  3. Our content production is increasing rapidly and needs to get out the door just as fast.<\/li>\n<\/ol>\n

    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.<\/p>\n

    So I took it upon myself to look into HubSpot custom modules<\/a>\u00a0(this was after lots of research on how the code base works in HubSpot).<\/p>\n

    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).<\/p>\n

    So, to get to the good stuff, here is what our new page can do:<\/p>\n

    In the hero of our landing page, we can now edit\u00a0everything!
    \nSee the GIF below or watch my     YouTube clip<\/a>\u00a0– make sure you have sound on \ud83d\ude42<\/strong><\/p>\n

    The custom HubSpot module contains the following fields:<\/p>\n