Skip to main content
All CollectionsE-mailsDesign of an emailDesign of an email
Placing a text box in or over your photo
Placing a text box in or over your photo

In this article I explain how to place a text box over your photo

Carola avatar
Written by Carola
Updated over 9 months ago

Text box over your photo, like famous companies sometimes do?

Our drag and drop editor works with rows. So, in principle, you would put a row over a row. You can't. That's why you cut your images into two pieces, so to speak.

Step 1: cut your image into two parts

What we've done in the above example is cut the image in two:

You now have a main image (the top part) and the bottom strip of the image.

Step 2: add 2 blank rows to your newsletter

Now you add two empty rows to your newsletter:

Step 3: add the images as background image

Now click on the row. In the right-hand side of the row properties you will see row background image. Move the slider to the right:

Place your first image on top. And your second, cut off image, below. Make sure that at 'Apply image to' you set 'row'. And that you have a check mark at 'center':

At this point you see the following in front of you:

Two rows, with 2 images in the background. As you can see, you still need to fit the images so that they match.

Step 4: fit your images with a spacer

Add a spacer to one row and to the other:

You now see the following in front of you:

The images still need to be stretched, so they fit perfectly.

Stand on the spacer. On the right side of the 'content' you will see properties,

height.

Increase the height all the way until the two images fit together again. In my example, this amounts to a height of 500:

Step 5: insert a text block

Now drag a text box into a spacer, like the example:

To make the text box white, stand on the row, and via rows make the 'content area background color' white instead of transparent:

Want to make your text block bigger? You can do that too! Go to the text block and go to 'block options'. Here you can adjust the padding of your text block:

I have already adjusted mine. My end result is as follows:

And you're done! Cool, huh! 😎

Please note that not every email client displays background images correctly on the mobile version. We have no influence on this.

Did this answer your question?