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 case you want to just show a text message at the top of your website, use the Announcement bar. Or if you want to create a pop-up that appears when visitors view your website, you can try the Marketing Popup.
In this article:
- What is a Banner?
- Add a Banner to a page
- Add/Edit Banner slides
- Sequencing the slides
- Delete a Banner slide
- Styling the Banner
- 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.
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.
Points to remember:
- The ideal size of a Banner image will be 2000 pixels X 2000 pixels.
- Supported image file formats for the banner are JPG, JPEG, PNG, and GIF.
- We recommend you upload landscape images rather than portrait ones.
- Add the text over the images from the Master/Slide text field. Do not upload images with text in them.
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:
Note: A banner slide once deleted can not be recovered.
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
-
- Scale and Fit – Images will fit within the banner width and height.
- Fit to Width (Desktop Only) – Images will be scaled to banner width. Banner height will inherit the image height.
- 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.
- Banner Mobile Height – Specify the mobile banner height.
Style
- Content Position – Specify the content position over the banner.
- Content Width – Specify the width for the banner content.
- Background Color – Set the background color for the banner.
- Overlay Color – Set the overlay color for the banner.
- Navigation Style – Specify the navigation style of the banner. You can select from 3 styles.
- Navigation Color – Specify the color of navigational tool.
- Scroll-down Arrow – Select this option to show a scroll-down arrow over the banner.
Slideshow
- Slideshow – Choose the Autoplay option to enable slideshow for the banner.
- Slideshow Speed – Specify the slideshow speed (in seconds).
- Slideshow Transition – Specify the image transition style for the banner.
Buttons & Links
- See how to manage the styling of Buttons & Links.
- Save all the style changes.
Choose a Banner Layout
To change the Banner layout,
- Click on the Edit Banner (1) button to open the Edit Banner panel.
- Click on the Layout (2) tab.
- Choose a Banner layout (3) and click on it.
- Save (4) your changes.
Check: The Banner layouts.
