Hero Image Guide

Last Updated: Nov 30, 2018 07:02PM PST

Beautiful campaign images draw focus to your cause. With only a few seconds to capture supporters’ attention, it is important to understand Classy’s image features and put them to work for your organization. On Classy, a supporter’s first impression of your campaign is driven by the Hero Image which establishes the overall tone of your campaign.  

In this article, we’ll give an overview of Hero Images and offer some design tips using the following sections:

What is a Hero Image?

The hero image is the most prominent content block on any campaign with a landing page. All campaigns in Classy have one except standalone donation pages. As the main background image, hero images should create a personal connection or emotional response to your cause.
We recommend engaging supporters by picking a hero image that tells a general story with a relevant theme. For example, a photo of runners is a good match for nonprofits that host fundraising races. A nonprofit centered on forest conservation may use an image of trees.

Hero Image Sizing

While any image will technically work as a hero image, we still have some recommendations when it comes to best practices.

The Ideal Size

For the best quality, use a 1280 x 720 px image with a focal point that is 115 px below the top of the image.

We recommend these guidelines, because they work well with Classy’s mobile responsive design. This means your images and the rest of your campaign’s essential elements will look good on any device.

Resizing the Image

If your image isn’t 1280 x 720 px, you can resize it using photo editing software. We suggest using the free image editor pixlr.
If you do not need to resize your image, feel free to skip to our section on Headline Images.

1. Open the Pixlr Editor and click on Open Image From Computer
2. Upload the image you want to resize

3. Click on Image and Image Size... from the top menu
4. Type 1280 into the Width Text Block

  • The height will automatically fill with 720 (or close to it)—if the number is off by a pixel or two, that is okay
  • If the number is far off, our designers recommend switching to another image. You can also force the height to 720 after unchecking the constrain proportions box, but the image may look distorted

Pro Tip: It's best to make a bigger photo smaller rather than the reverse. Upsizing an image too much can make them blurry

 5. Click on File and Save from the top menu bar to save your resized image

Headline Images

Instead of a standard headline, consider using a headline image. These images appear above your donation buttons and allow you to use custom designs to engage supporters.

Adding a Headline Image

In your landing page editor for the campaign you want to edit, flip the Headline Image switch and upload your headline image like normal.

There is no ideal size for headline images, because they automatically resize to be 115 px tall and will sit on top of your hero image (the background). Like the hero image, headline images are mobile responsive.  

Basic Design Tips

As we mentioned before, it’s best to keep the focus of your hero image 115 px below the top of the image. But our designers have a few additional tips to keep your page looking its best.

Keep a Clear Visual Focus

If your background image and the headline share the spotlight, it’s important to make sure they don’t compete with each other. For example, white text on a bright background is difficult to read. Using contrasting colors can help.

You may consider using a border image or pattern that leaves open space in the middle. This will add emphasis to your headline.
You can even place the focal point of your hero image to the side for aesthetic appeal. There are many visual strategies that can help your background and headline compliment each other, and we recommend trying out different combinations to see which you like best.

Advanced Design Tips

You also have advanced design tools to help you put the final touches on your hero image and headline.

1. In the campaign you want to edit, select the Pages tab and the Landing Page
2. Select the Design Editor and the Hero tab

Edit the Visibility

3. Choose whether to show the hero block

  • Hiding the Hero Block will make your hero image, headline, and donation buttons disappear
  • We don’t recommend this for general use, but the option is available for nonprofits with development teams who would rather create a custom header block

4. Change the alignment of your Headline

  • You can center your headline or place it to the left

5. Edit your Headline or add a Headline Image

  • Flip the Headline Image switch off to use a standard headline

6. Click on the Headline Color Circle to change the color of your headline and subheadline

  • This will not change the color of a headline image

7. Edit the Date and Time as well as the Venue and Location using the text blocks

  • You can hide both lines of text by marking the appropriate checkboxes
  • Note: This step only applies to Ticketed Events and Registration with Fundraising campaigns. We added it here to help those who are editing these campaign types.

​What about changing the buttons?
You can edit the button text by highlighting the button text on the right side of your editor. We'll keep our focus on images for now, but you can learn more in our
button guide

Edit the Background

8. Click on the Background Color Circle to change the color of the background

  • If you are using a hero image, the color circle will add a tint to your image—this can help your headlines stand out
  • If you do not use an image, the background will be the color you choose

9. Move the Color Opacity slider to change the opacity of the background color

  • Using 0 percent opacity means there will be no tint

10. Click the Image Position Dropdown and select the style you prefer

  • Adaptive Cover - The image will be centered and stretch the full vertical height of the screen. But the horizontal sides will be cropped off as the width of the screen shifts
  • Center - The image will be centered in the content block
  • Tile - The image will be repeated on the screen and look like tiles
  • Stretch - image will stretch to match the width of the user's screen resolution—not the height
  • Cover & Fixed - The image stretches to accommodate the height and width of the screen and is locked so it will not scroll with the page. Our designers recommend this option since it gives your page sleek 3-dimensional look

11. Move the Image Opacity Slider to change the opacity of your hero image

  • The higher the Opacity percentage, the less transparent the image is

12. Move the Image Blur Slider to add a blur effect to your hero image

  • Our designers recommend using the blur effect sparingly. Too much blur can be harsh on your viewers’ eyes

13. Flip the Hero height switch to fill the browser height with your hero image
14. Click Save & Update Page at the top of your editor to save your work

If you have any additional questions, please contact Classy Support for assistance.

Back to the top