Modular Building in Litmus Webinar Recording

We’ve been talking a lot about modular building lately—and that’s because it’s helped us save a lot of time coding.

As in, build-emails-in-half-the-amount-of-time time saved.

In this webinar, Carin Slater (Email Marketing Specialist at Litmus) walks through how Litmus implements reusable code modules to build emails faster—and shares her advice on how you can get started with modular building.

Didn’t make the live webinar? That’s OK. We recorded the whole thing. Watch the recording here:

Q&A

We’ve highlighted some of the questions from the webinar, along with our responses, below.

How do email marketers insert modules and edit content [in Litmus] without breaking things?

Great question! This is where modular building can really empower email teams that vary in coding knowledge. Once an email developer creates modules, non-coding team members can easily insert modules into a template. When you’re in Litmus Builder, navigate to the code editor (you’ll still see the visual on the right-hand side). Click the Insert button to add your Snippet or Partial.

To edit the module, navigate back to the Visual Editor. In the preview panel, simply click on the image, button, or text and update in the field that shows up on the left.

Do you have any recommendations or best practices for organizing templates, modules, snippets, and partials for an agency with dozens of clients?

There are a couple ways you can do this. If you’re on an Enterprise account, you can organize your modules into Categories. Since you can tag more than one category, you could categorize “Button” and “Client A.” You could also use naming conventions like Acme-Inc-Button-Green to cluster all modules that pertain to a particular customer. Many of our agencies that use Litmus leverage subaccounts for each of their customers, building out the Design Library within that brand’s subaccount.

Here’s a quick walkthrough of how you might implement each of those options:

How are you accounting for Dark Mode in your Design Library?

We include Dark Mode classes in the header (which we create as a partial). Then we include the classes as necessary in the snippets. For example, we have the background color class in the partial:

.darkmode { background-color: #262524 !important; background: #262524 !important; }

And then in any snippets with a white background we’ll include that class:

<tr>

<td class="darkmode" align="center" valign="top" style="padding:20px; background-color: #ffffff;">

</td>

</tr>

Does the code editor retain your indentation when inserting snippets?

Yes and no. If you use triggers to insert your Snippets, your indentations will remain. However, if you use the Insert option in the code editor, the indentations will be removed.

What advice would you give to someone getting started?

In the eternal words of Carin, “Just do it. It can be time-consuming and a pain in the butt, but it’s worth it.” You can start with micromodules—headers, body copy, buttons, etc. Save things as you go that you can repurpose. Those micromodules will help save bits of time, and they’ll also lend themselves to building more macromodules.

Recommended resources

Shannon Howard

Shannon Howard was a Customer Marketing Manager at Litmus

You might also like