How do I use Litmus Builder?
Just getting started with Litmus, or want to get a complete how-to of everything in our tool? Look no further than this guide on how to use Litmus Builder:
WHAT IS LITMUS BUILDER?
Build your email in our web-based editor and get instant previews in 50+ email clients as you go. Every change you make updates your previews in real time, so you can build, test, and troubleshoot faster than ever before. Litmus Builder is the fastest tool to build and test emails—it is the world’s first editor built specifically for email design and development.
TABLE OF CONTENTS
Getting Started with Litmus Builder
Overview video
Dashboard
Create A Project
Delete A Project
Navigator
Create An Email
Save An Email
Upload Images
Rename an Email
Duplicate an Email
Download an Email
Delete Emails and Images
Rename A Project
Download A Project
Code Editor
HTML and CSS Tabs
Tabs and Spaces
Collapse and Expand Code
Find and Replace
Undo Actions
Use Images in Code Editor
Templates
Types of Templates
Load Templates
Create A Template
Search Templates
Snippets
Create A Snippet
Delete A Snippet
Use Snippets in Code Editor
Subject Line Checker
Testing Your Subject Line and Preview Text in 15+ Email Clients
Timeline
View A Specific Version
Restore A Specific Version
Tracking Manager
Adding tracking codes to links
Preview Pane
Browser View
Instant Previews
ESP Syncing
Available ESPs
Syncing Error
Setting Up ESP Syncing for Salesforce Marketing Cloud (formerly ExactTarget)
Setting Up ESP Syncing for IBM Watson Campaign Automation (formerly Silverpop)
Setting Up ESP Syncing for Marketo
Settings
Editor Theme
Editor Font Size
Inline CSS
Autocompletion
Close tags
Miscellaneous
Share An Email
Send a Test Email
Emmet Integration
OVERVIEW VIDEO
Video Thumbnail
HOW TO ACCESS BUILDER
To access Builder, simply click on Builder in the main navigation in Litmus. This will automatically direct you to the Dashboard.
Create A Project
To start using Builder, you must first create a new project. A project can contain one or more emails. There is no limit on how many emails are contained in an individual project.
To create a new project, simply click on the Create a new project button.
You then have two options: upload your own HTML or pick a template to start building and testing your email.
Paste HTML
You will be prompted to name your project in a modal. Name your project in the text input field, paste your HTML in the markup text area, and click on the “Start testing” button. This will automatically open your Builder project in a new window and display your newly created project in your dashboard.
Start from scratch
You will be prompted to name your project in a modal. Name your project in the text input field, select a template from the list provided, and click on the “Start building” button. This will automatically open your Builder project in a new tab and display your newly created project in your dashboard.
The dashboard will show all of your existing Builder projects as thumbnails. The thumbnail generated for each project is a screenshot of the most recently saved email in that project. It also displays the title of the project, the user who created the project, how many emails are in the project, and when the project was last updated.
Delete A Project
To delete a Builder project, simply click on the delete trash icon for a project. A prompt will appear asking you to confirm the deletion of this project. Simply click OK and your project will be deleted. A successful deletion message should appear right in the dashboard.
BUILDER SETUP
There are three main components to a main Builder project: the navigator, the code editor, and the preview pane.
Builder
NAVIGATOR
The navigator is the left sidebar in Builder. The navigator is where you can manage all of the contents in your projects, your emails and images. You can toggle to show/hide the navigator by using the keyboard shortcut Cmd+B or clicking on the View menu item and selecting Toggle Sidebar.
Create a New Email
There are three ways to create a New Email in a Builder project:
Click on File from the menu and select New Email (⌘E)
Click on the + icon at the top right of the Navigator.
Right-click on an empty area in the Navigator and click New Email from the context menu.
Both of these actions will automatically create a New Email and directly place your cursor in a text input field to name the email. Hit Enter or click away from the input field to complete the action.
You can only have one new unsaved email at a time. In order to create another New Email, save the existing unsaved email.
Save an Email
There are three ways to save an email in Builder:
Use the shortcut command Cmd+S (Mac) or Ctrl+S (Windows) to automatically save the email.
Click on File from the menu and select Save.
Right-click on the title of an email and select Save from the context menu.
Upload Images
There are three ways you can upload images to Builder:
Toggle Sidebar from the View menu. Click on the Upload Image icon which is located directly to the right of an email’s name/title. Clicking on this icon will open up an Upload Image modal where you can select to upload image(s) from your local desktop.
Simply select one or more of your local files and drag them anywhere into the Builder project and drop the files. Builder will automatically recognize that you are uploading images and will upload them to the existing email.
Right-click on an empty area in the Navigator and click Upload Image from the context menu. This will open up an Upload Image modal where you can select to upload images from your local desktop.
*Note: Images are only uploaded to the current email.
Rename an Email
There are two ways to rename an email in Builder:
Click the title of an email and it will automatically direct your cursor into a text input field to rename the email.
Right-click on the title of an email and select Rename from the context menu. This will automatically direct your cursor into a text input field to rename the email.
Duplicate an Email
To duplicate an email, right-click on the title of an email and select Duplicate from the context menu. This will duplicate the email and create a separate version of the email in the same project. If any images are uploaded to the original email, those will be duplicated into the copy of the email as well.
Download an Email
To download an email, right-click on the title of an email and select Download from the context menu. This will trigger an automatic .zip download of the email and any images uploaded to that specific email. The final email is compiled into one .html file. Even if your email stored CSS in the CSS tab in Builder, it would be injected into the .html file, making your email ready for a send.
Delete Emails and Images
To delete any emails or images in a project, simply right-click on the name of the email or image and click Delete from the context menu. A prompt will appear asking you to confirm the deletion of the email or image. Simply click ‘Ok’ and your email or project will be deleted. A successful deletion message should appear right in the dashboard.
Rename a Project
To rename a project, right-click on the title of a the project and select Rename from the context menu. This will automatically direct your cursor into a text input field to rename the email.
Downloading a Project
To download a project, right-click on the title of the project and select Download from the context menu. This will trigger an automatic .zip download of all the emails contained in the project. Each email will have its own folder in the .zip file with its assets inside of it.
CODE EDITOR
The code editor is located in the middle of Builder, in between the sidebar and the preview pane. This is where you can input your HTML and CSS for your email.
HTML and CSS Tabs
The code editor has an HTML and CSS tab in the top right corner. All HTML content for the email can be placed in the HTML tab and all CSS can be placed in the CSS tab. For CSS placed in the CSS Tab, the code is dynamically injected into the <head> of the HTML to render properly in the preview pane. CSS in the CSS tab is *not* inlined. You can easily toggle back and forth between both tabs and the code editor remembers your place in each tab.
*Note: Leaving the CSS tab empty and placing all CSS in the HTML tab still properly functions.
Tabs and Spaces
The code editor uses 4 spaces for tabs by default. Any text or code pasted into the code editor will automatically convert tabs to 4 spaces and automatically indent the code.
Collapse HTML and CSS elements
To collapse a block of HTML or CSS, simply click on the arrow next to the line number. Click on the arrow again to expand the code.
Find and Replace
To access Find and Replace, click on Find in the menu and select one of the options. Or, use the shortcut command Cmd+F (Mac) or Ctrl+F (Windows).
Undoing Actions
To undo the most recent change to an email, simply use the shortcut command Cmd+Z (Mac) or Ctrl+Z (Windows). You have the ability to undo actions all the way to the last recorded save to an email.
Using Uploaded Images in the Code Editor
There are two ways you can automatically insert images uploaded to an email into the code editor:
Click on the filename of an image. This will automatically generate HTML code for the image in the current position of the cursor in the code editor.
Drag a filename from the navigator into the code editor. This will automatically generate HTML code for the image in the current position of the cursor in the code editor.
The HTML code for images defines the source, height, and width of an image. Here is an example:
<img src="example.jpg" width="250" height="100" />
