Convert your HTML template to drag and drop email template

Convert your HTML template to drag and drop email template

Converting HTML to Drag and Drop

 

Wouldn't it be amazing if you could create an HTML template, upload it to MAILVIO and it automatically becomes easily editable in our Drag and Drop Interface?

We'll 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>
 <head></head>
 <body>
 <div>
     <img src="hhttps://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Butterflies-PNG/Butterfly_PNG_Clip_Art.png?m=1519960087" mp:edit="true"/></div>
 <div>
     <a href="https://google.com" mp:edit="true">An Editable Link</a>
 </div>
 <table width="100%">
    <tr>
       <td mp:edit="true">
          Here's some content i would like to edit
       </td> 
     </tr>
 </table>
 <div mp:edit="true">
    Here's some more editable content
 </div>
 <span mp:edit="true">
    Here's even more editable content
 </span>
 </body>
</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">
    Hi There
    <div mp:edit="true">
        Oh no this won't work
    </div>
</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 MALIVIO

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!

    • Related Articles

    • Adding a Drag and Drop Template

      Anybody can create beautiful, mobile-friendly email templates thanks to the drag and drop editor, with no technical experience necessary. You can simply drag blocks of content onto your email, move them around, edit them by simply clicking what you ...

    • Add a HTML email template

      Adding a Template from HTML So you already know all about designing great email templates using your own software? Or you've obtained an HTML template that you would like to pop into the system? No problem! You can then use the "From Code" option to ...

    • Other ways to add an email template

      Other Ways to Add an Email Template There are three main ways to add a template: Drag and Drop Editor Drag and drop EditorSelect a pre-made theme, or design your own from scratch using our unique, super user-friendly, drag and drop email editor ...

    • How to add an email template in Mailvio

      Adding a New Template Before you can send an email, the second thing you need after subscribers is a great-looking template. Here's how you add your first Email Template... Step 1: Before you begin, you must make sure you are logged in to the MAILVIO ...

    • Add a WYSIWYG template

      If you are looking to design a "traditional" style email then drag and drop editor may not be the easiest solution. Introducing the Wysiwyg editor. A Microsoft Word style editor that enables you to construct basic email templates more traditionally. ...