How to Design a Ticketed Event Landing Page

Last Updated: Sep 25, 2018 03:34PM PDT

This article contains all image dimensions and recommended image placements for designing a Ticketed event. 

 

- Under 2 MB in file size,
- JPG, PNG, or GIF
- We highly recommend you use the following image dimensions
 

Header Logo

300px x 50px (recommended)

Add your organization logo or a specific logo to your event. The logo is displayed in the left-hand corner of your event pages. You can also use a square image. If you use a square image we recommend 55px x 55px for best resolution.

Hero Block

Headline Image - 700px x 250px (recommended)

Utilize a Headline Image instead of text to inject more branded logos or messaging that use custom fonts and styles that Classy does not support by default.

Important Headline Image Recommendations:

- The Headline Image feature was designed to provide organizations an outlet for adding branded content and/or messaging to their Hero Block. Adding important content directly within your Hero Background image can have some undesired outcomes on different screen sizes, but the Headline Image is 100% mobile responsive so its edges will never get cut off due to the size of your screen.


Hero Background Image - 1280px x 910px (recommended)

The Hero Block is the most prominent content block on the landing page. Think of it as your first opportunity to make your impression on potential registrants for your event. The image falls behind the headline and the Header of your page, so it is important to be aware of those two things when designing your Hero Background Image.

Important Hero Image Recommendations:

- The Header of your event Landing Page will always cover the top 115px of your Hero Image. One way to ensure that your Hero Image will not be covered up at all is to set the opacity of your Header's background color to 0.

- Due to our pages being completely mobile responsive, the portion of your Hero Image that will display varies depending on the screen size of the device you are viewing the page through. If your Hero Image includes important text or content that you want to make sure always displays, regardless of screen size, consider adding that text to your Headline Image rather than within your Hero Background Image so it does not get cut off as the image scales to fit the screen size.

We created guideline images for you, so your headline plays nicely on any device. Click to download the Headline PSD and PNG Guide ImagesThe download will start automatically as a ZIP file. Check your Downloads folder for the ZIP file called "downloadable-headline-guides.zip"

- The recommended position for a Hero Background Image is Cover & Fixed or Stretch for optimal coverage. If you select Center, the Hero Background Image will not scale with the size of the screen.

Footer Logo

300 x 50px (recommended)
590 x 55px (max)

The footer logo will show up in the bottom left-hand corner of the page. It can also be uploaded as a square but should be kept at 55px x 55px for best resolution.

 

Have questions? Reach out to Classy Support for assistance.