While in most cases you should insert images into your email templates using image blocks, there might be some cases when you'd prefer to have text and an image within the same block. In Klaviyo, you can accomplish this in two ways:
- Editing the Source area of a text block
- Inserting the image URL into a text block
For both options, you'll first have to upload your image to Klaviyo or an image-hosting site.
Learn how to overlay text on top of an image in Klaviyo's new template editor.
Host Your Image
Once you have your image sized and edited appropriately (using a photo editing tool of your choice), you will first need to upload the image to a hosting site.
Klaviyo automatically hosts all images you upload into your image library. To grab the URL for an image that you've uploaded into Klaviyo, or upload a new image to Klaviyo, head to the Brand Library tab. Once here, click on the image you would like to insert into a text block.
Grab the URL from the search bar at the top of your browser.
Alternatively, you can host your image on an image-hosting platform, like one of these options:
If you ever then want to delete an image from your Klaviyo Brand Library, scroll down to the image you want to delete, select the three-dot menu to the right of that image, and click Delete.
Paste the Image URL into a Text Block
Alternatively, you can upload a hosted image by clicking the picture icon and pasting the image URL in the dialog box that appears. This works regardless of where you're hosting the image.
In this dialog, you will be able to edit the dimensions and alignment of the image.
Edit the Source Area of a Text Block
Copy the code below and fill in the placeholders with your values:
<a href="[WEB_URL]" target="_blank"><img src="[IMAGE_URL]" border="0" alt="[ALT_TXT]"></a>
Then, paste it into the Source area of a text block in the template editor.
Click Source again and then Save Changes. Your text block will contain the image, which will also appear in your template. If your image is very large, like the example we used, you might have to scroll to the right within the text block to see the entire image.
Once you've added your image to a text block, you can adjust it using HTML. For example, you may want to center your image using the
<center> tag. To do this, simply encompass the image HTML in a center tag like so:
<center><a href="[WEB_URL]" target="_blank"><img src="[IMAGE_URL]" border="0" alt="[ALT_TXT]"></a></center>
If you are using Klaviyo to host your image, simply insert an
img src tag around the image URL, like so:
Interested in learning more about personalizing your emails with customer details? Check out our article on Template Tags and Variable Syntax.