# Making HTML Editable The drag-and-drop editor does not parse arbitrary HTML into blocks. It works on a small, fixed structure of sections, rows, and editable regions, marked with class names. This page shows the minimum structure the editor needs, ending with a complete template you can paste in and adapt. --- ## How the Editor Sees Your Email ``` div.nvkbody.wrapper the full-width wrapper table (680 wide) the email's content width td holds the sections div.block-outer a section: moved, duplicated, deleted as a whole ...section tables... background and column layout div.block-inner a row: one block, such as a heading and text, an image, or a button table.inner-table td.inner-column the row's padding, background, and font div.content-edit the editable region: what the user clicks to edit ``` - A **section** (`block-outer`) holds one or more rows, in one column or several. - A **row** (`block-inner`) is what the editor calls a block: users select, restyle, move, duplicate, and delete rows. - An **editable region** (`content-edit`) holds the content. Its other classes say what kind of block the row is: text, image, button, divider, or video. Content outside an editable region cannot be selected or edited in the drag-and-drop editor. --- ## The Head ```html {@msg-subject} ``` - `TEMPLATE_VERSION` makes the HTML open in the drag-and-drop editor (see [Two Editors](https://envoke-developers.pages.dev/email-html/overview/#two-editors)). Copy it exactly. - `{@msg-subject}`, written exactly like this, is replaced by the message's subject when the email is sent. - The style block with `id="envoke-styles"` gives your HTML the same base styles and mobile rules the editor uses. Copy it from [Envoke's Style Block](https://envoke-developers.pages.dev/email-html/css-and-mobile/#envokes-style-block). The editor replaces it with its current version every time the message is opened, so the copy you ship only matters until then, for example for HTML sent straight from the Send API. - Do not add other `

Hello {fname},

Here is what is new this month.

See the courses

{@brand-company}
{@brand-address}

Update your email preferences or unsubscribe

``` --- ## The Preheader The preheader is the short line inbox lists show after the subject. Envoke keeps it in a hidden cell with `id="preheader-text"`, as in the template above. - When the message is opened in the drag-and-drop editor, the cell's text appears in the editor's **Preheader text** field, and saving writes the field back into the cell. If the cell is missing and the field is filled in, the editor adds the cell above the first table row. - The preheader is plain text: write it as text in the cell, with no markup. - Templates do not keep a preheader: saving a template in the editor empties the cell. Set the preheader on each message. - The Messages and Send APIs have no preheader field; put the cell in your HTML instead. --- ## What the Editor Adds and Changes You do not need to write the following; the editor adds or changes them every time a message is opened: | On open | Effect | |---|---| | Envoke's style block | Replaced with the editor's current version | | `` | Added if the head has no `` element, so links open in a new tab | | Font stylesheet | A Google Fonts link for the editor's font menu is added (see [Fonts](https://envoke-developers.pages.dev/email-html/css-and-mobile/#fonts)) | | Drop zones | Classes marking where sections and rows can be dropped are added | | Layout classes | Each section is classed as one-column, two-column, sidebar, or three-column from its column widths | | Accessibility roles | `role="presentation"` on layout tables and `role="article"` on the wrapper `

` | | Fonts on rows | Each row's `inner-column` cell is given an inline `font-family`, so Outlook does not fall back to Times New Roman | | Small images | Images narrower than 270 pixels are set to keep their size on phones (see [Image Size on Phones](https://envoke-developers.pages.dev/email-html/blocks/#image-size-on-phones)) | | Images that do not load | An image narrower than 60 pixels is widened to 60, and an image with no `alt` text is given the alt text ` BROKEN IMAGE (!) `, so the problem is visible. These changes are saved with the message. | When the message is saved in the drag-and-drop editor, the whole document is rewritten: | On save | Effect | |---|---| | Doctype and `` | Replaced with the XHTML 1.0 Transitional doctype and ``, whatever yours were. The language is changed at send for French messages (see [What Happens When Envoke Sends](https://envoke-developers.pages.dev/email-html/what-happens-at-send/#step-by-step)). | | `