{"id":4421,"date":"2021-06-04T16:07:18","date_gmt":"2021-06-04T20:07:18","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/litmus-builder-essentials-getting-to-know-email-builder\/"},"modified":"2025-11-05T12:49:47","modified_gmt":"2025-11-05T17:49:47","slug":"litmus-builder-essentials-getting-to-know-email-builder","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/litmus-builder-essentials-getting-to-know-email-builder","title":{"rendered":"Litmus Builder Essentials: Get to Know Our Email Builder"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

Getting to know any new software application can be an arduous task. Even the most well-thought out and beautifully designed interface can be overwhelming to beginners, making the process of getting started a bit of a challenge.<\/p>\n

Litmus Builder<\/a> lets you quickly build for and test on the email clients that matter most to your audience, and use reusable HTML and CSS code snippets and pre-tested templates to reduce errors and maintain brand consistency. It\u2019s an ideal solution for individuals and teams alike looking to dramatically increase their productivity throughout the email production process. It\u2019s chock-full of features and tools to improve your workflow, and we want to make sure you\u2019re comfortable with all of them.<\/p>\n

With that in mind, we\u2019re kicking off a four-part series on the essentials of using Litmus Builder. In Part I (which you\u2019re reading right now), we\u2019ll discuss creating new documents, setting up preferences, and the Builder interface. Part II and Part III will focus on coding, testing, and improving team workflows using Builder. Part IV is on best practices for creating HTML emails in Builder.<\/p>\n

Let\u2019s get started and look at how Litmus Builder can help you in your own email marketing.<\/p>\n

Starting a new document<\/h2>\n

When you first log into Litmus, you\u2019ll see your dashboard<\/a>, which is where you\u2019ll find all your current emails in Litmus\u2014and have the option to build a new email. The Home Dashboard<\/b> looks like this:<\/p>\n\"litmus\n

You can find your email using the search bar or the folders on the left-hand side. If you originally created the email, click \u201cMy emails\u201d to narrow down your search.<\/p>\n

\"building
Three ways to create a new email project<\/figcaption><\/figure>\n

There are a few ways to start a new email in Builder, including importing code or copying and pasting HTML.<\/p>\n

To start, click the green Create new<\/b> button. Set a project name to easily identify the project, then select Build. <\/b>From this screen, you can:<\/p>\n

    \n
  1. Start with a blank email to add your own HTML.<\/li>\n
  2. Choose a template to edit with your content.<\/li>\n
  3. Import HTML from a cloud sharing solution.<\/li>\n<\/ol>\n

    You can also email an existing campaign into Builder.<\/p>\n

    On the home screen, navigate to the Send in a draft <\/b>button in the slider menu. On the following screen, you\u2019ll see your Litmus email address. Send your email from your email service provider (ESP) to this test address.<\/p>\n

    Once received, you\u2019ll find the email on your Litmus home screen. You can save this email address and send to it any time you want to create a new Builder project\u2014without having to manually copy and paste code.<\/p>\n

    When you see your email, hover over the name of the email and select Builder <\/b>to open up Builder and get to work!<\/p>\n

    Navigating Builder<\/h2>\n

    Litmus Builder contains a number of powerful tools for speeding up email development, testing, and sharing. Let\u2019s say you created your project from a template. Here\u2019s what you\u2019ll see:<\/p>\n

    \"Visual
    Visual Editor in Litmus Builder<\/figcaption><\/figure>\n

    The Visual Editor<\/b> allows you to leverage templates and code modules to easily build your email. This tool is perfect for team members who might not have strong coding skills.<\/p>\n

    Switch over to the code view, and you\u2019ll see this:<\/p>\n

    \"Code
    Code Editor in Litmus Builder<\/figcaption><\/figure>\n

    The code editor<\/b> on the left is where you write HTML and CSS for an email. It has a lot of features built-in to make development as easy as possible. We\u2019ll look at these in-depth in the next post.<\/p>\n

    The preview pane<\/b> on the right allows you to see previews of your email in 100+ different email clients, view changes in real time as you code, navigate your code using the Grid View, and toggle images on and off.<\/p>\n

    You\u2019ll also see a menu bar and toolbars above the editor and preview pane. While we\u2019ll dig into these toolbars more in the next post, let\u2019s get familiar with the different options in the menu bar.<\/p>\n

    The menu bar<\/h3>\n

    The menu bar is where you can access Builder-specific settings as well as take certain actions on your open email and Builder project. Here\u2019s everything you can do using the menu bar:<\/p>\n\"Litmus\n

    Visual <\/b>and Code<\/b> allow you to toggle back and forth between the visual and code editor interfaces.<\/p>\n

    In the Code<\/b> view, you\u2019ll see Insert<\/b>, which provides several options:<\/p>\n

    The Partial<\/b> option opens the Partials Library, which is where you can create, save, and update code partials<\/a> which can be pulled into any campaign (available in the code editor only). Partials are dynamic, so if you update a partial, those changes will propagate to any email using that partial. This is perfect for things that don\u2019t change often and are reused across email campaigns, like headers and footers.<\/p>\n

    The Snippet<\/b> option opens the Snippets Library, where you can create, save, and update code snippets<\/a> that can be used in any campaign. Unlike partials, snippets paste code directly into your email, so you can customize them on a per-campaign basis. Snippets are great for things like buttons, content sections, and even CSS styles.<\/p>\n

    The Image<\/b> option allows you to upload image content to include in your email.<\/p>\n

    UTM Codes<\/b> opens a simple screen that allows you to quickly and easily apply a tracking code to the link in your email.<\/p>\n\"UTM\n

    The Litmus Tracking<\/b> option opens a pop-up that helps you insert your Litmus Email Analytics tracking code\u2014which gives you insights into which email clients and devices your subscribers are using, where in the world your emails are being read, email read time, and other engagement metrics. Email Analytics is only available on Plus and Enterprise plans.<\/p>\n\"Create\n

    The Replace Template<\/b> option opens the Template Gallery, which gives you 60+ professionally built email templates to use as a starting point for your campaign.<\/p>\n

    Moving along our menu:<\/p>\n

    The Help<\/b> button opens Builder\u2019s help documentation in a new tab, where you can find frequently asked questions about our powerful email code editor.<\/p>\n

    The Save<\/b> button allows you to save your email and progress.<\/p>\n

    Where you see Last saved<\/b> with a date and time stamp, clicking on that link will bring you to a history of changes to your email, allowing you to see the evolution of your email campaign at a glance and revert back to a previous version in case something went wrong.<\/p>\n

    Share<\/b> lets you create a shareable link and\/or send a test email. We cover this in more depth in a later post in our Litmus Builder Essentials series: How Teams Can Use Our Email Builder<\/a>.<\/p>\n

    Click Export<\/b> to easily copy or download your HTML or sync your email to a supported ESP<\/a>. Once connected, your email will automatically stay up-to-date in your ESP every time you save in Litmus.<\/p>\n

    In the Visual<\/b> view, you\u2019ll see things a little differently\u2026<\/p>\n\"Litmus\n

    Templates<\/b> act the same as Replace Template, and you use Tracking<\/b> to insert your UTM code and Litmus Email Analytics code. To insert snippets and images, you\u2019ll add them from the Modules panel. Partials are unavailable in Visual Editor. You still have the Help<\/b>, Save<\/b>, and Last saved<\/b> functions. However, now you also get a counter clockwise circular arrow to undo your last step as well as a clockwise circular arrow to redo what you just rewound.<\/p>\n

    Now let\u2019s go over to the right-hand side of your menu, which is the same for both Visual and Code views:<\/p>\n\"Litmus\n

    The Share<\/b> button offers the option to share a public link to your email or send a test email.<\/p>\n

    Finally, the Export<\/b> button lets you sync your email from Builder to your ESP, copy the HTML from your email, or download HTML to store for future reference.<\/p>\n

    Setting Builder preferences<\/h2>\n\"Litmus\n

    From the code editor view, you\u2019ll see a gear icon above the code editor pane. Selecting the gear icon allows you to access the Settings<\/b> panel. The Settings<\/b> panel is where you can customize the Builder code editor to your tastes, as well as take advantage of some of the powerful tools that Builder has to offer.<\/p>\n\"Litmus\n

    Builder ships with a number of different color schemes which can be applied to the code editor. Using the Switch your theme<\/b> dropdown, you can choose the color scheme that best suits your preferred coding style. There are a variety of both light and dark themes available, with the classic Space Gray being the default.<\/p>\n

    The Font size<\/b> dropdown lets you pick a comfortable font size for the text editor. While the default 12px size works for most people, you can choose a larger (or smaller) font size to make reading text easier when building your email campaigns.<\/p>\n

    The other six toggles allow you to turn specific Builder features on and off.<\/p>\n

    Inline CSS<\/b> allows you to separate your HTML and CSS (which can make development easier) and compile it automatically. We\u2019ll see how this works in the next article in the Litmus Builder Essentials series.<\/p>\n

    Auto-complete<\/b> adds the ability to view a list of options for common HTML elements when coding. You can scroll through the list and select an element, which is then added to your code.<\/p>\n

    The Close tags<\/b> option enables the automatic closing of any open HTML tags within your document, ensuring that no rogue open tags affect the rendering of your email campaign.<\/p>\n

    Soft Wrapping<\/b> helps improve the readability of your code, while the Indentation<\/b> and Tab Width<\/b> options let you customize the editor to pick a side in the ages-old tabs versus spaces debate<\/a>.<\/p>\n

    Builder settings are account-specific, which is perfect for teams. Different team members can save their own personal preferences, without the fear of overriding those set by others.<\/p>\n

    Sharing emails in Builder<\/h2>\n

    Litmus Builder offers a number of ways to share your email campaigns, whether it\u2019s to a colleague for review, your own email account for testing, or your ESP for a final send. All of the options for sharing your email can be found in the top-right corner of Builder.<\/p>\n

    When you click on the Share button, you have two options to select: Get shareable link or Send a test email.<\/p>\n

    \"The
    The sharing options in Litmus Builder<\/figcaption><\/figure>\n

    The Get shareable link<\/b> option opens a dialog for you to share your email in three ways:<\/p>\n