How To Create A Sidebar Banner With A Call To Action (For Internet Marketers)

Whenever I have a new niche site set up and made the most basic changes it’s time to create a banner. Usually that more or less happens naturally. I go to Fotolia or to Depositphotos, search for pictures and put them together. But even if your website already has a “face” you’ll need some more graphics to stand out from the crowd. What I like to do at our niche sites is creating a call-to-action banner for the sidebar. I use a graphic from the banner, add some text and a button and ask the readers to click here to sign up for the newsletter. This allows me to create a whole page dedicated to newsletter signup and showing our readers the benefits of signing up for the newsletter. It usually looks like this:

When they now click on the button they arrive on this page with the newsletter sign-up box. I really like that because I can create unique sidebar banner without asking a programmer to do so. Additionally, this  makes my website much more unique and standing out of the crowd.

Create A Sidebar Banner

Chances are that you have never worked with a graphic program. I usually use Photoshop but you can also use Photoshop Elements or the free Gimp software. You should know, that Adobe offers a free 30-days-trial of Photoshop and Photoshop Elements. The software is fully functional without any restrictions. In the following video I use Photoshop but don’t worry if you use another program, it will work very similar. If you are looking for Photoshop or Photoshop Elements, you can download the trial here.

Here are the resources mentioned in the video:

Photoshop

Photoshop Elements

Gimp

Genesis & The Lifestyle Childtheme

Dafont

Universal Collecge Font

Kristin’s Hand Bold

Joystic

Bell MT

Design The Sign Up Page

I usually try to make my sign up page as inviting as possible. I try to find a picture which is similar to the one I use for the sidebar, I make the benefits stand out with some bullet points or the correct formatting and then I make a small note with a further font (yes, that is an image, too) above the sign up box. If you have any other ideas, maybe a welcome video, where you tell people about the benefits of your newsletter – go ahead, I would love to see something like that on a site I’m interested in, wouldn’t you?

 Why it is important to list the benefits for the newsletter subscription:

It is your website but actually it is a website you created for a reader. And the reader would like to know – what’s in it for her? And that is what you need to list. Tell her exactly what she can expect from your newsletter and what information you are going to deliver. This way your reader won’t be disappointed. She knows upfront what you are offering and if that is the information she will enjoy. There are tons of emails in her inbox daily which compete to be read. So it is important that she knows that your email is the one that will interest her most. When you draft a newsletter always think about yourself: would you be happy with the content you get? Or would you be disappointed because that person just tries to sell you something? If you feel that you’d be happy with a similar interest, go ahead and press the send button 🙂

 Add the Banner to the Sidebar and link it with your Sign Up Page

Once you have saved your sidebar banner with File –> Save for web and devices in Photoshop you need to upload it to your site. Go into the backend of your website and upload your JPG file. Click on the left side on “Media” and “Add new”. Then choose the JPG file from your desktop and upload it. Now you have a URL. Copy the URL with CMD (or STRG) + C. Now let’s switch to “Appearance” –> Widgets.

Copy the URL under “File URL” and click on Appearance –> Widgets.

Drag a TEXT widget into the Primary Sidebar and click on the little arrow on the right to open it. Now we need to write some HTML to make the picture showing up and linked to the sign up page.

Write

<a href=”http://www.hundenest.com/newsletter-welpentraining/“><img name=”” src=”http://www.hundenest.com/wp-content/uploads/2012/10/newsletter-signup1.jpg” width=”270″ height=”450″ alt=”” /></a>

Exchange the red text with your image source you copied into your clipboard. Then exchange the green text with the link of your page you created above. You can grab that link from your browser when you open the page (any page has a URL). If you have changed the hight of your image you need to change that as well. After that, click save and on your homepage you can see now the new area in your sidebar.

Here is the URL from the browser you get when you open the page you’ve created. Make sure you replace the green area with your URL. Put the replacements both between ” and “.

Then just click “Save” and you should see the sidebar in your web site:

Ok, we are done! I hope you enjoyed the tutorial. Let me know if anything is unclear or you need further help.

Filed in: Blog • Blogger Tools For Online Business • Videos