This is a technical documentation for developers for custom HTML code.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.