Hello @taras,

Great question! 

At present setting buttons in an email template as transparent is not supported. Do you mind sharing what the use case for this would be?

You should be able to achieve something similar by either setting the button’s background to be the same color as the email template’s or through using a text block with a hyperlink. 

If you haven’t already, i would recommend taking a look at some resources we offer for email designs and our Klaviyo template editor:

• Getting Started with Email Design
• Guide to the Email Template Editor
• Guide to the Email Template Editor (new editor)

I hope this helps!

David

Hi David,

re: case use, I would like to make a button with a transparent background to overlay on my hero image. I do understand what you’re explaining about changing the button color to match the background which would work in various places throughout the email. 

Do you know when Klaviyo will add this functionality to select transparent so part of my hero image shows as the button background?

OR, do you know a trick to essentially do a color picker to color match the button to part of my image?

thank you,

sharone

Hey @getHeliGirl,

From your use case it sounds like you’re trying to create certain areas of your image that are clickable links. A very common method to accomplish this would be cutting your images into sections and splicing them together within Klaviyo as a single cohesive unit. This in turn would allow you to link each of the images with their own independent URL. For example, if you split your image in half down the middle, each of those two halves can be linked to separate URLs that depending on which side your recipients click, can be brought to different URLs.

I’ve included a a really helpful Community post below that discusses this topic in more details:

Additionally, if you’re tech savvy, this can also be accomplished by using AMP (Accelerated Mobile Pages) emails. Since AMP emails are custom coded, we suggest working with a developer you’re familiar with or finding and working with one of our many wonderful Klaviyo Partners. I would further recommend taking a look and using the Send AMP Emails in Klaviyo Developer Document we have on this topic.

David

Interesting workaround, thank you David.

Still would like to be able to create a transparent button on the hero image, or have a color picker selection tool.

I suppose another workaround would be to use your above suggestion, and create a button shape on the image, upload and make the entire image a clickable link!

The use case was pretty rock solid up at the top and the workaround seems laborious. Is there an ETA of being able to make buttons transparent for such use case? 

Hey @jmal628,

I haven’t heard any ETA or further updates regarding the notes I’ve shared with our Product Team. However, this does not mean they aren’t exploring this feature enhancement. 

I will say though, another option that’s always available to you would be similar to my original suggestion of hyperlinking a text block where you would be re-creating how the button looks using a text block. All it takes it some playing around with the padding and you get pretty close to the standard button block we offer. Of course, this can also be further customized with HTML or even fully built out with HTML if you prefer. 

David

I figured out a WAY easier way to do this!

If you add a ‘Header Bar’ over top your image, you can change the layout to display “links and buttons only”. For some reason, these buttons allow you to have a transparent background since you have the option to add a border around the link test. Good luck!

Brilliant!

I want a transparent button cause my bg image of the whole block is a gradient. By making the button a colour it’s slightly off.. seems like a fairly easy ask but Klaivyo is making it very impossible to buildup templates as you wish..

Hi there @cacti, 

Thanks for sharing your question with us! 

While we don’t have the option for this in the editor, we do typically recommend making the button and background color the same so the button appears transparent as a workaround. However, as your background color is a gradient and this isn’t as much of an option, I’d suggest copy and pasting the button source HTML into a text block and custom code a transparent button! However, if you don’t feel comfortable custom coding, I’d reach out to your dev team or a Klaviyo partner, or better yet a Community Champion, to set this up to you.

As we do support custom templates, we ensure that everyone can make the kind of template we’re looking for even if it can’t be build in our drag and drop editor! 

-Taylor