A modulezone is part of an email where the editor can add modules from a set defined in the Email Design System. Once modules are added they can be hidden, re-ordered, renamed or duplicated.

In the Design System HTML a <modulezone> tag is used to create a modulezone. Like an <editable> or a <module> tag, a <modulezone> tag must have a name= attribute, label= is recommended and hint= can be used if necessary.

Inside the <modulezone> tag a collection of modules is built using <module> tags.

  • All modulezones in a Design System must have a unique name attribute.
  • All modules within a modulezone must have a unique name attribute (but you can have two modules with the same name, as long as they're in separate modulezones)
  • The first child tag within a <modulezone> should always be a <module> tag. Any HTML within a <modulezone> tag that isn't wrapped in a <module> tag will be removed.
  • <modulezone> and <module> tags should be either before or after table structure tags, not inside them. For example: <table><tr><td><modulezone><module><table><tr><td> instead of ...</tr><modulezone><module><tr><td>
  • The label attribute from a <module> (or name attribute if there is no label) is used in the dropdown menu for adding modules in the modulezone editor.
  • When an editor starts a new mailing, the modulezone is always empty.

Example modulezone code:

<modulezone name="maincontent" label="Main Content Area"> 
 <module name="heromodule" label="Hero Image with text">
 ...
 </module> 
 <module name="oneproduct" label="One Product Module">
 ...
 </module> 
 <module name="twoproduct" label="Two Product Module">
 ...
 </module>
</modulezone>

Considerations when building with <modulezone>

An Email Design System can be built as one big modulezone, but this often provides a bad user experience. Often it's better to have a modulezone for header modules at the top of the email, then a series of content modules in a main modulezone. By taking this approach you can ensure that the design of the email isn't compromised by ill-advised module choices by a user.

You can still use <module> tags outside a modulezone. Those modules will be fixed and can't be removed or re-ordered by the editor.


Next: Uploading & Updating Email Design Systems in Taxi