Hi,
I am making a HubSpot email template for my company’s weekly newsletter. The design calls for the newsletters’ logo to be overlaid on top of the header image. The header image will change week-on-week but the newsletter image will not.
Does anyone know how i can code a template to make the lower of the two images be swappable in the UI of the email? I could make the raised newsletter logo have a background-image of the ehader picture, but then non-technical team memebers would have to go into the template and chaneg the background-image every time they want to make a new email from template.
I was hoping someone knows a way, possibly using HUBL, whereby I can make the lower header image be swappable in the UI while retaining the newsletter logo on top of it.
I have attached a picture to demonstrate. The header image is the little girl and the newsletter logo is the “1”
Rather than floating two images on top of one another, your best option to simply use photoshop to make the image and then just add that header image to the email (for this, you can use the simple {% image_src %} or {% image %} tag to accomplish this). Using CSS like background or backround-image are not supported across all email clients. Campaign Monitor has an awesome CSS reference guide to show you what works in email clients:
Thanks AJ, I appreciate you geting back to me.
I had though tthat this ight be the only way to do it - I had been hoping there was a way to do it in the HubSpot editor because I’m making the template for non-technical team-members to use so I’m not confident in their ability to use photoshop. I’ll tell them to email me every time they want to make this sort of image and I’ll do it in photoshop as you suggest.
Thanks for your help and have a nice day!
Not a problem, glad to help. We have some clients who aren’t tech savvy and we do the same thing of asking them to send us what they need and we just quickly do it on our end for their email then add it to a folder in the file manager for them.
