Idea Description
When authoring marketing emails using the Customer Insights – Journeys Email Editor, users frequently experience confusion and unexpected layout behavior while designing emails, especially when working with sections, columns, and spacing/margins.
Current behavior
- In Design mode, the editor introduces editor-only structural elements (such as invisible containers and layout helpers) to support drag-and-drop, selection, and layout adjustments.
- These elements can visually introduce additional spacing, prevent margin collapsing, or make sections/columns appear misaligned during authoring.
- In Preview/Test mode and final email rendering, those editor-only elements are removed, and spacing/margins render differently (and correctly) in email clients.
- Selection outlines shown in Design mode (for sections, columns, and blocks) can also visually exaggerate spacing and layout boundaries, even though they do not affect the final output.
This difference is working as designed but is not clearly communicated, leading users to believe there is a layout or margin issue in their emails.
Challenges for customers
- Difficult to visually trust the Design mode layout.
- Extra time spent adjusting margins and spacing that do not affect runtime output.
- Increased support cases caused by misunderstanding editor behavior rather than actual rendering issues.
- Lower confidence when authoring complex layouts with nested sections and columns.
Suggested improvements
- Provide clearer visual indicators or hints in Design mode to distinguish editor-only spacing from runtime spacing.
- Improve inline guidance or documentation explaining Design vs Preview/Test behavior (especially for margins and sections/columns).
- Consider introducing an optional “runtime layout view” or clearer Preview alignment during authoring.
- Enhance authoring UX to make spacing and layout behavior more predictable and intuitive.
Business impact
Improving clarity and consistency in the Email Editor authoring experience would:
- Reduce customer confusion and unnecessary support engagement.
- Increase confidence when designing complex email layouts.
- Improve productivity and overall customer satisfaction with CIJ Email Editor.
Comments
Additional details: Potential root cause identified I've been investigating this issue and found a specific cause for the margin behaviour in the Editor.The .inlineFrame class on one of the container elements uses display: flex. This prevents CSS margin collapsing from working in Design mode.When I removed display: flex from .inlineFrame, margins started collapsing again in the Editor — matching what you see in Preview/Test and in email clients like Outlook and Gmail. Steps to reproduce:Add two stacked sections or text blocks with top/bottom margins in the Email Editor.In Design mode, notice the extra spacing between them (margins are not collapsing).Inspect the container and find the .inlineFrame class with display: flex.Remove display: flex from that class.Margins now collapse correctly in the Editor, matching Preview/Test output.This suggests the issue is not just a visual limitation of the editor — it may be a specific CSS property that can be adjusted without affecting drag-and-drop functionality.
Category: Email
Thank you for posting this idea
Category: Email
