Working with Builder
Litmus Builder is a code editor specifically built for email design and development. All emails in Litmus will have a Builder view for design, code editing, and testing. This article provides an overview of Builder, including how to rename, duplicate, save, and download an email.
|
|
|
Builder view
After you create an email, select the Builder tab. The Builder view contains an email and folder list slide out panel, an editor pane with both code and visual options, and a browser preview pane on the right side. The left side slide out panel shows all emails in the current folder. The gear icon at the left in the editor has settings for your editor view. The eye icon above the browser pane allows you to toggle a variety of settings and filters.
Saving your email
- Use the shortcut command Cmd+S (Mac) or Ctrl+S (Windows) to automatically save the email, or
- Select the Save button above the editor pane.
NOTE: Builder automatically saves your changes locally in your browser as you type but does not save to your account in Litmus without a manual save.
Timeline
The Timeline allows you to view and restore all saves and changes to an email. To access the Timeline, select the Last saved timestamp link above the editor pane.
Viewing a specific version
You can view a saved version of an email by selecting a version from the list. Each saved version displays the date and time the email was saved and which user made the save. The actual preview of the email is displayed on the right-hand side. To view the code of that specific email, simply click on the Code toggle on the top right of the preview pane.
Restoring a specific version
To restore a specific version of an email, select that version of the email and then the Restore link on the right. This specific version will appear back in the code editor and preview pane.
Breadcrumb menu
The breadcrumb button next to your email's name gives you several convenient email management options. Duplicate, rename, move, or delete your email quickly and easily!
Duplicate your email
Select Duplicate from the breadcrumb menu. Your duplicated email will be created in the same folder as the original. It will automatically be named Copy of [Original email]. You can rename a duplicated email or move it to another folder any time.
When you duplicate an email, it will only create the email in Builder and no email previews will be generated. Use Update Previews & QA or Update Proof & Previews tabs to create the email in the Previews & QA and Proof tabs.
Rename
SelectRename from the breadcrumb menu. You can change the name in the popup modal and select Save in the lower right corner. If you change your mind, use the close icon in the upper right corner to close the box.
Move
Select Move from the breadcrumb menu. You can choose an existing folder from the list in the popup modal or create a new folder with the link in the lower left. Use the Move button in the lower right to finish putting your email in its next folder.
Delete
Select Delete from the breadcrumb menu. You'll see a confirmation popup modal so you can verify the delete. If you accidentally delete an email, you can find it in your Litmus Deleted emails in your account settings. Your deleted emails are saved for 30 days before they are no longer available.
Export options
The Export menu allows you to copy and download your compiled HTML, or you can download the code directly.
Copy your HTML
Select Copy HTML from the dropdown. You'll see your compiled code appear in the modal and you can select the code in the window to one-click copy to your clipboard. You can also download the compiled code. If you use modules in your email build, the compiled version provides the full code of your partials and snippets.
Download your HTML
Select Download HTML from the Export dropdown to 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 will be injected into the .html file, making your email ready for a send. You also get the original raw code from Builder in a separate file.
Sharing options
The Share dropdown offers options to create a share link for your project three different ways, or to send a test email.
Get a shareable link
Create a public share link with the Publish option. Toggle the Publish Email Previews + HTML switch. You can change the email client selections you share. You get two different URLs for sharing:
- Email Previews (only): Perfect for sharing just the email previews with clients or colleagues
- HTML + Email Previews: Perfect for sharing both the code and email previews with other designers and developers
Share by email
The Email option allows you to email your Builder project to any team members you select. You'll see a list of Litmus users and groups available in your account. For privacy and security, all recipients will need to be set up as users in your Litmus account. You can add users as Read-only to limit content access. Select the Send email button to automatically send a test email to the users you selected.
Embed your project
With the Embed option, you get custom embed code you can use to share your project anywhere you'd like, such as a private website for clients or colleagues to review your work.
Send a test
The Send a test dropdown selection directly opens the Email option described in the section above.
Navigate folders using the sidebar
Builder's slide out folder menu gives you quick access to other emails in the same folder. You can create a new email and you'll find the breadcrumb menu for each email in the list.
Select View folders to see your folders or to create a new one. Use the funnel icon button to sort your folders by age or alphabetically.
| |
|
