Power Up Your 17 Hats Email Design With Mailchimp!

Power Up Your 17 Hats Email Design With Mailchimp!

Here at Tickyboom we use 17Hats to manage all the day to day business. 17Hats is amazing at helping us run our business, and make sure we can keep track of everything. One of the things that 17Hats does is allow you to send emails from your dashboard. This article will help you make some sweet looking email designs that are fully branded with your company info – and show of your creative style! All you have to do is sign up for Mailchimp, and we will show you the rest from there!

Step 01 – Go Bananas!

The first step is to sign up for a Mailchimp account. Once you have that done, click on ‘Templates’ from the upper left navigation. Here you will see your email templates, and this is where the magic happens. If you have first signed up, you should have one email template provided by Mailchimp. Whatever the case, you can click on ‘Create Template’ to create a brand new one. As you will see there are many templates to start you off. Choose a starter template and get to designing your email. This will be the step that takes you the longest, so have fun, this post will be waiting for you.

Step 02 – Save Your Design

After you are done creating your amazing template on Mailchimp, click ‘Save and Exit’ in the bottom right. This will take you back to your templates list, and you should now see your recently saved template at the top. Easy peasy right?

Step 03 – Export De Code!

In the table area where your email template is, scan over to the right and you will see a grey button with ‘Edit’ and a down caret (triangle) next to it. Click the caret and you see ‘Create Campaign’, ‘Preview’, ‘Export as HTML’, ’Share’, ‘Replicate’. You want to choose ‘Export as HTML’. Don’t worry about the warning, all that is saying is that if you plan to re-import in, the styling may not work. You aren’t doing that so click on ‘Export Template’. Getting closer!

Step 04 Hug Your Code

After you click on ‘Export Template’ go to the file you downloaded. You can open the file with anything from Text Edit, to Coda. We use Coda, as it is a little better at handling code. But don’t worry about that. The key to this step is you are stripping out two chunks of code before you paste the template into your 17Hats email template.

The first chunk you are taking out is the MC Subject text. What this is, is a bit of code Mailchimp uses to give you control over the Subject line text. Since you aren’t using Mailchimp to send your email, it will look borked. So, look for this bit of code near the top:

Delete this line of code!

then highlight and delete. Buh bye!

The second chunk of text we are looking for is the MC Preview Text. Like the code above, this is Mailchimps way of giving you control over what your recipient will see in the mail preview. Since you aren’t using Mailchimp to send email, the code needs to go bye bye or else there will be borkedness. Scroll down a bit and look for the following block of text:

Delete this chunk of text!

Highlight and delete. Buh bye! That is all you will need to do. Click save, and then after the document saves you will want to select all, then copy all of what you have highlighted. You are so close to Email Design bliss.

Step 05 17Hats Love

You have your expertly crafted email design as code, you have stripped out all the MC specific code, and have it all copied and ready to paste. You will then go to your 17Hats account, login, and then go to ‘Documents & Emails’ which is the icon with the two papers in the upper right next to your logo. Once you are there, you will see all of your email templates to use when communicating with your clients. Click on an email template to edit it, and you will see your bland plain text editor with the content you either inputted, or that 17Hats provides as a starter template. If you want to still use that wording then I would copy everything and paste into a text document. (You will need to go back and copy the email code again from step 4 as you lost that data when you copied the 17Hats content.) You are using that as reference for wording and token use when you apply the new email design. Ok, ready for the magic?

Step 06 Import Dat Code

To recap, you are in a 17Hats email template, you have copied the content for reference (tokens and what you are saying) into a text document, and then went and re-copied the new from Mailchimp email design code. So much copying and moving around, right? It will be worth it! Now, click on the two sideways triangles in your TinyMCE Editor(Where you choose font sizes, etc.). Boom, now you are in the code view. Select all of the code that is present now, and paste in the new email design code. What just happened is that you selected all of the 17Hats code and overwrote it with the new design you made in Mailchimp. Now, click those triangles again and you will see your email design in all it’s glory, sort of. 17Hats editor makes you see any padding or tables present, so your design will look a little odd, but never fear, that is only that way in the editor, and when you send a live email, it will look like how you designed it.

Step 07 Update Content + Test

Go ahead and update the data as you normally would by using the text document as reference for what you want to say in the email, and what tokens to use. Then, click ‘Save’ once you are done. Boom, overtime that automated email gets sent out, it will be all designed up, and impressing your clients. To make sure all is good, send your self a test email, and you will see what your client sees. Fun, right?

Don’t have 17Hats yet?

We think 17Hats is the bees-knees for managing your business from collecting leads to bookkeeping. If you don’t have it yet, let us extend a discount to you by following our affiliate link: https://17hats.com/card/pwfdxbrnfz – This link will get you a nice discount. Consider it a gift from us. Enjoy rocking the day!

#bye

More Tutorials  //  Back To All Tutorials →

Power Up Your 17 Hats Email Design With Mailchimp!

Power Up Your 17 Hats Email Design With Mailchimp!

Here at Tickyboom we use 17Hats to manage all the day to day business. 17Hats is amazing at helping us run our business, and make sure we can keep track of everything. One of the things that 17Hats does is allow you to send emails from your dashboard. This article will help you make some…
How To Use Asana Video Tutorial Series - Tickyboom Design

How To Use Asana: Video Tutorial Series

 Project Management Royalty We use Asana for project management. It is free, and easy to use. It greatly helps us keep our projects running smoothly, and gives you, the client, an easy way of keeping track of your tasks. We did a quick video tutorial series on how to use Asana especially for you,…
Beaver Builder Tutorial - Responsive Fun How To's

Beaver Builder Tutorial – Responsive Fun How To’s

 In this tutorial, I attempt to show you the fine ways of using responsive options in Beaver Builder. I also run into a sort of bug, and learn how to fix it. To clarify the issue, I have never run into the issue as I use whole number for responsive, and use finer detailed…
Beaver Builder Tutorial - Page Templates + How To Use Them

Beaver Builder Tutorial – Page Templates + How To Use Them

 This video will help you with learning how to use Page Templates in Beaver Builder. I also ramble on about designing in browser and other web design geekery. I hope this is helpful for you. As promised a list of resources: Beaver Builder – https://www.wpbeaverbuilder.com Ultimate Addons For Beaver Builder – https://www.ultimatebeaver.com/ Beaver Extender:…