Add Drag and Drop design support to your older existing pages
Single column template
Modify your existing template so that the outer id is [main] and it has class _dropzone_.
Include the <style> tag inside the main container and your structure should resemble the following
<div id="main" class="ui-sortable _dropzone_">
<style type="text/css" media="screen" id="_dragdropcss_" runat="server" class="_topright_ ui-sortable-handle" style=""></style>
</div>
Thats it.
Two column template
The two column template requires a little more surgery.
Your existing template will probably start with the following outermost element, (check this by looking in your template and select the [Additional HTML] section
<div class="col-xs-12 col-sm-9">
Above the element described above add the new additional element shown below, this will enable support for full width drag and drop header components
<div id="_fullwidth2col_" class="container _dropzone_ ui-sortable" style="min-height:3px;">
</div>
Now back to you pre-existing element, change it so that it has id="main", additional classes _topright_ and _dropzone and finally set the style as shown to be min-height:20px
Heres what your element should finally look like.
<div id="main" class="col-xs-12 col-sm-9 _topright_ ui-sortable _dropzone_" style="min-height:20px;">
Last thing is to add the following element inside element 'main' suggest you place it just before the closing </div> tag of main.
<style type="text/css" media="screen" id="_dragdropcss_" runat="server" class="_topright_" style="">
Finally your two column template structure should now look like this
<div id="_fullwidth2col_" class="container _dropzone_ ui-sortable" style="min-height:3px;">
</div>
<div id="main" class="col-xs-12 col-sm-9 _topright_ ui-sortable _dropzone_" style="min-height:20px;">
...YOUR Existing stuff here
<style type="text/css" media="screen" id="_dragdropcss_" runat="server" class="_topright_" style="">
</div>
If you have any problems converting a page just contact us and we will be happy to assist.