Adding a hero image to a homepage

A hero image is a high-impact visual placed at the top of a homepage that immediately grabs users' attention. It is a standalone static image without links, designed to create a memorable impression.

This makes it an excellent choice for homepages that don't need a hero teaser with major news or for short promotions and celebrations. Since it involves only a single image, it's fast and easy to set up.

A hero image can be added to a homepage, but not to the mobile dashboard. You need the "Manage hero teasers" permission to add a hero image to a homepage.

Basics of hero images

Ratio and resolution: 1:5 ratio, e.g., 1400 x 280px or 2800 x 560px. The image will be cropped to this ratio on upload.
File type: PNG or JPEG. If you include a transparent background on a PNG image, your theme's Navigation bar background color will show behind the image.
File size: Max. 10 MB
Content:
- Make sure all graphics, text, and background elements stay within the image edges, so nothing gets cut off where the Hero Image ends and the navigation background starts.
- We recommend centering and sizing important content, such as text, to keep everything clear on different devices. On smaller screens, the image is cropped on the sides, so focusing on the center keeps your message front and center.
- See an example of how we've centered and positioned our text higher on our hero image. You'll also find example images for a few celebrations below!

Add a hero image to a homepage

Select Enable Edit view from your user profile drop-down.
Select Add hero image at the top. If your homepage already has a hero teaser or image in place, select the Remove icon in the upper-left corner of the teaser.
Upload a hero image from your computer.
Select Save in the edit bar at the bottom of the window.

The hero image is added to your homepage.