Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. First, you'll want a 'type' for your banners. This allows you to target the content your banner widget displays. 
  2. In the CMS, navigate to Settings → Website Features.
  3. Edit the Banners feature. 
    Image Removed 
  4. Click 'Maintain Banner Types'.
    Image Removed 
     
  5. to Content → Banners.
    Image Added 
     
  6. Click 'Add New Banner Type'. 
  7. Enter a Code and Name for the new type, and assign an Icon if you wish. 
     

  8. Click 'Save'. 
  9. Your new banner type will appear in the Banner Type Maintenance list. You can edit or delete from this page as required. 
     

...

  1. In the CMS, navigate to Content → Banners
  2. Select the Banner Type you just created. 
     
     
  3. Click 'Add New Banner'. 
  4. Enter the Details for the banner: 

    DescriptionA short description to identify the image
    Banner LinkThe URL, /category, or /product page the image links to
    Start DateThe date the banner becomes active (and therefore, visible)
    Expiry DateThe date the banner expires and is automatically removed from view
    Display For- All devices
    - Desktop only
    - Mobile only

     

     

  5. Click 'Select or Upload Image'.
     
     
  6. Select a previously added image, or click 'Upload' to browse to a file in your directory.
     
     
  7. Highlight the image and click 'Select'.
  8. Enter Overlay content if required. This will appear on a transparent panel atop your image. 
     
     
  9. Click 'Save & Exit'. 
  10. You'll see the newly added banner listed on the Maintenance page, with a coloured tile to indicate whether it's Active, Scheduled, or Expired.
    Image RemovedImage Added 
     
  11. Repeat Steps 3-9 for the remaining images in your slider. You can drag and drop banners to re-sequence them if required.
     

...

  1. In the CMS, navigate to Content → Theme Layout (or Standard / Custom Pages, as the case may be). 
  2. Locate the appropriate zone for your banner slider, according to the page layout. In this case, we'll choose the 'Feature' zone. 
  3. Click 'Add Widget'.
  4. Search for 'Banner Slider' and click Add Widget.
  5. Edit the newly added widget and configure the options. Don't forget to set the Banner Type Filter to the one you created earlier! 
    Full widget documentation is available here.


  6. Click 'Save'. 

 

Presto! Your banner slider is ready. Load your site in a new browser to view your handiwork. 

...

Info

Not on our Best Practice Design framework yet? Refer to our guide for classic sites here - Home Page Banners - Classic sites.

 

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel in ("banners","bpd") and type = "page" and space = "KB"
labelskb-how-to-article