Add Text to an Image

Capture the reader's attention

I'll show you three ways to place text on an image. Each text overlay option has pros and cons, so choose the one that meets your business requirements. I cover:

• Banner block
• Image block
• Text block

Banner block

This might be the easiest method, but it comes with the fewest design options. That makes it a good choice if you're looking for a fast, simple solution.

Place a structure inside a tinyAlbert message and then drag a Banner block to the structure. Click the block to make it the active layer, and then go to the side panel. Now add an image to the block: you can upload an image from your device or select a picture already in the image folder.

With your image in the block, go to the toolbar and click the Text icon. Next, drag the mouse across the image to create a text field.

Type something in the field. Now, you're ready to add the final touches. Highlight the text and then use the toolbar options to customize the style. Change the text color, adjust the font size, and more. Drag the text field and find the best spot for the text on the image.

Image block

This option gives you more design tools (compared to the banner method) but comes with one important limitation. 

Once you save the text overlay, it's not possible to go back and make changes. If you don't like what you create, start again from scratch.

Drag an Image block to the message canvas. Click the block to make it the active layer, and then go to the side panel. Click the magic wand icon to open the image editor. On the next screen, click the Text icon in the menu bar and then the Add text (+) icon. tinyAlbert adds a text field to the image.

Add your own text and styling. Use the toolbar to duplicate the text field, flip the text, bring the text to the front, or delete it.

Click the Apply button to open a suite of design tools. These include text style (e.g. strikethrough), background color, and shadows.

Text block

Here's the last option. Place a background image inside a Text block. Although the Text block option is easy to create and customize, it has a few display limitations.

Some email clients (e.g. Outlook Windows 10 Mail, Android 4.4, Gmail app on iOS & Android with non-Gmail account) won't support a background image. On mobile devices, the background image may not look responsive, which means the 

message displayed on phones might be less than ideal.

If this option meets your business requirements ...

Drag a Text block to the canvas. Enter your text and use the toolbar at the top of the page to customize the design and style. Next, click the structure that holds the Text block and then go to the side panel.

Switch on the Background toggle to load a picture into the structure.

Upload an image to the structure. You might find the image doesn't fully display inside the structure, as we can see in the screenshot below.

The solution is to place a Spacer block below the Text block and then switch on the Dynamic spacer toggle in the side panel. Go back to the canvas and drag the spacer down until you create enough vertical space to fully display the image.

Finally, go to the side panel and adjust the settings so that image alignment looks good in the structure.

That's it!

Now you know how to add text to an image.