Visual Editor in Litmus Builder

Our codeless Visual Editor works with any HTML and doesn’t require any lengthy set up or special syntax to learn. Start with a template or an existing email, and then we’ll automatically enable codeless editing. You can even restrict certain content from being edited, such as your header and footer.

Start a new email

There are a number of ways to start a new email.

  • From Home, select Start building in Build your email or Create new in your emails panel
  • From BuildStart building in Build a new email or Create new in your emails panel
  • From any folder view, use New Email in the upper right corner

Give your email a name and select  Pick a template. Next, choose a template from your library to start building with it.

Three options for starting a new email

Top Did this help?

Change your template

Once you're in the editor, you have several controls above your editing pane. To change your template, select the Templates button. Your template library will open and you can choose any other template you prefer.

Note: Switching templates will overwrite your work. Be sure to Save before switching templates if you want to keep any changes.

Top Did this help?

Copy or import an existing email

While templates are the easiest way to get started building in the visual editor, there are other options available:

  • Duplicate a previous email: while we encourage using templates instead of copying old emails, if you have an email you want to use as your starting point, search or navigate to it in your folders and then use the Duplicate option to create a copy.
  • Paste HTML into the code editor: if you have the HTML you want to work with, you can switch to Code editing mode and paste it in. Then, just switch back to Visual mode to start making edits.
  • Import HTML from cloud storage: you also have the option of importing any .html file stored in your Dropbox, Google Drive, or Microsoft OneDrive accounts. To access this option, create a new email, give it a name, and then select your storage provider:

Top Did this help?

Build an email

To use the visual editor in Litmus Builder, make sure to toggle the editing mode from Code to Visual. Builder will remember this preference in future sessions, so you’ll always start in your preferred editing mode.

The visual editor is organized in a simple, intuitive side-by-side experience: on the left side will be your editing tools. On the right side is the preview pane. Simply click on elements in the preview pane to select them, and use the editor pane on the left to edit content. Read on for more information on how to edit different types of content.

visual editor

Top Did this help?

Insert drag-and-drop modules

Once you've chosen a template, you can add new content to your email using the drag-and-drop editor.

NOTE: Drag-and-drop editing is only available with Litmus Enterprise plans.

drag-and-drop modules

Top Did this help?

Edit text

To edit text content in your email, click on the content you wish to change in the preview pane, then use the rich text editor on the left to make edits. The rich text editor supports bold and italic formatting, editing font color, as well as the ability to add, update, or remove links from text.

editing text

If you're on a Litmus Enterprise plan, you can also define your brand's colors in the Design Library and use them when editing text.

color selection

Top Did this help?

Replace images

To replace an image, click on the image in the preview pane. Click the Browse button to upload an image from your computer. If the image you want to add is hosted elsewhere, simply paste the image source URL into the Source field and the changes will instantly appear in the preview pane.

To improve the appearance of your email when images are disabled, and for improved accessibility, Litmus recommends including alternative text (“alt text”) with any images in your email. Simply edit the Image Alt Text field to make changes to your alt text.

Note: Litmus auto-resizes your images, maintaining their aspect ratio to fit the template you're using. To help ensure your email looks great for all recipients, we'll also point out when an image is not optimized for retina (high-density) displays.

image replacement

Top Did this help?

Edit background images and colors

The visual editor also supports replacing background images. To replace a background image, select the section of your email containing a background image. Use the Browse button to upload an image from your computer. If the image you want to add is hosted elsewhere, simply paste the image source URL into the Source field and the changes will instantly appear in the preview pane.

To ensure your email looks great even when images are disabled, you can also edit the background color as a fallback option when editing background images.

If you're on a Litmus Enterprise plan, you can also define your brand's colors in the Design Library and use them when editing background colors.

background colors

Top Did this help?

Update links

To edit links, select the link text or button element in the preview pane. In the editor pane, you can update the link URL and link text using the input fields.

If you wish to add UTM parameters to the links in your email, use the UTM Manager found in the Tracking menu.

updating links

Top Did this help?

Edit subject line and preview text

Your email's subject line and preview text are also editable directly from Visual Editor. Just choose the subject line and preview text shown at the top of the preview pane.

Top Did this help?

Moving, duplicating, and removing elements

Certain elements in your template can also be moved, duplicated, and removed to customize the design of your email. Whenever you click on content in the preview pane, you will see a handy toolbar with these options

Note: Based on how your template is constructed, some elements may not be eligible for moving, removing, or duplicating. This is by design in order to maintain the integrity of your template and avoid tricky email client rendering issues.

Top Did this help?

Saving, undoing, and redoing changes

Above the editor pane on the left side, you will see a series of three buttons: undo, redo, and save. Use these features to easily manage your changes as you make edits. 

Each save creates a new version of your email that you can jump back to at any time if you make a mistake. Select the Last saved timestamp to view all past versions and restore an old version if you’ve made a mistake and want to start over.

Undo, redo, save and timestamp link above code editor

Top Did this help?

Non-editable content

Some content in your template may not be editable. This is due to the template creator choosing to restrict editing of certain content. When this is the case, you will see a disabled cursor icon when you hover or attempt to select the non-editable content.

Template creators can disable content editing by using Partials.

Top Did this help?

Create a template

Want to create a template? Learn more details about the Design Library in Litmus, where you can store, access, and manage all of your team’s templates.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us