+7Hi i am currently transfering bits from Dot Digital into Klaviyo and trying to build a block that contains a button. The button needed is one colour the block is one colour but the block to have a margin which effectively is another colour. Needs to look like the below image. White part is the actual email width where I have an image at the top of the email which is size. Currently I can only get to look this. which is pretty pants! Any ideas would be appreciated.
Best answer by retention
Then by adjusting the two Text Blocks’ inline Background color, and fiddling with the margins, it sort of works.
You can see that here:
However, as soon as you switch to Mobile, you will have the same problem unless you can represent it differently on mobile without the gutter. So this may not be fool proof either!
Another approach may be simply to insert a Table Block and build your own Button in HTML. It’s definitely not as elegant or simple as the native Button Block. Let us know how it works out!
+62Then by adjusting the two Text Blocks’ inline Background color, and fiddling with the margins, it sort of works.
You can see that here:
However, as soon as you switch to Mobile, you will have the same problem unless you can represent it differently on mobile without the gutter. So this may not be fool proof either!
Another approach may be simply to insert a Table Block and build your own Button in HTML. It’s definitely not as elegant or simple as the native Button Block. Let us know how it works out!
+7Thanks it is very hacky! I did try that to be fair, the only issue is outlook renders buttons in a different way to the actual the preview so looks even worse in outlook!
I think HTML is the only way to go.
The whole email is going to have to be run done for mobile which is really annoying! Maybe I can persuade my client changes is good!
Thank you
+62<div style="text-align: center; padding-top: 25px; padding-bottom: 25px;">
<a href="https://www.retentioncommerce.com/"
style="background-color: #2C104C;
padding-left: 50px;
padding-right: 50px;
padding-top: 18px;
padding-bottom: 18px;
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;">BUTTON</a></div>
Set the Text Block style as shown here:
Obviously, you need to change the link in the code. Currently I’ve placed https://www.retentioncommerce.com/ as a placeholder.
Hope this helps!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
