With a hero, that row will always be the full height and width of the browser window. If you’d like to have a different height you can do that. Edit the page you’re working on and then edit the row you’d like to have a height set on. In the “Advanced” section there is a spot for CSS styles. Add this:
to set a height of that section of 800 pixels. You can also use proportional units like vh (viewport height — the height of the browser window) or vw (viewport width — the width of the browser window). That can be helpful if you’d like the row to grow/shrink with the browser window. Pixels will always remain constant.
Widgets can also have a height set the same way. Click edit on the widget where you’d like to set a height and look in the attributes box. The CSS Styles field there will take a height style as well.
You can also set the widgets in a row to have the same height. When you’re editing a row, look in layout and you’ll see a checkbox for that. It will make all the widgets in that row have the same height.
I use that in the demo to get the images that are next to the menu groups to be the same height. The images are added with a text widget as a background image in the widget. The widget itself has no text in it. Then I use the row option to have equal height widgets to cause the image to be the same size as the widget next to it.