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.
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 Asset 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.
In our example, we're going to host our image on TinyPic, but here are a few other free hosting options:
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>
img srctag around the image URL, like so: