The Panorama event templates are designed to be responsive, so whether you view the page on a widescreen desktop monitor or mobile device, the page will look like it was designed for that screen.
You’re only uploading one hero image, and to respond to different screen sizes, that image will inevitably have different parts that are cut off. As you’ll see below, the only part you’ll ever see on all screens is the top middle section.
What makes an effective hero image?
We run through some examples below, but here are the key takeaways:
- Remember that the “hero image” is a background image, so you'll want to upload an image that doesn’t include your logo or any text, as we have other places to put this content.
- The hero image will have a title, thermometer, and buttons in front of it, so make sure you have enough contrast, ie a dark image with white title text.
- The hero image will resize (examples below) and parts will get cut out, so choose an image where it doesn’t matter if certain parts aren’t visible in different screen sizes.
How will my hero image look on different screen sizes?
Let’s look at an example.
I’m uploading a 1500x800 image, which is the recommended aspect ratio. Normally, like the below screenshot, because this is a background image it would have the title, thermometer, and buttons overlaying in front of this image, but we’re going to turn those off for now.
Here’s how much of this background image will display on different screen sizes.
A typical laptop:
A more square-shaped monitor:
An iPhone X...
An older iPhone...
Notice that box #2 is the only thing that appears on every screen. In the example below, we’ve selected an image of runners, made it black & white, and darkened it a bit. As a result, the event title is clear, and the brand color and buttons are more eye-catching.
As you can see in the big browser versus mobile examples below, it works in both contexts, and doesn’t matter that part of the image gets cut off.