We have a set of widgets what will easily allow you to add rotating banner advertisements to your site by placing the widget where you want it to show. The names of these widgets are:

  • Banner Ad – 970×90 Rotating
  • Banner Ad – 300×250 Rotating
  • Banner Ad – 250×250 Rotating


The numbers in the name of the widget indicate the size of the banner advertisement.  For example, "Banner Ad – 970×90 Rotating" is for a rotating banner 970px wide by 90px tall.  We have created a unique widget for each of the most common banner sizes used on the platform.


In short, to place a set of rotating banners on your website, you just need to follow these easy steps:

  1. Add any of those widgets where you want the banner ad slider to show (See also: how to place a widget on a static page and how to place a widget in a sidebar)
  2. Edit the widget and replace the banner image URLs and links that are there by default with the images and links you would like to use


Example of Placing a Rotating Banner in a Sidebar


  1. Figure out which sidebar you want to add the rotating banner to (See: how to find out which sidebar is being used on a page).  In this example, we will be adding it to the "Default Sidebar"
  2. Navigate to Toolbox >> Sidebar Manager
  3. Look for the “Banner Ad – 300×250 Rotating” widget in the Sidebar Manager (Type "banner" into the search field to locate it quickly)



  4. Drag the "Banner Ad - 300x250" widget to the sidebar on the right side of the screen:



  5. Drag the widget into position relative to the other widgets in the sidebar to choose in what order it will display in the sidebar.

  6. Click the green "Save" button


The rotating banner will now appear in that sidebar.



Example of Editing a Banner Ad Widget


Now that we have the banner ad widget in the sidebar we want to use, we need to add the banner images and links we would like to use.

  1. Edit the banner widget (See: how to edit a widget)  In this example, we are editing the "Banner Ad - 300x250" widget.
  2. We will be editing this section of the code:




  3. Each line of code places one of the banner images, and the link you want a user to arrive to if they click on the banner.

    Replace the # sign in the first line of code with the URL of the page you want the user to be directed to if they click on that banner.  In this example, we will use http://www.brilliantdirectories.com




  4. Replace the placeholder banner ad image URL (/images/300x250-banner-ad-1.jpg) with the URL of the banner ad image that you would like to use.  In this example, we will use http://www.brilliantdirectories.com/images/banner-1.jpg  

    TIP:  
    Make sure the images you are using are the correct size for the banner ad widget you are using.  In this case, all images you use should be 300px by 250px




  5. Repeat the above steps for the second and third banner images and links you would like to insert into this widget.

  6. If you would like to have fewer that 3 banner ad images rotating here, simply delete one of the lines of code:




  7. If you would like to add additional banner ad images rotating here, simply add additional lines of code:


If you are having trouble adding the banner images as you would like, please feel free to create a ticket to request a quote to have our team do this for you.  In order to complete this as quickly as possible, please be sure to include all of the images you would like to use, the corresponding links for each banner, and a description of where you would like the banner to appear in order to receive a speedy quote.