Help Center

Menu

Layout template file

The layout template file defines how the layout renders with the content zones.

Template file example

The following example shows a simple three-column layout template:

<div class="d-flex flex-row py-2 px-0">
    {{#if zones.lhs}}
        <div class="p-2 w-25">
            {{zones.lhs}}
        </div>
    {{/if}}
    {{#if zones.main}}
        <div class="p-2 w-50">
            {{zones.main}}
        </div>
    {{/if}}
    {{#if zones.rhs}}
        <div class="p-2 w-25">
            {{zones.rhs}}
        </div>
    {{/if}}
</div>

Template structure

The template contains HTML wrapped around Handlebars expressions.

The placeholders for each of the content zones are:

{{zones.name}}

For this example, the three content zones are referenced:

  • {{zones.lhs}}

  • {{zones.main}}

  • {{zones.rhs}}

These names match the three zone definitions in the configuration file.

Conditional zone rendering

Wrapped around each content zone reference is code similar to:

{{#if zones.main}}
 {{zones.main}}
{{/if}}

This checks that the content zone exists, and if it does, then the zone is rendered.

CSS integration

The CSS classes used in the template must be part of your website design or manually included for local testing.

Website Design (Live)

When deployed, your layout has access to the CSS provided by the website design. The classes you use in your template should match those defined in your system’s CSS framework or custom stylesheets.

Manual Integration (Local)

When testing locally, you must manually load the required CSS using the --stylesheet flag in the CLI. This ensures that the layout renders correctly in your local browser even without access to the live system’s design assets.

The layout examples in this documentation use Bootstrap-based utility classes for sizing and alignment, for example, d-flex and w-25.