A big picture across the top of the page - a "hero" banner - is one of the easiest ways to make a site look great. Until now you could only do this in the Bootstrap theme, with one picture for the whole site, or by adding Background Begin and Background End includelets to every page. Now there's a much better way, and it works in all three of the main themes.
What's new
- Banners in Fresh and Clarity, as well as Bootstrap. Each theme puts the banner in its own carefully designed place: behind the logo and site name in Fresh, behind the logo and menu button in Clarity, and in the usual banner area in Bootstrap.
- A different picture for each part of your site. Set one banner for the whole site, then give an application (your Photo Album or Events Calendar, say), a Private Members' Area, a section of pages, or a single page its own picture. Or switch the banner off just there.
- Sections share a banner. Set a banner on a section page and every page below it gets the same picture, unless you choose otherwise.
- Choose the height. Pick how tall the banner is, and give your homepage a different height - for example a big Hero banner on the homepage and a short one everywhere else.
- Any size of picture. The image is cropped to fill the banner, so it doesn't need to be an exact size. Keep in View lets you choose which part of the picture stays visible (top, middle or bottom).
- Readable text on top. Alter Banner Image can darken or lighten the picture, and the site name and buttons on top change colour to match, so they're easy to read over any image.
- Banners go live when you publish. A page's banner is saved with the page, just like its text, so you can preview a new banner and publish it when you're happy.
How to turn it on
- In your site's admin pages, go to Look & Feel, then Theme, and click Options next to your theme.
- In the Banner Options section, tick Show Top Banner (Bootstrap) or Show Banner Image (Fresh and Clarity), and choose your picture from the Assets Library.
Then, to give part of your site a different banner:
- An application or Private Members' Area - go to Content, then Applications, and click Banner next to it.
- A page or section - open the page in Content Management and use its new Banner tab.
There's more detail in the Themes documentation.
Already using a Bootstrap banner image?
You don't need to do anything - your banner image has been moved over to the new system automatically, and your site looks just as it did. The only difference you might spot is that if you'd set the banner image to be darkened or lightened, the text on the banner now changes colour to match, which makes it easier to read.
Banners are for the top of the page. If you want a picture behind a band of content further down a page, Background Begin and Background End are still the tool for that - and any pages already using them haven't changed.
As always, if you have any questions or feedback, please post in the forums.