Design Settings » Hero Background Image
Hero Background Image
These settings control the main image on the first fold in the homepage of the website, we recommend using images with the following dimensions: 1800px wide by 600px high. The file size is also important, we recommend using images that are not more than 200 KB.
To edit the Hero Back navigate to:
- Settings
- Design Settings
- Homepage Tab
Visual Guide of the Hero Background Image
1. Display Background Image
Use this section to add the main image that will display above the fold on the homepage, to use the Homepage Slideshow, read the following article: Homepage Background Slideshow Settings Our recommended size for the image is 1800 px by 600 px.
Yes - Display Background Image
 |  |
No - Hide Background Image
 |  |
2. Display Hero Section on Mobile
This setting controls if the image will be viewable on mobile devices or not.
Yes - Display on Mobile View
 |  |
No - Hide on Mobile View
 |  |
3. Background Image Behavior
This setting controls if the background hero image will be Mobile Ready or Standard View. We strongly recommend using the Mobile-Ready View
Mobile Ready View
 |  |
4. Replace / Upload Image
This setting is used to upload a new image for the hero image on the homepage's first fold.
Replace / Upload Image
 | |
Mobile Image
The image uploaded here will replace the main hero homepage image, when the website is accessed using mobile devices.
 |  |
5. Top Spacing
This setting will add extra padding to the top of the main image, this will help better align the graphic elements inside the hero image. The available options go from 0px to 400px
 |  |
6. Bottom Spacing
This setting will add extra padding to the bottom of the main image, this will help better align the graphic elements inside the hero image. The available options go from 0px to 400px
 |  |
7. Image Overlay Color + Image Overlay Visibility
These settings select how transparent or opaque the Overlay is applied to the Hero Image. This becomes very helpful when using white fonts, allowing the text to be legible on an image that has lots of colors. For dark fonts with opaque images, this setting can be used to se the background white.
 | Overlay 6  0 (invisible)  |
