Hero Options

A "hero" is usually the first thing anyone sees when they arrive to a site's homepage. A hero is meant to be eye catching, attention grabbing and possibly interactive enough to where people feel intrigued to look further down the site. The internal page's heroes can either be the same one from the homepage, or similar but toned down a bit.

Customization Available:

  • Row Background Type: Solid Color, Parallax Image, Gradient, Static Image, Video Hero, Slideshow
  • Overlay: Custom color and opacity

Solid Color

A solid color hero is a cool, minimalist option that works best on informational sites or on the internal pages of sites rather than the homepage. If a solid hero is placed on the homepage, it would probably be best accompanied with some sort of splash image, slider or module that can still grab visitor attention, perhaps with a call-to-action or cool row separator placed at the bottom.

This solid color hero example takes up about 1/2 of the screen height and is using the "stamp" row separator.

Parallax Hero

A parallax hero contains a high quality image (preferably about 1920px in width or more, and with landscape orientation) set to the background of a row. The amount of the image that shows depends on how tall the hero image is set to be. If the hero takes up the full height of the screen, most of the image can be seen. If the hero image is set to take up about half to 2/3rds of the screen, expect some of the top and bottom parts of the image to be hidden, only visible when scrolling in the opposite direction. If you do not want any parts of the image hidden, it’s probably a good idea to choose a static image hero (so you can set a certain part of the image to show at all times), or not use the image in a hero setting at all; place it perhaps in the regular site content along with the body text.

This parallax hero example takes up about 1/2 of the screen height, has a 50% dark gray overlay, and is using the "wave slide" row separator.

Gradient

A gradient hero is a cool, minimalist option that works best on informational sites or on the internal pages of sites rather than the homepage. The gradient can be set to linear or radial. If a solid hero is placed on the homepage, it would probably be best accompanied with some sort of splash image, slider or module that can still grab visitor attention, perhaps with a call-to-action or cool row separator placed at the bottom.

This hero example takes up about 1/2 of the screen height and displays a gradient background set to "radial".

Static Image

A static image hero contains a high quality image (preferably about 1920px in width or more, and with landscape orientation) set to the background of a row. It is similar a parallax hero but without the background image shifting up and down on scroll. If it is desired that the image stay in the same place, or certain parts of the image show, then this option should be selected instead of a parallax. If you do not want any parts of the image hidden, it’s probably a good idea to choose another image for the hero, or not use the image in a hero setting at all; place it perhaps in the regular site content along with the body text.

This hero example takes up about 1/2 of the screen height, employs a static image background set to "center" and has a 60% light gray overlay. 

Video Hero

A video hero contains a short, looping, high quality video (preferably about 1920px in width or more, and with landscape orientation) set to the background of a row. These videos can be chosen from stock, provided in .mp4 format, as a url for the video uploaded to a public hosting provider, or as a link to a publicly posted youtube/vimeo video. If it is expected that there be text placed on the row as shown here, then the video will not have controls, and therefore should not have sound attached or text within the video as well. Another item to be noted is that video heroes require a fallback image for when the hero doesn't load or is viewed on a smaller screen. Most mobile devices do not allow video heroes and display the fallback image by default.

This hero example takes up about 1/2 of the screen height and displays a looping video with a 60% gray overlay.

Slideshow Hero

A slideshow hero contains a few high quality images (preferably about 1920px in width or more, and with landscape orientation) set to the background of a row on a timed rotation. When using a slideshow hero, considering the slideshow places the images "behind" a row, there's not much control over how much of each image shows or their positioning. These images usually try to fill the screen depending on the size of the row and not all of the image will show at any given time, especially on smaller screens. If it is desired that the images are fully visible, or that the text changes per slide, then it is recommended to use the "content slider" module as the hero instead, as it has great styling options for all screen types, shows as much of the image as possible, and allows different text content to transition with each slide image. 

This hero example takes up about 1/2 of the screen height and has 3 images set to slide horizontally (3 sec delay) with a 70% light gray overlay.