Microsoft Dynamics 365 | Integration, Dataverse...

Email template using custom HTML and drag-and-drop blocks

(4) Share

Report

Posted on by CU05071113-1

Hi there, I recently built an email master template and created the content blocks to use with drag-and-drop. I did code the HTML myself and used the meta

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

<meta type="xrm/designer/setting" name="layout-editable" value="marketing-designer-layout-editable">

I have placed the below div, which I believe to be the drag and drop area
 
<div data-layout="true" data-layout-version="v2" style="margin: auto; max-width: 600px;">...</div>

When I create the email, I face an issue when I clone or drag and drop a component. It does not go below the component, but it seems like it gets inserted within the other component.

Here is an example of the modules I built:

When I add or clone a component, it goes underneath <div data-editorblocktype="Image"></div>. I need the next component to go underneath the last div like below:

Has anyone experienced the same and found a solution?

Thank you in advance.

Dario

Categories:

Dynamics 365 general

I have the same question (0)

All responses (2)

Answers (0)

Holly Huffman 6,538 Super User 2025 Season 2 on at

Like (0)

Report
Good morning, afternoon, or evening depending on your location :)
Hope you are well today!

Thanks for the detailed explanation — you're on the right track with your custom HTML and metadata for Dynamics 365 Marketing's email designer. The issue you're facing, where cloned or dragged components are inserted inside another block instead of after it, is typically caused by nested or improperly closed container elements.

Root Cause
Your current structure nests the data-editorblocktype="Image" block inside another div with data-editorblocktype="Content", which itself is wrapped in a contentBlockWrapper. This nesting can confuse the drag-and-drop logic, especially if the outer container is not clearly closed or separated.

Recommended Fix
To ensure that each block is treated as a separate, stackable unit, follow these guidelines:
1. Avoid Nesting data-editorblocktype Inside Each Other
Each block should be self-contained. For example:

<div data-editorblocktype="Content" class="contentBlockWrapper" style="width: 700px; margin: 0 auto;" align="center"> <table cellpadding="0" cellspacing="0" border="0" width="600" align="center" role="presentation" style="width:600px;"> <tr> <td align="center"> <img src="https://placehold.co/120 </td> </tr> </table> </div>

2. Use data-layout="true" Container Properly
Ensure your layout container is clean and only wraps the top-level blocks:

3. Avoid Duplicate contentBlockWrapper Nesting
You had:

This can confuse the editor. Use only one wrapper per block.

Test It

Create a new email using your updated template.

Drag a block into the layout area.

Clone it and confirm it appears below the previous block, not inside it.

Note: I collaborated with Copilot to help craft this response for clarity and completeness.
Hope this helps some!

Was this reply helpful? Yes No
Suggested answer

DAnny3211 11,397 on at

Like (0)

Report
Hello,

Thank you for your detailed explanation.

The issue you're encountering—where cloned or dragged components are inserted inside an existing block rather than below it—is likely due to the HTML structure and nesting of your content blocks. In Dynamics 365 Marketing, the drag-and-drop editor relies heavily on the correct use of data-editorblocktype, data-layout, and contentBlockWrapper attributes to determine where and how components can be placed.

Recommendations:

Ensure Proper Nesting of Content Blocks
Each data-editorblocktype="Content" block should be self-contained and not nested inside another block. In your example, the Image block appears to be nested inside the Content block, which may cause the editor to treat it as a single unit.

Avoid Nesting data-editorblocktype Elements
Instead of placing data-editorblocktype="Image" inside another data-editorblocktype="Content" block, structure each block separately and wrap them in a contentBlockWrapper div.

Use data-layout="true" as the Container
The outermost container with data-layout="true" should contain multiple sibling contentBlockWrapper divs, each representing a separate block. This allows the editor to insert new blocks between them.

Validate with Microsoft Guidelines
Refer to the official Dynamics 365 Marketing email template documentation to ensure your HTML structure aligns with supported patterns.

Test with Simplified Blocks
Try creating a minimal version of your template with two separate contentBlockWrapper divs and verify if drag-and-drop behaves correctly. Then incrementally add complexity.

If this response helps resolve your issue, please consider marking it as accepted so it may assist others facing similar challenges.

Best regards.

Was this reply helpful? Yes No