Versions Compared

Old Version 22

changes.mady.by.user Documenter

Saved on

compared with

New Version 23

changes.mady.by.user Documenter

Saved on

Key

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

Overview

Excerpt

Large banner images and videos are common features of many home pages. They allow a hero image or video (or several) to catch the user's eye and direct them to a promotion, highlighted products, or call to action.

Loading several banners gives your users the option to scroll through, with each image linked to its own content.


This guide takes you through the process of placing multiple banners on your site in a slider format.


Panel

On this page:

Table of Contents



1. Enable Banners

Before you can create and edit banners, the Banners feature must have been enabled. If enabled, Banners displays as a submenu item in the Content menu. 


To enable Banners:

  1. Navigate to Settings →  Feature Management → Content.
    .

  2. Ensure Banners is toggled ON.

  3. Click Configure.

  4. In Banner Feature Settings, you can maintain Banner Types and allow filters so that particular banners can be viewed only by certain sub-groups of Users. (The next step will guide you in creating a banner type. You can maintain banner types in Settings or in the Banner Maintenance screen.)
  5. To save your settings, click Save & Exit.
     

2. Create a Banner Type


First, you'll want a 'type' for your banners. This allows you to target the content your banner widget displays. 

Tip

If you already have banner Types set up and just want to add a new banner to an existing Type, skip to Section 3.


  1. In the CMS, go to Content → Banners.

     
  2. Click Add New Banner Type.
     
  3. Enter a unique Code and Name for the new type, and assign an Icon if you wish. 


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


3. Upload Banner

Images or Videos 

Media (Images, Videos) 

Now that you have a banner type, you can add some images and/or videos! 

Multiexcerpt
MultiExcerptNameuploadbannerimage


  1. In the CMS, navigate to Content → Banners. 

  2. Click Edit for the banner type.

  3. Click Add New Banner. 

  4. Enter the Banner Details:

    Description - A short description to identify the image or video
    Banner Link - (for images only) The URL, /category, or /product page the image links to
    Banner Link Open in New Window - toggle ON for linked page to open in new window 
    Start Date - Date banner becomes active (i.e., visible on your site)
    Expiry Date - Date banner expires and is automatically removed from your site


  5. Image upload
    1. To upload the same image or video for all devices, click Select Banner for
    All Devices or Select Video For
    1. All Devices. TIP -
    The file dimensions and size details are displayed
    1. It is advised that files with recommended dimensions and sizes to suit each device type are used.

      Example: same image for all devices
      Image Modified
    2. To upload a different
    images/videos
    1. image file for each device type, click their individual Select Banner or Video buttons. TIP - For help on ideal image dimensions and file size, use the info in 'Recommended' for each device type.
      Image Modified
  6. If you're uploading an imageFor both options, select and insert a previously added oneuploaded image. To add upload a new one, click Upload. For a guide on editing an image in the Image Selection tool, see: Edit an Image. 


  7. For images, enter Enter Overlay content if required. This will appear on a transparent panel over your image. 


    Example of Overlay


  8. If this banner is to display for one or more specific user groups and not all users, use the Banner Filters section. The filter fields correspond to your ERP fields. You can enter multiple values, separated by commas. 

    NOTE - Toggle ON Customer filters apply to user's current Customer only? if users with multiple customer accounts should see a banner only if they are in a particular Customer account.



  9. Click Save & Exit. 

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.
 
 

Repeat Steps 3-9 for the remaining images in your slider. You can drag and drop banners to re-sequence them if required.
 


4. Place Banner Slider Widget

Now all you have to do is place the widget where you'd like the slider to appear.

In this example, we'll add it to our site's Theme, but restrict its appearance to the Home Page via the Layer. 

  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. 

 



Related help

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

Content by Label
showLabelsfalse
showSpacefalse
titleRelated widgets
excludeCurrenttrue
cqllabel = "widget" and title ~ "banner"