When adding Syntax to your Design System it’s important to consider how it is going to be used when creating the emails day to day. Part of that comes down to how you make the different parts of your Design System available as individual modules. Modules are snippets of code that you can use whenever you’re creating emails and then content can be added to them, such as text, images and links.
Modules sit within modulezones, which are the different sections of your Design System. You can add as many modules as you need and also re-order them within a modulezone when creating an email. The most common use of these are header, main content and footer sections. This means that no user will be able to accidentally add a footer module in the header section, for example.
Modulezones give you the ability to add, remove and reorder modules. Without them, all the modules you have in your design system would appear in the editor everytime you go to make an email. So including modulezones enables you to keep the editor neat, easy to navigate and gives additional flexibility to the people building emails.
If there are modules that will always be included in your emails, such as header and footer modules, you can have these outside of modulezones so you won’t have to manually add them to your emails every time. This means when creating an email, they will automatically appear for you.
In your design or HTML, you might have modules that are very similar in layout. If this is the case, you can combine these into one module and give your team the controls they need to make any layout or design used in your campaigns. For example, if you had an image module and also a module with a headline above the image, you could create one module and give your team the ability to add or remove a headline above the image when needed. If you have 2/3/4 column modules you can include these all in one module with a dropdown to select how many columns you want to include in your email.