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?