Using Regions for Page-Specific Content

Defining Regions

To take full advantage of the content management system, all content that may be edited in the future should be placed in editable regions. Content in editable regions can be edited “in place” on the site, so any content that a non-technical user may need to modify should go in an editable region.

In a typical design, the Template provides the “skeleton” of the page and defines editable regions for page-specific content. Any content that varies from page to page should not go in the the template, but instead should be entered in a region on the specific page.

To define a region, simply insert the following code in the tempate at the spot where you want the region contents to be placed:

<w:content region="region_name" />

Note that by default there is always one region called "body," and we suggest that you use that name for your main content region.

Adding Content to Regions

Regions are shown on the page edit interface as tabbed sections. You can edit the content of each region there, or you can edit it in-place on the page by clicking Enable Editing in the top bar, hovering over the region you want to edit, and clicking the Edit button in the upper left corner.

Using Content Regions for Code

You can also use content regions for code. This is particularly useful in the head section, in which you can define content regions for page-specific CSS and JavaScript. For example, when we're building sites we often add a content region called page-css right after the CSS links in the head section, and another called page-js right after the JavaScript in the head.

When you use content regions for code, you need to disable the inplace editing so they don't get wrapped in markup. You do this by specifying editable="false":

<w:content region="page-js" editable="false" />

You can also use the editable="false" option when you want to prevent a regular content region from being editable in-place; when this option is specified, the region can only be edited via the page admin screen.