Visual Editor
The Visual Editor is the heart of Composa—a powerful drag-and-drop interface that lets you build professional email templates without writing code. This guide covers everything you need to know to create, customize, and organize your email designs.
Left Panel: Element Palette
The left panel displays all the building blocks available for your template. What you see depends on your setup.
Using a Design System
When your workspace is connected to a design system (EDS—Email Design System), the left panel shows:
EDS Components Pre-built, consistent components organized by category:
Header: Logo, navigation, and header elements
Content: Text blocks, images, callout boxes, and more
CTA: Call-to-action buttons in various styles
Footer: Footer links, contact info, and legal text
Container: Structural elements for layout and spacing
Styles: Text styles, color swatches, and typography presets
Layouts Pre-designed template structures you can use as a starting point (single column, two-column, three-column, etc.).
Using a design system ensures consistency across all your templates and speeds up the design process significantly.
Starting from Scratch
If you're building a template without a design system, the left panel shows:
Layouts Basic template structures to jumpstart your design.
Basic Elements Fundamental building blocks like text, images, buttons, dividers, spacers, and containers. These give you complete control to build custom designs from the ground up.
Dragging Elements onto the Canvas
Adding elements to your template is simple:
Click on an element in the left panel
Drag it onto the canvas (the center white area)
Drop it where you want it to appear
The element is automatically added to your template
As you drag, you'll see a preview of where the element will land. Drop zones are highlighted to help you place elements exactly where you want them. You can drag elements to reorder them, and dragging between sections creates new structure.
Selecting and Customizing Elements
To edit an element, simply click it on the canvas. When selected, the element will show a blue border or highlight, and its properties will appear in the right panel.
Nested Selection
If elements are stacked, you might need to click multiple times to select the one you want. The first click selects the container, the next click selects the nested element inside it, and so on.
Multi-Select
You can select multiple elements at once by holding Shift or Command (Mac) / Ctrl (Windows) and clicking. This lets you move, copy, or delete multiple elements together.
Right Panel: Element Properties
The properties panel on the right shows all customization options for the selected element. Available properties vary by element type, but typically include:
Common Properties
Text Content Edit the text that appears in text blocks, buttons, and other text-based elements. You can apply basic formatting like bold and italic.
Colors
Text Color: Change the color of text
Background Color: Set the background of an element
Border Color: Add and customize element borders
Button Color: For CTAs, set the button background and text color
When a design system is active, you'll see predefined color swatches that maintain brand consistency.
Spacing
Padding: Add space inside the element (between content and edge)
Margin: Add space outside the element (between this element and others) Adjust spacing independently for top, right, bottom, and left, or set all sides at once.
Fonts and Typography
Font Family: Choose from available fonts
Font Size: Set the text size
Font Weight: Make text bold or light
Line Height: Control vertical spacing between text lines
Text Alignment: Left, center, right, or justify
Images
Upload/Replace: Choose an image from your files
Alt Text: Add descriptive text for accessibility
Image Width/Height: Control image dimensions
Link: Make an image clickable
Links
URL: Set the destination for links and buttons
Open in New Tab: Control whether links open a new window
Advanced Properties
Some elements offer advanced options like:
Border style and width
Shadow effects
Opacity/transparency
Display conditions (show/hide based on rules)
Hover over any property label to see a tooltip with more information.
Section Locking
Workspace owners can lock specific sections of a template to protect important content from accidental changes. This is especially useful when:
Multiple team members are editing the same template
You want to enforce brand guidelines on certain sections
You want editors to focus only on customizable areas
How to Identify Locked Sections
Locked sections display a lock icon next to the section name in the layers panel. Locked elements can still be viewed and previewed, but their properties cannot be edited.
Working with Locked Sections
Locked elements: Click them to view their properties, but editing options are disabled
Unlocked elements: Within a locked section, any unlocked elements can still be edited
Contact your workspace owner: If you need to unlock a section, ask the workspace owner to adjust permissions
Locking is a powerful feature for maintaining template integrity while giving editors the freedom they need.
Working with Columns and Layouts
Email layouts typically use columns for horizontal organization. Composa makes working with columns intuitive.
Adding Columns
Drag a Column element or Container onto the canvas
The container shows available column configurations (1-col, 2-col, 3-col, etc.)
Select your desired column layout
Drag elements into each column to build your design
Resizing Columns
Click the divider between columns and drag to resize. You can make columns equal width or set custom proportions.
Nested Columns
Columns can contain other columns, letting you create complex, flexible layouts. For example, you might have a 2-column section with a 3-column subsection in one of the columns.
Mobile Responsiveness
Composa automatically handles responsive behavior on mobile devices. Most elements stack into a single column on mobile, but you can customize this behavior:
Select a column or container
Look for responsive options in the properties panel
Set mobile-specific behavior (stack, hide, or adjust width)
Test your layout in Preview mode by toggling between desktop and mobile views to ensure it looks great on all screen sizes.
Tips for Success
Use templates: Start with a layout template to save time and maintain structure
Group related elements: Use containers to keep related content organized
Test responsive views: Always preview on mobile to catch layout issues
Leverage design systems: If available, use EDS components for consistency and speed
Save frequently: While autosave protects you, use the Save button for peace of mind
Lock sections: If working in a team, lock sections you want to protect
You're now ready to create beautiful email templates! Head over to the Previewing and Exporting guide to learn how to test and deliver your designs.
Last updated