Master Pages

Master page is a Pinegrow PRO feature that enables you to define common structure and interface markup elements for your Web site, including headers, footers, style definitions, or navigation bars.

A master page can be shared by any of the pages in your Web site and removes the need to duplicate code for shared elements.


Master pages are a part of Pinegrow PRO.

Important: Master pages only work with projects. To use them you have to open the folder where your website is located with File -> Open project.

WARNING Master pages should not be used in WordPress projects as WordPress projects have their own master pages.

Introduction

Master pages let you define a common template for all the pages in your website. Any changes made to the master page will be automatically applied to all pages that are based on that master page.

Creating a consistent look and behaviour for all the pages in your website requires that you start by defining the global properties of your website, like HeaderFooterlayout and more …

An efficient Master page combines static layout elements, smart components and editable areas which will allow you to easily customize your content pages.

Editable areas of the master page can be customized on the content pages and will be preserved during updates. Examples of editable areas on the master page are:

  • Titles
  • Textual content
  • Graphic content
  • Links (urls)
  • Specific CSS Classes
  • and more ..

Note: In the following documentation, we start a new project from scratch but you can also use Master pages in any existing project. Also, we use Bootstrap framework in our project but you can use Master pages with any kind of HTML document / Framework.

Creating a Master page

Ready to create your first project using a Master page?

It is easy:

  • Start Pinegrow
  • Select File -> New page (you can also use the New page button from Pinegrow interface)
  • Select Bootstrap 3.3.5 -> index.html

File -> Save -> New folder -> select a name and folder location for your project

Set the page name to master.html and click save

Note: You can use any name you want for your master page. Using master.html is just a good way to quickly identify your master page.

Pinegrow now ask if you want to open your new folder as a project, select YES because Master pages will only work in project mode.

open_project

At this step, you are now in Project mode:

  • The Project assets are on the left
  • The Tree view is on the right

From the tree view, select the top item (master.html) and from the ACT menu (ACT) -> Master Pages -> use Set as master page

set_as_master_page

Note: You can see the UPDATE button on top of Pinegrow interface. Click on the button link or use CMD+U (CTRL + U on Windows and Linux) to apply the changes.

update_notification

In the Project view, there is now an icon beside the file master.html (reloading the project may be necessary for the icon to appear).

This icon means that your document is a Master page and this is a very useful visual information when you handle a project with lots of files.

master_page_icon

Your master page is now ready to be populated with content.

Add content to a Master Page

As mentioned previously, a master page is a mix of non editable and editable elements.

Adding content to a master page is similar to the same operation for a standard content page, but you have to take into account your website needs and define the elements on which you want to allow the customization in the content pages.

Editable areas will allow you to decide which part of your Master page content will be editable in your content pages :

  • Content: The whole content of the area is editable
  • Images and Attributes: You declare which images or HTML attributes can be modified in the area
  • Classes: You declare some classes as editable

We advise you to follow both the Building the Layout documentation and the Smart Components documentation.

BONUS: We have created a sample project which contains a Master page with editable areas and components. You can download it (and study it) HERE

Make page title and meta fields editable

Page header usually contains <title> and various <meta …> tags that provide information about the page. In most cases we need these values to be unique for each individual page and don’t want to use values from the master page on all our pages.

We can accomplish this by defining these fields as editable areas.

Let’s first do the <title> element. Select the title in the tree and add “Define editable area” action. Set the id, like “title” and we’re done, since the title tag contains the title in the tag content (<title>My Page</title>) and the tag content of editable areas is editable by default.

mp.head.title

<meta> fields are different, because their values are contained in attributes, for example <meta name=”description” content=”This is the best page…”>. So it is not enough to just place “Define editable area” action on that element. We also need to specify which attributes of the element are editable. In most cases this will be the “content” attribute. We can also disable the editable content because <meta> tags have no child content:

mp.head.meta

Use a Master Page in a project

Now that your Master page is ready, it is the right time to use it to create some new content pages.

There are 2 ways to create a content page from a Master page:

Prefered method: From the Project menu by using Add new page…

Select your new master page (master.html)

Note: The preview image maybe blank, or different from the screenshot below.

and, enter the name for your new page

project_new_page_name

Alternate method: From Pinegrow File menu, create a page the classic way, then, from ACT panel > Master Pages assign Use master page action and specify the filename of the master page to use. (master.html in our example)

Do not forget to Update the components (Use the UPDATE button on top of Pinegrow interface or use CMD+U keyboard shortcut)

IMPORTANT: While using the alternate method, the content of the existing page is fully replaced by the content of the Master page. Do not use this method on documents with existing content or it will be destroyed.

Meaning of the icons in Project view

While working in project mode, and if you use Master pages and components, you will notice some useful icons beside your files names. Here is the meaning of these icons.

This is a master page.

This page uses a master page. (the name is specified)

Components are defined on this page.

Components are used on this page.

Tutorials

Learn and experiment with master pages with a comprehensive master pages tutorial. We’ll keep adding more topics and examples.

tutorialmp