How To Use CiviCRM’s Mosaico Extension To Create Responsive Emails

At Wanna Pixel, Inc., we have been excited about Mosaico, a drag and drop email builder native to CiviCRM, for quite awhile. Most designers and nonprofit staff alike have struggled to use the CiviCRM mailing feature to create responsive email campaigns. Three years ago, I wrote an article about the responsive template I created for CiviCRM users, hoping to help ease this struggle.

Is #mosaico by @civicrm @teamcompucorp @vedaconsulting the email-builder for #civicrm? via @wannapixelClick To Tweet

Before Mosaico, there were two options for email building when using CiviCRM.

• use responsive html templates and spend hours editing them whenever you wanted to make a change
• Integrate with MailChimp and lose some data and token access

CiviCRM, Veda Consulting, and CompuCorp worked together to create a beautiful extension for CiviCRM’s mailing feature which integrates with Mosaico, a Drag-N-Drop tool created by VoidLabs.

Our big question was: Will our creative and development team be able to use, recommend and train our nonprofit clients to create satisfactorily beautiful emails without having to integrate with a third party email builder such as MailChimp, or painstakingly editing raw HTML templates?

With a native #email builder like @mosaicoeditor for #civicrm, you have access to all the tokens. Click To Tweet

In this tutorial, I’ll use a Wapix welcome email to demonstrate creating a responsive email with Mosaico.

Install Mosaico by following the steps described here, or by downloading directly from Github and installing it at your CiviCRM website. (We downloaded version 2.0 beta it from github. There was a commit shortly after on September 4th).

As you normally would, navigate to Mailings > Mosaico Templates.

 

For the tutorial, select New from base template.

The dialogue will ask you to give a new name to your template. Give it whatever name you want. Something like “My Awesome Nonprofit’s Name,” or “Monthly Newsletter,” or “Experiment,” or, “The Fox and the Hound.” Whatever.

Here’s the fun part. You get to drag and drop elements.

The very top element is a header. It’s a good choice for your organization logo.

There is a little blue upload icon if you hover over or click on the placeholder image. Click on this icon and navigate to your logo file. Make sure this is an optimized png file.

I didn’t upload one that is exactly 258×150. The logo was constrained to the width of the placeholder, but the height is not constrained, which is a good thing.

Once you have your logo uploaded, you can change the background color. I don’t like the way my logo looks against the medium gray background, so I’m going to change it to light gray.

Click on Style.

There is a little blue toggler that switches the style tool from the single block to global. The 3 blocks represent global styles and will change all the blocks to the style you choose. It is already set to global. I recommend leaving it as global for things like background colors and text styles, so your email doesn’t look like a patchwork quilt.

The result of changing the color.

Switch back to Blocks.

For this tutorial, I am going to select an image block, because I like that it is full width.

Follow the same process to change the placeholder to your image as you did to upload your header.

There are some pretty cool options with the images, which you can see above. You can choose to “Show Gutter” or not. I choose “not,” because I think full-width images in emails look much more modern and they are my preference.

You can also link the image and set the alt text for accessibility.

There is also a way to show the preheader or not. I’m not sure why this option is right here, but it is nice to know that it exists. I usually leave the preheader on.

I dragged the content block “Title,” above the image and a content block for “Plain Text,” just below it. I edited the style for both.

I made the title our brand color blue, and I changed it to bold.

I changed the plain text to a font size of 18 but left the color.

Now let’s add your first call to action!

I added a “Button.” I clicked on the text to edit it directly in the editor. Then, I clicked on Styles. I made my button background color match our Wapix brand blue, and I changed the border radius to 1. (I’m not a fan of border radiuses in general, so I like 0 or 1.)

In the next step, I added a link to the button.

I also added the same link to some of the text in the text block above. I clicked on Style to change the global link settings, so that they are the brand color blue. Remember to check to see if you are in global settings.

Our email is almost done. Let’s add a footer from the block sections.

I dragged the footer over, which contains a social block. Adding your links to the social block is demonstrated below. I also turned off “Google Plus,” because we don’t use it much.

With the design all done, it’s time to add tokens to our email! This is where Mosaico has a huge advantage over using a third party email, such as MailChimp. CiviCRM has hundreds of tokens we can use to make our email campaigns more user–friendly and database–friendly.

I changed the text block on the left from “address and contacts,” to instead include a CiviCRM token.

To do this in your email, insert your cursor inside the little text block and select Tokens. When the token box comes up, enter “domain” in the search box. This will bring up all your domain tokens. Select the first one, domain address.

Now you have the domain address inserted in the footer.

Let’s add at least one more token to our email.

In my first title block, the one that says welcome, I inserted my cursor in front of the word welcome.

Search for “name” in the popup box this time. Select contact first name.

Check the mobile view of your email by clicking on the little phone in the gray toolbar. (You have to have your screen resolution set to 1621 or higher. I think this is too bad, but I’m sure it’s something Mosaico will improve in the future.)

Pretty impressive mobile view!

Click Save.

Go to the CiviCRM menu and select Mail > New Mailing. It is the top button, which says “New Mailing,” and not the bottom button which reads “New Mailing (traditional).”

Fill in the mailing name (which is the name that you alone will see), the from address, and the recipients.

In the subject, follow the same steps of inserting your cursor where you want your next token. Select contact first name again.

Select your design from the saved templates below.

When you select your template, it will bring you to the same editor you were in before. If you want to make changes here, you can. Keep in mind none of the changes you make here will overwrite your template, but will simply make the changes in this email campaign. (If there is one thing I could change about Mosaico, it would be to have the option to save the changes over the template if you want, as an option. However, it’s always a worry that someone will accidentally overwrite the template when they shouldn’t, so perhaps it’s a good thing that this option is not available).

If you want to edit the template permanently, it is best to save your mailing, exit, and select the template under Mailing > Mosaico Templates. Then save the template and come back to your email. This will prevent you from thinking you’ve made important general changes only to see that they have not been saved to the template. Edit in the mailing only when the change applies only to that mailing.

When you are done, click Close, to return to your general email settings.

Scroll down and choose Save Draft, Send Immediately, or Send On.

If you saved your email as a draft to send later, you can find it under Mailings > Draft and Unscheduled.

Congratulations! You’ve created your first Mosaico email.

Summary

So how does Mosaico compare to MailChimp?

In database use:

Of course, there’s no comparison here. Mosaico is an easy win, because it’s integrated fully with CiviCRM and not a third party tool. All of CiviCRM’s wonderful tokens are available to use, which is going to make your email campaigns more user-friendly and much easier to set up. Here are a few reasons Mosaic is superior to a third party tool.

• Tokens are much easier to use.
• Your email content will be saved in your CiviCRM database.

Native email–builder like #mosaico is better for your database. #civicrm via @wannapixelClick To Tweet

In design:

I have to admit, I’m impressed. The developers have done an incredible job in creating this beautiful Drag and Drop extension for CiviCRM’s email tool.

And here’s a conclusion I didn’t think I’d be coming to before I opened Mosaico.

I prefer the Drag and Drop interface to MailChimp’s. MailChimp is my favorite independent email campaign creation tool, so this is saying a lot.

Here are a few reasons why I prefer Mosaico.

• When you are in a design block in Mosaico, it is extremely easy and intuitive to toggle between global and local style settings. By contrast, in MailChimp, there is a lot of saving and exiting and navigating to your global styles. Then when you do navigate to global styles, it is divided up among things like page, content, body, etc. I’ve always found it a bit confusing and never can quite figure out where some of my styles are coming from. Mosaico makes this extremely simple, always keeping you inside of one panel.
• In Mosaico, you can edit all headings, links, and content in the WYSIWYG editor. In MailChimp, it always opens up a separate window to edit, adding one extra click and a slight delay as well.
• I found editing the background and inner table of the email easier in Mosaico. Sometimes in MailChimp, I end up with more layers and wrappers than I mean to.
• In short, Mosaico is simple, containing everything you need and nothing you do not need.

In a nutshell, for everyone longing for a way to create native, responsive emails for CiviCRM, Mosaico is the resounding answer.