Skip to main content
Solved

How do I change the opacity on a block background color in email?

  • December 21, 2022
  • 4 replies
  • 1197 views

Forum|alt.badge.img+2

For example, I am using #5168C0 for my button color in my email, and I’d like to have the block background color be 20% opacity of that hex color. Is it possible to set that? Right now I am choosing a second hex color, but I will have to pass this template on to another team member and for simplicity sake, I don’t want them having to choose two colors.

Best answer by alex.hong

Hi @Ckeymel ,

Thanks for sharing to the Community.

For a button, in your signup form editor, you should see the option to specify a hover color and then from there you can drag the opacity slider to the far left to create a transparent layer.

I would like to note, applying text blocks and button blocks over images is only possible within the New Editor. That being said, we don't currently have a feature that allows you to lower the opacity of the background color for those blocks.
 
We do also offer the option to import custom HTML template if you are able to achieve this outside of Klaviyo and would like to use the custom template. More on this here: How to import a custom HTML template
 
Please note, while our product does support custom HTML, our support team cannot help you build out your custom templates or troubleshoot them for you.
 

Let me know if that helped,

Alex

View original
Did this topic or the replies in the thread help you find an answer to your question?

4 replies

alex.hong
Forum|alt.badge.img+58
  • Klaviyo Alum
  • 1552 replies
  • Answer
  • December 21, 2022

Hi @Ckeymel ,

Thanks for sharing to the Community.

For a button, in your signup form editor, you should see the option to specify a hover color and then from there you can drag the opacity slider to the far left to create a transparent layer.

I would like to note, applying text blocks and button blocks over images is only possible within the New Editor. That being said, we don't currently have a feature that allows you to lower the opacity of the background color for those blocks.
 
We do also offer the option to import custom HTML template if you are able to achieve this outside of Klaviyo and would like to use the custom template. More on this here: How to import a custom HTML template
 
Please note, while our product does support custom HTML, our support team cannot help you build out your custom templates or troubleshoot them for you.
 

Let me know if that helped,

Alex


Forum|alt.badge.img+2
  • Author
  • Contributor II
  • 3 replies
  • December 22, 2022

Thank you @alex.hong ! Do you know if lowering opacity of block background colors is on the list of possible future features for Klaviyo?


alex.hong
Forum|alt.badge.img+58
  • Klaviyo Alum
  • 1552 replies
  • December 22, 2022

Hi @Ckeymel ,

Glad I could help! That is indeed on our product team’s list on the feature requests. Although I cannot provide an exact timeline, the more community members create feature requests posts, the more likely they will highly prioritize them!

 

Thanks,

Alex


Forum|alt.badge.img
  • Contributor I
  • 1 reply
  • May 4, 2023

Thank you for asking about this Ckeymel. This is something that we would love to see in the near future!