(DEPRECATED) 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

sample_layout.pngThe 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

Comments

Powered by Zendesk