Āé¶¹“«Ć½ĶųÕ¾

What to expect when you’re expecting… a new header

The upcoming header makeover promises to bring a fresh and simplified design to WMS sites, allowing the content to shine through.

What does this mean for your site’s banner image?

The most obvious change is that you won’t see the image in the header anymore. Nevertheless, have no worries if you need to hang on to it. The image will be preserved on your site in a new block labelled the ā€œHeader Imageā€ block.

If it’s important to continue displaying the banner image on your site, you’ll be able to display it in a new region called the ā€œHighlightedā€ region at the very top of the page, i.e., on top of the ā€œTop of pageā€ region.

You’ll find the Highlighted region when you go to the block admin through Structure > Blocks.

Highlighted region

You’ll also find the ā€œHeader Imageā€ block if you scroll down to the list of blocks in the ā€œDisabledā€ section.

To move the block to the Highlighted region, simply configure the block as you normally would. Select the region and then specify the visibility settings. Showing the block only on the <front> page would be recommended – in keeping with the fresh, clean, minimalist vibe – but you can always set the block to show on every page if that’s how you roll.

Header before

Check out the before and after!

Header after

If you ever need to change the image, just edit the block as usual. Hover over the top right corner of the block until the contextual menu appears and click ā€œEdit Blockā€. This means that you’ll have the flexibility to display custom images as you wish and whenever you want.

Header admin page

Something to keep in mind if your site has a horizontal menu, is that the very first block listed in the Highlighted region with a View Mode set to ā€œFullā€ will have no top margin, allowing that block to ā€˜touch’ the horizontal navigation.

If your block is not flush with the horizontal menu but should be, click ā€œEdit Blockā€ and check the Body of the block in the HTML source view. Remove any <p> tags and click ā€œSaveā€ while still in the HTML source view. This will remove the gap between the block and the menu.

When will the redesigned header be deployed? Keep an eye on our articles to see the status of work done by the Web Service Group.

Back to top