Adding images side by side in an email

  • 27 November 2020
  • 8 replies
  • 823 views

Userlevel 5
Badge +2

You’re designing your email, and all you want is to have two images side by side, but how do you do it? Well, there are 2 ways:

  1. Use columns. In the Klaviyo email editor, choose Add Columns to Email and drag it to where you would like your images to be. It will populate with text blocks by default. Drag in your image blocks and delete the text blocks if you don’t plan to use them. This method will allow you to easily include 3-4 images in a row and can be used with any content type.
    using columns to add images

     

  2. Use a Split. In the editor within the block options choose Split and drag the block to where you want your images to be. The Block Tab will show a column editor. Under Layout/Types > Content change the dropdown for both columns to “image”, then click into each column tab to upload your images. This method allows you to adjust the width of your images easily after adding the split if you want one to be wider than the other.
    using splits to add images

     

Have any other questions about how to create unique image layouts in your emails? Ask away below or share examples of layouts you love.


8 replies

Userlevel 6
Badge +4

A third way to do this is to use a “Table Block” and have two (or more) columns of images.  The nice thing about using Tables is you can have more than 2 column of images, add additional rows, or mix it with other content (text/html). Just note, table elements do not “stack” in mobile but you can choose to have certain any columns show/hide on Desktop or Mobile.

See example:
 

 

Additionally, if you just want a clean table with no borders and no heading text, you can do the following:

  • Remove the Text in the Columns → Heading
  • Set the Border Top/Right to “None”

 

 

Userlevel 5
Badge +5

@retention Using a Table Block is a great call out, Joe! I actually find that there’s a lot more flexibility in controlling the design with this type of block as well. 

Additionally, while this isn’t necessarily adding images side by side, you can also use Add Columns to Email to include a CTA/button next to an image: 
 

This article on Adding Columns to Emails is great for those that are looking to find more ideas/tips for email design! 

Userlevel 2
Badge

Hey guys -- great stuff!

I just want to ask if there is a way I can vertically align the contents of the left column to the height of the photo on the right column? Just like the one in your example @cassy.lee ?

Is it just a matter of adding a spacer on top?

Userlevel 5
Badge +2

Hey guys -- great stuff!

I just want to ask if there is a way I can vertically align the contents of the left column to the height of the photo on the right column? Just like the one in your example @cassy.lee ?

Is it just a matter of adding a spacer on top?

I can’t speak to exactly how that example was made, but a spacer would be a great option. If you use a spacer you can adjust it so it looks great on desktop, and set it to be desktop only so that if your columns stack on mobile, you won’t have a large gap in content before your text. 

Userlevel 5
Badge +5

 @daphne Agree with @Julia.LiMarzi here - a spacer is the best way to go about doing this. In the gif on this article, you can actually see that when it hovers over the space, it is a Spacer that is included
https://help.klaviyo.com/hc/en-us/articles/115000807711-Add-Columns-to-an-Email#table-block3
 

I tried adding the GIF directly here but it wasn’t loading, so apologies for the inconvenience!

If you have any difficulties with this, or are looking for further design tips, feel free to share a screenshot with us of what your email looks like (with any private details like email address blurred out).

Thanks,
-Cass.

Userlevel 2
Badge

Hey thank you @Julia.LiMarzi and @cassy.lee!

It was that gap on mobile that bothered me and made me ask about the spacer. I was really hoping there was a feature to vertically align the elements automatically. I was at a point where I was thinking of doing tables and add custom css but then realised that it would complicate things.

The spacer on desktop looks like the best option now. And thank you for the tip to create 2 different blocks for desktop and mobile. I forgot that we can do that!!! :sweat_smile:

Hi,

I’m wondering if any of you have noticed the stretching of an email due to use of these split/multi-columns in the klaviyo template when viewed in the Outlook app in Windows (e.g. Outlook 2019, Outlook Office 365). I’ve even tried to set max-width style properties on the image elements in these columns, but they still stretch the full width of the app. Here’s a preview from Litmus:

Email preview on Outlook 2019

 

Userlevel 5
Badge +5

Hi @slatlas

This is a great question and call out. I can’t speak for Outlook 2019 necessarily, but it is a known issue for previous versions of Outlook (specifically 2007, 2010, and 2013). This article provides an overview from the Litmus blog on the Rendering Differences in Microsoft Outlook Clients (although it hasn’t been updated since 2014, so I’m not sure how that affects your 2019 version either). 

Unfortunately, these are some issues identified with the following HTML Emails in Outlook 2007/2010/2013, which seem to match some of the design discrepancies you’re experiencing:

  • No support for background images in divs and table cells
  • No support for CSS float or position
  • No support for text shadow
  • Poor support for padding and margin
  • Poor support for CSS width and height
  • Problems with nested elements background colors

More specific details on why this happens in this article here.

Reply