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.