Get started with the visual editor
Design Studio New UpdatedIn Design Studio, you can create an email with visual blocks, no coding necessary.
This article applies to Design Studio
We are currently piloting Design Studio, our new email design system, and making some information available to customers. If you don’t have access to Design Studio, please continue to use our other email editors.
Here’s a quick guide to what’s available in the visual editor, and how each part helps you build your message. It has four key areas — the Insert menu, Layers menu, Canvas, and Properties menu. Together, they enable you to add and style content without code.
Add blocks to your message
You can find the content blocks you’ll use to build your email in the Insert menu. We offer two types of content blocks: standard and custom components.
Standard components include out-of-the-box elements like headings, paragraphs, and buttons. Use these to quickly structure and style your messages. Custom components are reusable blocks of content created by your team. You won’t see custom components in the menu until you’ve created your first one.
Click, hold and drag one or more content blocks from the Insert menu to drop them onto the Canvas, where you build your message.
To create more room for your canvas, you can close the Insert menu by clicking the icon and toggle it open again through the canvas toolbar.
Navigate your layout
The Layers menu shows you the structure and nesting of your components at a glance. Use this to find components so you can move them on the Canvas or style them in the Properties menu.
To create more room for your canvas, you can close the Layers menu by clicking the icon and toggle it open again through the canvas toolbar.
Build your message
The Canvas is where you visually build your message. Drag and drop components, upload images, and modify text here.
To move a component, hover over it then click and drag the handle to the left.
To duplicate or delete a component, click the component and choose the action from the context menu.
To style part of your text, highlight the text then modify the marks available, like color or italics, in the bubble menu. Otherwise, edit your styles through the Properties menu.
You can use the canvas toolbar to open and close the Insert, Layers, and Properties menus, undo or redo your work, or preview your message for different devices, color schemes, and visual impairments.
Style your message
The Properties menu is where you style your components. Change the layout like margin and padding, text styles, add links to images, and more. To create more room for your canvas, you can close the Properties menu by clicking the icon and toggle it open again through the canvas toolbar.
Bubble menu vs. Properties menu
Use the Bubble menu in your Canvas for more specific changes, like changing the text color of an individual word. Use the Properties menu for more general changes, like changing the text color of an entire paragraph.
Message settings
Use Message settings to style your email overall - set a background and default text styles for your message here. Click Message under Layers to view Message settings, or access it through the canvas toolbar. Behind the scenes, this styles the base component of your message.
By default, your global styles for paragraphs define the color, font family, size, weight, and line height set on your base component.
