Large Hero with gradient overlay to the left
A subtle gradient behind the text improves readability while keeping the background image visible. This works best when the image has soft colors and even contrasts – or when the main focus of the image is positioned to the side, leaving space for text. You can add buttons to your Hero block.
Small Hero with full overlay
Apply a color overlay across the entire image and adjust the opacity to balance visibility and readability. This ensures clear text, even on busy backgrounds.
Large Hero with gradient overlay at the bottom
Placing text at the bottom of the image with a subtle gradient works especially well when the lower part of the image has a uniform color or less contrast.
Medium Video Hero with boxed overlay
It's also possible to have a video background in the hero block. By placing your text inside a solid-colored box on top of the image or video you ensure maximum readability. The box color can be customized to match your brand identity.
Medium Hero with no overlay
Placing text directly on an image creates a clean and modern look, but it requires the right kind of background to ensure readability. This works best on images with a natural contrast between light and dark areas or uniform, uncluttered backgrounds.
Small hero with centered gradient overlay
Placing text in the center of the image creates a strong focal point, ensuring the message stands out. A gradient behind the text enhances readability, making this option ideal for images with a lot of detail or variation in the middle.
A small hero with a very wide heading
Note that too long lines of text can reduce readability.
Large Hero with gradient overlay at the top
Placing text at the top of the image with a subtle gradient underneath ensures readability while keeping the main part of the image visible. This layout works well when the focal point of the image is in the center or lower half.