Email Structure in Markeaze

2025-07-28 13:09 Editor

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">&lt;table class="mrkz-container"&gt;</div><div class="ql-code-block" data-language="plain">  &lt;tr class="mrkz-row"&gt;</div><div class="ql-code-block" data-language="plain">    &lt;td class="mrkz-column"&gt;Blocks or any content here&lt;/td&gt;</div><div class="ql-code-block" data-language="plain">  &lt;/tr&gt;</div><div class="ql-code-block" data-language="plain">&lt;/table&gt;</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">&lt;table class="mrkz-container"&gt;</div><div class="ql-code-block" data-language="plain">  &lt;tr&gt;</div><div class="ql-code-block" data-language="plain">    &lt;td data-drag-content="true"&gt;</div><div class="ql-code-block" data-language="plain">      &lt;table&gt;</div><div class="ql-code-block" data-language="plain">        &lt;tr class="mrkz-row"&gt;</div><div class="ql-code-block" data-language="plain">          &lt;td class="mrkz-column"&gt;Blocks or any content here&lt;/td&gt;</div><div class="ql-code-block" data-language="plain">          &lt;td class="mrkz-column"&gt;Blocks or any content here&lt;/td&gt;</div><div class="ql-code-block" data-language="plain">        &lt;/tr&gt;</div><div class="ql-code-block" data-language="plain">      &lt;/table&gt;</div><div class="ql-code-block" data-language="plain">    &lt;/td&gt;</div><div class="ql-code-block" data-language="plain">  &lt;/tr&gt;</div><div class="ql-code-block" data-language="plain">&lt;/table&gt;</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">&lt;table class="main"&gt;</div><div class="ql-code-block" data-language="plain">  &lt;tr&gt;</div><div class="ql-code-block" data-language="plain">    &lt;td align="center" class="mrkz-indentation" data-drag-main="true"&gt;</div><div class="ql-code-block" data-language="plain">      &lt;table class="mrkz-container"&gt;</div><div class="ql-code-block" data-language="plain">        &lt;tr class="mrkz-row"&gt;</div><div class="ql-code-block" data-language="plain">          &lt;td class="mrkz-column"&gt;Blocks or any content here&lt;/td&gt;</div><div class="ql-code-block" data-language="plain">        &lt;/tr&gt;</div><div class="ql-code-block" data-language="plain">      &lt;/table&gt;</div><div class="ql-code-block" data-language="plain">      &lt;table class="mrkz-container"&gt;</div><div class="ql-code-block" data-language="plain">        &lt;tr&gt;</div><div class="ql-code-block" data-language="plain">          &lt;td data-drag-content="true"&gt;</div><div class="ql-code-block" data-language="plain">            &lt;table&gt;</div><div class="ql-code-block" data-language="plain">              &lt;tr class="mrkz-row"&gt;</div><div class="ql-code-block" data-language="plain">                &lt;td class="mrkz-column"&gt;Blocks or any content here&lt;/td&gt;</div><div class="ql-code-block" data-language="plain">                &lt;td class="mrkz-column"&gt;Blocks or any content here&lt;/td&gt;</div><div class="ql-code-block" data-language="plain">              &lt;/tr&gt;</div><div class="ql-code-block" data-language="plain">            &lt;/table&gt;</div><div class="ql-code-block" data-language="plain">          &lt;/td&gt;</div><div class="ql-code-block" data-language="plain">        &lt;/tr&gt;</div><div class="ql-code-block" data-language="plain">      &lt;/table&gt;</div><div class="ql-code-block" data-language="plain">    &lt;/td&gt;</div><div class="ql-code-block" data-language="plain">  &lt;/tr&gt;</div><div class="ql-code-block" data-language="plain">&lt;/table&gt;</div>

This structure ensures proper organization and flexibility when designing emails in Markeaze.