Navigating the email editor

This article provides an overview of Aklamio’s drag-and-drop email editor, a unified interface for customizing the content, layout, and localization of your campaign communications. Learn how to navigate the three-part UI: the Top Bar for global settings, the Control Panel for building elements, and the Preview Canvas for real-time visualization, to create high-converting, brand-aligned emails.

The primary interface for email customization is an incredibly capable, drag-and-drop editor. This editor is integrated directly into the Brand Settings and Campaign Manager, providing a unified experience for managing the content and aesthetics of user communication. The UI is structured into three primary areas: the top bar, the left-hand control panel, and the right-hand preview canvas.

The Top Bar

The top section of the editor provides critical metadata and global actions.

Breadcrumbs: Displays the current campaign context (e.g. Black Friday campaign).
Template Name: Shows the name of the specific email template.
Template Languages: Lists all active languages for the template as small flags. Supported are EN, ES, FR, DE, DE informal, IT, NL, PT, PL.
Subject Title: Shows primary language of the Subject Title. Accessible via a pencil icon, this opens a localized subject management pop-up.
Cancel/Save: Action buttons to save or discard the changes you have made to the email template.

The subject line pop-up is a central tool for global teams. It provides individual input fields for every activated language, ensuring that the first touchpoint in a user's inbox is culturally and linguistically relevant. This eliminates the need for maintaining separate templates for different regions, as the system handles multiple subject lines within a single template.

The Left-Hand Control Panel

The control panel is the engine of the editor, divided into three tabs: Content, Structure, and Settings.

Tab	Functionality	Key Elements
Content	Individual elements that hold the actual message.	Text, Image, GIF, Button, Divider, Spacer, Social, Video, HTML, Product.
Structure	The layout framework that contains content.	Single and multi-column rows, grid-based layout settings.
Settings	Global stylistic and technical properties.	Background colors, font defaults, line-height, and preheader text.

Within the Content tab, users can toggle between Basic elements and Premade blocks. Premade blocks are particularly useful for maintaining consistency in headers and footers across different campaigns.

The Right-Hand Preview Canvas

The canvas provides a "What You See Is What You Get" (WYSIWYG) interface where users can drag and drop structures and blocks.

Undo/Redo: Located at the top right for quick error correction.
Language Switcher: Allows the editor to toggle between language variants on the fly, to provide localized content, such as texts and images.
Preview Mode: A dedicated view to simulate how the email will look on Desktop, Mobile, and in Dark Mode.

In Preview mode, the system introduces a specialized Merge Tags Preview panel. This allows users to input mock data into tags like *|BRAND_NAME|* or *|REWARD_VALUE|* to ensure that the final email renders correctly with real-world information.

💡 Best Practices

Optimize for Dark Mode: Always use the "Preview Mode" to toggle between Desktop, Mobile, and Dark Mode. Ensure your logos have transparent backgrounds to remain visible against dark themes.

Test with Merge Tags: Before saving, use the Merge Tags Preview panel to input mock data. This confirms that dynamic values like *|REWARD_VALUE|* or *|BRAND_NAME|* fit correctly within your layout and don't cause text wrapping issues.

Localized Subject Lines: Use the pencil icon in the Top Bar to manage all active languages in one place. Ensure your subject lines are culturally relevant for each region (e.g., DE vs. DE informal).

🛠️ Troubleshooting

Changes Not Appearing in Preview?
Check the Language Switcher in the Right-Hand Canvas. You may be editing the content in one language (e.g., EN) while viewing the preview for another (e.g., FR).

Merge Tags Displaying as Code?
If tags like *|USER_NAME|* appear as raw text in your test inbox, ensure they are written in all caps and wrapped correctly in pipes/asterisks. Use the Merge Tags Preview panel to verify they are being recognized by the editor.

Images Looking Distorted on Mobile?
Check the Structure tab settings for that specific row. Ensure you haven't set a fixed width that overrides the responsive grid-based layout.

Missing Language Flag?
The Top Bar only displays active languages. If a language is missing, it must be activated for your brand by your Customer Success Manager.