Skip to main content
Solved

How do I put two buttons side by side in an email?

  • October 8, 2021
  • 9 replies
  • 9465 views

 

How do I get both buttons to be side by side

 

Best answer by Taylor Tarpley

Hi @Madmike

 

Thanks for asking your question in the Community! 

 

In order to insert buttons that would appear side-by-side under each picture, I would follow @Mailbox Manny’s awesome advice to add columns to the designated place you want to insert these buttons. Once you click to add to the Add Columns to Email’ option, it will ask you what many columns you want to insert with various options of how those columns can be formatted. You have the option of adding up to four columns to the width of your email. After inserting two columns the same size, you can insert a button block directly under each text block then deleted the text block if you do not need it.

 

Additionally, I would suggest checking out our Academy course on Email Design and this Community Post on further insight into adding columns to an email! 

 

Thanks for being a part of the Community! 

 

-Taylor 

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

9 replies

Mailbox Manny
Partner - Silver
Forum|alt.badge.img+38
  • Partner - Silver
  • 417 replies
  • October 9, 2021

Good question.  Curious, how did you get the images above that to be side by side?

 

I would say the way to do it is by using columns.  You can find the setting to add colulmns in the Blocks on the bottom right:

Also, I’m curious based on the email content, what is your site?


Taylor Tarpley
Community Manager
Forum|alt.badge.img+60
  • Community Manager
  • 2148 replies
  • Answer
  • October 12, 2021

Hi @Madmike

 

Thanks for asking your question in the Community! 

 

In order to insert buttons that would appear side-by-side under each picture, I would follow @Mailbox Manny’s awesome advice to add columns to the designated place you want to insert these buttons. Once you click to add to the Add Columns to Email’ option, it will ask you what many columns you want to insert with various options of how those columns can be formatted. You have the option of adding up to four columns to the width of your email. After inserting two columns the same size, you can insert a button block directly under each text block then deleted the text block if you do not need it.

 

Additionally, I would suggest checking out our Academy course on Email Design and this Community Post on further insight into adding columns to an email! 

 

Thanks for being a part of the Community! 

 

-Taylor 


Forum|alt.badge.img+2
  • Contributor I
  • 2 replies
  • March 25, 2022

Hi,

 

Thanks for the thread, very useful! 

 

One question I have is on mobile screens. It seems like the 2, 3 or 4 columns block inserted via ‘Add Columns to Email’ works on Desktop only? 4 columns would obviosuly be an overkill on mobile, but I’m thinkgin on the 2 columns option. Is there any way to make it work?

 

Cheers, Ramon


Taylor Tarpley
Community Manager
Forum|alt.badge.img+60
  • Community Manager
  • 2148 replies
  • March 30, 2022

Hi @ramoncassel,

 

Thank you for sharing your question with us! 

 

Yes, that is correct! The button ‘Mobile Optimization’ is toggled on automatically on your template, which helps you to view what your template might look like on mobile and therefore will only show those columns stacked on top of each other, as is considered best for mobile display. However, you can toggle off the Mobile Optimization button under the Styles > Mobile section of your template. 

 

 

I would recommend sending a test email to yourself and viewing it on your phone to see how it will render as testing this way is the most accurate know how it will look in your customer’s inboxes. Explained in a similar community topic linked below.

 

Thanks for participating in the Community! 

-Taylor 


Forum|alt.badge.img+2
  • Contributor I
  • 2 replies
  • March 30, 2022
Taylor Tarpley wrote:

Hi @ramoncassel,

 

Thank you for sharing your question with us! 

 

Yes, that is correct! The button ‘Mobile Optimization’ is toggled on automatically on your template, which helps you to view what your template might look like on mobile and therefore will only show those columns stacked on top of each other, as is considered best for mobile display. However, you can toggle off the Mobile Optimization button under the Styles > Mobile section of your template. 

 

 

I would recommend sending a test email to yourself and viewing it on your phone to see how it will render as testing this way is the most accurate know how it will look in your customer’s inboxes. Explained in a similar community topic linked below.

 

Thanks for participating in the Community! 

-Taylor 

Brilliant, thank you!

 

 


Forum|alt.badge.img
  • Contributor I
  • 4 replies
  • January 22, 2025

this doesnt work because you cannot add buttons into columns.


JessFosnough
Expert Problem Solver IV
Forum|alt.badge.img+23
  • Expert Problem Solver IV
  • 194 replies
  • January 22, 2025

Hi ​@rak-mktg,

If you need to put buttons side by side, add a columns layout from the content area to any section. You can choose the number of columns, up to 4. Then you can drag a button to the different columns. Let me know if I can explain further! Good luck!


Forum|alt.badge.img
  • Contributor I
  • 4 replies
  • January 22, 2025

hi JessFosnough, My Klaviyo interface wont allow me to add a button element into the column block. It forces the button either above or below it.


JessFosnough
Expert Problem Solver IV
Forum|alt.badge.img+23
  • Expert Problem Solver IV
  • 194 replies
  • January 22, 2025

@rak-mktg, I’m sorry to hear that. I just tried it in my account, and had no problem when I used the column layout (not the table block). Unfortunately I don’t have any other suggesions for you, maybe someone else has an idea. Sorry I can’t help further!😔