Editable regions for Pages

Instead of a single editable area, Evance sees Pages as a collection of one or more named editable regions.

You may add one or more editable regions to any Page template. This is done using the <ev:editable/> tag and is super easy to do. This allows you to design page layouts with freedom, defining which areas of any one template are editable, which are dynamic or hard coded.

Your primary content area

Your template should have a primary content region called "main".

<main>
    <ev:editable ref="main" />
</main>

Additional regions

You may add any number of additional sub-regions to your page templates. You have freedom over what you call your regions, but references should:

  • contain alpha-numeric characters, dashes or underscores
  • avoid the use of spaces
<main>
    <ev:editable ref="main" />
</main>
<section>
    <h2>Features</h2>
    <ev:editable ref="features" />
</section>

Boilerplate content

The <ev:editable> tag allows you to include boilerplate content. When a new page is created pre-made content will be included as a guide for content authors to include, follow or be inspired by.

<main>
    <ev:editable ref="main">
        <h1>Example title</h1>
        <p class="subtitle">Put an introduction to your page here.</p>
    <ev:editable>
</main>

Basic EvScript support

The <ev:editable> tag supports basic use of EvScript.

<main>
    <ev:editable ref="main">
        <h1>{{ page.title }}</h1>
        <p class="subtitle">{{ page.description }}</p>
    <ev:editable>
</main>

EvScript Page Object

Dynamically generated regions

There may be instances where you need to dynamically generate editable regions for a page. The ref attribute for an <ev:editable> tag also supports basic use of EvScript, allowing you dynamically name references.

<?ev for (var asset of page.assets) { ?>
    <ev:editable ref="asset-{{ asset.id }}">
        <h3>{{ asset.title }}</h3>
        <p>{{ asset.description }}</p>
    <ev:editable>
<?ev } ?>

Additional reading

See the following related articles: