We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Hero

An imposing hero banner to showcase something

Features

  • Full-height option with three drop zones
  • Optionally occupies the entire viewport
  • Three different sizes for added emphasis
  • Cusomizable colors with gradients

  • Custom background image
  • Custom background image can be warehoused
  • Background image can be locked for parallax effect

Example

Hero stack is used on this particular site, in fact you are looking at one at the top of the page.

General Settings

Full Height Hero - makes the Hero stack full size adding two additional drop zones for stacks
AOS-Screen Shot
Full Viewport Height - with this option selected, the Hero stack will occupy the entire viewport
AOS-Screen Shot

Style Settings

Color
  • Standard Colors - select one of the standard colors from the drop down. Additionally the checkbox With Gradient displays the standard color with a standard gradient
  • Custom Colors - select Custom from the drop down. This opens a color selector for individual colors
  • Custom Gradient - select Custom Gradient from the drop down. This opens two color selectors: one for the starting color and one for the ending color of the gradient. Additionally, you can set the gradient angle via the Angle slider
AOS-Screen Shot
AOS-Screen Shot
AOS-Screen Shot
Size - select between three sizes - Small, Medium, Large
AOS-Screen Shot

Image Backdrop

For warehoused images, you can select the Warehoused Image option and provide a link to the image via the standard Link Dialog.
Additionally, you can add an Alternative Text.
In non Warehouse-Mode you can either browse to the particular picture or drag and drop it onto the image-well.
  • Image Tiling - select a tiling option. I you want your image to cover the entire width of the Hero stack, select None
  • Image Size - select one of the image sizing options
  • Poition - if your image does not completely cover the Hero stack, select one of the Position options to place your image
  • Lock Background - choose this option to lock your image. This will create a simple parallax effect when scrolling
AOS-Screen Shot