<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1657797781133784&amp;ev=PageView&amp;noscript=1">

How to Style a Grid of Small Images in an Email [HubSpot Support Series]

by Juli Gaudette

Date

March 9, 2017 at 2:00 PM

HubSpot support seriesIn the age of inbound, it's important to have well designed emails with eye-catching images. You even use a group of smaller images to create a larger eye-catching piece of content.

Here in Support, we see a lot peers who can’t seem to make their group of small images align, especially in multiple browsers, to create the perfect "tile effect." There always seems to be just one image off by a single pixel, or the spacing seems to be a little different between the rows, or it always looks a little weird in different email clients. And what if you want the grid alignment to be maintained on mobile devices too?

Conventionally, if one wanted to include four small images on their email, in two rows of two, the template would look like this:

image-modules.png

The email using this template would present the images like this on desktops:

image-module-preview.png

And like this on mobile:

mobile-image-modules.png

Most marketers would not stop here; they would continue to edit the images, one by one, re-sizing and re-spacing until all of the margins were equal and all of the tiles aligned. However, during all of this re-spacing and re-sizing, all will eventually come to the same conclusion. There must be an easier way!

Well, we do have an easier way. In just four easy steps, you can create the same desired “tile effect” by replacing all four image modules with just one rich text module.

(Please note: The image table you'll create in this process must be smaller than 570 pixels wide to achieve the proper tile effect on a mobile device.)

Steps for creating a tile effect image

Step 1

Within the email template, replace all four image modules with one rich text module.

rich-text-module.png

Step 2

Once the rich text module has replaced the four Image modules, navigate back to the email editor. You can then use the rich text editor to insert a single 2x2 table.

insert-table.png

This will create a blank table in the rich text module.

empty-table.png

Step 3

By right-clicking in each individual cell, you have the option to insert each photo into its respective cell.

insert-image in table.png

Once all the photos are inserted, you still end up with the same dilemma. Some of the images are still slightly out of line.

images-in-table.png

This time you have an easier way to re-size and re-space.

Step 4

By simply clicking on each image, you get all of the editing options you need. You can center the image using the alignment tools, re-size it using the “Options” link, and add spacing using the “Spacing” link. All from within the editor!

edit-image.png

By centering all of the tiles here, you're left with a perfectly aligned “tile effect” group of images.

aligned-images-1.png

Which also continues to appear as a grid in all mobile views.

aligned-images-mobile.png

Now that you know how to retain an image grid in multiple email clients, go forth and create more beautiful emails!

Email_Newsletter

Written by Juli Gaudette

Juli started at HubSpot in the fall of 2016. Her hobbies include running marathons, hiking tall mountains, skiing down tall mountains, using Oxford commas, and dissecting gnarly workflows.

HubSpot_Academy-2

Subscribe to articles for HubSpot users

Follow HubSpot

Search Inbound Hub

INBOUND 2014 Training

Jump Right into the Software


To make it easy for HubSpot customers to follow along in their own software, we regularly link to the product and customer-only training.