- Introduction
- What is a WYSIWYG HTML Layout?
- What is a Source Code Layout?
- Summary Comparison
- Conclusion
Introduction
When creating email templates or other types of content, users typically choose between two editing modes:
- WYSIWYG (What You See Is What You Get) HTML layout
- Source code layout
Each mode has its strengths depending on the user’s experience and the need for visual design versus technical control.
Important limitation: In cloudHQ’s template editor, if you create a template using the WYSIWYG HTML Layout, you cannot later switch to edit it in Source Code Layout. These two layout systems are technically separate. WYSIWYG-generated templates use a structured block-based design engine that does not directly translate into editable raw HTML format. Therefore, templates started in visual mode must remain in that mode.
1. What is a WYSIWYG HTML Layout?
A WYSIWYG HTML layout provides a visual interface where users can edit content as it appears when sent or published, without seeing or writing any HTML.
Key Features:
- Graphical toolbar for formatting (bold, links, font size, lists).
- Supports merge tags like
*|FIRST_NAME|* - Drag-and-drop elements like images, buttons, polls.
- Real-time content preview.
Who is it for?
Great for non-technical users who want to build and customize templates quickly with minimal effort and no coding.
2. What is a Source Code Layout?
A Source Code layout lets users directly edit the raw HTML behind the template. This mode is ideal for developers and advanced users who need full control over the structure, design, and behavior of the template.
Key Features:
- Edit any HTML tag manually
<div>...</div> - Customize layout, spacing, and styles with CSS or inline attributes.
- Fix rendering issues or optimize for mobile and email clients.
- Add logic, conditional blocks, or embed scripts where allowed.
- Supports merge tags like
*|FIRST_NAME|*
Who is it for?
Ideal for technically experienced users who want pixel-perfect design, full layout control, or need to troubleshoot issues beyond the WYSIWYG limitations.
3. Summary Comparison
| Feature | WYSIWYG HTML Layout | Source Code Layout |
|---|---|---|
| Editor Type | Visual / drag-and-drop | HTML code editor |
| Skill Level | Beginner-friendly | Intermediate to advanced |
| Customization | Basic formatting and blocks | Full layout and logic control |
| Switching Mode | Cannot switch to code mode | Always code-based |
| Use Cases | Quick visual editing | Advanced design, fixing, optimization |
Conclusion
The choice between WYSIWYG HTML layout and source code layout depends on your goals and technical comfort.
For quick, user-friendly design, WYSIWYG is the way to go. But if you need deep customization, layout fixes, or full control over email rendering,
then source code mode is the better fit. Just remember: in cloudHQ, you need to choose wisely—once you go WYSIWYG, you can’t switch that template to raw HTML.