Creating a new region is simple. All you need to do is click the pen icon on an existing region and then click one of the yellow “+” icons at the top or bottom of the page. This will insert a new region above or below the region you have open.
The focus will swap to the new region and if you click on the green cog icon you’ll be able to customize how it looks.
There are different types of regions you can use to build your site. Let’s go through them all:
Only header regions allow a fullscreen option. As the name implies, this region fills the entire browser screen from top to bottom and left to right.
This is a great option if you want to use a hero image as your header, or even create a landing page that fills the entire browser window and doesn’t scroll.
This type of region provides two further options:
Add Navigation Region
This is essentially a sub-region, which allows you to display navigation within the header region. What’s great about this option is that when users access your site, they will be able to see your navigation displayed “above the fold” in their browser window.
The default is no navigation, or show it at the top or bottom of the region.
You can choose your fullscreen header to “Keep Position” or “Keep Ratio.”
Keep Position means any logos, text, images, buttons etc. will remain where they are when a user resizes their browser window.
Keep Ratio means those same elements will automatically adjust their position when a user resizes their browser window. For example, if your logo is smack bang in the middle of the region, it will vertically adjust its position when the browser window is resized. This is a handy option for this very reason!
Display regions full width left to right, but not top to bottom.
Use this type of region if you don’t want your header to fill the browser window, but need it to display full width. We’ll look at options for setting the vertical height of regions below.
The Contained option allows you to letterbox your site.
You can control the container width by going to Theme Settings and clicking on Edit Global Background.
You can also change the global background type to a solid colour, image or even video to display across your whole site.