Hero blocks in the new WMS are more powerful than ever!
Grab your cape and vibranium shield. Hero blocks allow you to add a large, high-impact image to the top of your homepage that will fill or nearly fill the screen, providing an immersive experience your user will marvel at.
New features
- Add text, including headings and buttons
- This text is accessible for all users, including people with visual impairment using screen readers (unlike images of text, which you should not use)
- Larger size
- Automatically resizes to fill most of the screen (on any device)
How to use a hero block
- Add as a global block ().
- Place on your homepage, in the highlighted region at the top of the page.
- Use an image with rich detail that's interesting or informative, that your user would take the time to look at.
- Use a very high resolution image鈥攁t least 1920px wide.
- Content within 100px of the image's edges may be cropped on some devices.
- Add text to direct your audience to the most important content on your site.
- The height of the image will increase to accomodate the text box, but don't add filler text just to make the block bigger. Only add text when it provides value to users鈥攐therwise you're just forcing them to scroll further to find what they're really looking for.
Beyond the hero: supercharge your landing pages with banner image blocks
The new banner image block is similar to the old version of the hero block: it's a short, image-only block that adds a visual to the top of your page.
How to use a banner image block
- Add as a global block.
- Place on any page in the highlighted region.
- Use a very high resolution image鈥攁t least 1920px wide.
- Consider using a banner block on the landing page of each main menu item (besides the homepage) to add visual appeal and make pages easier to remember and recognize.
- Select images that work together as a set to give your site a branded, cohesive personality. Images can be unified by a theme, style, and/or colour.
- Don't use on purely informative pages where users just want to find an answer as quickly as possible.
- Find more tips and examples in our article "How (not) to use images."
- Don't use images of text. It's not accessible and won't look good on smaller screens (e.g. mobile).
