Instructions for building a reusable page layout

Introduction

It is often desirable to separate blocks of text into different areas and shapes on a page, such as a header, footer, or multiple columns. Wikispaces provides the ability to edit text on a wiki page, however, it does not support positioning that text using the editor. However, we can combine multiple pages together using the [[include]] page instruction to create a composite of multiple pages, displayed on a single page. Normally, this would only allow pages to display sequentially, but combining these [[include]] tags with some formatting allows for manipulating the position and shape. Finally, using custom wikitext variables (in the form of {$variableName} will let the layout page act as a template that can be reused multiple times.

Step 1: Create Some Content Pages

First, we create a few content pages, one for each distinct section we'd like to display. For a 2 column layout with a header, we'll need 3 sections: sampleHeading, sampleLeftColumn, and sampleRightColumn. Edit these pages as you would normally edit a wiki page, adding images and text.

Step 2: Create a Layout Page

Next, we'll create a page that will act as the formatting structure for the other pages. We'll call this page 2columnLayout since it will contain 2 columns and a heading. On this page, we'll start with a table. The table will have 2 rows (one for the heading and one for the main content). The heading will span the two columns of the main content. We'll also center the heading. The table will look like this:

this is the heading cell
this is the left column cell
this is the right column cell

The wikitext for this is:
||||= ||
|| || ||
Then, we'll add the [[include]] tags inside each cell of the table. The wikitext for this is:
||||= [[include page="sampleHeading"]] ||
|| [[include page="sampleLeftColumn"]] || [[include page="sampleRightColumn"]] ||
You can see the result of this page here: 2columnLayoutStep2. You can see the wikitext for the page here: code for step 2


Step 3: Making it reusable

Step 2 gets the job done, but it means we have to create that table each time we want a layout. But if we want to use that layout on multiple pages, we can use wikitext variables to make this a little easier. We can replace the page names that were included with variables (we get to choose what variable names they will be) called {$headingPage}, {$leftColumnPage}, and {$rightColumnPage}. The wikitext would look like:
||||= [[include page="{$headingPage}"]] ||
|| [[include page="{$leftColumnPage}"]] || [[include page="{$rightColumnPage}"]] ||
You can see the result of this page here: 2columnLayoutStep3. You can see the wikitext for the page here: code for step 3

Step 4: Using the layout

Finally, each time we want to use the layout, we can use the include tag like this:
[[include page="2columnLayout" headingPage="sampleHeading" leftColumnPage="sampleLeftColumn" rightColumnPage="sampleRightColumn"]]
You can see this in action on this page: 2columnLayoutStep4a. You can see the wikitext for the page here: code for step 4a
If we wanted to change the right hand column to another page, lets say the home page, we would use:
[[include page="2columnLayout" headingPage="sampleHeading" leftColumnPage="sampleLeftColumn" rightColumnPage="home"]]
You can see this in action on this page: 2columnLayoutStep4b. You can see the wikitext for the page here: code for step 4b


Just the beginning

There really aren't many limitations on what sort of layout you can design using this technique. For example, making a 3 column layout just involves adding a 3rd cell to the second table row and adding a {$centerColumnPage} variable:
||||||= [[include page="{$headingPage}"]] ||
|| [[include page="{$leftColumnPage}"]] || [[include page="{$centerColumnPage}"]] || [[include page="{$rightColumnPage}"]] ||
You can see this in action on this page: 3columnLayoutInUse and the layout page is at 3columnLayout.