How to: Create a Banner

This tutorial will show you how to create banners with rotating images also known as Call to Actions or CTAs. 

 

Screen_Shot_2013-07-02_at_10.02.51_AM.png

 

Create a banner

1. Click on the CMS tab.

Screen Shot 2013-06-20 at 9.12.20 AM.png

 

2. Click on the Banners menu item.

Screen_Shot_2013-07-02_at_10.05.56_AM.png

 

3. Click on the Add call to action button.

Screen_Shot_2013-07-02_at_10.06.13_AM.png

 

4. The key is used to identify this banner. The key will later be used to load the content of this banner on your web pages.

Screen_Shot_2013-07-02_at_10.06.35_AM.png

 

5. The optional Title can be used in custom templates to show the title next to the Banner.

Screen_Shot_2013-07-02_at_10.06.47_AM.png

 

6. The Default link is used when the individual images for this banner don't have an link of their own.

Screen_Shot_2013-07-02_at_10.06.54_AM.png

 

7. This is where the Width of the banner is set. The width can be an absolute (in pixels) or a relative (percentage) value. 

Screen_Shot_2013-07-02_at_10.08.43_AM.png

 

8. Set the Height for this banner. The height can an absolute (in pixels) or a relative (percentage) value.

Screen_Shot_2013-07-02_at_10.08.49_AM.png

 

9. The Delay value sets the display time for each image used with this banner. The value is represents seconds.

Screen_Shot_2013-07-02_at_10.08.55_AM.png

 

10. Set the Sites where this banner will be displayed.

Hold down the Control or Command key on a Mac to select more then one site where this banner will be displayed.

Screen_Shot_2013-07-02_at_10.09.02_AM.png

 

11. Now that the main settings for this banner have been added it's time to add images to this banner using the Call To Action Items section.

Screen_Shot_2013-07-02_at_10.10.20_AM.png

 

12. Click on the Choose File button to add a new image to this banner. Please make sure the image has been pre-formatted to the desired size and resolution before loading.

Screen_Shot_2013-07-02_at_10.10.24_AM.png

 

13. Provide an Alternate Text for this image. The Alternate Text is used for search engine optimization purposes. If not provided the title of this banner will be used if available.

Screen_Shot_2013-07-02_at_10.10.46_AM.png

 

14. Click on the Choose File if you choose to use a Swf file for this banner.

 Screen_Shot_2013-07-02_at_10.10.34_AM.png

 

15. The Link is used to redirect users to a new web page when clicking on this banner image. This overrides the Default link set for this banner.

Screen_Shot_2013-07-02_at_10.10.46_AM.png

 

16. Set the Order in which this image will be displayed on this rotating banner. Images with lower values will be displayed first on the banner.

Screen_Shot_2013-07-02_at_10.10.52_AM.png

 

17. By default you will be presented with three sections which allows the addition of three images but if more images need to be added to this banner click on the Add another Call To Action Item.

Screen_Shot_2013-07-02_at_10.11.01_AM.png

 

18. Save.

Screen Shot 2013-06-24 at 11.51.33 AM.png

 

 

How to use a banner

Now that your banner is saved, you can reference it from your templates by adding the following to your template:

 

{% load cta_tags %}

{% show_cta "your-cta-key" %}

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk