Latest COS Design Blogs

Designers Blog

HubSpot COS Tutorial: How to Create a Storytelling Landing Page

Written By Jonathan Pavoni on Nov 24, 2014 8:00:00 AM

When it comes to landing pages, visitors have become accustomed to seeing basically the same layout over and over again. The typical landing page contains a headline, offer, image, form, and an overview paragraph. These are all tried and true components for driving conversions for businesses large and small. 

However, sometimes you want to present your visitor with something new, fresh and unique to help drive engagement. In this blog post, I would like to showcase a new parallax technique that is great for storytelling on your landing pages. 

Babe_ruth_story_telling_landing_page
Currently, Creatrix is working on this story-telling, Babe Ruth landing page. 

 

Create an Engaging Story for your Brand & Products

This type of landing page is better utilized to tell a story or communicate a longer message with text; it is not necessarily geared at driving conversions. 

The storytelling landing page is great for clients who are launching a new product and want to give the story behind the product in a unique and user-friendly way. The technique utilizes parallax scrolling (http://designers.hubspot.com/blog/implement-parallax-using-with-cos), a very popular web technique, in a slightly different way. The parallax scrolling only affects the text on the landing page while the image remains static and unmoved. As the user scrolls down the page, the picture remains the main center focus while additional, new text appears until the user finishes reading the story. 

 

How to Implement the Landing Page

Let’s look at how to implement this technique on your HubSpot COS landing pages and site pages. It breaks down into 3 main parts: the modules, the css and the javascript. We explain each one in detail below

The Module Setup

Module_Template

The setup of the modules has two horizontal spacers on the left and right and two rich text modules nested inside of three groups. This is a very basic setup and you can make variations of this for your own landing page.

The reason that I have two rich text modules setup instead of one is because I’m using a different script font family in the header. However, you wouldn’t necessarily need two modules.

The CSS

To make this technique work you need the following CSS attached to the top module group in your template builder. You can create a class in your stylesheet like below:

.YourClassName{

background-image:url('http://cdn2.hubspot.net/hub/317971/file-1153811010-jpg/Labs/Babe.jpg');

height:100vh;

position:fixed;

background-size:cover;

}

Or you could attach the CSS right to the module in the template builder.

Edit_CSS

This CSS code snippet is doing the following things: 

  • Selecting the background image 
  • Securing the height of the image to be the full viewport of the browser 
  • Setting the position to fixed 
  • Making sure that the background image covers the entire page

The Javascript

The final thing that you’ll need to do is attach this piece of Javascript to the head section in your template builder. Find the code snippet below. 

You’ll need to call your own CSS class in the Javascript code:

This will enable the parallax effect to take effect for your page:

CSS_code_2

And it's as simple as that! You now have this effect for your HubSpot COS landing pages. Let me know in the comments below if you have any questions about how to implement this technique. Happy HubSpotting! 

 

Interested in making your COS site even more engaging for visitors? Then check out our HubSpot tutorials to take your site to the next level.

Subscribe to HubSpot's Designer Blog

 

Topics: Tutorial

Jonathan Pavoni

Jonathan Pavoni is the CEO of Creatrix Marketing. He is a passionate entrepreneur, marketer, and writer. He loves to help companies utilize technology to achieve growth.

Search HubSpot Designers Site