Converting HTML to Drag and Drop
Wouldn't it be amazing if you could create an HTML template, upload it to Transpond and it automatically becomes easily editable in our Drag and Drop Interface?
Well this is actually possible very easily. Simply add a special tag to any element that you would like to be editable and we will automatically convert your template to drag and drop editor format, and provide options for easily editing your tagged elements.
How to Convert your HTML
Simply add the property mp:edit="true" to any supported element, as shown in the example below...
<html><br> <head></head><br> <body><br> <div><br> <img src="<a href="https://s3.amazonaws.com/helpscout.net/docs/assets/5c62ce90042863543ccce09a/images/618d2189efc78d0553e5936a/drag-drop.e3294ca.png">https://mpzmail.com/static/img/drag-drop.e3294ca.png</a>" <strong>mp:edit="true"</strong>/></div><br> <div><br> <a href="https://google.com" <strong>mp:edit="true"</strong>>An Editable Link</a><br> </div><br> <table width="100%"><br> <tr><br> <td <strong>mp:edit="true"</strong>><br> Here's some content i would like to edit<br> </td> <br> </tr><br> </table><br> <div <strong>mp:edit="true"</strong>><br> Here's some more editable content<br> </div><br> <span <strong>mp:edit="true"</strong>><br> Here's even more editable content<br> </span><br> </body><br></html>
Important:
You cannot nest edit tags. They must appear only on the final elements that you wish to make editable.
For example, the following example will not work correctly...
<div mp:edit="true"><br> Hi There<br> <span class="wysiwyg-color-red"><div mp:edit="true"></span><br><span class="wysiwyg-color-red"> Oh no this won't work</span><br><span class="wysiwyg-color-red"> </div></span><br></div>
Supported Elements
You can add the "mp-edit" tag to any of the following HTML element types
- img
- a
- span
- div
- td
How to send your HTML to Transpond
Once you have added all of your editable tags to your template HTML, you can either Upload the HTML in a zip file (handy if you are uploading images at the same time), or you can simply paste it into the Code Editor.
Have a template from Mailchimp?
As well as mp:editable="true", we also are on the lookout for any Mailchimp mc:editable tags which are often hidden in templates exported from Mailchimp.
If we detect any Mailchimp editable tags, we will convert these just fine too!