Using banners - a complete example

✖
Copy to clipboard

This example will show you the whole process of banner management, from creating a banner category and filling it with banners, to displaying the banners on a site. The example uses the sample Corporate site.

Creating a banner category

  1. Open the Banners application.
  2. In the Site drop-down list, select Corporate site and click New banner category.
  3. Set the banner category properties as follows:
    1. Display name: Header banners
    2. Enabled: True
  4. Click Save.

Creating a banner category

Creating banners

First banner

  1. In the banner category that you created, click on New banner.
  2. Set the new banner’s properties as follows:
    1. Display name: Banner 1
    2. URL: http://www.kentico.com
    3. Weight: 1
    4. Open in new window: True
    5. Enabled: True
    6. Banner type: Plain text
    7. Banner content: Any text you like
  3. Click Save.

Second banner

  1. Return to the list of banners, click  New banner again and set its properties as follows:
    1. Display name: Banner 2
    2. URL: http://devnet.kentico.com
    3. Weight: 4
    4. Open in new window: True
    5. Enabled: True
    6. Banner type: HTML
    7. Banner content: Any formatted text you like
  2. Click Save.

Third banner

  1. Return to the list of banners, click New banner one more time and set its properties as follows:
    1. Display name: Banner 3
    2. Code name: banner3
    3. URL: http://www.kentico.com/Download-Demo
    4. Weight: 5
    5. Open in new window: True
    6. Enabled: True
    7. Banner type: Image
  2. Click Select next to the Banner image property. A Select image dialog opens.
  3. On the Content tab, upload a file of your choice into the Images folder and click Select.
  4. Fill in the Image title and Alternative text fields as shown in the following picture.
  5. Click Save.

Placing banners on a page

You have created a set of banners that will rotate in the header of the Corporate site. Now place the Banner rotator widget on the Corporate site’s Home page as described in the following steps:

  1. Open the Pages application.

  2. Select the Home page of the Corporate site and make sure you are on the Page tab.

  3. Open any of the page’s zone menu ().

  4. Click Add new widget. 

    Placing banner on a page

  5. Select the Banner rotator widget from the Banner management folder.

  6. Click OK. A widget configuration dialog opens.

  7. Set the widget’s Banner category, Width, and height properties. 

    Configuring banner properties

  8. Click OK. The widget appears within the content of the page (inside the selected zone), but is NOT permanently saved yet.

  9. Click Save to confirm the change to the page’s widget content.

The result

You have created three sample banners and configured the Banner rotator web part to display them to visitors on the Corporate site.

When you switch to the live site, you will be presented with one of the three banners. When you refresh the page several times, the other banners will appear with frequency proportional to their Weight. For example, out of 100 page views, the banners’ displaying frequency will be as follows:

  • Banner 1 has a weight of 1, therefore it will be displayed approximately 10 times.
  • Banner 2 has a weight of 4, therefore it will be displayed approximately 40 times.
  • Banner 3 has a weight of 5, therefore it will be displayed approximately 50 times.