Layout templates define the appearance and data model for the overall layout and structure of a Governor site. The layout templates typically include the header, footer, logo, and menu, as well as any other sections that appear on all pages of a website.

Master layout

The master.html is a the master layout template. This template enables you to define common structure and markup elements for your website.

Example: master.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <div gv-includes="head.html"></div>
    </head>
    <body>
        <div gv-includes="nav.html"></div>
        <div gv-content></div>
        <div gv-includes="footer.html"></div>
    </body>
</html>
    

Pro Tip:

The master.html leaves a lot of room for personal style. Pieces of markup can be broken into as many, or as few includes as you wish.

Some other examples.

Example: master.html

<div gv-includes="head.html"></div>
<div gv-includes="nav.html"></div>
<div gv-content></div>
<div gv-includes="footer.html"></div>
    

Placing all of your HTML structure inside of your gv-includes.

Example: master.html

<div gv-content></div>
    

Can be used for a one page website.

Pro Tip:

Note, a master.html with a gv-content tag is required to use Governor.

Layout Partials

A layout partial is a type of template that allows theme developers to create static elements that appear on multiple pages.

Layout files should be placed in the includes folder with in the layout folder inside your Governor Theme .zip. To use layout partials pass the partial name inside a gv-include tag with in the master.html file.

Example: master.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <div gv-includes="head.html">
            <!-- Look inside the includes folder for "head.html" and place here.-->
        </div>
    </head>
    <body>
        <div gv-includes="nav.html">
            <!-- Look inside the includes folder for "nav.html" and place here.-->
        </div>
        <div gv-content></div>
        <div gv-includes="footer.html">
            <!-- Look inside the includes folder for "footer.html" and place here.-->
        </div>
    </body>
</html>
    
Did this answer your question?