The Hero content block is meant to allow you to spotlight a large image and message for visitors.
Most desktop screens are at least 1200px wide so hero images should be at least this wide as well - we can downscale them if needed but you can't upscale images without making them pixelated. See more about image sizes here.
Note: we do NOT recommend using a photo with text on it. 1) it's not helpful for SEO (i.e. ranking in Google) and 2) the text in the photo could get cut off depending on the device someone views the site on (i.e. mobile or desktop), this is due to the site being mobile optimized.
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. The default is left-aligned. If you would like it to be centered, please let us know at help@locable.com.
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
Advanced Notes
We set colors of buttons in Hero (as well as Columns and the Simple Text Block) in the CSS and it is applied sitewide. If you'd like to change your button colors, please let us know and we can assist.
For inspiration on custom design elements that can be applied to Hero Blocks, check out our Design Lookbook.