Adjusting Hero Image Overlays in Classic Composer

By default, we add a slight overlay (tint) to your hero imagery to ensure all text overlaid is legible. This simple tool allows you to adjust the look and feel of your imagery without needing to be a Photoshop (or any other photo editing software) pro!

🔹 How to Update Hero Overlays

1. Log into the CMS
   Ensure you’re logged into the correct back office within the CMS.

2. Navigate to Design & Appearance
   Go to Settings > Design & Appearance.

3. Select Sections
   Click on the Sections tab and scroll down to either the Hero or Subpage Hero section.

4. Adjust Overlay Colour

   • Use the colour picker or enter your HEX colour value to select the overlay colour.

5. Set Overlay Opacity

   • Add a value between 0–1 to adjust opacity.

     • 0 = no overlay

     • 1 = full solid colour overlay (not recommended!)

   • For most imagery, an opacity between 0.3–0.7 works best, but this will depend on your image.

6. Save Changes
   Once you’ve chosen your colour and opacity, click Save.

This ensures your hero images remain visually appealing while keeping all text easy to read.