Navigation:  How-To >

Use Master Page

Previous pageReturn to chapter overviewNext page

What is Master Page?

The master page is a very useful feature since it can simplify your prototype / wireframe a lot.  Please take a look at the figure below, the master page works like a "background" layer, once you assign a master page to a normal page, the content on master page will be merged into the normal page. What's more, a master page can be shared by multiple normal pages. That means you can put the common part of the prototype into the master page, thus it can be shared by several pages without copy and paste.

master_page_theory

Here you can see two concepts: "Normal Page" and "Master Page". However they have no actual difference, they are just pages. In ForeUI, each page can be used as a master page (by other pages), you can assign any page as the master page for your editing page. So you can assign page B as the master page for page A, and then assign page C as the master page for page B, that will form a hierarchy structure like this:

hierarchy_masters

When export page A or run the simulation of page A, you will see the final result: the contents in both page B and page C are all merged into page A. So you can imagine how helpful will this feature be.

Why Use Master Page?

In the example above, although the three elements are on different pages, they can still interact with each other via predefined actions. So there is no drawback to move the common part of multiple pages to a shared master page, this will significantly simplify your mockup or prototype and will avoid a lot of content duplication between pages.

A very typical use case for master page is the header and footer of web site, each page of the web site has the same header and footer. You don't have to copy header and footer and paste them everywhere, you can just put the footer and header content on a single page, then assign this page as the master page for all other pages, that's quite simple and works well.  Below is a simple example:

use_masterpage_simple

Here is a complex example with multi-level master pages.

use_masterpage_advanced

Assign Master Page

You can assign the master page of current editing page in the page manage view. Just choose a page in the "Master Page" drop down list on the right view.

set_master_page

Remarks: the current editing page will not exist in the drop down list, since a page can not use itself as a master page.

After assigning the master page, the item for current editing page will have a master_page_icon icon on its right, like this:

page_with_master