Contributor I

Solved

How can I make buttons transparent in a new editor?

10 replies
2182 views

I can’t make button transparent in a new editor. How to?

This topic has been closed for replies.

David ToAnswer

Klaviyo Employee

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:

I hope this helps!

David

David ToAnswer

Klaviyo Employee

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:

I hope this helps!

David

G

getHeliGirl

Contributor I

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

David To

Klaviyo Employee

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

G

getHeliGirl

Contributor I

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!

J

jmal628

Contributor I

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?

David To

Klaviyo Employee

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

A

abby.trismen

Contributor I

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!

K

KG73

Contributor I

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!

C

cacti

Contributor II

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..

Taylor Tarpley

Community Manager

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

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials