Home Hero – Split Screen

This layout is great for hero images/videos with a center focal point. This means if you placed the text on top of the hero image, it would cover the important parts, so the content is placed beside the image instead.

Use Cases

Use this hero layout if the media provided is an image 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 or is too busy to place text over it.
• 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 no padding and give it a color/texture/gradient background.
• 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.

This hero works at any hero height, and depends on the media provided as well as the hero specs in the design research done by vertical.

What’s in the template?

The template for download includes 1 layout option for the split screen 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.