{"id":4450,"date":"2021-06-11T11:48:32","date_gmt":"2021-06-11T15:48:32","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/litmus-builder-essentials-developing-in-our-email-builder\/"},"modified":"2025-12-22T11:23:39","modified_gmt":"2025-12-22T16:23:39","slug":"litmus-builder-essentials-developing-in-our-email-builder","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/litmus-builder-essentials-developing-in-our-email-builder","title":{"rendered":"Litmus Builder Essentials: Create in Our Email Builder"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

In the last post in our Litmus Builder Essentials series<\/a>, we took a spin through Builder\u2019s interface, learning about all of the different sections of Builder, some of the menu and settings options, and what exactly those little icons in the upper-right corner are. Now that you\u2019re comfortable with what goes where in Builder, it\u2019s time to dig into some of the features that make developing emails in Builder a wonderful experience.<\/p>\n

In this second installment of Litmus Builder Essentials, we\u2019ll take a deeper look at Builder\u2019s code and visual editors, some of the features designed specifically for email development, and how to use Builder to speed up your development workflow.<\/p>\n

Meet our email editors<\/h2>\n

Litmus Builder is split into three main sections: the code editor, the visual editor, and the preview pane.<\/p>\n

For most, the main work in Builder will occur in either the code or visual editor.<\/p>\n

The code editor<\/h3>\n

The code editor is where you write the HTML and CSS for your email.<\/p>\n

Unless you\u2019ve started with a new template or copy and pasted your own code into your Builder project, the code editor will be blank by default.<\/p>\n

\"The
The code editor and preview pane in Builder<\/em><\/figcaption><\/figure>\n

If you\u2019re experienced with coding emails, you can start writing your code directly in the editor\u2014or copy and paste an email from a local file or your text editor of choice.<\/p>\n

If you start a new blank document but later decide you need a template to build on, go to the menu bar to click Insert<\/b>, then . This will open the Template Gallery, where you can choose from one of your own saved templates or from a library of elegant, pre-tested templates for a range of use cases that you can customize for your next campaign. Select a new template, and Builder will load that template\u2014images and all\u2014into the code editor.<\/p>\n

The visual editor<\/h3>\n

The visual editor allows coders and non-coders alike to quickly and easily build on-brand emails using templates<\/a> and modules<\/a>. Creating those for Visual Editor works with any HTML\u2014and doesn\u2019t require lengthy setup or complex, proprietary syntax to learn. It doesn\u2019t add anything extra to your code either.<\/p>\n

To get started, open an existing email in your Litmus account, or start a new email using a template. You can do this either when you first create a new email or by going to your existing email and clicking on the Templates<\/b> button in the Visual Editor menu.<\/p>\n

Then it\u2019s just a matter of selecting an element from your email in the preview pane to edit in the Visual Editor on the left side.<\/p>\n\"updating\n

For more details on how to build emails using Visual Editor, check out this blog post: Build More Quality Emails, Faster with Litmus\u2019 Visual Editor<\/a>.<\/p>\n

And if you\u2019re a Litmus Enterprise customer, you also have the flexibility to drag and drop modules<\/a> or content blocks to make each email its own without sacrificing quality.<\/p>\n

Coding views: HTML and CSS<\/h2>\n

Builder allows you to edit in both HTML and CSS. By default, the code editor in Builder opens a document in the HTML<\/b> view, as this is what most email designers and developers are familiar with. In the HTML view, you can write HTML and CSS to build your email. All the changes you make to your code display to the right in the preview pane in real time.<\/p>\n

Builder\u2019s code editor has a second view, though. The CSS<\/b> view allows you to split your HTML and CSS so that you can work on them separately.<\/p>\n

\"switching
Switching between HTML and CSS views<\/em><\/figcaption><\/figure>\n

While separating HTML and CSS makes the coding process much easier, many email clients don\u2019t support external style sheets\u2014or even CSS\u2014in the head of an email. Instead, they require styles to be applied directly to HTML elements in each line of HTML.<\/p>\n

Manually inlining your CSS is a cumbersome process: Whenever you make a change to a style tag, you\u2019ll have to update it in each line of your code. Litmus Builder automates that step for you. Keep your HTML and CSS separated when building your email and leave the process of inlining your CSS<\/a> to Builder\u2019s automatic CSS inliner tool.<\/p>\n

You can turn on CSS inlining in Builder in the Settings<\/b> menu, accessed from the gear icon in the code editor panel. Once turned on, Builder will automatically add your CSS to your HTML document\u2014both while you\u2019re designing and when testing your campaigns using Email Previews<\/a>.<\/p>\n

Once you have a finished email campaign, Builder compiles your HTML and CSS together for copying and pasting into your ESP. Grab the compiled code by clicking Export<\/b>, then choosing Copy HTML or Download HTML, which will download the email and any uploaded assets\u00a0 directly to your computer.<\/p>\n

When copying your HTML, you\u2019ll see the compiled email size. This can give you insight into how much of an impact using partials, CSS inlining, and other features have on the total weight of your markup. Use this to see if your email\u2019s weight could impact loading speeds\u2014and make sure you\u2019re under Gmail\u2019s 102KB display limit to prevent your email from being clipped or cropped.<\/p>\n

\"file
File size information when compiling<\/em><\/figcaption><\/figure>\n

While relying on Builder\u2019s CSS inliner is one way to speed up email development, Builder has a few more tricks up its sleeves.<\/p>\n

You may remember from Part 1<\/a> that the Settings<\/b> menu has two other toggles besides Inline CSS: Auto-complete<\/b> and Close tags<\/b>. These two options, when turned on, allow you to code more reliable campaigns faster.<\/p>\n

Auto-complete<\/b> allows you to view a list of options for HTML elements when typing in the code editor. This can be helpful for those times when you forget a specific HTML element. Just start typing and Builder will show you a list of elements you can select to pop into your code.<\/p>\n

\"auto-complete
Auto-complete in action<\/em><\/figcaption><\/figure>\n

Tired of writing the same lines of code over and over again? Speed up your development process with the addition of autocompletion support for pre-existing CSS and images. For any pre-existing CSS (whether embedded in style block, in the CSS tab, or in partials), the values will be available as an autocomplete option when using class or id attributes.<\/p>\n

Additionally, any images uploaded to Builder will have the image filename available as an autocomplete option for the source attribute, along with its width\/height dimensions for width\/height attributes and CSS properties.<\/p>\n

The Close tags<\/b> option automatically closes HTML tags while coding. Missing closing HTML tags can cause a variety of issues in emails, so Close tags<\/b> is a good way to ensure you don\u2019t run into any rendering problems due to a rogue, open tag.<\/p>\n

One of my favorite features of Builder\u2019s code editor is its built-in Emmet<\/b> integration. Emmet allows you to type shortcuts which are then expanded into full code snippets. While Emmet was originally built as a plugin for desktop text editors, we\u2019ve built Emmet right into the code editor\u2014allowing you to take advantage of the power of Emmet without having to download or install anything on your own.<\/p>\n

\"Emmet
Emmet speeding up coding<\/em><\/figcaption><\/figure>\n

We\u2019ve put together a quick guide to help you<\/a> get started with using Emmet in your own emails.<\/p>\n

There are a few more features of Builder that allow you to speed up your development workflow, including using Snippets and Partials<\/b> and Tracking Manager<\/b>. We\u2019ll take a more in-depth look at those in our final post<\/a> of the Litmus Builder Essentials series.<\/p>\n

Test your emails<\/h2>\n

Once you start creating your email in Builder\u2019s code or visual editor, you\u2019ll want to preview and test it in actual email clients. That\u2019s where the preview pane comes into play. Builder\u2019s preview pane<\/b> allows you to preview, navigate, and test your campaigns in 90+ different email clients, devices, and browsers using Email Previews<\/a>.<\/p>\n

\"The
The Browser view of an email<\/em><\/figcaption><\/figure>\n

By default, the preview pane loads the Browser<\/b> view of your email. This view uses your web browser\u2019s rendering engine to display your email and allows you to quickly see changes to your email as you build. You can even test things like links and interactivity within your email.<\/p>\n

The Browser<\/b> view in the code editor also allows you to use some of the tools in the toolbar of the preview pane.<\/p>\n

In the preview pane toolbar, you\u2019ll see a gear icon. When you click on the gear, a drop-down menu appears with the following options:<\/p>\n