In our minimum viable language we looked at using modules to divide the editor interface into sections. In this guide we go a step further and look at building an Email Design System that let editors add, remove and re-order modules.
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.
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>
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.