Exploring the Grid

I will show how to add a Grid row above the Header and below the Footer. As well as adding a background image and creating a boxed layout.

In the customizer go to the Main Grid Layout.

Click the + row icon (3rd icon from left) just below the Global Site Grid and Details text to add a new row. Notice the new row below the footer:

To move the empty row all the way to the top above the Header we have to move the Footer, Content and Header one row down. Hover over the footer and click the Move/Resize icon (second icon).

Notice the strips that show up after having clicked the Move/Resize icon.

Click the empty bottom row while you see the black stripes. This will then move the Footer to where the empty row was and make it switch places with the footer.

Hover Content, click Movie/Resize icon, and then click the grey empty row below it. Use the same procedure one more time to move the Header one row down.

There should now be an empty row above the Header. To adjust the height of the Header click where it says auto and change it. I changed mine to 70px.

Add an empty row below the footer by clicking the + row icon (3rd icon from left). Adjust that to 70px as well.

Scroll further down the Main Grid Layout section and add a background image. Change Image Size value to Fill Screen. Notice the 70px gap in the bottom and the top to where we added the empty rows.

Add a value to the Grid Container Gap of 40px. Notice what happens. Add a value to the Site Maximum Width of 80px. Notice the site becomes boxed.

Here is the zoomed out result as I am redesining a web site called Kanyini.

I can now go into the style.css or in the Additional CSS section and create some transparency for the Header and Footer, make the edges rounded. Then look at the Typography to perhaps change the size of the headings as well as fonts.