Banner Section

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

You can add it to the top/bottom of your page. In this article, you will learn how to add and edit the banner section.

In this article:

1. What is a Banner?
2. Add a Banner to a page
3. Add/Edit Banner slides
4. Sequencing the slides
5. Delete a Banner slide
6. Styling the Banner
7. Choose a Banner Layout

Banner

• Banner is used to show a full-width banner image/image slideshow/video at the top/bottom of your content.

Check a live demo Banner.

Add a Banner to a page

• A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
• On your page, click on the blue + icon to add a New Section to your page.

• You will now see the section categories on the left side.
• Click on the Banner (1) section and select any desired banner layout (2) for your page.
• Click on it to add the banner section to your page.

Add/Edit Banner Slides

• You can add image/video/text slides to your Banner and edit them as well.
  Check: The Banner.

Sequencing the Slides

• To sequence the Banner slides, you just need to drag and drop them.

See how to sequence the Banner slides in action: 

Delete a Banner Slide

Once you have added a Banner slide, you can edit/delete the same.

To delete a slide, 

• Click on the Manage Banner button.
• Once the Edit Banner drawer opens, click on the Delete icon next to the slide you wish to delete.
• Click on the Delete button on the confirmation popup.
• Save your changes.

See how to delete a Banner slide in action: 

To know about the slide/master text and buttons:
Check: The Banner.

Styling the Banner

To view the style options for a Banner, 

• Click on the Edit Banner (1) button to open the Edit Banner panel.

• Click on the Style (2) tab.
• Change the Banner style and Save (3) your changes.
  Check: Banner Style options and Functionality

Banner Display Mode

1. Display Mode – Specify how the banner slides/images should display on the desktop.
   • Full Bleed – Images will cover the entire banner width and height. Specify the banner height if this option is selected.
   • Scale and Fit – Images will fit within the banner width and height. Specify the banner height if this option is selected.
   • Fit to Width (Desktop Only) – Images will be scaled to banner width. Banner height will inherit the image height.

2. Banner Desktop Height – Specify the desktop banner height if you have chosen the full bleed or scale and fit option in the Display Mode field.
3. Banner Mobile Height – Specify the mobile banner height.

Style

4. Content Position – Specify the content position over the banner.
5. Content Width – Specify the width for the banner content.
6. Background Color – Set the background color for the banner.
7. Overlay Color – Set the overlay color for the banner.
8. Navigation Style – Specify the navigation style of the banner. You can select from 3 styles.
9. Navigation Color – Specify the color of navigational tool.
10. Scroll-down Arrow – Select this option to show a scroll-down arrow over the banner.

Slideshow

11. Slideshow – Choose the Autoplay option to enable slideshow for the banner.
12. Slideshow Speed – Specify the slideshow speed (in seconds).
13. Slideshow Transition – Specify the image transition style for the banner.

Buttons & Links

14. See how to manage the styling of Buttons & Links.
15. Save all the style changes.

Choose a Banner Layout

To change the Banner layout, 

• Click on Manage Banner (1) button.
• Click on the Layout (2) tab.
• Choose a Banner layout (3) and click on it.
• Save (4) your changes.
  Check: The Banner layouts.

Related articles:

• Add an overview text/description for a Gallery. 
• Add a Banner to your Blog.
• Add a Banner to the Folder listing page.