How to Align Content

Create professional product displays

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.

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.