Skip to main content

Content zones

Content zones are the named areas in a template base where modules can be placed. Every template has at least one zone — the default Main zone where {{ content }} lives. You can add more zones when the layout needs more than one place for marketers to drop modules.

One zone is usually enough

For the vast majority of templates, the default Main zone is all you need. Aim to keep it that way. Multiple zones add decisions for the marketer and complexity for the template, so reach for them only when the layout truly requires it — for example, when marketers need to drop modules into a fixed slot in the middle of an otherwise static footer.

The default Main zone​

The default zone is fixed:

  • Name: Main
  • Variable: {{ content }}

You cannot rename the default zone or change its variable. It always exists, and the template base must contain {{ content }} somewhere in the HTML.

If your template only needs one drop area, you do not need to think about content zones at all. The Email Editor and Betty both behave like a single-zone editor by default.

Adding additional zones​

Open the Template Editor and switch to the Settings tab on the template base. The Content zones card lists the zones in the template. Hover the card and click the edit icon to open the content zones modal.

In the modal you can:

  • add a new zone with a name and a variable
  • edit the name or variable of an existing additional zone
  • remove an additional zone (with a confirmation warning)

Additional zone variables always start with content_. Better Email enforces this prefix, so naming a zone Footer produces the variable content_footer in the template. Place that variable in the template base wherever the zone should render:

<html>
  <body>
    <main>
      {{ content }}
    </main>
    <footer>
      {{ content_footer }}
    </footer>
  </body>
</html>

Each variable must appear exactly once in the template base for the zone to be reachable.

TODO: Add a screenshot of the content zones card with the edit icon visible on hover.

TODO: Add a screenshot of the content zones modal with name, variable, and remove action.

Restricting modules to zones​

Each module can be restricted to one or more zones. Open the Settings tab on a module and use the Content zones card to choose which zones the module is allowed in. The card only appears for templates that have more than one zone — there is nothing to configure when only Main exists.

By default, a module is only allowed in Main. Most modules should stay that way. Only relax the restriction when a module is genuinely usable in another zone, like a small unsubscribe block that fits both the main flow and a footer area.

Better Email enforces these restrictions everywhere a module can be added or moved:

  • the module sidebar in the Email Editor
  • drag-and-drop in the preview
  • Betty's insert and move tools

If a module has no compatible zone in the current template, it does not appear in the module sidebar at all.

How zones show up in the Email Editor​

When a template has more than one zone, the Email Editor adapts:

  • Module sidebar groups modules by zone. The first section is Main and lists every module allowed in Main. Each additional zone gets its own section listing the modules that fit there but not in Main.
  • Pills on module cards show every zone a module is compatible with, so it is clear at a glance whether a module is Main-only or also fits another zone.
  • Drop labels in the preview say Drop in Main, Drop in Footer, and so on while you drag a module. Only the zones that accept the dragged module light up as drop targets.
  • Preview-zone selector lets you pick which zone a module previews in when the module is compatible with several zones.

Single-zone templates keep the simpler experience: no groupings, no pills, and the drop label is just Drop here.

TODO: Add a screenshot of the multi-zone module sidebar with grouped sections and zone pills.

TODO: Add a screenshot of a module being dragged with multiple drop zones lit up.

Betty and content zones​

Betty is zone-aware in both editors:

  • Template Editor: Betty can add new content zones, edit additional zones, and update which zones a module is restricted to. She follows the same rules as the UI — the default Main zone is fixed, and additional variables use the content_ prefix.
  • Email Editor: Betty knows which zone each module fits in. She places new modules in the right zone automatically and refuses to move a module into a zone that does not allow it.

If Betty seems to be putting modules in the wrong place, double-check the module's content-zone restriction. The restriction is the source of truth.

Patterns and tips​

  • Keep Main for the body of the email. That is where most modules belong, and it keeps the model intuitive for marketers.
  • Use additional zones sparingly. Before adding one, consider whether you really need that added complexity in both template building and for the marketer, or whether it can be solved with normal inputs.
  • Name zones the way marketers would describe them. Footer, Legal, Transactional. Avoid internal jargon.
  • Match restrictions to the visual design. If a module is styled for a narrow footer, do not also allow it in Main.
  • Validate the template base. Each zone variable must appear in the base. The Template Editor flags missing variables.