How to Change The Hero Image (Banner) Height:
Overview: This guide will walk you through how to the hero image height (large image that greets your guest found on the top of the page) In most cases, found on your home page. Some users refer to it as the Splash/Landing image, some just refer to it as a large banner.
Example:
Getting Started: How to Change The Hero Image (Banner) Height:
1. While on the Dashboard, select the "Edit Website" link at the top of your screen within the blue band next to the View Website option.
2. This will trigger the Visual Builder page to appear.
3. While in the Visual Builder screen, Navigate to the page you would like to change the image image.
Note: Some Hero Images have a transparent overlay to improve readability. This is often used when a right background image contrasts with light colored text, making the text easier t read by softening the contrast.
Think of the next steps as shifting the overlay to get to where you can edit the hero image.
4. We will actually start by checking to see if an overlay will interior adjusting the hero image height, by doing the following.
5. Hover over and click the image portion of the Hero image, not the text portion. Then once your edit options appear in the top left hand corner of the block you can select the "Gear" icon to prompt several editable options.
6. Next, find and select the "Overlay Size Options" tab.
7. Then, select the "Full Width" option, which will reduce the full scale overlay (if applied to the image) to a thin band and make it easier for you to alter the Hero image height.
8. Now select the "Apply" option to save so we can move on to adjusting the Hero images height.
Example of Overlay Reduced in Height:
Now That The Overlay Is Out Of The Way, We Can Edit the Images Height:
A. Now lets hover over and click the image of the Hero image, not the text portion. Then once your edit options appear in the top left hand corner of the block/image you can select the "Gear" icon to prompt several editable options. This time the options will apply to the Hero image itself as the overlay has been moved out of the way for this step.
B. Next, find and select the "Block Height Options" tab. Here we can adjust the height of the overall image based on the options allotted.
C. Once you find the height you would like for your Hero image, select the "Apply" button.
Note: Now you will need to revert your overlay back to cover the full image height if applied previously.
9. Hover over and click the overlay of the Hero image, not the text portion. Then once your edit options appear in the top left hand corner of the overlay you can select the "Gear" icon to prompt its editable options.
10. Again, lets find and select the "Overlay Size Options" tab.
11. Then, select the "Cover" option to expand the overlay back over the entire image.
12. Once complete, select the "Apply" option to save.
13. Finally navigate to "Save" and "Publish" at the top of the screen in the right-hand corner to make the edit live.