Photos

How to create a Hero banner

How to create a Hero banner

  1. Login to your website CMS by using the Login and Password provided to you 
  2. When logged in, scroll the left sidebar until you see Photos

  3. Click on Hero banner

  4. You will see the list of existing hero banners (if you have created any)

  5.  You can either click on the existing Hero banner to edit it or click "+ New" button to create a new Hero banner

  6. Inside of the editor, you would need to fill in: 

    • Hero banner name (it is a good idea to name this: "page name banner" so it is easy to identify e.g. "homepage hero banner")
    • Select what hero banner type i.e. image, video, slideshow in both places
  7. If you select an image: 

    • Click 'add image' and select an image from your file manager
    • Fill in the fields only where  required i.e. titles, sub-title, alt text (this is a MUST), button text and button URL
    • Once completed click save and remember to add the hero banner to the necessary page
  8. If you select a video:

    • You will need to retrieve the 'youtube ID' this is the text after the V= in the URL of the youtube video, copy and paste this into the 'youtube ID' field
    • Fill in the fields only where required i.e. titles, sub-title, alt text (this is a MUST), button text and button URL
    • You must also select a mobile image for your video hero banner, this is for visitors who are accessing your website via their mobile device, when they land on your website the hero banner image will not play immediately, instead, an image will appear where they will be able to play the video from. By clicking browse, your file manager will open and you can select an image from here. It is important to select a mobile image for all video hero banners.
    • Once completed click save and remember to add the hero banner to the necessary page.
  9. If you select a slideshow:
    • Similar to an image hero banner, you will need to click 'add image' and you are able to add as many images as you wish
    • For each image you select, fill in the fields only where required i.e. titles, sub-title, alt text (this is a MUST), button text and button URL
    • Remember to select the speed of the slideshow, a 3-4 second rotation is recommended. 
    • Once completed click save and remember to add the hero banner to the necessary page.

Please also refer to our recording of "Creating a Hero banner" below: