UW Heading Highlight

The UW Heading Highlight adds a Badger Red or white background behind each line of a heading text when it appears inside a Cover block. Use it to give a short, important message stronger visual emphasis over a background image.

The treatment works best in homepage and landing-page hero sections.

When to use heading highlight

Use the UW Heading Highlight on homepage or landing-page hero images to help a primary heading stand out.

Because the heading highlight creates strong visual emphasis, use it for the most important heading in a hero section rather than repeating it throughout the page.

Don’t do this

Don’t use the heading highlight on multiple sections of the same page. This can make the sections compete for attention.

Do this

Use the heading highlight for the primary hero message, then use standard heading styles for supporting sections.

Choose a background image

Choose a background image that gives the heading clear visual separation and keeps the message easy to read.

Look for images with:

• Simple or more abstract compositions
• A clear, uncluttered area where the heading can sit
• Enough space around people and other important parts of the image
• Colors that don’t blend in with the heading highlight
• A composition that still works when the image is resized on smaller screens

Don’t do this

Don’t choose close-up or highly detailed images where the heading would cover important parts of the photo, such as faces.

Do this

Choose wider, more environmental photos with enough open space for the heading to stand out without competing with the image.

Position the heading carefully

Place the heading where it does not cover important parts of the background image.

Use the Cover block’s content position controls in the block toolbar to move the heading to a clearer area of the image.

If needed, adjust the image focal point so important content stays visible when the image is cropped or resizes on smaller screens.

Use the View feature in WordPress to preview your layout on Mobile and Tablet.

Don’t do this

Don’t place heading over:

• Faces or people
• Important objects or subjects
• Signs or text within the image
• Detailed or visually busy areas

Do this

Look for areas with more open space, such as:

• Sky
• Plain walls or architectural surfaces
• Open landscape
• Less detailed areas beside the main subject

Improve heading contrast

Use an image overlay

Use the Cover block’s color overlay settings to darken the background image when needed.

A black overlay with 20-30% opacity is a useful starting point. You can also try the Cover block’s default gradient overlays, which allow more of the image’s original colors to show through.

Adjust the overlay so the heading remains easy to read without making the image unnecessarily dark.

Use a drop shadow

If the heading highlight still blends into the background after adjusting the image overlay, try turning on Add shadow in the UW Heading Highlight settings.

A shadow can be especially helpful when using a white highlight over a light or varied image.

You may not need both settings. Choose the combination that makes the heading highlight stand out clearly without unnecessarily darkening the image.