How to Create an Image Banner in Joomla 3

How to Create an Image Banner in Joomla 3

Banners in Joomla refer to advertisements. With the built-in banner component, you can manage multiple banners as you want – creating them, categorizing them, and placing them at somewhere you like. The component makes it easy to insert ads on your website.

Joomla allows creating two kinds of banners: image banner and flash banner, and you can make a choice depending on your need. This tutorial will focus on creating and displaying a standard image banner.

Create an Image Banner

Assumed that you have got a banner image prepared, you can now log into the Joomla control panel and access the Banners component. If you want to create multiple banners, you’d better add one or several categories first to make the management easier in the future.

Categories

In the Category Manager, click on the green button saying “New”.

New Category

Fill in the title, add a description for future reference, configure the Access if there is a need, and then click on the “Save & Close” button. Now you have created a category successfully. You can also repeat the actions to add more.

Category Settings

Now that the category is ready, you need to go back to the top menu and navigate to Components > Banners > Banners to create a new banner. After hitting the “New” button, you are landing on the details page. There are a large number of settings, and you have to accomplish the following things at least.

  • Name: Give a name to the new banner to make it easy to identify and manage it later. The name will not be displayed on the frontend of your website. For our banner, we use the name “Soft Candies”.
  • Type: Select “Image” from the drop-down. Of course, if you have prepared a .swf file instead of an image, you should choose “Custom” and then enter the code. For our testing, we use an image.
  • Image: Click on the “Select” button, scroll down to “Upload File”, choose the banner image, upload it, then select it under Directory and insert it.
  • Alternative Text: This will appear when the banner image fails to be loaded. Also, it helps with search engine rankings.
  • Click URL: Enter the URL which you’d like to link to with the banner.
  • Category: Select the category that the banner belongs to.

Create a Banner

After a banner is created, it is not displayed on your website automatically until you specify a place for it with a banner module. Follow the tutorial below to complete the remaining tasks.

Display an Image Banner with a Banner Module

Banner modules are a necessity for displaying banners. They allow you to determine which banners to display, and which module positions the banners should be in. To create one, you need to navigate to Extensions in the top menu, and then enter “Module Manager”.

In the Module Manager, click on the “New” button. Then select “Banners” as the module type.

Select a Module Type

In the module settings, you must give the module a Title. The title will show on your site by default, but you can also select “Hide” under “Show Title” to hide it.

Hide Title

Then, you have to pick up a module position from the drop-down. Make sure that you have selected the right template because all available templates are listed. If you are not sure about where to place the banner, view the module positions of your templates at first.

Select a Module Position

Now visit your site and you can find the ad is displayed properly. The position of the banner is fixed. If you want several ads to show up in the same place, refer to this tutorial for rotate banners.

Display a Banner