This guide covers how to add content or make layout changes to a hero section as part of branding or customization.
The background image is applied using the
.bg-home utility, which references the Home page hero image theme setting. Replace
.bg-home with a background color utility like
.bg-primary if you’d prefer a full-color background instead.
It’s possible to combine both approaches using a semi-transparent image overlay:
<div class="absolute top-0 left-0 w-full h-full block opacity-75 bg-gray-800 z-0"></div>
The use of
.bg-gray-800 means that the underlying image is given a tint of the color gray (
$color-gray-800 defined in your theme’s Sass variables). The
z-0 z-index utility is applied to the overlay and
z-10 to the content container. This ensures that the overlay and background image always appear behind the content of the hero section.
The example above introduces a custom heading and resizes the search bar. Both changes are accomplished using utilities and can be copied directly into your theme.
Many of our themes already feature large headings within the Home page hero section to welcome visitors. The text of the heading can be configured in those cases using theme settings.
The hero section page in our Pattern Library contains additional examples of modified hero sections that you can use straight away or take certain parts from.
Questions or feedback about this guide? Let us know