How to add promotional messages to your header 30 September 2024  |  Cate

A website's header links or header promos (sometimes referred to as a notification or announcement bar) is a section that is displayed either at the top or bottom of the Header area of the site. This is used to promote an ongoing sale, delivery promotions, your unique selling points, or a specific announcement, and will appear on every page visitors land on to ensure they don't miss it.

This section is designed to take up less than 5% of the height of the page, but should be styled to make it stand out, so visitors can spot it easily. The easiest way to do this is by ensuring the background colour is a contrast to the section above and below it, whilst still remaining within your branding guidelines.

Adding you header links

With all Bluepark V2 themes, there are three slots available to quickly add in your promo messages or announcements. These are automatically styled within the theme to make them stand out. To add yours, follow the steps below.

• In your admin panel, go to Design > Site Theme
• In the Header Links section, type in the text you want for each message slot
• Add in any relevant URLs you want each Header Link to link to
• In Display as Carousel, select Yes or Yes, auto-scrolling if you wish for one link to show at a time in a carousel, or Mobile only or Mobile only, auto-scrolling if you wish for it to display all three at once on desktop and then one at a time in a carousel on smaller screens.
  Please note, some themes have this set to always display as Yes, auto-scrolling, no matter what you choose here.

Styling your header links

All of our themes come with the Header Links area styled with best practices in mind. The background colour will contrast to the adjoining sections of the site, so it stands out, and will match the theme's colours. If you follow our How to change the default colours on a theme guide, the colour will change along with the colours you update. Should you wish to change them to something completely different, follow the steps below.

• In your admin panel, go to Design > Site Theme and click on the Advance Editor button
• In the Pages tab, click the Edit button next to the Additional CSS field
• In the pop-up, look for the section titled /* Header */ and find the line that starts #top or #links
• In this line you will see background: with a HEX code after it. Change this HEX code to the one you want.
• Click on Accept Changes, save, and click the Green Tick icon to confirm.
• Depending on your theme, you may need to update the same colour within the Responsive CSS field too.