Canvas features

Drag and drop, insert, duplicate, or delete components to create your email

In the middle of the Visual Editor, you'll see the Canvas. This is where you'll drag/drop, insert, duplicate and delete components. Select them to edit their content and styles.

A screenshot of the entire Parcel window. In the middle is the canvas of the visual editor. A button component in the middle is selected. A bubble menu appears that lets you style, duplicate or delete the component. The right-hand properties menu shows a list of attributes for the button.
A canvas with several components.

Drag and drop

To drag/drop, hover over the component then click and drag the handle. Drop the component anywhere you see a weighted line appear.

A video of the Parcel window. The cursor hovers over the left of a selected button component. Then it clicks, holds, and drags the component down below a header component and drops it.
Dragging a button component then dropping it further down on the canvas

You can drag/drop any standard or custom component, but not HTML tags. So you can drag <x-paragraph> anywhere you like, but not <p>. Consider using standard components in place of HTML tags, like <x-paragraph> in place of <p>, so you can utilize all features of the Visual Editor.

Insert

Select a component then click the plus icon to add another component.

A screenshot of the Parcel window. In the center of the window is the visual editor canvas. The component CIO Box is selected. The component is outlined in a thin, dark line. In the middle of the top line is a plus icon.
Instead of dragging a component onto the canvas, you can also click the plus icon to search for and add the right one.

Duplicate

To duplicate a component, select it then click the duplicate icon. The new component will appear directly below.

A screenshot of the Parcel window. A custom component labeled CIO Box is selected. Above the component is a bubble menu with three options. On the left is a pencil icon to edit styles. To the right of that is the duplicate icon. To the right of that is the delete icon.
The duplicate icon is in the middle of the bubble menu of a selected component.

Delete

To delete a component, select it and click the trash can icon.

A screenshot of the Parcel window. A custom component labeled CIO Box is selected. Above the component is a bubble menu with three options. On the left is a pencil icon to edit styles. To the right of that is the duplicate icon. To the right of that is the delete icon.
The delete icon in the bubble menu of a selected component.

This will delete everything within the component tag, not any outer tags like a <div>. You'll have to switch to the Code Editor in the top left to clean up these tags.

Previous ArticleNext Article