All Collections
Developer resources
Email and form layout custom code classes
Email and form layout custom code classes

Technical documentation for developers

Marcus Warren avatar
Written by Marcus Warren
Updated over a week ago

This help page is intended for technical users with expertise in HTML and CSS.

The ability to customize HTML is accessible based on user roles.

Please read the article about custom HTML before you proceed.

Layout editor classes

The following classes are used internally by the Envoke layout editor, and should be added when constructing a custom template:

outer-sortable

A container for "block-outer" elements (also called "section" elements). All "block-outer" elements will be draggable and sortable within this container.

The editor will automatically designate the parent of a "block-outer" to be "outer-sortable" if it does not already exist.

block-outer

A section element that spans the full width of the template. This may be 100% the width of the screen if the Bootstrap class "container-fluid" is used. Section styles in the layout editor UI target the "block-outer" elements.

outer-table / outer-column

These classes signify the immediate child table of a "block-outer". If a child <table class="outer-table"> and <td class="outer-column"> do not exist, the editor will automatically create them.

Most styles applied to a section in the email editor target the "outer-table" <table> element.

Applies to the email editor only.

inner-sortable

A container for "block-inner" elements (also called "block" elements). All "block-inner" elements will be draggable and sortable within this container.

block-inner

The basic draggable, sortable, and duplicatable block type containing content, offers, or forms. Block styles in the form and landing page editor target the "block-inner" elements. In the email editor, most styles target the child "inner-column" element.

inner-table / inner-column

These classes signify the immediate child table of a "block-inner". If a child <table class="inner-table"> and <td class="inner-column"> do not exist, the editor will automatically create them.

Most styles applied in the email editor target the "inner-column" <td> element. In responsive display, 20px of left and right padding is automatically applied to all "inner-column" elements.

Applies to the email editor only.

content-edit

A <div> element inside of a "block-inner" that triggers the block styles editor & CK Editor dialog. It is recommended that no more than one "content-edit" elements should be inside a "block-inner".

Email editor HTML example

The following example demonstrates a single (660px) block and section. This is equivalent to the primary content section of the "Single column" built in template in Envoke.

<div class="block-outer"> 
    <table class="layout-table outer-table" align="center" cellpadding="0" cellspacing="0" width="660">
    <tr>
        <td class="outer-column" align="center" valign="top">
            <table class="layout-table" align="left" cellpadding="0" cellspacing="0" width="660">
            <tr>
                <td class="inner-sortable" align="center" valign="top">
                    <div class="block-inner">
                        <table class="inner-table" align="center" cellpadding="0" cellspacing="0" width="660">
                        <tr>
                            <td class="inner-column" align="left" valign="top">
                                <div class="content-edit" rel="#bck-overlay">
                                   
                                    <!-- Add content here -->

                                </div>
                            </td>
                        </tr>
                        </table>
                    </div>
                </td>
            </tr>
            </table>
        </td>  
    </tr>
    </table>
</div>

Classes for forms and landing pages

form-edit

Add the "form-edit" class to a "content-edit" class to signal that this will be an Envoke form and to trigger the form builder dialog.

offer-edit

Add the "offer-edit" class to a "content-edit" class to signal that this will be a dynamic offer content block and to trigger the offer selector dialog.

cta-edit

Add the "cta-edit" class to a "content-edit" class to signal that this will be a call to action / button block and to trigger the button editor dialog.

Bootstrap layouts for forms and landing pages

We recommend using the Bootstrap column system with "inner-sortable" elements. For example, a "block-outer" might contain two "inner-sortable" columns, a larger content area "col-md-8" and a sidebar "col-md-4". Both of these columns may contain "block-inner" elements holding content, offers, or forms.

Did this answer your question?