Home Hero – Floating Image

This layout works best for cases where the hero image is too small to fill the screen, or if everything in the image is so important that it can’t be cropped or hidden. This is also a good layout for hero rows where the media is a vector graphic or isometric. The background of this hero layout is usually a solid color, a gradient or a blurred version of an image.

Use Cases

Use this hero layout if the media provided is an image, a vector graphic or a video that might lose quality if it fills the background of the row OR meets one of the following criteria:

• If the media is an image, its focal point is in the center of the photo, it has text on it, is too busy to place text over it, is too small to fill a column or row, is too important to be cropped or cut in any way.
• If its a video, its focal point is in the center, it has important parts/text in it that might get covered up if any content was placed over it, it contains sound, its not a short loop or it may need controls to be visible allowing people to pause or scrub it.

To Create this Hero

• Add a row with padding and give it a color/texture/gradient background and a minimum height.
• Add 2 columns to the row and make them have equal heights with their content aligned to the center.
• If the media is an image, give one column a background image and a minimum height based on how tall the hero row should be OR if the media is a video, give this column a video module and style it as needed.
• In the other column, add the hero text content and make sure the hero is suitable for tablet and mobile views.

What’s in the template?

The template for download includes 1 layout option for the Floating Image hero type. You can choose to create the hero yourself OR download and import the template for use instead.

Use the template layout option as a starting point based and style appropriately – swap out the background media and change the fonts/colors/sizing/modules, etc. as needed.