Supercharge Your Hero Image

Hero Article - Hero Image

Let’s take a moment to consider the humble hero image or banner (you know, the big picture on the home page of most websites). 

Sometimes you may see it perching atop the website, sometimes it will fill the entire screen, sometimes it shuffles though pictures other times it doesn’t and occasionally it’s not a picture at all but a video. 

Whatever form it takes the hero image has become one of the most important elements on a website: It’s the first thing visitors see and interact with, is the first impression a visitor will have of your website and it probably contains the first words they will read about you. (No pressure then!)

Okay, they’re important – we get it – and because they are so important our Content Management System, Proteus makes managing them easy, simple, quick and a genuine joy!

Let’s take a look at how Proteus works its magic with your hero images.


We call hero images Sliders because they show ‘slides’ of images or videos. So, first off you create a Slider in which your slides will live.

Slider Index

One cool feature requested by lots of customers was to be able to control how long the hero image stays on screen before being replaced by the next one. You can do that by adding the number of seconds delay between slides into the Speed box.

Create New Slider


Now your Slider is set up you can add as many beautiful hero images (including capes and super-powers if you wish) to the Slider as you want. Simply click on the Slides button and you can start entering information about the Slide.  

There’s some nice functionality you can add to your Slides which make Proteus stand out. Take a look at the screenshot and we’ll point out the neat stuff below:

Create New Slide

  1. The title of your Slide is the main/title/big text you see
  2. The Synopsis box is where you put text which goes under the title text
  3. Put some text in the Content box and when someone clicks on the Synopsis text it expands to reveal this text – very neat!
  4. The Link field is where you want people to go when they click through from the Slide. (No restrictions here - you could even take them to another one of your websites!)
  5. Link Name is the text on the button.

Just a quick note about point 5. This is a super-useful because it means that you can change your call to action on the Slide. For example the button text could say:

  • Read More
  • Check Out Our Products
  • Watch The Video
  • Sign Up
  • Find Out More
  • Continue
  • Download
  • Free Trial
  • How It Works
  • Log In

You get the idea! Most content management systems don’t do this but we like to give you that additional flexibility which helps give you the edge.

Oh, and selecting the image itself is dead easy; just click Images, select the category the image is in and select it from the thumbnail display. (Quite a few CMSs use lists but we prefer you to see what you’re selecting without having to memorise the filename.)  Plus one extra little bit of Proteus loveliness is the ability to even add Videos into your hero images.

Select Image

And you’re done!


You can add a slider to any page so it’s not confined to the home page! (If you’re feeling kinda crazy you can even add multiple sliders per page!).

So, every page can be topped with a hero images that set the tone for the content on the page. (Here’s a really clean and simple example from one of our customers, Oosha

Oosha Sub-Hero Image


We hope you enjoyed our little tour of how Proteus can super-charge your hero images and if you’d like to discover more about our wonderful CMS, Proteus, then drop us a line below.

Have fun.


digitalROAR LogodigitalROAR is a Web Design agency based in Staffordshire. We build websites that convert visitors into customers and enquiries through great design, rock-solid technology and innovative Digital Marketing. Let's make Contact.