In 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)
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 🙂
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.
(This is a screenshot of using the Snipping Tool)
The final Image looks like this:
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.
Log into WordPress and go to the Dashboard.
From there go to “Pages” and click “Add New”.
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”.
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.
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”.
Once you click the “Edit” image button you will see this area pop up where you can add in the “Image Title Attribute”.
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”.
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.
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.
Making sure that the entire HTML code is copied and go to “Appearance” on the Dashboard and click “Customize”.
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”.
Then go to “Right Sidebar”.
Scroll down to the bottom and click “+ Add a Widget”.
Another menu will open up to the right. Scroll down to the bottom of the list and select the “Text” widget option.
To your left on the active theme controls, a text box will open up where you need to paste in that long HTML code.
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!
Test your new banner, make sure it works 100% 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 😉