How to Align Content

Create professional product displays

Amanda Payne avatar
Written by Amanda Payne
Updated over a week ago

If you're in the business of selling products or subscriptions, this article is for you. I show you a couple of tricks that can help display a polished product card in an email template.

What's a product card?

It's an attention-grabbing visual display that communicates a lot of information in a relatively small digital footprint. Product cards help customers make buy decisions, and sellers increase conversions.

  • Not sure about product cards? Click here and learn how to create these mobile responsive attention grabbers.

Creating cards

tinyEmail makes it easy to build a side-by-side product card when you stack two-column structures. Aligning images and headings is remarkably fast.

Sometimes, the assets at the bottom of the product card are uneven. That creates an unpolished display, as you can see in the screenshot below.

Adding copy to one product card could smooth out the alignment - assuming you or your team can write copy that sells.

add spacer to block

Solution

Here's a quicker solution. Drag a Spacer block to the end of the text container.

Click the Spacer block to make it the active layer, and then go to the side panel. Switch on the Dynamic spacer toggle. Return to the canvas and drag the Spacer block to change its height. Add enough height to align the assets.

drag block to change height

Mobile display

You might need to make adjustments for mobile display. In our example, one Spacer block perfectly aligned assets on the desktop display, but the mobile version was less than ideal. The solution is to use two blocks: one each for desktop and mobile displays.

add spacers to email block

The result is a good-looking product card on desktop and mobile displays.

view mobile display

Did this answer your question?