How to add text to an image

How to add text to an image


How to 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

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.

Drag a Banner block to the canvas. 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 that's already in your image folder. 

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

Type something in the field, and now you're ready to add the final touches. Highlight the text and then use the toolbar at the top of the page 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 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. tinyEmail 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!


    • Related Articles

    • How to Add a CTA Button to an Image

      How to Add a CTA Button to an Image Prompt clicks with buttons in images Sometimes a CTA button isn't enough by itself. It needs an image to attract attention. Online retailers like REI do a great job combining buttons with stunning images that ...
    • How to Add/Remove Text Hyperlinks

      How to Add/Remove Text Hyperlinks Manage text links Inserting a link To add a link to text: Highlight text. Click the link icon in the menu bar. The side panel displays. Go to the side panel and locate the Link heading. Make sure the Site option is ...
    • Customize Preview Text

      Customize Preview Text Improve open rates with a few key strokes This article shows you how to add Preview Text to a campaign. Preview Text is a tiny piece of digital real estate that displays in your readers' inboxes. It's near the email subject ...
    • Optimize the Preview Text

      Optimize the Preview Text Get more opens and conversions Your email message's preview text is an undervalued piece of digital real estate. It deserves careful attention. Here's why. For many people (like me), the inbox looks like organized chaos. ...
    • How to Add a Prebuilt Footer

      How to Add a Prebuilt Footer Save time with ready-to-go modules Our prebuilt footer modules are a real timesaver. Just drag and drop a module to the canvas, add a few personal touches, and presto - you've got a new digital space for engaging content ...