Tutorial: How to make a responsive photo collage in email

Photo collages (also called photo galleries) are a great way to add visual muscle to your email campaigns.

Readers increasingly scan¬†emails on mobile devices while they’re on the go. With¬†only a few seconds to capture subscribers’ attention, photography is a great way to make an impact (especially if you’re in the¬†food or fashion industries, where product pictures can make or break a campaign).

A photo collage in email is the perfect way to display stunning images and tell a compelling visual story while avoiding the pitfalls of a single-image email. With great stock photos now easier to get than ever, even free of charge (we particularly like¬†Pexels), you’re in the driver’s seat.

Pexels free stock photography

Today we’ll show you how to build a beautiful, responsive photo collage in email so you can design a message that looks awesome and converts.

Inspiration for our photo collage in email

Many subscription confirmation emails look the same, but recently we took a look at how some brands are breaking the mold by giving subscribers a warm welcome and standing out from the crowd (on that, see Design a standout subscription confirmation email).

One of them came from¬†Cook Smarts, a company that emails¬†cooking lessons¬†and recipes. After signing up for their mailing list, we received this confirmation email. The original, high-quality images made our mouths water. The¬†photo collage¬†serves as a delicious preview for the meal plans to come. What¬†a great way to get readers to tap¬†“Yes, subscribe me to this list”!

Screen Shot 2016-01-10 at 6.06.44 PM

But when we checked out the email on iPhone, we noticed it wasn’t responsive.

cooksmarts mobile

The text doesn’t get any larger (it’s actually a bit hard to read), and the photo collage is all one image, so it scales down significantly to fit the screen’s width. Sometimes, not having a responsive collage is¬†okay‚ÄĒyou might want the images in your collage to remain in place, even on a small device. It depends on¬†the amount of detail you want to maintain and if losing that detail due to scaling is okay for the purposes of your message. If you make a collage that’s a single image, you’ll have to do it in Photoshop or a similar program, but you can make a totally responsive photo collage entirely in our drag-and-drop BEE email editor, without needing to pre-format. Here’s our quick video recap of today’s workshop:

Tutorial: How to build a responsive photo collage

We recreated the basic structure of the Cook Smart email in the BEE editor to get started. Starting with a basic single-column layout, we brought in the logo as an image for the header, formatted the email background color to gray and the content background to white, and copy-and-pasted the text into the email. We also formatted our bulletproof CTA button. (For tips on how to make these formatting changes, check out our post on modular design and HTML colors in email).

Screen Shot 2016-01-15 at 4.40.56 PM

Setting up the photo collage structure

What we need to do next is set up the structure of the photo collage. While so far our email is a single-column layout, we’ll need to add a two-column structure to arrange our photos. From the Structure menu, we’ll drag one in.

Screen Shot 2016-01-15 at 4.50.12 PM

Now we have a placeholder for our content.

Screen Shot 2016-01-15 at 4.49.43 PM

From the Content menu, we can drag and drop in four image placeholders, two in each column.

One…

Screen Shot 2016-01-15 at 4.53.47 PM

Two…

Screen Shot 2016-01-15 at 4.54.27 PM

Three…

Screen Shot 2016-01-15 at 4.55.36 PM

Four…

Screen Shot 2016-01-15 at 4.59.44 PM

Ready to rock and roll!

Screen Shot 2016-01-15 at 5.00.18 PM

Adding photos to the collage

We took Cook Smarts’ single image collage and saved each portion individually so we have four separate images to work with. Now we’ll drag them in one at a time into our placeholders.

Screen Shot 2016-01-15 at 5.06.16 PM

The content placeholders automatically adjust in size to fit the height of each image, making it super easy to maintain the look and feel of the Cook Smart collage.

Screen Shot 2016-01-15 at 5.08.26 PM

We can continue to add the images on at a time, dropping each one into place, until all four are in place.

Screen Shot 2016-01-15 at 5.11.05 PM

Fine-tuning with padding adjustments

The photo collage looks great, but we can more closely mirror the layout of Cook Smart’s collage by adjusting the white space between the images and¬†along the outside borders on the right and left. We can adjust padding on any piece on content in BEE by clicking on it and navigating to the Content menu that appears on the right.¬†To add white space on either side of our collage, we’ll click the content row (the blank space to the right or left of our collage), so we can adjust both sides at once. Here’s how:

Turn on the “More options” slider under Padding.

Screen Shot 2016-01-15 at 5.18.05 PM

In Column 1, we’ll want to adjust the padding on the left only. By increasing the padding to 30px, we create a nice strip of white space on the left of our collage, similar to the original Cook Smart one.

Screen Shot 2016-01-15 at 5.19.44 PM

In Column 2, we will bump up the Right padding to 30px as well. Now there’s white space on either side of our collage.

Screen Shot 2016-01-15 at 5.21.28 PM

Looking good! Finally, we can make a similar adjustment for each image, so that there is a thin white border around the photos. Click on each photo, turn on “More options” for Padding, and fine-tune away! Here’s our collage after we finished:

Screen Shot 2016-01-15 at 5.29.00 PM

Ta da! The photos from Cook Smart are stunning and already look great, but the BEE editor also has a built-in image editor, from Aviary, that you can access to crop, orient, resize, and edit your images in countless ways. To access Aviary, just select an image, navigate to the menu on the right, and click “Edit image.”

Screen Shot 2016-01-15 at 5.30.31 PM

Aviary will load, and you can edit away!

Screen Shot 2016-01-15 at 5.24.40 PM

Previewing our new email

To get a glimpse of how our new responsive photo collage will look on mobile devices, we can preview it in BEE. Select “Preview” from the Actions menu in the upper left corner.

Screen Shot 2016-01-15 at 5.32.09 PM

And here’s our mobile preview:
Screen Shot 2016-01-15 at 5.33.36 PM

Screen Shot 2016-01-15 at 5.34.04 PM

I love how we can see these beautiful images at full-resolution and take advantage of the full width of the smaller screen. The text is much easier to read, too. The email looks great, is fully responsive, and was easy to build! Give the BEE editor a try and tell us about your creative collages in the comments.

  • Awesome work Kelly. Loved the video tutorial as it really shows how simple it is to have a responsive photo collage in an email like the one you picked, and what a difference than makes when the email is viewed in a mobile device.

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor