Click HERE for an interactive tutorial. Scroll to the bottom for animated steps.

Detailed Step-by-Step Tutorial

Add Banner

  • Go to APPS at the top of the screen.
  • Drag Banner widget to an area of the page where you'd like to add it to.


  • Double-click on Banner or right-click to go to Banner Settings in the Settings Pane.
  • Select Banner: Choose a banner from your selection. If you haven't created any banners yet, proceed to Manage Slides to create a banner.


Edit/Advanced Settings

  • Click Create New Banner to create a new banner.

  • Banner Title: Enter banner title.
  • Responsive: Choose to make the banner responsive.
  • Full Width: Choose to make the banner occupy the full width of the page.
  • Full Screen: Choose to make the banner occupy full screen.
  • Width (px): Enter the banner width.
  • Height (px): Enter the banner height.
  • Click Save Banner.

Manage Banner

  • Create New Slide: Click to add a new slide to the banner.
  • Preview: Click to preview the slide effect and caption effect.
  • Edit Slide: This option allows you to change image slide settings and layer settings.

Slide Settings

  • Bg Image: Add or edit the background image for the slide.
  • Slide Title: Enter title for the slide.
  • Slide Transition: Select a transition effect for the slide from the dropdown list.
  • Slide Delay (milliseconds): Set the length of the delay effect (in milliseconds).
  • Enable Link: Toggle ON to add a link to the slide.
  • Slide Link: If Enable Link is toggled ON, enter the url for the link.
  • Link Open In: If Enable Link is toggled ON, choose whether the link will open in same or new window.

Layers Settings
  • Add Layer: Add a layer over slide background image, either as a text, image, or video.
  • Layer Text: Add caption to the layer.
  • Font Family: Select font family for the layer text.

  • Font Size: Set font size for the layer text with the slider.
  • Font Weight: Select font weight for the layer text.
  • Font Style: Select font style for the layer text.
  • Font Color: Choose font color for the layer text.
  • Background Color: Choose background color for the layer text.

  • Layer Link: Add a URL if you'd like to link layer text to another page.
  • Link Open In: If the layer text linked to another page, choose whether the link will open in same or new window.
  • Animation: Choose animation effect for the layer text.
  • Easing: Choose layer text easing effect.
  • Speed (ms): Set speed of animation effect (in milliseconds).


  • Click Update to save the slide and layer settings.

Banner Settings


  • Banner Layout: Choose responsive, full width, or full screen layout.
  • Height(px): For responsive or full width layout, enter the heigh in pixels.
  • Width(px): For responsive layout enter width in pixels.
  • Transition: Select transition type from the dropdown list.
  • Banner Title: Enter title for the banner.
  • Current Slide: 
  • Delay (ms): Enter the delay between slides (in milliseconds)
  • Randomize: Toggle ON to randomize the slides.
  • Lazy Load: 
  • Touch Enabled: Toggle ON to enable touch gestures on the banner when website is viewed on a touchscreen.
  • Hide Caption Resolution (px): 
  • Pause On Hover: Toggle ON to pause slides when mouse hovers over the banner.
  • Play Once: Toggle ON to only play all slides once.
  • Shadow Type: Select a shadow type, if any, from the dropdown list.



  • Navigation Type: Select the slide navigation type from the dropdown list.
  • Navigation Style: Select navigation style from the dropdown list.
  • Show Buttons on Hover: Toggle ON to show navigation buttons when mouse hovers over the banner.
  • Horizontal Offset (px): Set horizontal offset with a slider.
  • Vertical Offset (px): Set vertical offset with a slider.
  • Timer: Toggle ON to enable a horizontal progress bar indicating the duration of a slide.
  • Timer Align: If timer is toggled ON, select the alignment for the timer (top or bottom).



  • Show Thumbnails: Toggle ON to show slide thumbnails.
  • Thumb Width (px): If slide thumbnails are enabled, set the their width (in pixels).
  • Thumb Height (px): If slide thumbnails are enabled, set their height (in pixels).

General Settings

  • Title: Enter the title.
  • Show as Tooltip: Show the title as tooltip (text that appears when your mouse hovers over the banner).
  • Top: Set top margin.
  • Left: Set left margin.
  • Width: Set the width.


  • Color: Choose background color.
  • Opacity: Set opacity for the background.
  • Image: Enable to use an image as a background.
  • Size: Choose background size (i.e. auto, 100%, etc.).
  • Position: Set position of the background.
  • Repeat: Choose repeat type for the background.


  • Color: Choose border color.
  • Style: Chose border style.
  • Width: Choose the width of the border.
  • Radius: Choose border corner radius.

Box Shadow:

  • Shadow: Toggle ON to create a shadow for the heading.
  • H-Shadow: Set horizontal position of the shadow.
  • V-Shadow: Set vertical position of the shadow.
  • Blur: Set blur value for the shadow.
  • Spread: Define how far the shadow spreads.
  • Color: Set the color for the shadow.
  • Style: Select between inset and outset.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request