How to add a side banner?

  • 14 July 2017
  • 5 replies
  • 130 views

Hi, I would like to add a side banner to my client’s page like this one on this page: https://arraythemes.com/themes/medium-wordpress-theme/

Is there a way to do it with Unbounce? so far I didn’t see any template page with this option.

Regards,

Andres.


5 replies

Userlevel 6
Badge +1

Hey @Ands this is called a “sticky container” it’s comprised of some basic css and some js. There are plenty of code snippets online you could download, just google “sticky sidebar”. Someone better to answer this question would @Hristian, he is a code wiz in Unbounce.

However, IMHO, I would not add something like this to an LP. It breaks the narrative. You should tell a simple story leading to a strong CTA.

What kind of information do you need in this sidebar? You may be able to use a sticky top or bottom bar now available on Unbounce >>> [BETA] Sticky Bars added to Convertables

Hey @digibomb, yeah my client needs a sticky sidebar to show an image, but I will try with a sticky bar as you recommended.

Thanks a lot for your help.

Regards,

Userlevel 7
Badge +3

Hi @Ands,

I was able to dig up an old proof of concept that I think does exactly what you need.

You can take a look here.

It’s basically, a single box element the you “fix” with a bit of CSS.

<style>
  #lp-pom-box-YOUR_UNIQUE_NUMBER_ID_HERE {
   position:fixed;
   height:100%;
   width:320px; 
   top:0;
   left:20px; 
  }
</style>

Best,
Hristian

A side banner? On a landing page? Unless it has the main CTA on it, I’d not recommend it. Also, does the landing page really have to be that long (like the one you were pointing to?) – unless it’s a high-ticket item. Even if it was, all the pitching could happen with email while you should use landing page just to get the lead.

Long or short? Test
Side bar or no side bar? Test.

HTML:

CSS: like http://livemnc.com/virtual-private-cloud/

.banner-left{

position: fixed;

left: 0px;

bottom:0px;

z-index: -999;

}

.banner-right{

position: fixed;

right: 0px;

bottom:0px;

z-index: -999;

}

The best way to accomplish this would be to create a snippit (“banner-snippit”) though. This would result in condensing all of your banners into one file. That way you don’t need to go chasing down each page to edit banners.

In the snippit you can do something like this:

{% if page.url contains (some word) %}

{% endif %}

{% if page.url contains (some OTHER word) %}

{% endif %}

etc…

etc…

What that will do is check the URL for a certain string of characters. Allowing you to make particular pages display particular banners.

Then you just add “{% include ‘banner-snippit’ %}” into your theme.liquid file just inside the

visit : http://livemnc.com/virtual-private-cloud/

Reply