How to Create a Banner for a Joomla 3 Website

Joomla 3 has a built-in component which is used to manage banners which mean ads in Joomla. With the component, you can create banners, organize them, control the display, and collect the statistics about views and clicks. This tutorial mainly discusses how to create a banner from scratch by using the component and display it.

Note that the prerequisite for the steps below is that you have already got an image prepared for an image banner, or you have got the HTML code if you want to create a flash banner. If your answer is YES, then you can start the process now. And don't forget that you can always customize your product with moving company software.

Create a Joomla Banner

First of all, you need to log into the Joomla admin area with your credentials. In the dashboard, find the main menu and click Components > Banners > Banners.

On the Banner Manager page, click on the green button saying "New" on the top left of the page.

Now you can see a form like the following screenshot, and you have a lot of details to deal with, which will be discussed in detail.

Name. You have to give the banner a name. The name will not be shown on the frontend of your site, but it helps you identify and manage the banner later.

Type. There is a drop-down for Type which includes 2 options: Image and Custom. You can make the choice according to your real condition. When you choose Image, you have to select and upload a banner image from local computer, specify the width and height of the image, enter the alternative text, and complete all other factors listed on the page. Note that the Click URL refers to the URL that the banner leads visitors to when it is clicked.

When what you need is a Custom banner, just select Custom from the drop-down, enter the HTML code of the banner, and fill in the Click URL. That's it.

Category. On the right side of the page, you can see some options including Category. If you plan to use multiple banners on the site, you'd better create different categories to organize them better.

Banner Details. Under this tab, you can configure some settings about the statistics of the banner, including the impressions and clicks. Also, you can choose whether to track the data.

Publishing. This tab includes the configuration options about the publishing of the banner. You are allowed to the set the starting and ending time of the display, browse the modifications, and enter the meta keywords.

When you have finished with all the 3 tabs, click on the green "Save" button on the top left to get the newly created banner saved.

Display the Banner

When a banner is created, it does not show on your site automatically. You need to create a new banner module to display the banner and specify where it will be shown. To create a banner module, you have to go Extensions > Module Manager, and then click on the green "New" button on the top left of the page.

In the long list for "Select a Module Type", click on the "Banners" link.

On the new page, there are several settings you need to take care of. Firstly, give the module a name by filling in the box next to Title. Secondly, you can choose whether to show or hide the title when the banner is displayed on your site. Thirdly, you have to select a Position for the module.

The position is important because it decides where the banner will be shown in the frontend. Based on different templates you are using, module positions are quite different. So we suggest you to view the module positions of your current template first to confirm where you need the banner to be. If you are utilizing multiple templates on one site, do not confuse them with each other.

As we are using a Joomla template named DD PetFood 66 which has more than 20 module positions, we previewed the positions and finally chose position 6 to place the new banner.

Other settings can be adjusted as you want. When everything is OK, click on the "Save" button.

Congratulations, now you get the banner displayed on your site properly. What we have on our test site based on the settings above is as the following screenshot.