Free Training For Banners In Website Header And Footer

Loes Knetsch ^©

How nice would it be when you can insert your own advertising banner on top of your website and under the footer of your website? This training will take you step-by-step towards displaying a banner on every post and page.

1. INSTALL A PLUGIN

I will take you through this process with clear steps and screenshots. Before you can insert these banners on top of your website you need to install the free WP plugin “Header and Footer Scripts”.

This is how it looks, click on “Add New”, install and activate.

Do you have the plugin installed? Then the next thing is, you need a leaderboard banner (728×90).

2. CREATE A BANNER

You can create one for free on DesignWizard or Canva.

I have made this leaderboard banner on DesignWizard.

3. + NEW – OPEN A TEST POST

Open a test post, stay in the visual tab and upload your banner to the WP Media Library, insert your banner. When your banner is added you choose “center” and you can add any link you want to it. Hop over to the text tab and copy the code.

4. GO TO THE HEADER AND FOOTER SCRIPT PLUGIN

You can find the plugin under settings on the left of the dashboard. When you are there you see 2 boxes, one for the header and one for the footer. You can, if you want to, paste the created code into both areas. And click on “Save”.

Your banner will now appear on top of every post and page and in the footer.

But you want different banners on top of every page, go to point 5!

5. DIFFERENT BANNERS ON TOP OF EVERY POST

Every post has screen options, and you will find the “Header script” up there too. When you check the box, it will appear under your post.

And when you add a banner code right beneath your post, the banner will only appear on that specific post.

So, this is how you can insert a different banner on top of your header, and of course, I have added a banner above my header on this post 🙂

You can change the banner anytime you like. This period my Black Friday Banner will be up!

Comments

Free Training For Banners In Website Header And Footer — 4 Comments

CravenATAT on October 6, 2018 at 4:56 pm said:

I have always wanted to add banners to my website, but I had no idea how it all works. I have about 4 plugins on my site, but I didn’t realize there were ones for header/footer banner creation – I thought they were all pre-made. Your break down is perfect, and I clicked on your link to ‘Design Wizard’ and it is all making sense! Before I commit to the plugin, do you prefer DesignWizard or Canva? It seems DesignWizard is more user friendly without the hassle of technical talk.

Once I look at them both and hear which you recommend, I am going to add these banners into the header of each of my pages. You have sparked a new fire into my website development!

Reply ↓
- Loes on October 6, 2018 at 5:13 pm said:
  
  I have a premium account at Design Wizard, so obvious, I like that one more:) They both are good! Except from that Design Wizard has an affiliate program, and Canva not (Yet) I heard they are thinking about that.
  
  Reply ↓
Chris on October 6, 2018 at 4:53 pm said:

This looks like a really interesting plugin – I’ve been looking to spice up the header section of my WordPress blog for quite some time now, as I’ve still got the universal ‘forest path’ picture stuck on mine!

I’m a little bit unsure about HTML. Is it as simple as copying the HTML given to you and placing it in two separate boxes? (actually one box for me – I’m only looking to put a banner in the header section!).

I’m not the best with coding and I have heard it’s easy to mess up a site by inputting HTML in the wrong place…

Reply ↓
- Loes on October 6, 2018 at 5:01 pm said:
  
  You always have to be very careful adding HTML codes directly into the editor, you can break your website with doing that. That’s why I always advise, when you have the opportunity to create 2 websites, to use one for testing stuff. I know that Wealthy Affiliate offers you that opportunity. But maybe more services online do that. I create the script in a test post, and then copy it to the header or footer section of the plugin.
  
  Success creating your own header banner, by the way, this banner will appear above your header section.
  
  Loes
  
  Reply ↓