In this Joomla 3.0 tutorial, we are going to show you how to add a new banner. This is the first of several articles in our tutorial series on working with the banners component in Joomla 3.0.
Image banners vs. Flash banners
When we refer to banners in Joomla, we are referring to advertisements, such as an image in your sidebar that links to another website. In this article we’ll show you how to create a banner using an image. There are other types of banners you can create too however. For example, most everyone has seen a flash banner on a website. Creating a flash banner is done by using HTML code as the banner instead of selecting an image, and we show you how to do that in this tutorial.
Steps for creating an image banner
The following guide assumes you’ve already created or have the image that you want set as a banner. These steps walk you through creating the banner within Joomla, not actually creating the banner using photo editing software such as Photoshop or Gimp.
- Log into your Joomla 3.0 dashboard
- In the top menu, click Components and then click Banners
- Click the New button in the top left of the page
- There are over 20 settings available for your banner, and most users do not need to concentrate on all of them. In this tutorial, we’re focusing on the most important settings:
Name Enter a name for the banner. This name is not going to be shown anywhere on your website. Instead, it will help you label and identify this specific banner when managing it later on. In our testing, we entered My First Banner as the title
Category Choose a category for the banner. If you plan on having multiple banners on your site, you may want to consider creating a banner category to help manage them. We haven’t created an categories yet, so we left the category as Uncategorised
Type Choose the type of banner. Select Image to display an image from /images/banners/ directory. Select Custom to enter you custom code. Because we are creating a simple banner using an image, we selected Image. If you were creating a flash banner, for example, you would instead choose Custom, which would allow you to insert the HTML necessary to show a flash file, such as a .swf file.
Image Select an image for this banner. Images have to be in the /images/banners/ directory. If you want to upload an image, click the Select button and then use the Upload file section towards the bottom to upload your image. In our testing, we uploaded the following banner:
Click URL The URL used when the banner is clicked on. In our testing, we entered https://www.inmotionhosting.com. When someone clicks on the banner, this is the link we want them to go to.
After entering the details for your banner, click the Save button in the top left of the page.
Congratulations, you have successfully created a banner! Don’t get too excited, there is still more work ahead of us. Simply creating a banner will not show it on your site. The next thing we will need to do is create a banner module so that the banner will show on our webpage.
