Add a Banner to any menu item

Using a Banner adds visual flair to your website and add character to your content whether it’s a gallery, page, folder, client album or a blog.

Banners can be placed either top or bottom of your content (under the website header) and are typically used to show a full-with banner image/image slideshow/video.


To enable or disable the banner follow these steps:

  • Go to the Website section
  • Find the particular Gallery or Page or Blog Or Folder from the navigation left column where you want to enable or disable the banner.
  • Move your cursor to particular menu item and click on it.
  • You would see the banner option on right side next to settings section.

For example, Do check out the banner section for a gallery. 


Under this Article :

  1. How to enable or disable the banner
  2. How to add/edit Image Slide
  3. How to add/edit Video Slide
  4. How to add/edit Text/HTML Slide
  5. How to sequence the banner slides
  6. What are banner options
  7. How to delete a banner slide

1. Enable or Disable the banner

For every menu item, you will find the Banner option next to its settings. After clicking on Banner you will have multiple options for your cover banner:

  1. Banner Status – You can check the current status of banner for that particular menu item.
  2. Enable or Disable Cover Banner – Check this if you want to show a full-width banner on the top or bottom of the particular menu item.
  3. Banner Slides – Click here to add an Images/Video/HTML slides. Ideally images should be JPEGs and around 2000 X 1000 pixels size (2:1 image ratio). Scroll down the page to know more.
  4. Global Banner Text –  Click here to know more about text editor.
  5. Banner Options – You can manage the settings of banner from here. Know more.
  6. View – Click here to see this banner on live site
  7. Save the changes by clicking at the ‘Save’ button at the top right corner of the screen.

 


2. How to Add Image Slide

Click on Images in the Add Slides dropdown.

In the next step, You would see a system popup. Select the image/images you want to upload from your PC and click on open.

The upload will start automatically. You can upload any number of images in one go.


Edit an existing image slide

On hovering the image slide, you would see edit icon to edit the particular slide.


In the next step, you would see a pop up window where you can:

  1. Banner Image – You can replace the existing image slide with any other image.
  2. Mobile Banner Image – You may also upload a separate image for mobile devices (Optional). If you do not upload any mobile image than system will use the default image.
  3. Image Slide Text – Any text that you add here will appear only on this particular Image slide only if there is no global banner text available.Click here to know more about text editor.
  4. Link – Specify the absolute link if you want to link this image slide to any other page. Use slug (with forward slash) to connect existing website pages.
  5. Hit Save button to save image slide.


3. How to Add Video Slide

Click on Video in the Add Slides dropdown.


In the next step, you would see a pop up window where you can:

  1. URL – Paste your YouTube/Vimeo URL here.
  2. Mobile Banner Image – Select an image from your computer to upload for mobile devices (Optional). If you do not upload any mobile image than will use default video screen shot which is automatically pulled from the Youtube/Vimeo link.
  3. Video Slide Text – Click here to know more about text editor.
  4. Link – Enter the absolute link if you want to link this video slide to any other page.
  5. Hit Save button to save video slide.


4. Add Text/HTML Slide

Click on HTML slide in the Add Slides dropdown.


In the next step, you would see a pop up window where you can:

  1. Text/HTML – Specify the slide text which will show on this Text/HTML slide only if global cover banner text is not available. Click here to know more about text editor.
  2. Banner Image (Optional) – Select an image from your computer if you want to upload any image for this text slide. Slide text will come on top of this image.
  3. Mobile Banner Image (Optional) – Select an image from your computer to upload for mobile devices. If you do not upload any mobile image then will use above image only. (cover banner image)
  4. Link – Enter the absolute link if you want to link this text/HTML slide to any other page.
  5. Hit Save button to save text slide.


5. How to sequence the banner slides

You can sequence the slides by simple drag-and-drop.

Just click-hold and drag the slide to its new position and release. The new slide position is automatically saved.


6. Banner options

You would see banner option on right side, where you can:

A. Banner Position – You can specify the position of the banner like on top or bottom.


B. Banner Height – You can set the custom height (in percentage) of the banner. System will automatically calculate your current browser available height and extend your images accordingly. All images/videos will be cropped from center if banner height is lesser than image height. Use mobile banner image if you do not want to crop your slide images in mobile devices.


C. Outer Margin – You can set the margin (in Pixels) of the banner which is linked to position of banner (Top or Bottom)


D. Base Color – You can set the base color and its opacity from here. All slides will come over the base color.

Cast Color – You can set the cast color and its opacity from here. Cast Color will come on top of images and video slides only.


E. Text Position – You can set the position of global banner text from here.


F. Navigation – Enable this to add banner slide arrows (Left < and Right >)

Scroll Down Icon – Enable this to add scroll down arrow on the banner. ( V )


G: Slideshow – Enable this to make the slideshow play automatically.

Slideshow Speed – Slideshow speed in seconds

Slideshow Transition – Slideshow transition effect for banner slides


7. How to delete a banner slide

On hovering any slide, you would see delete icon to delete the particular slide.