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 classes

The CSS classes used in the template are part of the website design.

The layout example here uses a Bootstrap-based website design. Therefore the code samples use Bootstrap’s flex utilities to manage the sizing and alignment.

When deploying a layout to your website design, the CSS references are specific to your system with regards controlling the layout of your content zones.