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.

Lead Generation & Twitter Cards – Inbound Marketing

Leads Funnel

TWITTER ANNOUNCES TWITTER CARDS

(for everyone this time)

So what are “Twitter Cards”?

From Twitter (thanks Twitter):

“Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a “card” added to the Tweet that’s visible to all of their followers.”

How Do I Use It?

You can use it to have SIGN UP forms for your email lists available on Twitter directly… AWESOME! Also, you can have a particular look and feel associated to each type of card you assign to your websites. Embedded information allows the cards to appear just the way you want them. Check out these screen shots below of the sample cards.


Twitter-Image2
Twitter-Image Twitter-Image3

How do they perform?

Well.. no one really knows how well they will perform in the long run, but for now we have some research to refer to.

Check this out… Mashable shared how Twitter Lead Generation Cards performed for some companies. “In a case study quoted on Twitter’s blog, outdoor gear and apparel company Rock/Creek saw a 4.6% engagement rate and generated more than 1,700 new email contacts in one week by using a Card within a Promoted Tweet.”

twitter-lead-generation-card-example2

Can I Integrate with My Company?

Actually yes!

According to Twitter Support you can link them with the following CRM / Marketing Automoation tools:

And possibly with: