How to Align Content

How to Align Content


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.

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



    • Related Articles

    • How to Create and Use Content Modules

      How to Create and Use Content Modules Save time and send a consistent branding mesage We're all about scaling content creation. That's why we're delighted to share this nifty time-saving tool. If you want to deliver a consistent branding message or ...

    • tinyEmail Changelog

      tinyEmail Changelog New features and enhancements deployed or coming soon March 13, 2024 Enabled JSON web feed to inject dynamic content into campaign messages. Released beta version of Recurring Campaigns tool.

    • Customize the general settings of your email template.

      Customize the general settings of your email template. Say hello to the world's most powerful and intuitive email editor. Here's how to create stunning emails on tinyEmail Do not throw away the manual! We at tinyEmail are a big believer in ...

    • How to Add Accordions to Your Emails

      How to Add Accordions to Your Emails Inject interactive content Ready to add a new level of interactivity to your email messages? If yes, then add AMP to your design toolkit. AMP (Accelerated Mobile Page) lets you add interactive components to email ...

    • Design for Mobile – Made Easy

      Design for Mobile – Made Easy Create a great user experience on mobile devices We're big believers in delivering a fantastic user experience on mobile devices. The reason is simple: about half of all email campaigns are opened on phones or tablets. ...