Learn Pinegrow, Bootstrap, CSS

Making Changes to A Master Page

Objectives of this tutorial:

1. Make changes to a master page:
   1. Add a footer
   2. Use CSS Grid to define the page layout as shown below
Brand image
Header
Menu
Main content of the page
Footer
2. Update the project, so any dependent pages will reflect the changes made.

Points to be aware of:

1. We want the footer to be sticky* to the bottom of the viewport.
2. We will define the page layout as shown above using CSS Grid; if this is new for you, follow the CSS Grid for Basic Page Layout tutorial before this one.

* On pages that scroll vertically, the footer simply needs to appear at the bottom of the content. However if there is no vertical scrollbar, we want the footer to stick to the bottom of the viewport.

Applying the code from the basic page layout tutorial to the content of the master page we created in the last tutorial, we get the HTML and CSS in the pen below.

*The drop-down functionality of the menu does not work in the pen because it uses Bootstrap's Javascript library which this example has not been linked to. If you put this code in a Pinegrow project, with Bootstrap 4 activated, the menu will work correctly.

See the Pen Pinegrow Master Pages by Adam Frost (@adam-frost) on CodePen.

1. Click Components > Update the whole project
2. Click File > Save all