How to Add a Fixed Position Banner to a Website

One trend in web design that has been gaining popularity is the use of fixed position banners that remain at the bottom of the browser as visitors scroll vertically. There are a number of sites in the design niche that are using this approach for various purposes. In this post I’ll show you how you can add one to your site, and for WordPress users we’ll look at how you can change the banner depending upon the category of the post by using PHP.

First, let’s take a look at 5 websites that are currently using this type of banner.

Web Design Ledger

Web Design Ledger started using a fixed position banner a few months ago to promote their premium membership and it has since been changed to be used for advertising space.

Tutorial9

Tutorial9 was one of the first blogs (that I am aware of) that used a banner like this to sell advertising space.

Envato

Envato makes use of a fixed position banner to provide links to the various websites in their own network of sites.

DesignMoo

Niche social media site DesignMoo also uses a banner to link to sites in their network, as well as to promote a WordPress theme that is for sale.

Sitepoint

Sitepoint uses a fixed banner to promote their books that are for sale.

The advantage of using a fixed position banner at the bottom of the browser is that it provides high visibility without being intrusive. Most of the sites mentioned above are using only 40 pixels of height for the banner, so it is essentially just reducing the visibility of the page by 40 pixels of height. The banner on DesignMoo even uses transparency so you can see through to the page behind the banner.

Setting up a banner area is pretty simple. For the purposes of this tutorial I will be adding a fixed postion banner to the theme here on DesignM.ag that will be used to promote one of our gallery sites, Folio Focus. This is not being used on the live theme, but you can see it in the screenshot below or you can visit the demo page.

HTML:

Place the following code directly after the opening body tag (for WordPress users, this is in the header.php file).

The code uses a simple div with an image and a link to create the banner. Next, we will use CSS to style it.

CSS:

Now we have a fixed position banner that stays at the bottom of the browser. (It should be pointed out that in IE6 the banner will appear at the very top of the page using this code).

Using PHP to Display Various Banners (for WordPress):

There may be some situations where you want to display different banners based on the category, the page, or some other factor. Imagine you have a few products that you sell at your blog. One of your products is directly related to the content of a particular category of posts, and another product is related to a different category of posts. Using PHP you can have different banners displayed according to the situation so that they will be more effectively targeted at the readers.

We will be using conditional tags to show the appropriate banner, and for this example the banner will be determined by the category of the post. I will have two banners that will be displayed for posts in a particular category, and a third banner that will be displayed in all other situations. If you were to use this approach on your own site/blog you could use use more or less banners depending on your needs. (Of course, you could use conditional tags for other things aside from post category. See the Codex page on conditional tags for more information.)

In the example, the Folio Focus banner will be displayed on posts in the “Inspiration” category, a banner for CartFrenzy will be shown on posts in the “Resources” category, and a banner for Minimal Exhibit will be shown in all other situations (posts in other categories, pages, index page, etc.).

Instead of using the HTML code shown above, we will use the following code in the header.php file inside the bottomBanner div, with nothing else in the div.

You will need to change the category numbers to match up with the appropriate categories of your own blog (you can get the numbers by going to the WP dashboard, click on “posts”, click on “categories”. The CSS code from the previous example would remain the same. Here it is again:

This is not live on the blog, but here are some screenshots. A post in the Inspiration category shows the Folio Focus banner.

A post in the Resources category shows the CartFrenzy banner.

And a post outside of those two categories shows the Minimal Exhibit banner.

A fixed position banner could be used for a few different purposes including: selling ad space, promoting your own products/services, promoting affiliate products, promoting other sites in your network, encouraging visitors to subscribe, and more. The examples that we created in this tutorial used a single image that was the full size of the div, but you could use text, smaller images, or a combination.