Litmus Builder Essentials: Getting to Know Our Email Builder

[ 0 By

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.

Litmus Builder lets you quickly build and test on the email clients that matter most to your audience, and utilize reusable HTML and CSS code snippets and pre-tested templates to reduce errors and maintain brand consistency. It’s an ideal solution for individuals and teams alike that are looking to dramatically increase their productivity throughout the email creative process. It’s chock-full of features and tools to improve your workflow, and we want to make sure you’re comfortable with all of them.

With that in mind, we’re kicking off a three-part series on the essentials of using Litmus Builder. In Part I (which you’re reading right now), we’ll 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.

Let’s get started and look at how Litmus Builder can help you in your own email marketing.

Starting a new document

When first accessing Litmus Builder, you’re presented with the Builder Dashboard, which is where you will find all of your Builder projects. Projects are collections of HTML emails and are handy for organizing different types of emails for different purposes (e.g. marketing vs. transactional) or collecting specific emails together, like all of your weekly newsletters for a specific month. The Dashboard looks like this:

builder-essentials-1-builder-dashboard

You can sort your projects using the filters at the top and can even search for specific projects, which can be helpful if you do a lot of different email marketing campaigns.

New email creation options.

There are a few ways to start a new project in Builder. If you have an existing HTML file, you can drag and drop it from your computer directly into the Dashboard—Builder will import and open the file, allowing you to start working on it immediately. You can also press the green Create a new project button in the top right. You’ll see a modal pop open that allows you to fill out some information about your project. Builder allows you to:

  • Copy/paste your code into a new project (this comes in handy when you’d like to reuse code from another email, for example).
  • Write your HTML from scratch using an empty HTML file or one of a number of built-in, pre-tested templates we provide for you.
  • Set a project name for easily identifying a project (which is super helpful for teams).

You can also email an existing campaign into Builder. Navigate to the Send your draft email tab and create your own Litmus Builder email address. You can save this email address and send to it anytime you want to create a new Builder project without having to manually copy and paste code.

Once you have set up, press the green Start testing button to open up Builder and get to work!

Navigating Builder

While Builder looks simple at first glance, it contains a number of powerful tools for speeding up email development, testing, and sharing. Let’s say we created a blank HTML document in our project. Here’s what you’ll see:

The three main views in Builder.

Builder has three main sections in the workspace, which I’ve numbered above.

  1. The sidebar is used for navigating between multiple emails in a project, creating new emails, and uploading assets, like your images, for your emails.
  2. The code editor 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’ll look at these in-depth in the next post.
  3. The preview pane allows you to view previews of your email in 70+ different email clients, view changes in real time as you code, navigate your code using the Grid View, and toggle images on and off.

You’ll also see a menu bar and toolbars above the code editor and preview pane. While we’ll dig into these toolbars more in the next post, let’s get familiar with the different options in the menu bar.

The Menu Bar

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’s everything you can do using the options on the left side of the menu bar:

The Builder file menu.

The File menu allows you to create and save emails, download the currently open email, and access the Settings menu.

The Templates option opens the Template Gallery, which gives you 80+ professionally built email templates to use as a starting point for your campaign.

The Partials option opens the Partials Library, which is where you can create, save, and update code partials which can be pulled into any campaign. 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’t change often and are reused across email campaigns, like headers and footers.

The Snippets option opens the Snippets Library, where you can create, save, and update code snippets 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.

Tracking management in Builder.

The Tracking option opens the Tracking Manager, which allows you to quickly add either UTM parameters to links in your email or generate a tracking code for Litmus Email Analytics, which you can quickly copy and paste into your email.

The Timeline option opens up a history of changes to your email, allowing you to easily see the evolution of your email campaign and revert back to a previous version in case something went wrong.

The View menu allows you to quickly change the font size of the editor, toggle the sidebar browser, and open the Subject Line Checker.

Finally, the Help option opens Builder’s help documentation in a new tab, giving you easy access to frequently asked questions about our powerful email code editor.

Setting Builder preferences

As mentioned previously, the File menu allows you to access the Settings panel. The Settings 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.

builder-essentials-1-settings-panel

Builder ships with a number of different color schemes which can be applied to the code editor. Using the Switch your theme dropdown, you can choose the color scheme which 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.

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

The other six toggles allow you to turn specific Builder features on and off. Inline CSS allows you to separate your HTML and CSS (which can make development easier) and compile it automatically. We’ll see how this works in the next article in the Litmus Builder Essentials series. Auto-complete 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. The Close tags 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. Soft wrapping helps improve the readability of your code, while the Indentation and Tab width options let you customize the editor to pick a side in the ages-old tabs versus spaces debate.

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 sets by others.

Sharing Emails in Builder

Litmus Builder offers a number of ways to share your email campaigns, whether it’s 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.

Sharing options in Builder.

The Share button opens a dialog that allows you to share your email in three ways:

  • Publish, which generates URLs which you can use to share Email Previews, either with or without the HTML of your campaign. You can even select which email clients to show on the published page.
  • Email, which lets you email a copy of the campaign, giving you quick access to previews in your own inbox.
  • Embed, which gives you code to embed the Builder doc right in a web page, like below:

The Send Test button simply gives you quick access to the Email dialog mentioned above.

Finally, the Sync to ESP button allows you to quickly sync your email campaign with an ESP of your choosing. We currently offer a number of popular ESPs with which to sync, including Salesforce Marketing Cloud, MailChimp, Campaign Monitor, IBM Watson Campaign Automation, Marketo, Constant Contact, Pardot, and Eloqua.

ESP Sync will push your HTML and images to your ESP, properly writing image paths in the process, giving you the quickest possible route from Builder to final send.

Get started with Builder today

Now that you’re comfortable with Builder’s interface, why not take it for a spin? It’s the only code editor built specifically for email professionals and one of the most powerful ways to speed up your workflow, all while ensuring the highest quality standards in your own campaigns.

Try Litmus for 7 days and see how Builder can make your life easier.

Get to know Litmus Builder

Quickly build and test on the email clients that matter most to your audience, and utilize reusable HTML and CSS code snippets and pre-tested templates to reduce errors and maintain brand consistency.

Get started with Builder →

 

Learn More in our Litmus Builder Essentials Series