To understand the hierarchy of elements in Markeaze emails, let's examine their key components: sections, rows, strips, and columns.
Core Email Structure Classes:
- main – The main class, appearing immediately after the <body> tag.
- mrkz-indentation – The primary class, serving as the entry point for the email.
- mrkz-container – The section class that connects email elements. (Sections are the primary structural elements of an email. Each section consists of one or more rows.)
- mrkz-row – The class for a row containing columns.
- mrkz-column – The class for individual columns containing blocks. (Each column contains content blocks.)
Example 1: Single-Column Row
In this case, the section structure looks like this:
<div class="ql-code-block" data-language="plain"><table class="mrkz-container"></div><div class="ql-code-block" data-language="plain"> <tr class="mrkz-row"></div><div class="ql-code-block" data-language="plain"> <td class="mrkz-column">Blocks or any content here</td></div><div class="ql-code-block" data-language="plain"> </tr></div><div class="ql-code-block" data-language="plain"></table></div>Example 2: Multi-Column Row
A section can have a row with multiple columns. The structure is as follows:
<div class="ql-code-block" data-language="plain"><table class="mrkz-container"></div><div class="ql-code-block" data-language="plain"> <tr></div><div class="ql-code-block" data-language="plain"> <td data-drag-content="true"></div><div class="ql-code-block" data-language="plain"> <table></div><div class="ql-code-block" data-language="plain"> <tr class="mrkz-row"></div><div class="ql-code-block" data-language="plain"> <td class="mrkz-column">Blocks or any content here</td></div><div class="ql-code-block" data-language="plain"> <td class="mrkz-column">Blocks or any content here</td></div><div class="ql-code-block" data-language="plain"> </tr></div><div class="ql-code-block" data-language="plain"> </table></div><div class="ql-code-block" data-language="plain"> </td></div><div class="ql-code-block" data-language="plain"> </tr></div><div class="ql-code-block" data-language="plain"></table></div>Additional Notes
- Block adaptation is currently under development. You can copy blocks from other sections if they were added via the editor interface.
- Attributes data-drag-main="true" and data-drag-content="true" are legacy elements and will soon be deprecated.
Full Email Structure Example
<div class="ql-code-block" data-language="plain"><table class="main"></div><div class="ql-code-block" data-language="plain"> <tr></div><div class="ql-code-block" data-language="plain"> <td align="center" class="mrkz-indentation" data-drag-main="true"></div><div class="ql-code-block" data-language="plain"> <table class="mrkz-container"></div><div class="ql-code-block" data-language="plain"> <tr class="mrkz-row"></div><div class="ql-code-block" data-language="plain"> <td class="mrkz-column">Blocks or any content here</td></div><div class="ql-code-block" data-language="plain"> </tr></div><div class="ql-code-block" data-language="plain"> </table></div><div class="ql-code-block" data-language="plain"> <table class="mrkz-container"></div><div class="ql-code-block" data-language="plain"> <tr></div><div class="ql-code-block" data-language="plain"> <td data-drag-content="true"></div><div class="ql-code-block" data-language="plain"> <table></div><div class="ql-code-block" data-language="plain"> <tr class="mrkz-row"></div><div class="ql-code-block" data-language="plain"> <td class="mrkz-column">Blocks or any content here</td></div><div class="ql-code-block" data-language="plain"> <td class="mrkz-column">Blocks or any content here</td></div><div class="ql-code-block" data-language="plain"> </tr></div><div class="ql-code-block" data-language="plain"> </table></div><div class="ql-code-block" data-language="plain"> </td></div><div class="ql-code-block" data-language="plain"> </tr></div><div class="ql-code-block" data-language="plain"> </table></div><div class="ql-code-block" data-language="plain"> </td></div><div class="ql-code-block" data-language="plain"> </tr></div><div class="ql-code-block" data-language="plain"></table></div>This structure ensures proper organization and flexibility when designing emails in Markeaze.