Drag'n'drop features to imported e-mail template

Highlighted
Level 1

Drag'n'drop features to imported e-mail template

I imported an e-mail template to marketo, I made it editable with (class="mktEditable"; class="mktoImg" ; etc), but I'm not able to make it drag'n'drop. How can I do that?

3 REPLIES 3
Highlighted
Level 6

Re: Drag'n'drop features to imported e-mail template

To get the drag-n-drop to work you've got to slice you email layout into "Modules" using some add'l syntax similar to adding the editable areas.

Here's a link to more info: https://docs.marketo.com/display/public/DOCS/Email+Template+Syntax#EmailTemplateSyntax-Modules

 

As a heads up, there's a specific architectural relationship between the Container and Modules - the modules MUST be a direct child of the parent container, I prefer to use a <table> for the container and <tr> for modules. Once you've got the container and module syntax in play you'll be able to see the modules in the side panel and drag-n-drop those into play. 

 

One awesome part about using the modules is that you can set the variable to be "local" - where they'll apply to just 'this' module when you change them, or "global" where they'll change stuff in every module when you update the module. I usually use the "local" setting [mktoModuleScope="true"] on most of my modules as kind of default and rarely use the "global" scope [mktoModuleScope="false"] - but it really depends on your approach and how flexible you'd like the email to be for the end user.

 

Let me know if anything else comes up while you're working thru getting this setup, I'd be happy to jump back in and help where I can.

 

Highlighted

Re: Drag'n'drop features to imported e-mail template

I've added the class="mktoContainer" and class="mktoModule", but it gives an error that says "the module is invalid", I'm translating as my enviroment is in portuguese.

https://docs.marketo.com/display/public/DOCS/Email+Template+Syntax

image.png

Highlighted
Level 6

Re: Drag'n'drop features to imported e-mail template

Thanks for posting a shot of the code here. 

 

ALL modules must be a direct child (excluding the <tbody> element) of the element with the container class. This is failing b/c there are a few other elements in between the container and the module. 

 

Try moving the "mktoContainer" class and id="container" onto the div a few lines down with the class="content-wrap".

 

From there, you can add row-after-row of <tr class="mktoModule" ... >, they've just all got to be nested directly inside the container element. There's a few other options for the parent/child element relationship in the docs as well - I usually use a <table> for the container and <tr> for the modules just inside that.