Build an email

Build an email from scratch using the visual editor

When building an email in the visual editor, you'll drag standard or custom components from the Insert menu and drop them in whatever order you like on the Canvas. Then you can edit the content by clicking into the component or style them through the Properties menu.

A video of the Parcel window. The visual editor is open for an email template. From the insert menu, an image component is dragged onto the canvas. The cursor hovers over the component and clicks the pencil icon which reveals a modal of attributes. A link is pasted into the source field of the image. An image appears on the canvas. A heading component is dragged onto the canvas under the image. "Welcome!" is typed into the field. Then the pencil icon is clicked and the user changes the text align to center. A text component is dragged and dropped under the heading component. The words "We're so glad you're here!" are typed in. A button component is dragged and dropped between the heading and text components. The button copy is changed from "Click me" to "Learn more." Then the user clicks the pencil icon for the button followed by "More properties." A right hand panel appears where the user navigates to the field "Radius" and changes it from 4 to 16. The radius of the button becomes rounder on the canvas. The user hovers over the button component and drags it down below the text component. The user clicks out of each component to preview their work.
Build an email from scratch using the visual editor!

Make sure you have a base component! Check out Message Settings for help.

Markdown

You can utilize markdown syntax to transform standard components and style text. For instance, if you type # Welcome into a text component, we will update the component to a heading.

Markdown SyntaxResult
# HelloHeading 1 component
## BonjourHeading 2 component
### HolaHeading 3 component
#### SveikiHeading 4 component
##### HejHeading 5 component
###### CiaoHeading 6 component
** hello **bold
* hello *italics
~ hello ~strikethrough
__ hello __underline
- helloconverts a prose component like a paragraph to an unordered list component
* helloconverts a prose component like a paragraph to an unordered list component
1. helloconverts a prose component like a paragraph to an ordered list component

Using the code editor

You can continue to add or modify content in the Code editor while using the Visual editor. Toggle to Code when you need.

A screenshot of the Parcel window. To the right of the File tree at the top, you can toggle between Code, Visual and Feedback. Code is selected. The code editor is visible in the middle of the screen.
Click Code to switch to the code editor.

You'll need to do this to turn off click tracking on links, add gradient styling to CTAs, add variants to components, style for dark mode vs light modes, and style for mobile vs desktop.

Keep in mind, while you can add any HTML in the code editor, there are some limitations on what HTML you can modify in the visual editor. In the visual editor, you can edit and style:

  • text within the following HTML tags: p, h1, h2, h3, h4, h5, h6, a, li
  • images including the source and alt text for accessibility (use <x-image> instead!)
  • links for both text and images

If, for instance, you include a <div> tag with text inside or outside of a component in your message, you must wrap that content in a special tag (see below) so you can modify it in the visual editor.

Make any text editable

If you want to edit text but it's not in a supported tag, you can wrap it in a <x-edit-text> tag. This lets you edit the text in the visual editor.

Example:

<div style="font-size: 12px;">
  <x-edit-text> This is a div that you can edit. </x-edit-text>
</div>
Previous ArticleNext Article