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 (learn how to create and configure 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—at 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.
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—at 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).
