The Hero content block is meant to allow you to spotlight a large image and message for visitors.
For information on turning a Hero into a Carousel (slideshow) click here.
Pro-Tip: It is recommended that you use images that are in landscape mode to ensure critical content is not out of view.
The Hero block has a number of setting options.
If you click on the cog/gear icon to the left, you get a few settings that apply to of the slides, whether you have one image or a carousel.
Most notably, you can set the height. There are 3 options available:
- Fit Content: this is the default and often the best. It will fit the height of the text content. This isn't great for carousels since they auto-advance and can cause the content below on the page to jump text varies from slide to slide. If the image is taller or there is little or no text you may want to use one of the next two options.
- Set Fixed Hero Height in Pixels: This will fix the height regardless of the width of the viewers screen - this means it can be very tall on mobile
- Maintain aspect ratio: this option keeps the proportions of the image regardless of the screen size. This means on mobile the image can be very short. One risk is that some text may overflow the available space on mobile. If you'd like to maintain aspect ratio, you can either use very little text to better fit mobile or you can ask us to help hide the either the main title or subtitle on mobile.
Each of the slides also has their own settings which you can manage using the orange toolbar.
Hover your mouse to see a description, here are the options (listed from left to right):
- Toggle layout to the left (arranges alignment of text and the hide/show of a foreground image
- Expand/contract image to be full-width or bounded
- Set a background image (this is the large image, it should be landscape orientation)
- Set a foreground image or embed/video. You may need to toggle left or right to make this visible
- Set a button
- Configure slide specifics like text background options, slide background color (if no background image), font color, custom classes.
- Delete slide
- Toggle layout to the right