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

Download Now: Free Marketing Plan Template
Juli Gaudette
Juli Gaudette

Updated:

Published:

In 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.

HubSpot Support Series Horizontal.png

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! 

Want to hear more from Juli? She's hosting an Ask Me Anything (AMA) on the HubSpot Community from January 14, 2019 – January 28, 2019. Join the conversation here.

Email_Newsletter

Related Articles

Outline your company's marketing strategy in one simple, coherent plan.

    Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

    START FREE OR GET A DEMO