Adding a modulezone

Great job! So far you've added two modules and made a link, an image and some text editable.

You'll have noticed that when you viewed the email in the Taxi editor, the image and text module were already populated and you didn't need to add them manually, we also couldn't reorder them.

This could be useful for some modules, such as a logo or navigation module as they typically stay in the same place in every email.
However, in your Email Design System you'll have all the modules you could possibly need for any of your emails so you can add them into the email as you need. This can be achieved using modulezones and is what we'll cover in this lesson.

Modulezones act as a way to split the modules in your EDS out depending on where they are typically used in an email, such as header, main body and footer. This ensures that modules that belong in the footer for example, can't be used in the header.

To add a modulezone to your EDS, directly above the first module add an opening <modulezone> tag and include a name and a label attribute. Then directly after your last module add a closing <modulezone> tag.

<modulezone name="main_content" label="Main Content Modules">
<module name="image_module" label="Full Width Image">
...
</module>
</modulezone>

All HTML that sits within a modulezone needs to be inside a module. If there is any HTML inside a modulezone but outside of a module, it will be removed from the EDS.

And now we're ready to upload this to Taxi again. Head back to your account and upload or paste the HTML again.

If you don't have access to Taxi, here's a video showing how our modulezone will work.

In this example we added a main content moduezone, however if needed you can also add other modulezones to your HTML such as one for the footer or header.

Now we're going to move onto adding in more control to our EDS by using fields.

Click here to continue.