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 a message.  

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.

Creating cards

tinyAlbert 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 faster 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.

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.

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

That's all.

Now you know how to align content in a product card.