This is a step-to-step guide on adding a banner image on the homepage.

Adding Banner image Media

To add a banner image you must first add the image to the ‘Media’ plugin. To add your banner image to media plugin, please follow these steps:

  • Log In as an admin

  • In the left menu, go to Media plugin

  • In the right corner of your screen, click on ‘Upload Image’ button

  • Drag and drop or Upload the banner image from your local machine on the dropbox

  • In the preset dropdown, choose preset as Home Banner

Outcome: Your image will be added as home banner on the media plugin

Types of Banner images on Homepage

  1. None - Does not add any banner on the homepage

  2. Static - Adds a static and non moving banner on the homepage

  3. Dynamic - Adds a moving dynamic banner

  4. Custom Sequence - Adds multiple banner images set orderly

  5. Google Map - Embeds google maps as banner on the homepage

Adding Banner to your Homepage

Banner as None

To add the image you uploaded as None, please follow these steps:

  • Go to Pages Plugin

  • In the global search, search and select ‘Home page’ of your website

  • In the page, go to Banners tab and select Banner type ‘None’ from the dropdown

  • Click as Save and Publish

To preview the results of ‘none’ type banner on your homepage, click on Preview tab of the page

Outcome: No banner will be added on your homepage and it will be blank

Banner as Static

To add the image you uploaded as a Static banner, please follow these steps:

  • Go to Pages Plugin

  • In the global search, search and select ‘Home page’ of your website

  • In the page, go to Banners tab and select Banner type as ‘Static’ from the dropdown

  • Select the image name from static image dropdown input

  • In the Link dropdown, select the link of homepage

  • Click Save and Publish

The image name will appear as you added on the ‘Media’ plugin

Go to Preview tab, to see how the page will look on the frontend

Banner as Dynamic

To add the image you uploaded as a Dynamic banner, please follow these steps:

  • Go to Pages Plugin

  • In the global search, search and select ‘Home page’ of your website

  • In the page, go to Banners tab and select Banner type ‘Dynamic’ from the dropdown

  • Select the image name from dynamic image dropdown input

  • In banner sequence dropdown, select your image for the home banner

  • In display order, choose ascending or descending or random as you wish for them to appear

  • In first image dropdown, you will see you banner image added

  • In the link dropdown, select home page link

  • Click Save

The image name will appear as you added on the ‘Media’ plugin

Go to Preview tab, to see how the page will look on the frontend

Banner as Custom Sequence

To add the image you uploaded as a Custom Sequence banner, please follow these steps:

  • Go to Pages Plugin

  • In the global search, search and select ‘Home page’ of your website

  • In the page, go to Banners tab and select Banner type as ‘Custom Sequence’ from the dropdown

  • Select sequence as ‘Home’ in the select sequence dropdown

  • Enter a name for your sequence in sequence name input

  • Select Scrolling type as fade, horizontal or vertical for animation style of the banner as you want

  • Select display order as ascending, descending or random as you want for home banner

  • Enter rotating or timeout speed for the banner

You can also ignore these inputs for rotating and timeout to save it as by default

  • Turn ON the toggle for Page control, if required - toggle no by default

  • Turn ON the publish page toggle

  • Now in the available image section choose the images in order of what you want to see in home page

  • In pop-up for the image, click on Add image to the sequence

  • Similarly add another banner image to the group

  • Click on Save and Publish

The image name will appear as you added on the ‘Media’ plugin

Go to Preview tab, to see how the page will look on the frontend

Adding text to a Banner

  • Within the Sequence Items section, navigate to the select banner

  • On the HTML Column, select Add or EDIT

  • In the Pop Up screen you will see a text input section, here you can add you banner text

    • You can left/right align

    • Add Heading 1, Heading 2… style

    • Hyper link the text

  • Select Update Sequence Item to save

  • Now select Save and Publish

Adding a Mobile Banner

  • In the media plugin, Upload your mobile image with the preset ‘Mobile Banner’

  • Go to the pages plugin and select your page

  • Navigate to the banner tab

  • Within the Sequence Items section select EDIT on the HTML column

  • In the popup, select your Mobile Image from the dropdown

  • Select Update Sequence Item to save

  • Now select Save and Publish