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 Page templates. This is done using the <ev:editable/> tag and is super easy to do. This allows you to design layouts with the freedom to define which areas of a template are editable.

Your main content area

Your template should have a primary content region called main, which represents the bulk of the page's content.

<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>

Placeholder content

The <ev:editable> tag allows you to include default content, which is displayed like a placeholder until an administrator overwrites the content. Placeholder content should be kept to a minimum. 

<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 (output tags only).

<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: