How To Create Columns In Mailchimp

Many of our customers use MailChimp for their marketing email campaigns. MailChimp is a terrific product with excellent deliverability and a plethora of useful features, including pre-designed layouts and fully developed, colorful themes. You can create an effective email campaign without knowing a line of code — just drag and drop content blocks and upload images. Done.

But, if you don't know a line of code, you may find it hard to send the perfectly-tailored message to your subscribers. One of Marion's services for email marketing in Austin and Houston is custom email design. We design your email, convert it to HTML, then send your unique campaign using MailChimp's "Code Your Own" feature.

Well, unless you're using the free MailChimp account, that is. Cue sad music.

MailChimp Custom HTML Workarounds

I recently had a Houston email marketing assignment to convert a customer-approved email mockup from Photoshop into HTML, then use the customer's free MailChimp account to send the campaign. But, it turns out, I would not be able to write the HTML and paste it into a Code Your Own template. Because, in the free MailChimp account, you only have access to some of the layouts and themes and no access to the Code Your Own environment at all.

I used the modifier "customer-approved" in the previous sentence for a reason. It would be tough to go back to a client at this point and say we can't deliver as promised. They're expecting us to send the design he paid for through MailChimp. Tomorrow.

I nervously considered options. Of course, it was due the next day, because … life. (Cue tense music, probably with a high sustained violin and repetitive synth base slowly increasing in volume.)

The mockup included a three-column section that needed to stack vertically on mobile devices and a couple of other design features not similar to any content blocks in the MailChimp layouts. I looked at the available templates to see if any were even close to the mockup. Other than the logo at the top, none were a good match. Several rows deep in the layouts are some three-column designs, but they may as well be on Jupiter because they are for paying customers only.

Using the Code Block

I was somewhat relieved to find the layouts I could access include the Code Block:

MailChimp custom HTML email

The Code Block lets you drag a section of HTML into your email to display content not otherwise possible with the other blocks. For example, you may need to show an image edge-to-edge in your email, i.e., "Flat Design" style. You can't do that with the Image block, it will always add space around your images. But with the Code Block, you control all the display parameters.

Cue Happier Music: Sorry to ruin the suspense, but I tamed this beastie with a free MailChimp layout. Here's how I did it:

I like to start with the hardest problem first: The three-column responsive section. I already knew that MailChimp has some code you can re-use for this purpose, available in its support section. The only problem is the MailChimp code shows a two-column layout. Would it also render three columns?

I knew I'd feel a lot better about the whole thing if that one piece fell into place. I copied the HTML and CSS from the Responsive Columns how-to and opened it in my code editor. The two-column version used a percentage width (50%) on the columns. So, I copied the middle column and pasted it into the code where it should go, then changed the widths to 33%.

So far, so good, I could now see three columns with nothing broken or displaying weirdly. I could also see that the images used in the tutorial were set to fixed widths, which made the columns too wide for the message. Changing those image widths to 100% (so they would fill their containers and not exceed them) did the trick, everything fit.

To test it, I pasted my code into the Code Block, then used the built-in MailChimp previewer to see if the columns stacked on mobile device widths. All looked good there, so I sent it to my email and was relieved to see the three-column section behaving responsively in an actual email.

Finishing Up Your Mailchimp Custom Email

The top of the mockup was a Flat Design consisting of borderless images next to colored boxes of text with no space between anything. Code Block to the rescue again! This is much simpler than responsive columns.

Upload your images to the MailChimp library and copy the source URL. The code block itself provides some sample code for images and text. The only "gotcha" is making sure your image is already sized to the right width for the layout. MailChimp layouts are 600 pixels wide. Even though a larger image scales to fit the width in your previews, it may exceed the width of the layout in email clients, leading to all sorts of problems.

All that was left was another two-column section above the three-column section. This was not a pair of 50% columns. I revised the percentages to match the mockup. Easy. The same code I borrowed from the support section worked correctly.

Details

Having big problems resolved reduced my stress. Of course, there are a hundred details in any beautiful design, including fonts, text size, line-height, colors, links, buttons, and so on. MailChimp has adequate tools for getting the details right, even in the free account.

I love the Code Block. Just … please …………. stay free.

Let MARION Help with Your Internet Marketing Today

If you're in the market for a Houston internet marketing company, speak with a strategist from MARION's team today! We have almost 40 years of marketing experience serving businesses in Texas and have a proven track record of traditional and digital marketing success.

Contact us today to schedule a free consultation, and learn how we can help your business grow today!

how to run an online marketing campaign

About Jay Ferranti

Jay Ferranti brings lengthy experience to solving problems for customers through design and programming. Out of necessity, Jay designed and built his first website in 1998. Since then he's continuously worked in this field while adapting to myriad changes as they happen. When not working, Jay pursues other passions including art and music, and is an avid cat lover.