Inserting one page layout into another

Apr 26, 2014 5:16 pm

To make page layouts easier to manage, you can break a single page layout into smaller, more manageable sections by inserting one page layout into another.

This is usually used for website elements that are the same on multiple page layouts, like headers and footers. If your site's header is the same on the home and interior pages, for example, and you need to make a change to it, normally, you'd have to make the change both in the Home and Default page layouts. If both of these are referencing a single "Header" page layout, however, you can make the change to that layout, and it will be changed on all page layouts that reference it.

Inserting a page layout into another is done by clicking the first icon in the toolbar, "Insert a page layout" and selecting it from the list that appears. The format for a page layout reference is [[page.Name]], where "Name" is the title of the page layout.

The following example shows a Default page layout with a separate "Header" page layout. Below that is the code used in the "Header" layout. Note that the Default page layout also uses the The Content variable.

[[page.Header]]
<div id="content" class="canvas">[[Content]]</div>
<div id="footer" class="canvas"> 2011 United We Stand</div>
</body>
</html>

Header Page Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>[[Page_Title]]</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script type="text/javascript" src="/freedom_html/common/ulmenu.js"></script>
</head>
<body id="page">
<div id="header" class="canvas"><img src="graphics/logo.jpg" alt="logo" /></div>