Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.

Use a great hero photo

The big photo at the top of your homepage is the first thing many of your users will see. Make it great! 

Image Added

It can be a challenge to find the perfect photo sometimes, but it's important.

  • Your homepage hero photo should be as horizontal/wide as possible, as opposed to square—the more your user has to scroll down to get to your content, the more likely it is that you'll lose her. 
  • It should have a relatively neutral area along the bottom, so that you can read the text. Look for photos that have empty sky or a clear horizon line in the bottom third, so that your text is legible. If it's hard to read the text, selecting "Light" for the "Text color mode" setting can help in some cases. 
  • Definitely take advantage of the DAM to find great photos for your homepage. 

You can also use your homepage to link to an important page within your site. If there's one place you'd like to steer your users above all else, this is an effective way to do that. It can be an individual static page, a landing page, or even your donation page during year-end giving time. This approach is similar to the "curtain" on the National site, which we change nearly every day to keep that day's biggest or best story front and center. 

Audubon California often employs this technique on their homepage: 

Image Added

To use your hero photo to link to a page within your site, fill in the desired page's URL in the "Link title to URL field" of the homepage module:

Image Added


Link to your most important content

After choosing a great hero photo, you can turn to adding content to the rest of the page. Your site comes pre-configured with a set of homepage modules that represent a "default" setting. That set of modules is slightly different depending on whether you're a state or a center site. You're free to use these modules as-is, or add/remove them to fit your specific purposes. 

You can use standard editorial cards to link to your most recent articles, or to your most important landing pages. On the national site, we use the "2x" editorial cards to link to more permanent features of the site (like the Conservation landing page) and the "3x" editorial cards to link to fresher content. It's a good practice to refresh your homepage with new content as often as you can—remember, editorial cards are manual placements, so if you don't update them by adding new articles, they'll never change. 

A news stream or not?

State sites come pre-configured with a news stream toward the bottom of the page. This displays all the articles and pages assigned to the "News" category, sorted with the newest articles at the top. It automatically updates with the latest content, that way when you create a News story, it will automatically be added to your homepage. 

Image Added

This is great if you create News content on a regular basis (once a week or more). If you use your News section as more of a "blog" then this is a good approach to making sure your freshest content is always on the page. 

But if you don't create a new article at least every week, it might be a good idea to simply use editorial cards instead of a news stream, so your homepage doesn't appear stale.  

Note: by editing a news stream module, you can easily change which of your site categories it pulls from. For instance, if you post new articles to your Conservation section, you can change the news stream to pull from articles posted to that category instead of News. You can also add a News Stream to any landing page, not just the homepage. 

Center sites do not come pre-configured with a news stream, on the assumption that they will be creating content less often. But if that's not the case and your center has an active website, feel free to add one. 

Other modules

It's possible to add additional modules to your homepage to customize it. Things like embedded maps, videos, additional hero image sections, etc are all possible. For ideas, browse the sites who have already launched