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 banner, and to respond to different screen sizes, that banner 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 banner image?
We run through some examples below, but here are the key takeaways:
- Remember that the “banner” 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 banner will have a title, thermometer and buttons in front of it, so make sure you have enough contrast, ie a dark banner with white title text.
- The banner 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 banner look on different screen sizes?
Let’s look at an example.
I’m uploading a 1500x800 banner, which is the recommend 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 banner 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.