How to make a banner for a website – 5 Easy Steps

Internet Banner Collection

Tool IconsIn this training tutorial you can learn how to make a banner for a website in 5 easy steps.

All you need is an image that you will be using for the banner and your unique link you plan on using to serve a specific function like taking people to a product review, an affiliate link or any other type of hyperlink you want.

This is how I created a very simple banner from scratch using the following tools:

  • Windows Snipping Tool (Offline)
  • Microsoft PowerPoint (Offline)
  • Paint (Offline)
  • WordPress (Online)

STEP 1


Create an image or get an image for the banner.

I decided to create my own image that will become a banner for my new Social Network. If you look to the right it is the banner with a black circle and in the middle it has blue neon text that says “AIM Social Network”. If you click on it a post will come up where you can leave your social media profile links in the comment section to get more exposure and traffic for your website.

So that is the purpose of my banner to lead to a post where people can take specific action. Your banner can have a different purpose and can lead anywhere you want it to for whatever reason.

You can skip this next process altogether if you already have an image but for those who want to see how I created our “AIM Social Network” banner from scratch, here it is…

First I created a image of a black circle in Paint and imported it to PowerPoint. If you don’t know how to do this you can easily save a image of a black circle from Google Images. I would even recommend using the 3D images or buttons and getting more creative 🙂

How to create a website banner 01

Using Word Art I inserted the text and modified it to look as shown above. There are many options on PowerPoint to edit the text to make it look appealing or to suit the style you like.

Then used the Snipping Tool to cut the image out and saved it as a PNG file instead of JPEG so it wouldn’t reduce the quality (pixels) of the snip shot.

How to create a website banner 02

(This is a screenshot of using the Snipping Tool)

The final Image looks like this:

How to create a website banner 03

Remember you can use any images created from graphic design software. I even used a snip shot from the Payoneer website to create an affiliate banner because there wasn’t one on their site or I just couldn’t find it. This is a very useful skill to learn, especially if you have a affiliate or marketing website.

STEP 2


Log into WordPress and go to the Dashboard.

From there go to “Pages” and click “Add New”.

How to create a website banner 04

You want to open a clean page or post to insert the image because you going to take the HTML code and paste it into a text widget later on. Please don’t worry if that sounds confusing for now, this will all be explained below.

Add your image in by clicking on “Add Media”.

How to create a website banner 05

TIP – Consider using slightly smaller HD images for banners these days so it is speed friendly for mobile and tablet users.

You can edit and crop the image size once you have uploaded it.

How to create a website banner 06

IMPORTANT – Now you need to edit the “Image Title Attribute” so this text will show when someone mouses over the banner. It can serve as an extra “Call to Action” function or if you have a symbol or emblem without text this serves as support so people are not confused as to what the image represents. Make sure it’s related to the image and don’t do “keyword stuffing”.

How to create a website banner 07

Once you click the “Edit” image button you will see this area pop up where you can add in the “Image Title Attribute”.

How to create a website banner 08

STEP 3


Now you going to add the link so it’s embedded into the HTML code for later. This is very important so make sure you have copied and pasted or entered the link details perfectly. The best is to use the “select, copy and paste” method.

Click the “Insert/edit link” button.

You will see a tab drop down under the image to enter the banner link, this is where you must paste the banner link then click on the little cog wheel button that says “Link options”.

How to create a website banner 09

Once you click on this cog button another small menu will pop up where you can select the box that allows the link to open in a new window. This is so the user isn’t diverted away from your website or cause an unnecessary bounce rate.

How to create a website banner 10

Now go to the top right hand side of the page where you see “Visual” and “Text” next to each other. Click Text. Then select and copy the entire HTML code. It should be about 3 or 4 lines long, depending on the image properties and how much text you entered.

How to create a website banner 11a

How to create a website banner 11b

STEP 4


Making sure that the entire HTML code is copied and go to “Appearance” on the Dashboard and click “Customize”.

How to create a website banner 12

Your screen will change and you will enter the customize mode area. On the left you will see the “Active theme” controls. Go to “Widgets”.

How to create a website banner 13

Then go to “Right Sidebar”.

How to create a website banner 14

Scroll down to the bottom and click “+ Add a Widget”.

How to create a website banner 15

Another menu will open up to the right. Scroll down to the bottom of the list and select the “Text” widget option.

How to create a website banner 16

To your left on the active theme controls, a text box will open up where you need to paste in that long HTML code.

How to create a website banner 17

You don’t need to enter a text “Title” unless you want to or it’s relevant. My banner already displays text in the image so it’s not necessary for me to have the Title.

Remember to SAVE your changes!

STEP 5


Test your new banner, make sure it works 100{87e56780531fb49397975d6ccdf5fd583fe12882c640bab7ecd9d9198b593911} and then you are done!

(Optional) If you looking for a place to start fresh and build 2 free websites, where you can apply this skill to earn money online then please read this review.

________________________________________________________________________________________________________

Please leave a comment below if you found this training tutorial useful, if you feel stuck, need more help or have any questions. I will assist you to the best of my ability 😉

Best regards,

Kamil

 

Leave a Comment

Your email address will not be published. Required fields are marked *