Layout of an EasyEditor template

Once you know how to mark up editable text, images and dropzones, you're ready to put together your first EasyEditor template.

Layout description

The example we'll use here has a header and a footer that are fixed (not draggable), and a single dropzone inside.

The single dropzone then contains two elements - each of which contain further dropzones.

The first of the two elements is a two-column table, each column being a dropzone. The second is a three column table, again, each column is a dropzone.

Finally, you can see each of the placeholders in these columns are pre-populated with images or text.

The outer template

Widths, background colours, spacer images and a lot more markup is required to create this design, but for the basic structure the following is required:

<!-- Easy Editor -->
 <table class="ee_resizable"> Outer table containing the entire email, marked as resizable
  <tr>
   <td>
    <table> Header Table - the header is not editable!
     <tr>
      <td><img src="logo.gif"></td>
      <td align="right">View online | Forward | Unsubscribe</td>
     </tr>
    </table>
   <td>
  </tr>
  <tr>
   <td class="ee_dropzone">
    Items can be dropped in here
   </td>
  </tr>
  <tr> Footer cell containing editable text
   <td class="ee_editable">&copy; 2012 123Travel.</td>
  </tr>
 </table>

Adding elements

To add elements to the above is relatively simple; populate the dropzzones with elements within your code. Taking the first element (which contains two dropzones, and a further element inside each), we could pre-populate the above like so:

<tr>
 <td class="ee_dropzone">
  <table class="ee_element"> Main element
   <tr>
    <td class="ee_dropzone"> Left-hand Dropzone Column
     <table class="ee_element"> Editable Image Element
      <tr>
       <td><img src="photos.jpg" class="ee_editable"></td>
      </tr>
     </table>
    </td>
    <td class="ee_dropzone"> Right hand Dropzone Column
     <table class="ee_element"> Editable text element
      <tr>
       <td class="ee_editable">
        Dear Mr Bloggs,<br><br>Lorem ipsum...
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </td>
</tr> 

The final element is much the same as the above, except if contains three columns (cells), each containing an editable image.

Have more questions? Submit a request

0 Comments

Article is closed for comments.